I am reading a book on html5, css3 and javascript edited in 2012 and I have a doubt about the use of the following prefixes:
•-moz- for Firefox.
• -webkit- for Safari and Chrome.
• -o- for Opera.
• -khtml- for Konqueror.
• -ms- for Internet Explorer.
• -chrome- specific to Google Chrome.
In the book he clarifies:
IMPORTANT: At this moment the new CSS3 additions are being implemented in the latest versions of the most popular browsers, but some of them are still in an experimental state. For this reason, these new styles must be preceded by prefixes such as –moz- or -webkit to be effectively interpreted. We will discuss this important matter later.
Example of .css code:
div {
width: 100px;
margin: 20px;
padding: 10px;
border: 1px solid #000000;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
I want to know it:
8 years have passed since the publication of the book and I don't know if they are still mandatory or if they have been optimized with another standard, could you clear my doubts?
Thank you very much for your time :)
There are basically two problems that force us to use what is known as vendor prefix
A. The compatibility between versions
A high percentage of CSS3 code is supported in most modern browsers. Now, in the developer community there is even debate about which browsers (and from which versions) can be considered modern .
But that compatibility is from a certain version of the browser. Therefore, you should still put vendor prefix snippets in your code , because any user of your page may be using a browser version that doesn't support that selector or CSS function.
There is a site called
caniuse.com
where you can check the browser and version compatibility of a certain selector or property. If you're writing a library, framework, or just CSS for your website, you'll need to check that site for compatibility to decide how to write the CSS for those new features.All
canisue.com
you have to do is write the property you want to verify in the upper box, the screen is updated and you will see all the information that is offered. Let's see an image with some explanations:Based on two cases we can understand that it is almost impossible to get rid (completely) of using vendor prefixes .
In the case of
border-box
, it is compatible with that98.24%
of browsers (#3 in the image). But, if you look at some green boxes, you will see small yellow boxes inside them . If you put the pointer on any of them you will see what it is about:It clearly reads: Supported with prefix
-webkit-
. It means that to make it workborder-box
on those versions (the ones with the little yellow box), you have to use the prefix-webkit-
in the CSS code.In the case of filter effects things change, because there are incompatibilities in almost all browsers , and said incompatibility is resolved in some cases by applying only
webkit
and in others (all those in red) you will have to ensure compatibility through your own code for each browser using that browser's own vendor prefix .B. The variety of browsers and the inability to agree
This was a big problem (especially in the past) that forced us to continue using the prefixes. Today the developers of each browser have begun to agree. That's why you can see that in recent browser versions, the prefix
webkit
is universalized, so that for compatibility with most browsers, it is enough to use this prefix.