CSS3 and Browser Support

The current state of standards for web browser support for CSS3 effects and transforms is in flux. Most likely, over time the powers-that-be in the browser world — those who publish Internet Explorer, Safari, Firefox, and Chrome (and others) — will come to some common agreement on how to code for CSS3 effects.

But right now, they haven’t come to such agreement. That means that, at least at this writing, these cool new effects have to be defined separately for different browsers.

Here’s what you need to know about CSS3 and browser support:

  • CSS3 effects and transforms are supported in current versions of all major browsers, but Safari, Firefox, and Opera require different code prefixes to make CSS3 effects and transforms work in their browsers.

  • Three-dimensional (3D) transforms are not supported by browsers except Safari and Chrome, and because they rotate objects along the x-axis (horizontal) or y-axis (vertical), they don’t do much without additional JavaScript to animate them. That said, the world of CSS3 transforms is in constant flux and development, and 3D transforms may gain broader support and become more accessible to developers.

  • CSS3 effects and transforms work well in every modern browsing environment. You just need to include redundant versions of each effect, with different browser prefixes, in order to make them work in every browser.

  • Some obsolete browsers don’t support CSS3 effects and transforms at all.

    Use CSS3 effects and transforms in such a way that even if a browser doesn’t support CSS3, the page content isn’t corrupted. The following figure shows a rounded-rectangle effect. On the right, the browser supports CSS3 effects, and on the left, the browser doesn’t support them. In both environments, you can read the content, and some design effects, such as the box and font color, are supported.

    image0.jpg

    Because every digital device comes with copy-and-paste tools, the workflow involves creating one effect or transform property, and then creating a set of copies with different prefixes.

The following is CSS3 code that creates skewed text. Note that five lines of CSS are necessary to define the same skew effect for Firefox, Safari, Opera, Internet Explorer, and a generic version. (The people who make browsers seem to gravitate toward the generic version, but this isn’t adopted universally.)

.skew {
      background-color: #999;
      height: 300px;
      width: 300px;
      -moz-transform: skew(12deg,0deg);
      -webkit-transform: skew(12deg,0deg);
      -ms-transform: skew(12deg,0deg);
      -o-transform: skew(12deg,0deg);
      transform: skew(12deg,0deg);
      color: white;
      padding: 15px;
      float: right;
      margin-top: 6px;
      margin-right: 100px;
      margin-bottom: 6px;
      margin-left: 6px;
}

Four of these variations of the CSS3 transform have prefixes (-moz, -webkit, -ms, and -o); the generic version doesn’t have a prefix. Each prefix applies to different underlying engines in these browsers:

  • The -moz-transform-skew code applies to Mozilla Firefox.

  • The -webkit-transform-skew code applies to Safari and other browsers that adhere to the WebKit standard (which includes the Dreamweaver CS5 Live view).

  • The generic transform: skew code applies to “everyone else,” including most iterations of Internet Explorer 9, which doesn’t require a browser prefix to interpret this (or other) effects. However, some versions of IE9 require the –ms prefix. So, it is a good idea to include the –ms prefix just in case.

  • The -o-border-radius code applies to the Opera browser.

blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.