Why are some attributes declared regularly while others require the hyphen?
.box {
width: 500px;
margin: 20px;
border: solid black 5px;
-box-sizing: border-box;
}
While your CSS isn't technically correct, what you're seeing is vendor-prefixing. Vendor prefixing is used for non-standard-compliant or not fully implemented specs of the W3C recommendation. These are apparent in some CSS3 specs that browsers are still in the process of implementing.
Some examples would be box-sizing, transform, transition.
Some common prefixes are
-moz- for Firefox/Mozilla
-webkit- for Safari/Chrome
-ms- for IE/Edge
-o- for Opera
-khtml- for Konqueror
You may want to see what the Mozilla Developer Network has to say about vendor prefixes.
Quote:
Browser vendors sometimes add prefixes to experimental or nonstandard CSS properties, so developers can experiment but changes in browser behavior don't break the code during the standards process. Developers should wait to include the unprefixed property until browser behavior is standardized.
These are experimental CSS attributes, and not officially defined or supported. In your case of box-sizing, see the browser compatibility section at MDN.
Additionally, I don't think there is a browser that supports it as -box-sizing as you have suggested, it's either -webkit-box-sizing or -moz-box-sizing.
Related
Currently, when I code I use:
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
But based on my tests, it didn't make any difference with any modern browser ( Chrome 33+, opera 25+, safari 8+). Internet Explorer 8 doesn't supports this property, but the vendor prefixes won't make any difference.
Is there any reason to keep them?
Use http://caniuse.com/#search=border-radius for checking such
Conclusion: No need for adding vendor prefixes for border-radius, as its supported in all major browsers (and IE9+). If you really need border-radius in IE8 check out: How to apply border radius in IE8 and below IE8 browsers?
But in 99% of cases border-radius is not crucial to a design. Employ the technique of graceful degradation and leave IE8 with square corners
You can also add PrefixFree to your page to cover you in a few more cases than just border-radius, as it will add these prefixes for you to be safer.
And for backwards compatibility using CSS3 with older versions of IE there is PIE (again not just for border-radius but others) and you can just add this where you need it:
behavior:url('pie.htc');
This just came to my mind while adding a border radius to my <div>. Since the border-radius CSS property works fine in Mozilla, why do we need -moz-border-radius?
For older versions of Firefox, namely Firefox 3.6 and earlier.
There's a (brief) history of using vendor-specific prefixes like this that enable the code to be read more easily by earlier browsers. In the beginning of HTML5/CSS3 support, each browser handled elements differently, so border-radius would be like:
.rectangle {
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
}
Nowadays, many modern browsers accept styling like 'border-radius' (for example, the latest Chrome, Safari, Firefox and IE9), so as minitech referred to earlier, these stylings are now used to support older versions of modern browsers.
I have bits and pieces of CSS that use the -webkit- vendor prefix. For compatibility with "older" versions of Safari, I have the same rule with the -khtml- vendor prefix. I am actively uninterested in compatibility with Konqueror and other true KHTML browsers.
For example, I may have the following rules:
.menuItem {
-khtml-user-select: none;
-webkit-user-select: none;
}
I understand that modern WebKit browsers internally rewrite all -khtml- and -apple- rules to be -webkit- rules instead. However, that leaves me with the following question:
In what version of Safari did -webkit- become available? That is, what is the version before which Safari would completely ignore my rules?
I plan to use this information to find out whether my individual rules (such as -khtml-user-select) are actually supported by this early version of Safari.
The -webkit- prefix has been around since Safari 3. The -khtml- references in Safari 2 were replaced from that point on.
References
Webkit 63854 Changelog
Chromium Changelog
Webkit Bug 42990
Unforking of KHTML and WebKit
Interview with Lars Knoll, creator of KHTML
Companies and Organizations that have contributed to WebKit
konqueror/kcmcss.cpp at master ยท KDE/konqueror
The only browser that uses the -khtml- prefix now is a Konqueror, since it have a very little market share (less than 1%), you can drop it safely.
Basically very less people uses Konqueror, So it is not necessary to use -khtml- prefix
But if required you, can only use this with the -khtml- prefix
is there any way to validate -moz-border-radius / -webkit-border-radius in the CSS validator?
The client wants validation buttons in the sidebar (ugh!) and I can't find any way to bypass it. I've used #import too, no success.
-moz- and -webkit- aren't going to validate. They are vendor specific. When CSS3 becomes more 'offical', the actual border-radius should validate fine. Remember that there are several jQuery plugins that can round borders, but I highly recommend against them.
If you use PrefixFree, you can use non-prefixed properties in your stylesheet and it'll convert them to prefixed properties (if necessary) for the appropriate browsers. This means in your stylesheet, you can write, for example, border-radius: 5px; (which will validate as CSS3), but older versions of Firefox and Safari will automatically use -moz-border-radius: 5px; and -webkit-border-radius: 5px;.
Which browsers support the CSS !important directive, and what are the various quirks amongst the different browsers that do support it?
Excellent browser support.
It was part of the CSS1 spec and has been around forever, and was always easy enough to implement that browsers appear to have gotten it right on the first try.
At the very least (from personal experience) IE5.5+, Firefox 1+, Safari 3+, Chrome 1+.
Pretty much supported by every browser that supports CSS (which is every browser you care about).
According to Wiki, IE7, FireFox 1.0, Safari 1.0, Opera 7, and Chrome fully support !important. IE6 supports it, but it does have a bug. If you do this, color will be red:
h1 {
color: green !important;
color: red;
}
Any browser which supports CSS1+ - ie, any browser that supports CSS - even IE. Even if the CSS implementations are not fully standards-compliant, !important is a core CSS feature.
To elaborate, IIRC, IE5+, all Firefox, most Netscape, Opera, Safari, Chrome.
All browsers apart from IE6 support it which makes it quite handy for CSS hacks. Example:
#someElement { width:200px !important; width:198px; }
All browsers apart from IE6 will render #someElement at 200px because they will honor the !important. IE6 however will just ignore the !important and render #someElement at 198px.
EDIT: Most common use case scenario for this (at least with me) is using it to correct the double margin bug in IE6