Sort styles with prefixes in CSS

Asked

Viewed 211 times

9

Sometimes I see prefix CSS codes like -webkit, -moz and even -ms. Then I had some doubts about them:

  1. Why some styles do not need prefixes (such as background, for example)?
  2. There is a correct (or recommended) order to write them in the code?

Example:

.class {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

Or:

.class {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
}
  1. If there is a correct order, there is (or will be in the future) a problem with writing outside that order?

Thank you!

UPDATE 1:

Even writing in any order, the practical effect is the same. Hence the question 3.

UPDATE 2:

I have been researching and found that order can be "crucial" when style involves more than one value (e.g.., border-radius: 30px 10px;), can cause a huge difference in the presentation of the element (See here an example). Therefore, it is more recommended to put the prefixed above the unprepared:

.class {
-moz-border-radius
-webkit-border-radius
border-radius
}
html css html5 css3

2 answers

1


What you refer to are prefixes and usually exist for browsers to create their own properties in different ways.

There are currently several different css prefixes like:

  • -ms-, mso- Microsoft
  • -Moz- Mozilla
  • -o- or -xv- Opera Software
  • -Webkit- Apple
  • etc....

You can automatically generate your prefixes with the help of some websites like: https://autoprefixer.github.io/

Or some IDE already has this option included.

Why not all styles need?

Not all css properties need prefixes because some of them are already native by default and the behavior will be the same regardless of the browser you are using.

You can see some of them here:

What should be the order?

I personally use the following order:

display: -webkit-box;
display: -ms-flexbox;
display: flex;

It’s the same order used by https://autoprefixer.github.io/, but I think there are no problems with the order as each browser will read its prefix and run the element this way.

  • I found your answer more consistent, but I believe your last paragraph is mistaken. See in this example how order can affect style: https://codepen.io/css-tricks/pen/pqgKH

  • Good @Dvd, I myself have had problems with the order, but this goes a little with the browser used. I couldn’t open the link because it’s broken, but I wonder what you’re talking about. The problem is that by correcting in one browser, you may be modifying the presentation in another.

0

Why some styles do not need prefixes (such as background, for example)?

Because its specifications have already been adopted in virtually all browsers, that is, prefixes usually work when the browser is adapting to a new css feature, it is a way to approach that particular attribute.

There is a correct (or recommended) order to write them in the code?

No, regardless of the order the browser will first treat the prefixed attributes, last but not prefixed attributes.

That’s why this type of prefixation has become popular since css3.

It’s really necessary?

This is up to you, note the flexbox support (unprefixed)

inserir a descrição da imagem aqui

Absurd difference? obviously not, but if your niche is not so technologically advanced, it is always good to use.

Edit

It is worth noting that this type of prefixing is temporary, that is, if there is compliance of the specification in all browsers, the prefixes should be removed, reaching a few bytes of performance.

source thoughtCo, kennel

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.