I use
display:-moz-box
Its work on firefox truly but "invalid property value" on chrome, what should i do now?
Thanks
Any CSS code that starts with a hyphen is a browser-specific feature (it also often means the feature is experimental and not yet ready for a full release).
Only the browser that uses that extension (-moz- is for Firefox) will work with that property. Other browsers may need their own prefix specified instead (eg -webkit- for Webkit-based browsers, or -ms- for IE).
You should also specify the unprefixed version of the style if it has been standardised, as the experimental prefix is likely to be removed from future browser versions once the standard version is established.
In this particular case, we are talking about the flexbox feature. There has been quite a bit of change to the specs for this over time as it has gone through the standardisation process, so some browsers may support non-standard syntax. This makes it slightly harder to give a succinct answer here, so rather than go into great detail, I'll point you to some articles that may help:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
use display:-webkit-boxfor chrome
-moz- is a vendor prefix. Vendor prefixes are unique to the browser. They are used to apply non-standard CSS. -moz- is for Mozilla Firefox. -webkit- is for chrome.
Related
Recently, I have been building a website for someone and am getting irritated with some browsers rendering the website one way and other browsers rendering another way. I decided to look into why this is and discovered that the issue likely lies in the HTML engine beneath the browsers. For example, Chrome and Opera (along with most, if not all, Chromium browsers) use the Blink engine, which is a fork of the WebKit engine (which descended from the KHTML engine). Safari uses WebKit. Internet Explorer uses the Trident browser; and Edge uses the fork of Trident known as EdgeHTML. Netscape and FireFox use (or used, in Netscape's case, considering the browser is discontinued) the Gecko engine.
Considering all of this, is it possible to apply CSS to specific engines rather than browsers? Or is this already being done when we try to use browser-specific CSS? Was the point of the user agent string to do this (which apparently was messed up by the developers wanting to imitate other browsers)?
Note, I would think from comparing how these engines are related that there are 3 main engines: KHTML-based, Trident-based, and Gecko. So I am guessing that the answers on this question will give at least three different methods (one for each of the main engines).
Even if it was possible (using vendor prefixes) it could be a pain to maintain the code base. I suggest you to reset or normalize.
My reset is a merging of reset and normalize.
You can use vendor prefixes, even target some of them via suppot queries with vendor prefixes, such as
#supports (-webkit-appearance:none) {}
Browserhacks has a great collection of approaches for that.
That being said, you really, really shouldn't. It will be a nightmare to maintain.
Browser differences are caused by:
1) Different user-agent styles (default browser rules); Normalise or reset will take care of that for you.
2) Some experimental features that might be available just to some browser, or be different between them, normally addressed by vender prefixes; Autoprefixer such as Prefix Free or Post CSS's Autoprefixer deal with that perfectly fine.
3) Different features; knowing what you can and can't do on each will take you a long way, and whenever you find a limitation, make sure to use fallbacks or even polyfills.
99.999% can be achieved with normalise, an autoprefixer, and a decent understanding of browser features and fallbacks.
Remember your projects should work fine on all browsers (or as many as you can, no one expects to support IE6 on 2018..) but it can look and have a better experience on some / most. That's what progressive enhancement and graceful degradation are for.
This question already has answers here:
Why do browsers create vendor prefixes for CSS properties?
(2 answers)
Closed 3 years ago.
I just downloaded a css file from this website and it contains properties such as -webkit-transform and -moz-transform. What does the dash mean and under what circumstances is it required?
For the nity grity does the phrase "vendor prefix" refer to the - or the content between the - and - (exuding the - and -) or the content between the - and - (including the - themselves)?
In other words does vender prefix refer to the dash itself or only the content between the dashes or the dashes with the content between them?
-webkit- and -moz- here are called vendor prefixes; they generally indicate a browser-specific feature of CSS, or one that’s under development/still a draft and can’t be considered a standard yet. When these features are used “ahead of time”, the only way to make it work in every browser is sometimes to provide a different rule with a different prefix for each one — that’s what you see in the project. The idea is that eventually, though, the feature will be standardized, browsers will drop the prefixes, and life will go on.
-webkit-gradient, for example, was the first way to define a gradient in CSS, but was replaced by a completely different linear-gradient and radial-gradient syntax.
A convenient way to find out what browsers support a certain feature and what prefixes you need if you’re using it before a definitive standard or global unprefixed browser support is Can I Use….
Some common prefixes are:
-webkit- for WebKit-based browsers, including Chrome/Chromium and Safari
-moz- for Firefox
-ms- for Internet Explorer (9 and up)
-o- for Opera (pre-WebKit)
They are called vendor prefixes. Different browsers have different prefixes:
-webkit- - Webkit based browsers such as Safari and Chrome
-moz- - Gecko based browsers such as Firefox
-ms- Internet Explorer
-o- Presto based browsers such as Opera
Vendor prefixes are used to denote experimental CSS features. They are used when a specific property or spec is not considered stable, and may change in the future. By using a prefix, the browser can experiment with that feature without the risk that developers will make use of the property and sites will break if the behaviour or syntax changes. Once the spec becomes final, the prefix is removed, and some browser will remove support for the prefixed version.
The official guidance from the W3C is that prefixes should be used until the spec from which the property or feature is from reaches Candidate Recommendation.
The general best practice is to use all vendor prefixes one after another, and the unprifixed version last.
Mozilla and Chrome (now they're moving to the Blink engine) have changed policy to hiding the feature behind a flag, rather than using a prefix. This means the feature will not be available to use unless the user enables that flag.
For more information, see this wiki page from the CSS Working Group: http://wiki.csswg.org/spec/vendor-prefixes
I don't understand the difference between behavior and -ms-behavior. I thought behavior was already only for Microsoft's Internet Explorer, so why is there a vendor prefix version?
Does it make any sense to use both or just -ms-behavior?
Internet Explorer versions 5 and above support the behavior property.
Internet Explorer Version 8 supports the syntactically correct Vendor Specific Extension format of-ms-behavior.
The majority of the time you only need behavior, unless you want to totally force IE8 versions to run in standard mode. Then you should use ms-behavior. But adding both doesn't hurt you at all and it probably is a good practice anyways.
Windows Internet Explorer 8. The -ms-behavior attribute is an extension to CSS, and can be used as a synonym for behavior in IE8 Standards mode.
Check https://msdn.microsoft.com/en-us/library/ms530723(v=vs.85).aspx for more information
When i run HTML5 compatibility test in Android native browser then it see the IndexedDB support marked as "Prefixed", while in Chrome and other it is marked as "Yes".
I understand Chrome latest version has full support for IndexedDB but what does IndexedDB support as "Prefixed" means?
According to Mozilla page:
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB
"Because the specification is still evolving, current implementations of IndexedDB hide under browser prefixes. Browser vendors may have different implementations of the standard IndexedDB API until the specification has solidified. But once consensus is reached on the standard, the vendors implement it without the prefix tags. Actually some implementations have removed the prefix: Internet Explorer 10, Firefox 16, Chrome 24. When they use a prefix, Gecko-based browsers use the moz prefix, while WebKit-based browsers use the webkit prefix."
As per Josh's comment:
Use something like the following statement to ensure compatibility:
window.indexedDB = window.indexedDB || window.webkitIndexedDB;
The characters 'webkit' are the prefix. You might need to use them in Android, but you no longer need to use them in Chrome (a few years ago you did)
I would like to make my website compatible with all types of internet explorer, as at the moment it is only compatible with IE6, and glitches a lot in newer versions. How can I do this? I understand it has something to do with the code below that I found in a file named "ie6.css". Tha code is below.
/* IE6 specific styles */
.extra-wrap, .news li {zoom:1;}
Firstly, make sure you have a valid <!DOCTYPE>. That's the number 1 reason for browser glitches between different browsers/versions.
If you don't have a doctype declaration at the top of your page, the browser will go into Quirks mode, which will cause you problems.
Give it a valid doctype (best go with <!DOCTYPE html>). That might cause other issues in the short term, but once you've fixed those it will be much better at working properly cross-browser.
Secondly, does it work in other browsers (Firefox, Chrome, etc)? Modern IE versions are generally standards compliant, so if it works in other browsers it should work in IE10/11. If it works in other browsers and not IE11, then you probably have some IE-specific hacks that were needed for older IE version but don't need to be there for newer versions. Get rid of those.