Geek Answers Handbook

Why do I have to access different browsers with a prefix for the same CSS?

I am curious why some browsers require a special invitation for the same css build command. Can anyone enlighten me?

Example: CSS formatting: box-size: border-box; (Please pay attention to the border of my measurement box!)

Now firefox and safari come, and they need a special invitation:

-moz-box-sizing: border-box; -webkit-box-sizing: border-box;

For a simple cat like me, this is like saying:

  • Browsers: the dimensions that I calculated for the borders of my box!
  • firefox: This is also considered to be for you.
  • Safari: It is also suitable for you.

I mean ... why? This is exactly the same syntax! Why should I tell the same things to a specific browser? I would understand if they need a different syntax .. but just the same ?! Would they like to hear their names?

+6
source share
5 answers

This is the result of using different browsers that support different things. These directives are simply intended to show the browser rendering engines you are looking for to use a function that is still under development / testing or is not standard in the CSS specification. Please note that not all browsers use different rendering mechanisms.

+2
source

since these properties do not become obsolete by W3C, they are still in a draft, so vendors will implement their own version, which uses prefixes to avoid clashes with the implementation of other browsers, or the final implementation after the specification is completed.

+1
source

I suppose at first each browser maker decided that css style would be a good idea, but there was no standard for that. Each browser maker added a css style in its own way with their prefix. In the end, most of these styles became CSS3 standards (usually based on what browser vendors already did), but since older browsers did not support the CSS3 standard (only their standard with their prefix), we still have ro for each browser syntax / prefix.

0
source

this means that these features are still under development and may not support every functionality that the standard dictates

0
source

In addition to the answers above. When you list all the properties, list the standard last property, for example:

 -moz-border-radius: 10px 5px; -webkit-boder-radius: 10px 5px; border-radius: 10px 5px;

If you do so, the old Firefox will use the first rule and ignore the others, because it does not understand them, the same goes for the old Safari.

Problems arise in recent versions of browsers that support border-radius without a prefix when you first specify a standard property:

 border-radius: 10px 5px; -moz-border-radius: 10px 5px; -webkit-boder-radius: 10px 5px;

When you browse this site in Safari, it will first use the standard property and then override it with the -webkit- property. The problem is that the specifications for the two implementations are different. The standard property makes the upper left and lower right corners 30px-rounded and the upper right and lower left 10px-rounded.

The -webkit-prefixed property, on the other hand, makes all angles the same: an ellipsis with a size of 30x10px.

0
source

More articles:


All Articles