All, all, all: time to update your CSS3
If you use experimental CSS on your sites, in demos, articles or tools, then this requires some kind of support. Due to some recent changes in the browser world, it is time to review and update your code. This article will help you understand what to start updating now.
There is no mandatory requirement for ordering prefixes. However, it is strongly recommended to arrange them in alphabetical order, with a non-prefix version at the end. That is, it would be correct to sort like this:
Opera recently added support for
A definite advantage of this method is the relatively tidy appearance, and it also becomes easier to notice if suddenly one of the prefixes has been omitted.
')
This advice, of course, has the least benefit in this article, however, the benefit of it is proven in practice.
A number of CSS3 properties have long been available for use without prefixes, for example,
Internet Explorer and Opera have supported box-sizing without prefixes ever since the specification was implemented, so you only need to consider Gecko and Webkit based browsers. Firefox still requires the
It is recommended to use:
The situation with box-shadow is almost the same as
It is recommended to use:
Personally, I would delete
As in the situation with the previous two properties, Opera and Internet Explorer have supported border-radius without a prefix since they were implemented. You can omit
It is recommended to use:
The bad news is that you still need to use
In addition, prefixes were never needed for all of the above specifications (except for 2D transformations) in IE. 3D transformations are not implemented in Opera, but you can expect that they will be implemented immediately without prefixes.
I would recommend using -webkit-, -moz-, -o- and the version without the prefix (taking into account what will be written about the gradients below), except that you need to remember the prefix -ms- for 2D transformations and omit -o- for 3D transformations. In the near future you can do the removal of support for Firefox and Opera, since users are updated quite quickly, and in these browsers there is not even such a problem as compared to Android users - these update their operating system at a snail's pace.
The multi-column layout was implemented without prefixes in IE and Opera. But they are still needed in Firefox and in all versions of WebKit.
Flexbox is generally legendary (I'll write about it later), and therefore requires the support of several different syntaxes and prefixes, but is supported by modern versions of all browsers. The property is implemented without prefixes in Opera 12.1.
Since the mentioned specifications are now ready for use without prefix, it is time for developers to take advantage of this. In theory, these properties should no longer change - they have reached all the necessary agreements in the CSS working groups.
There are two approaches among developers. The first involves the use of non-prefix versions of properties. If you practice this approach, then you just need to remove unused prefixes, but before that, look in the next chapter, because there are some pitfalls. The second approach, respectively, is to not use non-prefix versions. If you are from these, then now you will need to add them all. The next chapter describes how to do this.
This is probably the most important part of general cleaning. Especially if you develop tools, or support tutorials with lots of live traffic.
It is widely known that border-radius switched to an alternative syntax, instead of the one that was originally in Firefox 2. It is also known that a similar thing happened with gradients, instead of the Safari solution. But surely not everyone knew (and even more so, they updated it in living projects) that the syntax of the gradients changed again. If you have not touched your gradients for a long time, most likely a bunch of your code is already outdated and is waiting for decisive action.
Fortunately, it is very easy to upgrade to the new syntax, and all you really need to do is update the prefix-free version. You can leave the prefixes unchanged. All recent browsers support this innovation, with the exception of Webkit. Yes, yes, Webkit lags behind IE!
The basic rule is: if you specify a direction, then it must be inverted and preceded by the keyword to. In this way:
It becomes:
If you specify an angle, the starting point has shifted. Previously, the 0deg point was in the east. Angles increased counterclockwise, so now 90deg begins in the north. With the prefix-free syntax, the gradient line in 0deg starts in the north and the angle increases clockwise. The recalculation formula for old values looks like
For circular gradients, position and length must precede the at keyword:
It becomes:
The keywords cover and contain with respect to the size of the gradient are no longer supported. The cover changes to farthest-corner and contain on the closest-side.
And finally, if you indicate the position to the gradient, and at the same time the shape or size, the position should be indicated last, thus:
Turns into:
To count how many times the syntax of the Flexbox has changed, I do not have enough fingers. Fortunately, this functionality is used less frequently than the same gradients, due to the fact that sites simply break if flexbox is not supported by the browser.
Currently, only Opera supports the new syntax without prefixes. Chrome supports it with prefixes starting with Chrome 21, Firefox is going to support the new syntax without prefixes starting with version 20, but now only the old syntax is available to it. IE supports a slightly outdated syntax, but not the one found in the old implementations of Webkit and Firefox. Safari now supports only the old entry. To achieve maximum compatibility, you need to use:
The specification is too tricky to make a comparison within this post, but you can read about how to notice the difference and see some demos of the old old and the new new syntax on CSS Tricks . Chris does not touch on the old new (or is it the new old ...) syntax, so you can go for more details to the Microsoft Flexbox documentation .
Information about the distribution of browsers was taken from StatCounter for December 2012. Data on current versions of Android are taken from the official Google report. Data for Russia may vary.
Sort prefixes
There is no mandatory requirement for ordering prefixes. However, it is strongly recommended to arrange them in alphabetical order, with a non-prefix version at the end. That is, it would be correct to sort like this:
moz , ms , o , webkit , and then a property without a prefix.Opera recently added support for
-webkit- prefixes for several CSS properties. This was necessary because many developers use only the prefix for webit, or simply do not include the opera prefix. Since it is assumed that both prefixes, -o- and -webkit- , have the same specificity, webkit wins in order, and if both are indicated, then it will be used. You probably would like to use -o- for Opera, especially if you have to replace something, so it would be appropriate to sort the prefixes by length: -webkit-property -moz-property -ms-property -o-property property A definite advantage of this method is the relatively tidy appearance, and it also becomes easier to notice if suddenly one of the prefixes has been omitted.
')
This advice, of course, has the least benefit in this article, however, the benefit of it is proven in practice.
Remove redundant prefixes
A number of CSS3 properties have long been available for use without prefixes, for example,
border-radius . In the recent past, only a few CSS specifications have grown to a level that is now considered acceptable, so that browser manufacturers can remove prefixes. Among them are the Transforms, Transitions, Animations, Multi-Column Layout, Flexbox, and Image Values specifications (gradients, mostly). Different browsers are at different stages of the path to removing prefixes, but some are ready for this, depending on which of the older browser versions you have to support.box-sizing
Internet Explorer and Opera have supported box-sizing without prefixes ever since the specification was implemented, so you only need to consider Gecko and Webkit based browsers. Firefox still requires the
-moz- prefix, while you can omit the prefix for Webkit if support is not needed:- Chrome 9 and below (~ 0.30% of the market)
- Safari 5 and below (~ 0.74% of the market)
- Android browser 3 and below (> 60% of devices on Android at the moment)
- Safari on iOS 4.3 and below
- Browser BlackBerry 7 and below
It is recommended to use:
-webkit-box-sizing: value; /* Android */ -moz-box-sizing: value; box-sizing: value; box-shadow
The situation with box-shadow is almost the same as
box-sizing , except that Firefox requires you to prefix only in versions 3.5 and 3.6. Together they represent 0.77% of the current market.It is recommended to use:
-webkit-box-shadow: value; /* Android, box-shadow */ box-shadow: value; Personally, I would delete
-webkit-box-shadow , because this is most often not a critical element of styles, unlike box-sizing , which is able to break the markup.border-radius
As in the situation with the previous two properties, Opera and Internet Explorer have supported border-radius without a prefix since they were implemented. You can omit
-webkit- and -moz- if you do not need the support of the following browsers:- Firefox 3.6 and below (~ 0.95% of the market)
- Chrome 4 and below (~ 0.05% of the market)
- Safari 4 and below (~ 0.12% of the market)
- Android 2.1 and below (~ 3% of current Android devices)
- Safari on iOS 3.2 and below
It is recommended to use:
border-radius: value; More recent specifications
The bad news is that you still need to use
-webkit- in modern versions of Webkit for all the specifications listed in this section. The good news is that you no longer have to write prefixes for gradients , transitions , transforms and animations , starting with:- Internet Explorer 10
- Opera 12.1
- Firefox 16
In addition, prefixes were never needed for all of the above specifications (except for 2D transformations) in IE. 3D transformations are not implemented in Opera, but you can expect that they will be implemented immediately without prefixes.
I would recommend using -webkit-, -moz-, -o- and the version without the prefix (taking into account what will be written about the gradients below), except that you need to remember the prefix -ms- for 2D transformations and omit -o- for 3D transformations. In the near future you can do the removal of support for Firefox and Opera, since users are updated quite quickly, and in these browsers there is not even such a problem as compared to Android users - these update their operating system at a snail's pace.
The multi-column layout was implemented without prefixes in IE and Opera. But they are still needed in Firefox and in all versions of WebKit.
Flexbox is generally legendary (I'll write about it later), and therefore requires the support of several different syntaxes and prefixes, but is supported by modern versions of all browsers. The property is implemented without prefixes in Opera 12.1.
Add properties without prefixes
Since the mentioned specifications are now ready for use without prefix, it is time for developers to take advantage of this. In theory, these properties should no longer change - they have reached all the necessary agreements in the CSS working groups.
There are two approaches among developers. The first involves the use of non-prefix versions of properties. If you practice this approach, then you just need to remove unused prefixes, but before that, look in the next chapter, because there are some pitfalls. The second approach, respectively, is to not use non-prefix versions. If you are from these, then now you will need to add them all. The next chapter describes how to do this.
Update to new syntax
This is probably the most important part of general cleaning. Especially if you develop tools, or support tutorials with lots of live traffic.
It is widely known that border-radius switched to an alternative syntax, instead of the one that was originally in Firefox 2. It is also known that a similar thing happened with gradients, instead of the Safari solution. But surely not everyone knew (and even more so, they updated it in living projects) that the syntax of the gradients changed again. If you have not touched your gradients for a long time, most likely a bunch of your code is already outdated and is waiting for decisive action.
New gradient syntax
Fortunately, it is very easy to upgrade to the new syntax, and all you really need to do is update the prefix-free version. You can leave the prefixes unchanged. All recent browsers support this innovation, with the exception of Webkit. Yes, yes, Webkit lags behind IE!
The basic rule is: if you specify a direction, then it must be inverted and preceded by the keyword to. In this way:
background: -prefix-linear-gradient(left, white, black); It becomes:
background: linear-gradient(to right, white, black); If you specify an angle, the starting point has shifted. Previously, the 0deg point was in the east. Angles increased counterclockwise, so now 90deg begins in the north. With the prefix-free syntax, the gradient line in 0deg starts in the north and the angle increases clockwise. The recalculation formula for old values looks like
abs(oldDegValue − 450) mod 360 .For circular gradients, position and length must precede the at keyword:
background: -prefix-radial-gradient(center, white, black); It becomes:
background: radial-gradient(at center, white, black); The keywords cover and contain with respect to the size of the gradient are no longer supported. The cover changes to farthest-corner and contain on the closest-side.
And finally, if you indicate the position to the gradient, and at the same time the shape or size, the position should be indicated last, thus:
-prefix-radial-gradient(center, 50px 25px, white, black); Turns into:
-radial-gradient(50px 25px at center, white, black); New Flexbox syntax
To count how many times the syntax of the Flexbox has changed, I do not have enough fingers. Fortunately, this functionality is used less frequently than the same gradients, due to the fact that sites simply break if flexbox is not supported by the browser.
Currently, only Opera supports the new syntax without prefixes. Chrome supports it with prefixes starting with Chrome 21, Firefox is going to support the new syntax without prefixes starting with version 20, but now only the old syntax is available to it. IE supports a slightly outdated syntax, but not the one found in the old implementations of Webkit and Firefox. Safari now supports only the old entry. To achieve maximum compatibility, you need to use:
- The most recent non-prefix syntax:
display: flexand company (Opera, Firefox 20, and possibly Chrome in the near future). - The latest syntax is prefixed with -webkit-:
display: -webkit-flexand company (Chrome 21). It would be reasonable to score on this and wait for the non-prefix implementation on the old syntax. - Old syntax with -ms- prefix:
display: -ms-flexboxand company (IE10). - Old syntax with -moz- and -webkit-:
display: -webkit-box(WebKit),display: -moz-box(Firefox).
The specification is too tricky to make a comparison within this post, but you can read about how to notice the difference and see some demos of the old old and the new new syntax on CSS Tricks . Chris does not touch on the old new (or is it the new old ...) syntax, so you can go for more details to the Microsoft Flexbox documentation .
Information about the distribution of browsers was taken from StatCounter for December 2012. Data on current versions of Android are taken from the official Google report. Data for Russia may vary.
Source: https://habr.com/ru/post/163429/
All Articles