As you may have already figured out, CSS (and HTML and JavaScript) is a moving target and new features and specifications are constantly being introduced and refined. This process usually involves a lot of give and take with the web development community, standards organizations (like W3C), and browser developers.
Newer properties often exist for some time before they can be reliably used on production sites. This happens for various reasons:
To allow use of a CSS specification that is not fully implemented in a browser or in early implementation, we use what are known as CSS Vendor Prefixes.
Up until now, most of the CSS you've learned is fully supported in all browsers. For newer properties, from CSS3 and later, that's not always going to be the case.
It's important to check the compatibility of a property to know if you should use it. You should consider the following things:
There are many resources online that collect information on browser compatibilities. Sometimes it's hard to tell how recent the information is. It's important to get up to date information. One of the best resources is Can I Use ____?
caniuse.com gives you current information on all relevant browser support. You also can check common known issues and other resources listed for each property. caniuse.com also features information on compatibility for HTML5, JavaScript and other things.
The process of introducing new CSS properties and HTML elements can be a long and convoluted process. Sometimes changes are proposed by standards committees (like the W3C) and other times browser vendors create their own properties.
A property created by the W3C doesn't actually work until browser vendors implement them in new versions of their browsers. Additionally, sometimes there are disagreements in how a standard should be implemented. Other times a browser vendor creates a new property which later becomes a standard, but with a slightly different syntax. And even worse, if end users never upgrade their browsers none of the new features work at all.
Browser vendors needed a way to add support for new features that were not yet standardized, but without messing up later changes or creating incompatibles. To solve this issue Vendor Prefixes were created. A vendor prefixes is a special prefix added to a CSS property. Each rendering engine has it's own prefix which will only apply the property to that particular browser.
Vender Prefixes in 2017Much less necessary, but still used.
| Browser | Vendor Prefix |
|---|---|
| Internet Explorer | -ms- |
| Chrome | -webkit- |
| Safari | -webkit- |
| Firefox | -moz- |
| iOS | -webkit- |
| Andriod | -webkit- |
| Opera | -o- |
Note: Both Chrome and Opera now use a forked version of webkit called Blink as their rendering engine. They will continue using the -webkit prefix for now, but in the future will not use prefixes at all and will require 'experimental' features to be turned on via a preference setting. Firefox will be doing a similar thing.
.rounded {
border-radius: 10px;
}.rounded {
-moz-border-radius: 10px; /* support for Firefox */
-webkit-border-radius: 10px; /* support for webkit based browsers (Chrome, Safari, iOS, etc.) */
-o-border-radius: 10px; /* support for Opera */
border-radius: 10px; /* standardized property */
}
/* Example only. You do not need to use vendor prefixes for border-radius */