Web Design All-in-One For Dummies, 2nd Edition
Book image
Explore Book Buy On Amazon

In mid-2010, web designers and developers rejoiced as CSS3 began to make its way into the mainstream. Since that time, browser support for CSS3 has steadily increased and improved, even though CSS3 isn’t officially a W3C standard yet.

In fact, the only drawback (if you even want to call it that) to using these selectors today is that you may occasionally still need to add some browser-specific prefixes to your CSS to ensure that all the CSS3 styles appear correctly in the older versions of the most popular browsers.

To illustrate, if all browsers supported the CSS3 columns selector, you’d only need to specify a single columns declaration in your style like this:

div {
  columns:100px 3;
  }

However, because this selector isn’t supported in the same way by all the popular browsers, the workaround is to write your single CSS3 declaration first, and then directly below it you’ll include duplicate declarations with browser-specific prefixes. Note how CSS comments are added to the CSS to identify the browsers associated with each prefix:

div {
  columns:100px 3;
  <b>-webkit-</b>columns:100px 3; <b>/* Safari and Chrome */</b>
  <b>-moz-</b>columns:100px 3; <b>/* Firefox */</b>
  }

Here is a list of CSS3 prefixes by browser:

Browser Prefix
Internet Explorer -ms-
Firefox -moz-
Google Chrome -webkit-
Safari -webkit-
Opera -o- or -xv-

For an up-to-date listing of browser support for all the CSS3 properties, check out the chart at w3schools.com.

Also be sure to download a free copy of the Smashing Magazine CSS3 Cheat Sheet PDF, which can help you discover how to use CSS3 in your web designs: Smashing Magazine.

About This Article

This article is from the book:

About the book author:

Sue Jenkins is a working designer as well as a design trainer and author. Her design firm, Luckychair, provides design services for web, logo, and print. Sue has also created a series of training DVDs on popular Adobe design tools including Photoshop, Dreamweaver, and Illustrator.

This article can be found in the category: