9
Sometimes I see prefix CSS codes like -webkit
, -moz
and even -ms
. Then I had some doubts about them:
- Why some styles do not need prefixes (such as
background
, for example)? - 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;
}
- 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
}
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
– Sam
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.
– António Freitas