Generated Content by David Storey

Public service announcement: time to update your CSS3 

If you use experimental CSS on your sites, demos, articles or tools, there is a certain amount of maintenance required to keep on top of changes. With a number of recent changes in the browser world, now is the time to revisit and update your code. Read on to find out what may need updating.

Reorder your prefixes

There is no specific order that you should place your prefixed properties. However, a commonly recommended method is to place them in alphabetical order, with the prefixless version last. This would make the order: moz, ms, o, webkit, then prefixless.

Opera recently added support for -webkit- prefixes for a limited number of CSS properties. This is needed as a number of developers choose to only include the webkit prefix, or don’t include the opera prefix. As both the -o- prefix and -webkit- prefixes are counted as the same specificity, order wins out and the webkit prefix will be used if both are specified. You probably want the o prefix to be used for Opera, especially if you have to override something, so a useful suggestion is to order them in oder of the length of the prefix, like so:

-webkit-property
-moz-property
-ms-property
-o-property
property

This also has the benefit that it looks relatively neat, and its easy to spot if you have missed one once you are used to using this scheme. Each property gets one character shorter, except the initial webkit prefix.

This is one of the least critical updates to make in this post, but can prove to be useful.

Remove redundant prefixes

A number of commonly used CSS3 properties have been available without prefix for quite a while now, such as border-radius. In the recent past quite a few CSS specs have reached the stage where it is now considered ok for browser vendors to remove the prefixes. This includes Transforms, Transitions, Animations, Multi-Column Layout, Flexbox, and Image Values (primarily gradients). Different browsers are at a different state in the march towards removing prefixes, but some are ready to be removed, depending on how far back you have to support older browsers.

box-sizing

Internet Explorer and Opera have supported box-sizing without prefix since they were implemented, so the only prefixes you need to consider are for Gecko and WebKit based browsers. Firefox still needs to use the -moz- prefix to this day, but you can drop the WebKit prefix if you don’t need to support:

Recommended usage:

-webkit-box-sizing: value;  /*evaluate removing as Android users upgrade */
-moz-box-sizing: value;
box-sizing: value;

box-shadow

The situation with box-shadow is almost exactly as for box-sizing in the previous section, except Firefox only needed its prefix in versions 3.5 and 3.6. Together, these current account for 0.77% marketshare.

Recommended usage:

-webkit-box-shadow: value;  /*evaluate removing as Android users upgrade or box-shadow usage is not critical */
box-shadow: value;

I would personally remove -webkit-box-shadow as it is not usually a critical piece of styling, unlike box-sizing, which could break layout.

border-radius

As with the previous two properties, Opera and Internet Explorer have supported border-radius without prefix since implementation. You can drop the -webkit- and -moz- prefixes if you do not need to support the following:

Recommended usage:

border-radius: value;

The newer specs

The bad news is that you still need to use -webkit- in modern versions of WebKit for all of the specs in this section. The good news is that you do not need prefixes for gradients, transitions, transforms and animations starting from:

In addition, prefixes have never been needed for all the specs above (except 2D transforms) in IE. 3D transforms are not implemented in Opera, but it is safe to assume it will be directly implemented without prefix.

I’d recommend to use the -webkit-, -moz-, -o- and the unprefixed version (taking into account the notes below for gradients), with the exception of keeping the -ms- prefix for 2d transforms and dropping the -o- prefix for 3d transforms. You may be able to consider removing the Firefox and Opera prefixes in the relatively near future, as users are upgrading at a fast clip, and these browsers don’t have the problem of the near glacial speed that Android devices update their OS.

Multi-column layout was implemented without prefixes in IE and Opera. Prefixes are still needed in Firefox and all versions of WebKit.

Flexbox has a storied history (see later in this post) and thus needs multiple different syntaxes and prefixes, but is supported by modern versions of all browsers. It is implemented without prefix in Opera 12.1.

Add Prefixless properties

As the specs mentioned are now ready to be implemented without prefix, it is also time for web developers to add the prefixless version to their code. In theory, these properties should not change now they have reached this strange, and there is general consensus in the CSS working group.

There are two schools of thought between developers. The first is to include the prefixless version when writing the original CSS. If you are in this school, you will just need to remove any redundant prefixes, but make sure you check the next section, as there have been breaking changes. The other school of thought is to not include the prefixless version. If you’re in this school, you’ll have to add all of these now. You’ll also need to check the next section to see how to do this.

Update to the new syntax

This is perhaps the most critical part of your spring clean. Especially if you are a tools developer, or have tutorials with a lot of foot traffic.

It is probably well known by web developers that border-radius changed to an alternative syntax from the original found in Firefox 2. It is probably also known that a similar thing happened with gradients, replacing the original Safari proposal. What is less known, and is certainly less updated in the wild, is that the syntax for gradients has changed again. Unless you changed your gradient code relatively recently, you’ll likely have a bunch of outdated code that needs to be updated.

New gradient syntax

Fortunately the new gradient syntax is easy to update to, and you only really need to make the update to the unprefixed version. You can keep all the prefixed properties with the old syntax. All of the latest browsers support this new syntax, with the exception of WebKit. Its true, WebKit is lagging IE!

The general rule is that if you use a direction keyword it needs to be reversed and be preceded by the to keyword. Thus:

background:  -prefix-linear-gradient(left, white, black);

Becomes:

background:  linear-gradient(to right, white, black);

If you use an angle, the starting point of the gradient line has shifted. Previously 0deg started at the East position. Angles increased in an anticlockwise direction, such that 90deg started at the North position. With the unprefixed syntax the gradient line for 0deg starts at the North position and the angle increases clockwise. The formula for switching from the old the new degree value is abs(oldDegValue − 450) mod 360.

For radial gradients the position keyword or length now needs to be preceded by the at keyword:

background: -prefix-radial-gradient(center, white, black);

Becomes:

background: radial-gradient(at center, white, black);

The cover and contain gradient size keywords are no longer supported. The cover keyword should be switched to farthest-corner and contain to closest-side.

Finally, if you specify a gradient position and a shape or size, the position should be specified last, thus:

-prefix-radial-gradient(center, 50px 25px, white, black);

Becomes:

-radial-gradient(50px 25px at center, white, black);

New flexbox syntax

The Flexbox syntax has changed more times than I can count. Fortunately, there is likely to be less content out there using the old syntax as there is with gradients, due to the fact the site will likely break if flexbox isn’t supported.

Currently, only Opera supports the new syntax without prefix. Chrome supports the new syntax with prefix since Chrome 21, Firefox is due to support the new syntax unprefixed in Firefox 20, but currently only supports the old syntax. IE supports a slightly older syntax, but not the same one as the older WebKit and Firefox implementations. Safari currently only supports the old syntax. To get the best cross platform compatibility you will need to include:

The spec is too involved to include a comparison tacked onto the end of this post, but you can read about how to spot the difference and see some demos of the old old and new new syntax on CSS Tricks. Chris does not include a demo of the old new (or is it new old) syntax, so you can look at Microsoft’s Flexbox documentation to find out more. I may do a full blog post on this in the near future if I find time.

Marketshare stats are taken from StatCounter for the month of December 2012. Active Android version stats are from Google’s official platform versions dashboard.
  1. jalbertbowdenii reblogged this from dstorey
  2. himself reblogged this from dstorey
  3. dudewithhat-com reblogged this from dstorey
  4. adriandalvarez reblogged this from dstorey
  5. sxizzor reblogged this from biochip-archive
  6. elephaunts reblogged this from dstorey
  7. biochip-archive reblogged this from dstorey
  8. marionette-request reblogged this from theme-hunter
  9. defite reblogged this from dstorey
  10. bitternakano reblogged this from theme-hunter
  11. theme-hunter reblogged this from dstorey