Using CSS3: Older Browsers And Common Considerations

Advertisement

With the arrival of IE9, Microsoft has signalled its intent to work more with standards-based technologies. With IE still the single most popular browser and in many ways the browser for the uninitiated, this is hopefully the long awaited start of us Web craftsmen embracing the idea of using CSS3 as freely as we do CSS 2.1. However, with IE9 not being supported on versions of Windows before Vista and a lot of businesses still running XP and reluctant (or unable) to upgrade, it might take a while until a vast majority of our users will see the new technologies put to practice.

While plenty of people out there are using CSS3, many aren’t so keen or don’t know where to start. This article will first look at the ideas behind CSS3, and then consider some good working practices for older browsers and some new common issues.

A Helpful Analogy

The best analogy to explain CSS3 that I’ve heard relates to the world of film. Filmmakers can’t guarantee what platform their viewers will see their films on. Some will watch them at the cinema, some will watch them at home, and some will watch them on portable devices. Even among these few viewing options, there is still a massive potential for differences: IMAX, DVD, Blu-ray, surround sound — somebody may even opt for VHS!

So, does that mean you shouldn’t take advantage of all the great stuff that Blu-ray allows with sound and video just because someone somewhere will not watch the film on a Blu-ray player? Of course not. You make the experience as good as you can make it, and then people will get an experience that is suitable to what they’re viewing the movie on.

A lot about CSS3 can be compared to 3-D technology. They are both leading-edge technologies that add a lot to the experience. But making a film without using 3-D technology is still perfectly acceptable, and sometimes even necessary. Likewise, you don’t need to splash CSS3 gradients everywhere and use every font face you can find. But if some really do improve the website, then why not?

However, simply equating CSS3 to 3-D misses the point. In many cases, CSS3 simply allows us to do the things that we’ve been doing for years, but without all the hassle.

To Gracefully Degrade or Progressively Enhance?

In film, you create the best film you can make and then tailor the product to the viewing platform. Sound familiar? If you have dabbled in or even taken a peek at CSS3, it should.

There are two schools of thought with CSS3 usage, and it would be safe to say that the fundamental principle of both is to maintain a website’s usability for those whose browsers do not support CSS3 capabilities, while providing CSS3 enhancements for those whose browsers do. In other words, make sure the film still looks good even without the 3-D specs. In many ways, the schools of thought are similar, and regardless of which you adopt, you will face many of the same concerns and issues, only from different angles.

Graceful Degradation

With graceful degradation, you code for the best browsers and ensure that as the various layers of CSS3 are peeled away on older browsers, those users still get a usable (even if not necessarily as pleasing an) experience.

The approach is similar (although not identical) to using an IE6-only style sheet, whereby you serve a certain set of styles to most users, while serving alternate styles to users of IE6 and lower. Normally, the IE6 version of a website removes or replaces styling properties that don’t work in IE6, along with fixes for any layout quirks. Graceful degradation differs in that it makes use of the natural fallbacks in the browser itself, and fixes are determined by browser capabilities rather than specific browser versions. Also, graceful degradation does not normally require an entirely different set of styles. The result, though, is that the majority of users get the normal view, and then tweaks are applied for people who have yet to discover a better browser.

Aggressive graceful degradation is at the heart of Andy Clarke’s recent book, Hardboiled Web Design, and the accompanying website1 makes great use of graceful degradation. There are plenty of other examples, including Do Websites Need to Look Exactly the Same in Every Browser.com2, which was built to showcase the technique, and Virgin Atlantic’s vtravelled blog3, designed by John O’Nolan, which shows some great subtle fallbacks that most users wouldn’t even notice. And if you’re a WordPress user, why not compare your admin dashboard in IE to it in another browser?

Progressive Enhancement

Progressive enhancement follows the process in reverse: that is, building for lower-support browsers and then using CSS3 to enhance the experience of those with more capable browsers. This used to be done, and still is by some, with separate enhancement style sheets.

As a starting point, most people will code for a sensible standards-based browser, then add some code to support browsers such as IE7 and 8, and then possibly thrown in some fixes for IE6 for good measure, and then step back and think, “How can I improve this with CSS3?” From there, they would add properties such as rounded corners, gradients, @font-face text replacement and so on.

As browser makers add support, progressive enhancement appears to be taking a back seat to graceful degradation. But progressive enhancement is a very good approach for getting started with CSS3 properties and learning how they work.

Examples of the technique include the personal websites of Sam Brown4 and Elliot Jay Stocks5, which both feature enrichment-type style sheets, Elliot has spoken on the matter, and the slides from his 2009 Web Directions South talk, “Stop Worrying and Get on With It (Progressive Enhancement and Intentional Degradation)6,” make for good reading.

Screenshot7
Elliot Jay Stock’s presentation ‘Stop Worrying and Get on With It (Progressive Enhancement and Intentional Degradation)’8

Comparing the two, graceful degradation can be considered a top-down approach, starting with browsers most capable of utilizing CSS3 and working down to older browsers that lack support.

Progressive enhancement works the other way, bottom-up, using a standards-based browser of choice as the baseline, along maybe with IE7, and then adding CSS3 for browsers that support it. Its benefit is that it is easy to work with when you’re just getting used to CSS3, and it’s also a sensible approach when adding CSS3 to older websites.
Whichever approach you choose, there are a number of things to consider, what with all the CSS3 properties that are coming out. Later on, we will look at considerations for certain key properties.

How To Do It?

Whatever your approach, you will no doubt find yourself thinking through the common fallback process at some point: what would this element look like with a certain property, and what would it look like without it? Would it look fine or broken? If it would look broken, there’s a good chance you will need to do something about it.

As a typical path, you would first implement a feature with CSS3, then with CSS 2.1, then (maybe) with JavaScript, and then with whatever hack you used to use for legacy browsers. You could argue that progressive enhancement would slightly modify this path, using CSS 2.1 first, then CSS3.

At each stage, you should determine whether degrading or enhancing a feature would become unnecessarily complex and whether simply providing an alternative would be more sensible.

Ordering Properties

Let’s take a quick look at ordering properties and how browsers interpret them. Browser makers initially offer CSS3 functionality via browser prefixes: -moz for Mozilla, -webkit for Chrome and Safari, -o for Opera, etc. Each browser then ignores any prefixes not meant for it. The convention is to list the browser-specific prefixes first and then the default property, as follows:

.somediv {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; }

Yes, this creates a little overhead, but when you consider how such effects were achieved before CSS3, it’s really not much.

Browsers that don’t support the property will ignore it. Any browser that does support it will implement its browser-specific version; and when it eventually supports the generic property, it will implement that.

Why order it in this way? Once all of the browsers implement a property the same way, then they will adopt the default version of the property; until then, they will use the prefixed version. By listing the properties in the order shown above, we ensure that the standard version is implemented as the fallback once it is supported, hopefully leading to more consistent rendering across browsers.

JavaScript

JavaScript is the most common method of enabling cross-browser CSS3 features support, and it can either be used as a substitute for or to enable CSS3 properties in older browsers or be used as an alternative.

Modernizr

A useful JavaScript tool for implementing CSS3 fallbacks is Modernizr9. For anyone working with CSS3 in a production environment (as opposed to merely as a proof of concept), it is essential. Modernizr enables you to use CSS3 for properties where it is supported, and to provide sensible alternatives where it isn’t.

Screenshot10

Modernizr works by adding classes to the html element of the page, which you would then call in the style sheet.

For example, to display a different background when CSS3 gradients are not supported, your code would look something like this:

.somediv {
	background: -webkit-gradient(linear, 0% 0%, 0% 100%,
	  from(#660C0C), to(#616665), color-stop(.6,#0D0933)); }

.no-cssgradients .somediv {
	background: url('/images/gradient.jpg'); }

Conversely, to display a different background only where the CSS3 property is supported, you would do this:

.cssgradients .somediv {
	background: -webkit-gradient(linear, 0% 0%, 0% 100%,
	  from(#660C0C), to(#616665), color-stop(.6,#0D0933));}

.somediv {
	background: url('/images/gradient.jpg'); }

In this way, you control what is shown in the absence of a property, and you tailor the output to what is sensible. In this case, you could serve a gradient image in the absence of support for CSS3 gradients.

With this additional control, you can tailor the output quite accurately and avoid any clashes that might arise from a missing property.

CSS3 PIE

Sadly, this has nothing to do with the tasty dessert. CSS3 PIE11 stands for progressive Internet Explorer. As the official description says:

PIE makes Internet Explorer 6 to 8 capable of rendering several of the most useful CSS3 decoration features.

Screenshot12

While it doesn’t support a myriad of features, it does allow you to use box-shadow, border-radius and linear gradients in IE without doing much extra to the code. First, upload the CSS PIE JavaScript file, and then when you want to apply the functionality, you would include it in the CSS, like so:

.somediv {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	behavior: url(path/to/PIE.htc); }

Fairly straightforward, and it can save you the hassle of having to use JavaScript hacks to achieve certain effects in IE.

Selectivzr

CSS3 has expanded its repertoire beyond advanced selectors such as [rel="selector"] and pseudo-selectors such as :focus, to include selectors such as :nth-of-type, which give you much more control and focus and allow you to dispense with a lot of presentational classes and IDs. Support for selectors varies greatly, especially with the wide variety of additional selectors being introduced.

Screenshot13

Therefore, the third weapon in your CSS3 arsenal will most likely be Selectivzr14, which enables advanced CSS3 selectors to be used in older browsers and is aimed squarely at old IE versions.

Head over to the Selectivizr website and download and add the script. You will have to pair it with a JavaScript framework such as jQuery or MooTools, but chances are you’re working with one already. The home page is worth a quick look because not all selectors are supported by all JavaScript libraries, so make sure what you need is supported by your library of choice.

Problems?

The main issue with all of the solutions above is that they’re based on JavaScript, and some website owners will be concerned about users who have neither CSS3 support nor JavaScript enabled. The best solution is to code sensibly and make use of natural CSS fallbacks and allow the browser to ignore CSS properties that it doesn’t recognize.

This may well make your website look a bit less like the all-singing, all-dancing CSS3-based design that you had in mind, but remember that the number of people without CSS3 support and without JavaScript enabled will be low, and the best you can do is make sure they get a usable, functional and practical experience of your website, thus allowing you to continue tailoring the output to the user’s platform.

Some CSS3 Properties: Considerations And Fallbacks

Many CSS3 properties are being used, and by now we have gotten used to the quirks and pitfalls of each iteration of the CSS protocol. To give you a quick start on some of the more popular CSS3 properties, we’ll look at some of the issues you may run into and some sensible ways to fall back in older browsers.

All of the information in this article about browser support is correct as of May 2011. You can keep up to date and check out further information about support by visiting findmebyIP15. Support has not been checked in browser versions older than Chrome 7.0, Firefox 2.0, Opera 9, Safari 2 and Internet Explorer 6.

Border Radius

Support: Google Chrome 7.0+, Firefox (2.0+ for standard corners, 3.5+ for elliptical corners), Opera 10.5+, Safari 3.0+, IE 9

Property: border-radius

Vendor prefixes: -webkit-border-radius, -moz-border-radius

Example usage (even corners with a radius of 5 pixels):

.somediv {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; }

Fallback behavior: rounded corners will display square.

Wordpress login button16
WordPress log-in button in IE (left) and Google Chrome (right).

Without the hassle of extra divs or JavaScript or a lot of well-placed, well-sliced images, we can give elements rounded corners with the use of the straightforward border-radius property.

What about browsers that don’t support border-radius? The easiest answer is, don’t bother. Is having rounded corners in unsupported browsers really worth the hassle? If it is, then you need only do what you’ve been doing for years: JavaScript hacks and images.

Could this property trip you up? Actually, border-radius is pretty straightforward. Be careful using it on background images, because there are certainly some bugs in some browser versions that keep the corners of images from appearing rounded. But aside from that, this is one of the best-supported CSS3 properties so far.

Border Image

Support: Google Chrome 7.0+, Firefox 3.6+, Opera 11, Safari 3.0+, no support in IE

Property: border-image, border-corner-image

Vendor prefixes: -webkit-border-image, -moz-border-image

Example usage (a repeating image with a slice height and width of 10 pixels):

.somediv {
	-webkit-border-image: url(images/border-image.png) 10 10 repeat;
	-moz-border-image: url(images/border-image.png) 10 10 repeat;
	border-image: url(images/border-image.png) 10 10 repeat; }

Fallback behavior: shows standard CSS border if property is set, or no border if not specified.

CSS3.info border image17
A border-image demo on CSS3.info18. The bottom paragraph shows a standard property of border: double orange 1em.

The border-image property is less heralded among the new properties, partly because it can be a bit hard to wrap your head around. While we won’t go into detail here, consider the image you are working with, and test a few variations before implementing the property. What will the border look like if the content overflows? How will it adjust to the content? Put some thought into your choice between stretch and repeat.

Experiment with an image before applying a border to make sure that everything is correct, and test different sizes and orientations to see how a repeating border looks.

Border image example19
A border image in use on Blog.SpoonGraphics20. The image on the left is the base image for the border.

There isn’t much in the way of fallbacks, aside from the traditional method of coding for eight slice-image borders, mapped out with extra containing divs. This is a lot of work and is really unnecessary. Selecting an appropriate border color and width should be a sensible fallback for browsers without border-image support.

Box Shadow

Support: Google Chrome 7.0+, Firefox 3.6+, Safari 3.0+, IE 9

Property: box-shadow

Vendor prefixes: -webkit-box-shadow, -moz-box-shadow (-moz no longer needed as of Firefox 4)

Example usage (showing a black shadow, offset down by 10 pixels and right by 10 pixels, and with a blur radius of 5 pixels):

.somediv {
	-moz-box-shadow: 10px 10px 5px #000;
	-webkit-box-shadow: 10px 10px 5px #000;
	box-shadow: 10px 10px 5px #000; }

Fallback behavior: shadow is not displayed.

Box shadow allows you to quickly and easily add a little shadow to your elements. For anyone who has used shadows in Photoshop, Fireworks or the like, the principles of box shadow should be more than familiar.

CSS3 box shadow21
A subtle box shadow on the left, and a selective borders fallback on the right.

In its absence? You could use selective borders (i.e. a left and bottom border to imitate a thin box shadow).

.somediv {
	-moz-box-shadow: 1px 1px 5px #888;
	-webkit-box-shadow: 1px 1px 5px #888;
	box-shadow: 1px 1px 5px #888; }

.no-boxshadow .somediv {
	border-right: 1px solid #525252;
	border-bottom: 1px solid #525252; }

RGBa and HSLa

RGBa support: Google Chrome 7.0+, Firefox 3.0+, Opera 10+, Safari 3.0+, IE 9

HSLA support: Google Chrome 7.0+, Firefox 3.0+, Opera 10+, Safari 3.0+

Property: rgba, hsla

Fallback behavior: the color declaration is ignored, and the browser falls back to the previously specified color, the default color or no color.

.somediv {
	background: #f00;
	background: rgba(255,0,0,0.5); }

In the example above, both background declarations specify the color red. Where RGBa is supported, it will be shown at 50% (0.5), and in other cases the fallback will be to the solid red (#f00).

24ways.org22
24 Ways23 makes great creative use of RGBa.

While there is broad support for opacity, its downside is that everything associated with an element becomes transparent. But now we have two new ways to define color: RGBa (red, green, blue, alpha) and HSLa (hue, saturation, light, alpha).

Both offer new ways to define colors, with the added benefit of allowing you to specify the alpha channel value.

The obvious fallback for RGBa and HSLa is a solid color; not a problem, but the main thing to watch out for is legibility. A semi-transparent color can have quite a different tone to the original. An RGB value shown as a solid color and the same value at .75 opacity can vary massively depending on the background shade, so be sure to check how your text looks against the background.

Text legibility with opacity24
Changing transparency can affect the legibility of overlaid text.

If transparency is essential, you could also use a background PNG image. Of course, this brings with it the old IE6 problem, but that can be solved with JavaScript.

Transform

Support: Google Chrome 7.0+, Firefox 3.6+, Opera 10.5+, Safari 3.0+

3-D transforms support: Safari

Property: transform

Vendor prefixes: -o-transform

Example usage (rotating a div 45° around the center, and scaling it to half the original size — for illustration only, so the translate and skew values are not needed):

.somediv {
	-webkit-transform: scale(0.50) rotate(45deg)
	   translate(0px, 0px) skew(0deg, 0deg);
	-webkit-transform-origin: 50% 50%;
	-moz-transform: scale(0.50) rotate(45deg)
	   translate(0px, 0px) skew(0deg, 0deg);
	-moz-transform-origin: 50% 50%;
	-o-transform: scale(0.50) rotate(45deg)
	   translate(0px, 0px) skew(0deg, 0deg);
	-o-transform-origin: 50% 50%;
	transform: scale(0.50) rotate(45deg)
	   translate(0px, 0px) skew(0deg, 0deg);
	transform-origin: 50% 50%; }

Fallback behavior: the transform is ignored, and the element displays in its original form.

Transforms on WestCiv25
Westciv26 offers a useful tool for playing around with transforms.

The transform property gives you a way to rotate, scale and skew an element and its contents. It’s a great way to adjust elements on the page and give them a slightly different look and feel.

A simple fallback in the absence of an image-based transform is to use an alternative image that is already rotated. And if you want to rotate content? Well, you can always use JavaScript to rotate the element. Another simple alternative is to rotate the background element in an image editor beforehand and keep the content level.

We’ve gotten by with level elements for so many years, there’s no reason why people on old browsers can’t continue to put up with them.

Animations and Transitions

Transitions support: Google Chrome 7.0+, Firefox 4.02, Opera 10.5+, Safari 3.0+

Animations support: Google Chrome 7.0+, Safari 3.0+

Property: transition

Vendor prefixes: -webkit-transition, -moz-transition, -o-transition

Example usage (a basic linear transition of text color, triggered on hover):

.somediv:hover {
	color: #000;
	-webkit-transition: color 1s linear;
	-moz-transition: color 1s linear;
	-o-transition: color 1s linear;
	transition: color 1s linear; }

A basic animation that rotates an element on hover:

@-webkit-keyframes spin {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
	}

.somediv:hover {
	-webkit-animation-name: spin;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 10s; }

Fallback behavior: both animations and transitions are simply ignored by unsupported browsers. With animations, this means that nothing happens, and no content is animated. With transitions, it depends on how the transition is written; in the case of a hover, such as the one above, the browser simply displays the transitioned state by default.

Future of Web Design 404 page27
The 404 page28 for the 2010 Future of Web Design conference attracted attention for its spinning background. Visit the website in IE and you’ll see a static background image.

Animations and transitions in CSS3 are slowly seeing more use, from subtle hover effects to more elaborate shifting and rotating of elements across the page. Most effects either start right at page load or (more frequently) are used to enhance a hover effect. Once you get down and dirty with animations, there’s great fun to be had, and they’re much more accessible to designers now than before.

Starting off small with the CSS3 transition property is best, subtly transitioning things such as link hovers before moving on to bigger things.

Once you’re comfortable with basic transitions and transforms, you can get into the more involved animation property. To use it, you declare keyframes of an animation with @-webkit-keyframes and then call this keyframe animation in other elements, declaring its timing, iterations, etc. Note that animations work better with CSS3 transforms than with other properties, so stick to transform and translate rather than shifting margins or absolute positioning.

Of course, people have been animating with JavaScript for years. But if you want to do something as simple as animating a hover state, then it hardly seems worth the extra coding. The simplest thing to do for unsupported browsers is to specify a state for hover, without any transition to it.

Font Face (not new in CSS3)

Support for different font formats: Google Chrome 7.0+, Firefox 3.1+, Opera 10+, Safari 3.1+, IE 6+

Property: @font-face

Example usage (a @font-face declaration for Chunk Five, an OTF font, and calling it for h1 headings):

@font-face {
	font-family: ChunkF; src: url('ChunkFive.otf'); }

h1 {
	font-family: ChunkF, serif; }

Fallback behavior: just as when any declared font isn’t available, the browser continues down the font stack until it finds an available font.

New Adventures in Web Design29
The New Adventures in Web Design30 conference serves fonts from Typekit31.

Okay, this isn’t strictly new to CSS3. Many of you will point out that this has been around as long as IE5. However, text replacement is certainly starting to see increased usage as browser makers roll out increased support for @font-face.

One issue that @font-face suffers from is that a font isn’t displayed on the screen until the browser has downloaded it to the user’s machine, which sometimes means that the user sees a “flash of unstyled text” (FOUT). That is, the browser displays a font from further down the stack or a default font until it has finished downloading the @font-face file; once the file has downloaded, the text flashes as it switches to the @font-face version. So, minimizing the flash by stacking fonts of a similar size and weight is important. If the stack is poorly compiled, then not only could the text be resized, but so could containing elements, which will confuse users who have started reading the page before the proper font has loaded.

The good news is that Firefox 4 doesn’t has a FOUT any longer, IE9, however, does have a FOUT but WebInk has written a script FOUT-B-GONE32 which takes these facts into account and helps you hide the FOUT from your users in FF3.5-3.6 and IE.

TypeKit example33
On his blog, Web designer Florian Schroiff34 uses @font-face to serve the Prater font (bottom), falling back to Constina, Georgia (top) and Times New Roman.

Many font delivery services, including TypeKit35 and Google Web Fonts36, deliver their fonts via JavaScript, which gives you control over what is displayed while the font is being downloaded as well as what happens when the font actually loads.

Because browsers wait until the full file of a font kit has loaded before displaying it, plenty of services allow you to strip out unnecessary parts of the kit to cut down on size. For example, if you’re not going to be using small caps, then you can strip it out of the file so that the font renders more quickly.

Advanced Selectors

Support (varies depending on the selector used): Google Chrome 7.0+, Firefox 3.6+, Opera 9.0+, Safari 2.0+, IE 6+

Property: many, including :nth-of-type, :first-child, :last-child, [attr="…"]

Example usage (coloring only links that point to Smashing Magazine, and coloring odd-numbered rows in tables):

a[href*=smashingmagazine.com] {
	color:#f00; }

tr:nth-of-type(odd) {
	background: #ddd; }

Fallback behavior: In the absence of support for advanced selectors, the browser does not apply the targeted style to the element and simply treats it as any other element of its type. In the two examples above, the link would take on the standard link properties but not the specified color, and the odd-numbered table rows would be colored the same as other table rows.

Advanced selectors are a great tool for reducing the code on a website. You will be able to get rid of many presentational classes and gain more control of the selections in your style sheet.

Using Selectivzr, you can get older browsers to support these advanced selectors, which makes the selectors easier to use and more robust.

Using nth type selectors37
We can easily assign styles using nth-type selectors. However, because the styles in this example are tied directly to the content, sticking to class names would be better, unless you are 100% certain that the order of words won’t change.

Abandoning classes and IDs altogether in favor of nth-type is tempting. But don’t throw them away just yet. Use advanced selectors when an element’s style is based on its location in the document or a series; for example, using nth-type(odd) for table rows or using last-of-type to remove some padding at the bottom of a list.

If an element’s style is based on its content, then stick with classes and IDs. That is, if inserting a new element or changing the order of items would break the style, then stick with the old method.

However, if an element is already sufficiently styled, then you probably don’t need an additional class or ID at all (nor an advanced selector, for that matter).

Columns

Support: Google Chrome 7.0+, Firefox 2.0+, Safari 3.0+, Opera 11.10+

Property: column-count

Vendor prefixes: -webkit-column-count, -moz-column-count

Example usage (splitting content into three columns):

.somediv {
	-moz-column-count: 3;
	-webkit-column-count: 3;
	column-count: 3; }

Fallback behavior: in the absence of support for multiple columns, the browser spreads the content across the full width that the columns would have taken up.

CSS columns on yaili.com38
Multiple columns and their fallback on Inayaili de León39’s website.

This property give you a nice easy way to spread content across multiple columns. The technique is standard in print, and on the Web it makes it easy to read content without needing to scroll. But you didn’t need me to tell you that, did you?

Because the property’s main purpose is to allow users to read horizontally without scrolling, first make sure that your columns aren’t too tall. Having to scroll up and down to read columns not only defeats their purpose but actually makes the content harder to read.

There are some JavaScript solutions for multiple columns. For older browsers, though, there’s generally no need to stick with a multi-column layout; rather, you could consider sensible alternatives for fallbacks.

CSS columns tweetcc.com40
Without support for multiple columns, the block quotes on tweetCC41 change in style.

In the absence of CSS3 support, the browser will flow content across the full width of the container. You’ll want to be careful about legibility. It can be very heard to read content that spans the width of an area that is intended to be broken into three columns. In this case, you’ll want to set a suitable line length. There are a few ways to do so: increase the margins, change the font size or decrease the element’s width. Floating elements such as images and block quotes out of the flow of text can help to fill up any leftover space in the single column.

Gradients

Support: Google Chrome 7.0+ for -webkit-gradient, Google 10+ for -webkit-linear-gradient and -webkit-radial-gradient, Firefox 3.6+, Safari

Property: linear-gradient, radial-gradient

Vendor prefixes: -webkit-gradient, -webkit-linear-gradient, -webkit-radial-gradient, -moz-linear-gradient, moz-radial-gradient

Example usage (a linear white-to-black gradient running from top to bottom — notice the lack of -linear- in the Webkit declaration):

.somediv {
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,
	  from(#ffffff), to(#000000));
	background-image: -webkit-linear-gradient(0% 0%, 0% 100%,
	  from(#ffffff), to(#000000));
	background-image: -moz-linear-gradient(0% 0% 270deg,
	  #ffffff, #000000);
	background-image: linear-gradient(0% 0% 270deg,
	  #ffffff, #000000); }

A radial gradient running from white in the center to black on the outside:

.somediv {
	background-image: -moz-radial-gradient(50% 50%, farthest-side,
	  #ffffff, #000000);
	background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350,
	  from(#ffffff), to(#000000));
	background-image: -webkit-radial-gradient(50% 50%, 0, 50% 50%, 350,
	  from(#ffffff), to(#000000));
	background-image: radial-gradient(50% 50%, farthest-side,
	  #ffffff, #000000); }

Fallback behavior: the browser will show the same behavior as it would for a missing image file (i.e. either the background or default color).

CSS gradient generator42
ColorZilla’s Ultimate CSS Gradient Generator43 offers a familiar interface for generating gradients.

Ah, the good ol’ Web 2.0 look, but using nothing but CSS. Thankfully, gradients have come a long way from being used for glossy buttons, and this CSS3 property is the latest step in that evolution.

Gradients are applied the way background images are, and there are a few ways to do it: hex codes, RGBa and HSLa.

Be careful when applying a background with a height of 100% to an element such as the body. In some browsers, this will limit the gradient to the edge of the visible page, and so you’ll lose the gradient as you scroll down (and if you haven’t specified a color, then the background will be white). You can get around this by setting the background-position to fixed, which ensures that the background doesn’t move as you scroll.

Specifying a background color not only is a good fallback practice but can prevent unforeseen problems. As a general rule, set it either to one end of the gradient or to a color in the middle of the range.

Legibility is also a consideration. Making text readable against a solid background color is easy. But if a gradient is dramatic (for example, from very light to very dark), then choose a text color that will work over the range of the gradient.

Radial gradients are a bit different, and getting used to the origins and spreads can take a bit of playing around. But the same principles apply. Note that Webkit browsers are switching from the -webkit-gradient property to -webkit-linear-gradient and -webkit-radial-gradient. To be safe, include both properties, but (as we have learned) put the old property before the new one.

These issues aren’t new; we’ve been using gradients for ages. If you really need one, then the obvious fallback is simply to use an image. While it won’t adapt to the dimensions of the container, you will be able to set its exact dimensions as you see fit.

Multiple Backgrounds

Support: Google Chrome 7.0+, Firefox 3.6+, Safari 2.0+, IE 9

Property: background

Example usage (multiple backgrounds separated by a comma, the first on top, the second behind it, the third behind them, and so on):

.somediv {
	background: url('background1.jpg') top left no-repeat,
	  url('background2.jpg') bottom left repeat-y,
	  url('background3.jpg') top right no-repeat; }

Fallback behavior: an unsupported browser will show only one image, the one on top (i.e. the first in the declaration).

Lost World’s Fairs44
The fantastic Lost World’s Fairs45 website shows multiple backgrounds in its header and a solid color as a fallback.

Being able to set multiple background images is very useful. You can layer images on top of one another. And because CSS gradients can be applied as backgrounds, you can layer multiple images and gradients with ease.

You can also position background elements within dynamically sized containers. For example, you could have an image appear 25% down the container and then another at 75%, both of which move with any dynamic content.

If multiple backgrounds are essential to your website, you could insert additional elements and images into the DOM using JavaScript. But again, is this worth doing? A single well-chosen background image might work best. It could be a matter of picking the most important image or blending the images into a composite (even if this makes for a less dynamic background).

Use Only Where Needed

It’s worth repeating that CSS3 is not a necessity. Just because you can use CSS3 properties, doesn’t mean your website would be any worse off without them. Applying these effects is now so simple, and so getting carried away becomes all too easy. Do you really need to round every corner or use multiple backgrounds everywhere? Just as a film can work without 3-D, so should your design be able to work without CSS3 splashed everywhere indiscriminately. The technology is simply a tool to make our lives easier and help us create better designs.

It is a testament to those who are already using CSS3 that there are very few instances of its misuse at the moment. The websites that do seem to misuse it suggest that their designers either used CSS3 for its own sake or didn’t consider its implications on certain platforms.

In “Web Design Trends 2010: Real-Life Metaphors and CSS3 Adaptation46,” Smashing Magazine’s Vitaly Friedman notes a number of misuses of the text-shadow property.

CSS text shadow47
A less-than-ideal use of CSS3 on SramekDesign.com48.

The text-shadow property has certainly become popular. One-pixel white shadows are popping up in text everywhere for no apparent reason. As Vitaly says:

… before adding a CSS3 feature to your website, make sure it is actually an enhancement, added for the purpose of aesthetics and usability, and not aesthetics at the cost of usability.

As you become familiar with CSS3’s new properties, you will learn to recognize when and where problems occur and where the properties aren’t really necessary.

Using CSS3

CSS3 is the future of the Web, no argument about that. So, versing yourself right now in the language of the future makes sense. While IE is still the single most popular browser, it now has less than half of the market share, meaning that the majority of people no longer use it and it can no longer be used as an excuse not to explore new possibilities and opportunities.

To use CSS3 means to embrace the principle that websites need not look the same in every browser, but rather should be tailored to the user’s browsing preferences via sensible fallbacks. It isn’t daunting or inaccessible, and the best way to learn is by diving in.

Other Resources

If you would like to learn more, plenty is out there. Here are some selections to get you started.

Do you use CSS3 in your projects?


(al) (ik) (vf)

Footnotes

  1. 1 http://hardboiledwebdesign.com/
  2. 2 http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  3. 3 http://blog.vtravelled.com/
  4. 4 http://sam.brown.tc/
  5. 5 http://elliotjaystocks.com/
  6. 6 http://www.webdirections.org/resources/elliot-jay-stocks-progressive-enhancement/
  7. 7 http://www.webdirections.org/resources/elliot-jay-stocks-progressive-enhancement/
  8. 8 http://www.webdirections.org/resources/elliot-jay-stocks-progressive-enhancement/
  9. 9 http://www.modernizr.com
  10. 10 http://www.modernizr.com
  11. 11 http://css3pie.com/
  12. 12 http://css3pie.com/
  13. 13 http://selectivizr.com
  14. 14 http://selectivizr.com/
  15. 15 http://findmebyip.com/dotnet
  16. 16 http://coding.smashingmagazine.com/wp-content/uploads/2011/03/borderradius.jpg
  17. 17 http://coding.smashingmagazine.com/wp-content/uploads/2011/03/borderimagefb.jpg
  18. 18 http://www.css3.info/preview/border-image/
  19. 19 http://coding.smashingmagazine.com/wp-content/uploads/2011/03/borderimage.jpg
  20. 20 http://blog.spoongraphics.co.uk
  21. 21 http://coding.smashingmagazine.com/wp-content/uploads/2011/03/boxshadow.jpg
  22. 22 http://coding.smashingmagazine.com/wp-content/uploads/2011/03/rgba.jpg
  23. 23 http://24ways.org
  24. 24 http://coding.smashingmagazine.com/wp-content/uploads/2011/03/opacity.jpg
  25. 25 http://coding.smashingmagazine.com/wp-content/uploads/2011/03/transform.jpg
  26. 26 http://www.westciv.com/tools/transforms/index.html
  27. 27 http://coding.smashingmagazine.com/wp-content/uploads/2011/03/animation.jpg
  28. 28 http://futureofwebdesign.com/london-2010/404
  29. 29 http://coding.smashingmagazine.com/wp-content/uploads/2011/03/fontface.jpg
  30. 30 http://newadventuresconf.com/
  31. 31 http://www.typekit.com
  32. 32 http://www.extensis.com/en/WebINK/fout-b-gone/
  33. 33 http://coding.smashingmagazine.com/wp-content/uploads/2011/03/fut.jpg
  34. 34 http://blog.florianschroiff.com/
  35. 35 http://tyepkit.com
  36. 36 http://www.google.com/webfonts
  37. 37 http://coding.smashingmagazine.com/wp-content/uploads/2011/03/nth.jpg
  38. 38 http://coding.smashingmagazine.com/wp-content/uploads/2011/03/columns.jpg
  39. 39 http://yaili.com
  40. 40 http://coding.smashingmagazine.com/wp-content/uploads/2011/03/columns2.jpg
  41. 41 http://tweetcc.com
  42. 42 http://coding.smashingmagazine.com/wp-content/uploads/2011/03/gradients.jpg
  43. 43 http://www.colorzilla.com/gradient-editor/
  44. 44 http://coding.smashingmagazine.com/wp-content/uploads/2011/03/multiplebg.jpg
  45. 45 http://lostworldsfairs.com/
  46. 46 http://www.smashingmagazine.com/2010/05/20/web-design-trends-2010-real-life-metaphors-and-css3-adaptation/
  47. 47 http://coding.smashingmagazine.com/wp-content/uploads/2011/03/text-shadow.jpg
  48. 48 http://www.sramekdesign.com/
  49. 49 http://hardboiledwebdesign.com
  50. 50 http://books.alistapart.com/products/css3-for-web-designers
  51. 51 http://findmebyip.com/dotnet
  52. 52 http://www.css3.info/
  53. 53 http://www.w3.org/blog/CSS
  54. 54 http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/
  55. 55 http://www.smashingmagazine.com/2010/12/10/why-we-should-start-using-css3-and-html5-today/
  56. 56 http://net.tutsplus.com/sessions/css3-mastery/
  57. 57 http://polldaddy.com/poll/5008413/
  58. 58 http://polldaddy.com/features-surveys/

↑ Back to topShare on Twitter

Dave Sparks is a web designer and developer who has dabbled on the web for over 10 years with more than six years of commercial experience. He is a part-timer who freelances and does work for Armitage Online. He can be found writing about various topics at Kamikazemusic.com and tweeting as @dsparks83. He also runs long distances, drinks lots of tea and spends time flying planes in his day job.

Advertising
  1. 1

    Elizabeth Kaylene

    May 3, 2011 7:39 am

    “With IE still the single most popular browser…”

    This is incorrect, unless it’s still 2008. (; http://www.w3schools.com/browsers/browsers_stats.asp

    -7
  2. 2

    You make me understand CSS3 a little bit more.

    Now I can talk about the changes I’ll like on my website with CodeMyConcept.

    Thanks!

    0
  3. 3

    Jean Théoret

    May 3, 2011 7:54 am

    Interesting post, but I think you omit the problem emerging from the typical relation between the client, the designer and the developper, which look like that:
    The designer produce one (and only one) design, show it the client who approves it (after many changes), and then the developper integrates the design in HTML.
    What happens if the client uses IE6 (or even 7 or 8), and do not see in the website any of the nice little rounded shaded things he saw in the design ? He will not be happy, and he will be right: those little things MAKE the design.
    So should the designer create 10 different designs, one for every browser ? And show them to the client ? Good luck…

    8
  4. 4

    I think you touch on a fundamental here Jean, and that is being up front with the client about a design and what will be shown in which browser. Stating the limits of IE6 as a browser early on should be done in this case, it also shouldn’t be a cut off between the designer and developer, they should both be involved from the start. There’s no need to create designs for every browser just be honest about it all.

    This is also a major argument around designing in the browser, or at least presenting design to a client mocked up in a browser. This way they’ll sign off what they see in their own browser.

    As far as my work is concerned my standard contract states what level of design support you can expect in each browser.

    4
  5. 5

    Hello,

    columns is (greatly) supported by Opera 11.10, not just Google Chrome 7.0+, Firefox 2.0+, Safari 3.0+

    1
  6. 6

    Thanks Raphael you’re quite right Opera have introduced column support in 11.10 – not sure how I missed that as they document their support so well.

    0
  7. 7

    Great write up Dave :)

    I am happy using and enhancing sites with bits and pieces of CSS3 but like many find clients still struggle to grasp that there are even different browsers out there let alone that sites can look different these days.

    The increasing reliance on JS to make things work is also a slight concern I must admit.

    I see a lot of designers forget that rounded corners and drop shadows are not enhancements per se (see http://t.co/P4S2QE3). They’re just design elements that should be used appropriately in projects like anything else :)

    Cheers,

    J.

    0
  8. 8

    Vitaly Friedman

    May 3, 2011 8:20 am

    Thanks, Raphael, the article is updated now.

    1
  9. 9

    I don’t get the point of using Modernizr. Your example with gradients is silly. If I’d just served the old good background image to all browsers, I’d save an HTTP request for Modernizr and time to google what is the syntax of CSS gradients and why the hell is it different in every browser (and even in different versions of one browser).
    CSS3 PIE is much more usable. However, it’s not only Internet Explorer what doesn’t support some parts of CSS3. I use Firefox 3.5 (I’m Debian user) and I experience problems with some sites that use multiple backgrounds or gradients. Do you webdevelopers respect me as your visitor? Personally, I hate this modern but not always backward-compatible web. The idea of “Web Sockets. We are the first” video can be simply applied to CSS3.

    1
  10. 10

    Sebastian Green

    May 3, 2011 8:33 am

    Great post. Full of detail. It must take you ages to compile all your posts. Please don’t stop

    1
  11. 11

    The idea of using CSS3 now is using it and making sure it is backwards compatible, maybe not in a pixel perfect way. If you are having problems with sites where people have implemented these things but not had sensible fall backs in place then they’re using it wrong.
    For the gradients if it’s not an essential part of the design then there’s no need to load an image in it’s place, you’ve saved the weight of loading that back up image then.
    There was an interesting article to do with page weight and speed with CSS3 and traditional sites posted on the site not so long ago – http://www.smashingmagazine.com/2011/04/21/css3-vs-css-a-speed-benchmark/

    3
  12. 12

    “With the arrival of IE9, Microsoft has signalled its intent to work more with standards-based technologies.” ??

    With ie9 microsoft signalled shit. They only made clear for the severled time that they absolutely just can not make a desent browser wich, like all the others, just supports new technologies like css3… period.

    I realy don’t know what the hell they are thinking at microsoft.

    0
  13. 13

    Christopher Anderton

    May 3, 2011 9:37 am

    Also, i tend to tell the client that if they drop the IE6 support (because it’s considered retroware. Even if some still using it.) they will also save some money. To support IE6 is time consuming and i can cut plenty of working hours to skip IE6 support (to make it look just like in “modern” browsers that is). That is also financial beneficial for the client.

    However, i always have a simple basic support for IE6. But that’s it.

    0
  14. 14

    Sallee Design

    May 3, 2011 9:44 am

    I personally use html5 boilerplate that already includes the awesome modernizr. Then I do Graceful Degradation for ie7 or 6+ depending on the client. I do use ie fallbacks for every rgba call and adapt just when necessary (I don’t adapt round corner, box shadows and image border for ie…)

    1
  15. 15

    Christopher Anderton

    May 3, 2011 9:49 am

    IE9 is a step in the right direction. However, i said it before. They support lot’s of CSS3, but not the common text-shadow property that is used (and misused) a lot on the web. You can think that text-shadow support is a small and silly thing to argue about. But it shows that the IE developers is not a jour with those who designs the web.

    And one more thing that is really troublesome with IE9 (except that it doesn’t support commonly used Windows versions) is that compared to the competition, IE is updated in a extremely slow fashion when it comes to new addition to the rendering engines. When IE10 comes out, IE9 is gonna be antique. I hope that’s not the case. But the track record of Microsoft tells other things.

    0
  16. 16

    I’m quoting wikipedia here (eek) but http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
    It shows a good variety of browser usage stats, all well referenced, there are a few places where Firefox is top, but mostly IE is still slightly ahead – not for much longer maybe!

    7
  17. 17

    I think the reliance of JavaScript can be a concern for some and the main way to address that is by making sure the coding underneath is sensible and well put together.

    In terms of helping clients understand the difference in browsers the most effective tool is literally at your finger tips, your mobile phone and a tablet like the ipad are the easiest ways to get clients thinking about different browsers and appearances.

    0
  18. 18

    Very good article thanks, HTML 5 + CSS is really getting powerful now!

    1
  19. 19

    Those stats are specific to w3schools.

    2
  20. 20

    “A lot about CSS3 can be compared to 3-D technology. They are both leading-edge technologies that add a lot to the experience.”

    The author lost all credibility with me here. :-)

    I’ve started using CSS3 with some of my projects—mostly just gradient and rgba backgrounds. Rather than using a hack like CSS PIE though, I just fall back to an image:

    .my-element { background: rgba(0,0,0,0.5);}
    .no-rgba .my-element { background: url(rgba-0-0-0-50.png); }

    Sure, extra image requests decrease performance, but I’m not going to sweat performance on users that are using archaic browsers; they probably have more problems than a few HTTP requests.

    1
  21. 21

    Great overview. Well put together. And I appreciate the closing – not to abuse CSS3. It’s just like effects in Photoshop for some people. You don’t have to put a drop shadow or bevel on every single layer and object. Use it only where it’s needed and will actually be useful.

    0
  22. 22

    Browser Stats are all about your visitors;

    W3schools has a different set of visitors than I do for instance, working for a government agency (as a webmaster) that serves other government employees (we handle retirement) means 72% of my visitors use IE (from IE6 to 9) and the rest is FF and Chrome/Safari.

    This is because many visit me from their work (IE use is mandatory in many gov work places) and those who aren’t at work are of retirement age (over 60) and typically use the browser that came with their computer (again most commonly Win PC with IE).

    My Personal site see stats that are closer to W3Schools with FF owning the majority IE a close second and Chrome/Safari third.

    SO again, Browser stats are all about your niche and those who visit you :)

    10
  23. 23

    Great article, much better then the last css3 article. My concern about using css3 right now is that you will still have to use fallback images for IE, maybe unless your designing/developing for a simple small gig that doesn’t care about x-browser differences or if the design isn’t very graphic intensive. But if your working with a large organization, they will want their branded site to look consistent throughout all browsers. I like to use css3 for minor design elements like small buttons, form elements, etc..

    0
  24. 24

    Rgba backgrounds can be made to work in IE using gradients filters and setting the two colours to be the same. Microsoft filters use ARGB (instead of RGBA) and the alpha is expressed as a hex digit.

    e.g. background of 50% black:

    div {
    background: #000000;
    background: rgba(0,0,0,0.5);
    background:none;
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff); /* IE8 */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff); /* IE6+7 */
    zoom: 1; /* Enables hasLayout on the element (or the filter won’t work) */
    }

    5
  25. 25

    The only useful info you can get from stats like this are the trends. It’s a solid indicator of which browsers are increasing market share and which are losing market share. But it’s not an accurate picture of the actual market share among all web users.

    0
  26. 26

    “The main issue with all of the solutions above is that they’re based on JavaScript”
    CSS3PIE uses a .htc file and the JavaScript version is for those with problems serving .htc files.
    The percentage of users with JS disabled is very low: http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/
    Some might choose to ignore this 1% completely, along the lines of the IE6 Countdown page: “This website is dedicated to watching Internet Explorer 6 usage drop to less than 1% worldwide”

    2
  27. 27

    One persistent issue that I have had with @Font-Face is the differences in rendering processes followed by browsers. The worst bit is that it isn’t consistent.

    For instance, a font may render well in Firefox and Webkit, but poorly in Internet Explorer.

    But for another font, it will render well in Internet Explorer and Webkit, but poorly on Firefox.

    One constant is that Mac OS seems to do a good job of rendering fonts regardless of browser.

    The work around that I use (on top of the @ Font-Face rule) is the use of Cufon. The major advantage of cufon is that it renders text such that it looks pretty much straight out of photoshop. Clean, crisp, beautiful. It works on all the browsers I’ve tested (from memory, even IE6). CSS declared psuedo hover states work. The only catch is that Cufon rendered text is not selectable, so it is not suitable for body copy.

    I use a similar mantra to that discussed in the article. First I use @Font-Face to load a font, then declare a nice font stack. Then I put Cufon over the top of @ Font-Face and declare within the Cufon Init which classes/id’s to target.

    This ends up a little bit heavy on load time, but for work that needs to look PERFECT, I have not found a better workaround.

    Does anyone know a better way to address this problem?

    0
  28. 28

    You can actually use linear gradients in IE all the way down to IE6 and they work just fine. The Ultimate CSS Gradient generator you have in one screenshot even churns out the required filter code.

    The only limitations are that the IE filter does not support anything but linear gradients and even those only allow a top and bottom color, nothing in between. Still, for most things requiring linear gradients it works well.

    Likewise simple 2D transforms work in IE but the rendering isn’t very pretty and it’s rather inflexible. The syntax for them is an awful matrix transform. Thankfully there are smart people who have deciphered them and offer a converter: http://www.useragentman.com/IETransformsTranslator/doc.html

    1
  29. 29

    Thanks for the info, Dave — good job.

    One small correction: Transforms are supported in IE9 using the “-ms-” vendor prefix. See their IE9 dev guide for details.

    3
  30. 30

    Fantastic!

    0
  31. 31

    Those stats aren’t that great you know? http://gs.statcounter.com/ is way better and more accurate.

    Lastly, stats vary greatly from site to site. You should always look into your (or your client’s) analytics data before jumping to conclusions.

    1
  32. 32

    Tomáš Kapler

    May 4, 2011 1:35 am

    IMO the best wa, especialy in projects, where we are not generating money (blogs …) especialy the ones focused on webdesign etc. is to PUSH HARD users to simple upgrade their browser. Actually i do not care if user with 10 years old IE6 do not see my rounded borders. If he wants 10 years old experience, it is HIS problem, not mine and i will not invest even a blink of second to support him. It private blog about webdesing I plane to go even further and BLOCK such idiots (show big full page window with explanation why is their stupidity waste my time, so if they want to find something new in webdesign, they first have to update).

    -3
  33. 33

    Hi Dave

    Thanks for an interesting article. I particularly liked your “use only where needed” suggestions. As a luddite using an “archaic browser” (on an equally obsolete OS) I occasionally come across pages that break catastrophically. So what do I do? Switch on the “less obsolete” PC alongside me? No – I go elsewhere.

    Youtube “reads” my browser configuration incorrectly but allows me to override it’s diagnosis and use “the more complex” page – which actually works fine! Other, more arrogant sites (including Google and the BBC) don’t give me the option to find out if it works (although they both used to work fine before they got “clever” and the messages started to appear).

    And although I’m on a reasonably fast broadband, some sites are so slow because they want to play video at me (including the BBC again), that most of the time I have javascript disabled. Which means that some sites probably don’t work properly. OK, if I notice, and I need the feature (such as for placing an order), then I’ll probably turn it back on. But the site needs to convince that it’s worth it by letting me know that it actually has what I want. The boutique may look good, but if I’m trying to buy sausages, what’s the point? As far as I’m concerned, a site that just gives me a blank page while a Flash “introduction” loads is just as broken as a page that gives a 404 error.

    And in some extreme cases, I even disable the CSS in order to get a reasonable response time.

    So, if a website doesn’t work properly, I will likely take my business elsewhere.

    But to “work properly” in my case doesn’t mean “has to have rounded corners” on buttons. It means having the content that I’m looking for, readily available, and with a reasonable response time.

    So by all means add expensive “twiddly bits” to a basically sound design, but taking a “niche design” and then attempting to make it work on older kit – no.

    And I like your 3D TV analogy. Unfortunately, while their are people (sounds better than the word I was originally going to use) that buy a Sony phone because the Sony adverts tell them “it’s the ultimate multimedia platform”, we will probably have clients that want their website to look the same on a large screen AND “the ultimate multimedia platform”.

    And what about the iPad? No flash there, but does it matter?

    So, even though I’m using an archaic browser (you listening Ryan?) with javascript OFF, I’m now going to press “post comment” and see what happens….

    Steve

    0
  34. 34

    @Tomáš Kapler: your opinion it sounds like “hey you, with your old 10-year car, get off this road!”. As for me, i really hate such “web-designers”!!! User gots right to have a choice! And it’s YOUR problem to make all the sites, you made , look normal in ALL browsers.
    @James: I also noticed such problem. Now i’m looking for a “simplier” solution

    2
  35. 35

    Xanada Hiruyuki

    May 4, 2011 4:55 am

    Wow, this is a great post.

    Just by reading the entire blogs helps me get the whole picture how to continue using css3, without worrying the old browser “i mean IE” :)

    Using CSS3 saves a lot of time in working with the Designs, but worrying about IE diplay takes about 70% of your time fixing the display and browser compatibility issue.

    Microsoft rocks on Software, but when it comes to Web, they Sucks . . .

    0
  36. 36

    Thank you for this post! PIE is a really great tool for supporting CSS3 in Internet Explorer, just works perfectly for me. Since the new website I’ll have to create is all about rounded corners this will save me LOTS of time since I will simply use CSS3 :)

    0
  37. 37

    As long as microsoft is unwilling to make their updating faster we will always struggle with the same css stuff like now

    0
  38. 38

    I agree with Jean. I happen to work in a company that receives specific design specifications that must be respected to the pixel and provide a consistent look in all circumstances. That means the same pixel width, color, gradient, corner radius, etc in all browsers, in the Windows Forms version and the WPF version (no matter the system theme). I am afraid that in this kind of stiuation, a knife is the only fallback solution :D

    Also, I must say that on a decent computer with Chrome, the nice 404 page with the rotating Earth takes 100% of one of the hyperthreaded virtual processors on the machine. It would be great if all these features would be implemented with an eye on performance, not only design. Javascript is fast now, but the browser functionality if still terribly slow. I am willing to bet that a javascript canvas implementation would have been orders of magnitude more performant.

    1
  39. 39

    Nice article, Dave. It is always great to see people taking the time to write such an informative and thorough post.

    0
  40. 40

    I recently moved towards HTML mockups instead of relying upon a static image to present designs. This way, no matter what browser the client is using, they’ll have an accurate visual representation of the finished product. I find that explaining browser differences and graceful degradation is much easier for the non-technically oriented client when I can show them all of the differences in each browser when I present.

    0
  41. 41

    Jason Chandler

    May 4, 2011 10:43 am

    A better aggregate source for browsers is here: http://gs.statcounter.com/#browser_version-ww-monthly-201005-201104-bar

    Popularity for IE is still quite high but the data suggests is safe to use CSS3.

    0
  42. 42

    Ryan, glad to hear you’re using CSS3 properties already in your work.

    As for what you say about the article
    ———
    “A lot about CSS3 can be compared to 3-D technology. They are both leading-edge technologies that add a lot to the experience.”

    The author lost all credibility with me here. :-)
    ———

    I’m not what the problem is? It is simply an extension of the analogy comparing to TV to show how CSS3 is in many ways cutting edge and an improvement on previous technologies. I’m in no way trying to say that CSS3 is making your design 3D or imply anything such as that. I do mention as well that to consider CSS3 simply a visual improvement is wrong, it offers us increasingly straightforward and easy ways to do things we are already doing.

    0
  43. 43

    Tomáš Kapler

    May 4, 2011 1:17 pm

    arbuzik88: it is completely different. I do not care what car anyone using if he is not devastating my car and cars of the others. If making perfect CSS3 web takes me 3 hours and hacking it for compatibility for few percent of idiots with 10 years old browser took me 3 more hours, why should i do it? Those few percent of idiots devastate not only my time, but also the experience for all the others, as i could do much better web in 6 hours.

    1
  44. 44

    Great post.. thank you so much

    0
  45. 45

    Excellent article, comprehensive and informative. Thank you Dave!

    0
  46. 46

    @JM: by using CSS3 instead of images, you are causing less HTTP requests, not more. Since a website using images for “CSS3 effects” will commonly use more than 1 background image (as opposed to 1 HTTP request for Modernizr). Unless we’re talking about one large sprite image. But I doubt the file size of such an image will be smaller than the Modernizr JS file

    @Dave Sparks:
    Nice and interesting article.

    Discovered one spelling mistake: “Firefox 4 doesn’t has a FOUT any longer”. (doesn’t have a FOUT)

    Just letting you know, not breaking you down ;)

    I have one question: do browsers that support their specific CSS3 tags (-moz-…, -webkit-…, -o-…) also support the “regular” tags (without the prefix).
    If not, why do browser vendors implement it with a prefix, and not just the regular tag?
    If they do support the regular tags, what’s the difference between the regular ones and those prefixed? Do they display different?
    In short: what is the purpose of prefixing CSS3 tags?

    Thx in advance.

    0
  47. 47

    Very helpful.
    I didn’t know “@font-face”.
    Just after reading this article, I putted it in my pages.
    Thanks a lot.

    0
  48. 48

    That’s a nice and simple idea. I can’t believe I never thought about “antique browser support” as an option on webdesigns…

    0
  49. 49

    I love the idea of using CSS 3, but in reality, until there is a fuller depth of support among the most prevalent browsers, I use it VERY sparingly. As a designer/developer (and a developer that codes others designs), I find that adding all the workarounds takes just as much time as older conventions, at least for me. That’s because I am quick with the older conventions and not as up on the newer ones in CSS 3.

    The thing that bugs me the most is all the hacks a developer must know to fix things between browsers. I try to avoid “features” that require hacks as in most cases that “feature” isn’t needed on most websites. And while I am no longer worrying about IE 6 fixes, I do try to make sure that what I put out there will still come across reasonably well in IE 6. Heck, IE 7 is quickly becoming the IE 6 of today, just as damn buggy and in need of hacks.

    I look forward to a day when browsers all support the commonly accepted standards and focus more on the usability of the browser itself. As a big supporter of Firefox, I am personally not happy with the interface of FF 4. So I stick with 3.6.

    Anyway, this is a good read with great information. As the browsers start to become more compliant across the board, I will look for more ways to implement CSS 3 techniques. And since I also code other designer’s designs, its hard to explain to them how some design elements can cause trouble from one browser to another, so I just get it done with conventions I know will work.

    Thanks
    Ed

    0
  50. 50

    The fact we have prefixes is a big kettle of fish, this should give you a good insight into it all http://www.alistapart.com/articles/prefix-or-posthack/

    1
  51. 51

    I’m surprised CSS Browser Selector wasn’t mentioned in this article:
    http://rafael.adm.br/css_browser_selector/

    From the site:”CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser. ”

    Allow developers to target browsers, browser versions, platform, rendering engines, even if when JS is turned on by adding classes to the HTML tag.

    Best of all: no style hacks needed; code will now validate.

    0
  52. 52

    Unfortunately, many graphic designers think in “print” rather than in “interactive”. Consequently , you get the overuse of drop shadows, rounded corners, too many gradients, etc…. all on one design.

    I’m not criticizing their talent. I couldn’t do what they do. Rather it can be a big paradigm shift in thinking. And many are missing this some of these critical concepts when designing for the browser rather than print.

    0
  53. 53

    The main reason I didn’t look at anything like the CSS browser selector is that I think it’s much better to be looking at the capabilities of a browser rather then singling out specific browsers and operating systems. You can’t produce a definitive list of browsers, sure you can cater for the main ones, but if you look for the support for an element then that’s a straightforward yes/no answer that applies regardless of the browser/OS.

    0
  54. 54

    I cannot see 3D because I only have vision in one eye. Movies made specifically to exploit cheap 3D tricks (i.e., conspicuously out-of-place object flying toward the camera) drive me nuts. Also, I don’t care how hard the industry pushes, it will never be cool to sit around in your living room wearing heavy battery-powered glasses just so you can see computer-generated piranhas jump at your face.

    /rant

    But I do like CSS3.

    If my clients were more discriminating, I would probably use it. They still want the first two paragraphs of sales copy to be written in title case they want it highlighted, underlined, bold, AND italic. Thank god no one supports <blink> anymore, or I bet they’d ask for that, too.

    2
  55. 55

    There’s a great little fact sheet just been put up on boagworld that gives a nicely presented way to show the benefits of enhancement to your clients http://boagworld.com/design/where-are-my-rounded-corners/

    0
  56. 56

    In short, we have vendor prefixes for much the same reason why we have public betas. When a browser uses a vendor prefix, it’s done so with the understanding that the implementation isn’t necessarily going to stay the same, but is largely stable and should be usable. Using the vendor prefix allows developers/designers to target specific browsers, instead of every browser that supports the standard directive, so that only the specific browser is affected.

    A good example of this is the gradient background, which only recently got a standardized form from the W3C, so browser implemented it in ways that were compliant with what the spec had, then made a sort of “best guess” for the missing pieces (as they do with any other CSS, really). Since the W3C ultimately went with the format like what Firefox was using, Webkit had to change their directive (hence two Webkit directives).

    Occasionally, a browser will support both, but it’s generally when in transition to only supporting the non prefixed version. The ultimate goal is to phase out the vendor prefixed version of a directive.

    1
  57. 57

    Not everyone thinks 3D adds to the experience, or necessarily an “improvement”. A lot of us (and those of us with bad enough eyesight that the 3D glasses defeat our real glasses and gives us headaches) find it to be pretty overrated, especially since the glasses are still required.

    0
  58. 58

    You don’t even need to add a class, simply declare the fallback first, then use the other methods. The CSS3-capable browsers won’t even download the image (as long as the CSS3 is with the fallback), and the non-CSS3 browsers will ignore the CSS3 directives. So you can have something like:

    .my-element {
    background: transparent url(../images/mybg.png);
    background: rgba(0,0,0,.5);
    }

    1
  59. 59

    Christian Krammer

    May 11, 2011 12:43 am

    Where, on the moon? Please show me a single corporate site where IE isn’t far ahead. Austria is quite progressive at the usage of new browsers, but the IE family still has a big projection at our corporate website.

    0
  60. 60

    Thank you both for helping me out on this one ;)

    Greets

    0
  61. 61

    6% is still using ie6. So dropping support for them will cost your client more than 6% of income. If your site is horrible in ie6 on the visitors work PC he wont visit you at home where he has ie9 installed. First impression is what counts here only if your client his product is so unique its not found elsewhere on the web he will come back.

    Lets say you charge 70 dollars a hour. And you have to work 5 hours to fix the ie6 support. If your client gets 6000 profit a year with his website. That means the 350 dollar invested in ie6 support is earned back within in a year.

    I don’t get it that your client be happy to save 350 dollars while cutting of more than 6% of their sales.

    0
  62. 62

    Great article that got to the core of my CSS3 apprehensions: what to do about IE6.
    When your clients are arm-wrestling sub-contractors, waiting for their partner to give birth and chasing unpaid invoices, having their ‘web guy’ bleating about upgrading some bit of software (“always trouble”) isn’t even going to register.
    Thanks!

    0
  63. 63

    As I find myself having more and more opinion on this topic, I want to join this dialogue in hopes of me making sure I reach the right perspective on this issue.

    For our 1550 North American website customers in every state with local audiences, our global stats, to this day, reflect IE8 (24%) and IE7 (12%) as the most popular browser versions in that order with IE total at about 55% of traffic. We should all love knowing the truth, so we can be prepared for it.

    The movie format analogy isn’t exactly right, because in the cases of rounded corners and shadows and opacity, etc, you CAN provide the same effect to give the same great details using other older, cross-browser methods all the way back to IE6. We’re just bummed it’s not the easy CSS3 way. We can deliver the same quality just using tedious methods we no longer want to use.

    Also, while we can educate our clients (as some mention), we’re not in the position to educate their visitors. It just needs to work, and ideally, be designed for everyone.

    This is really about serving quality. Would Steve Jobs have sold a nice-looking Mac in the U.S. and turn around and sell an easy, ugly one to China? No. Anyone so concerned about the global beauty of design should be thinking no less than making sure sites serve the same details in all browsers, and be proud to do so, especially when so much of design is in the details and contributes to the perception of quality. We should take it as a matter of personal pride to provide the highest-quality experience to as many as possible.

    That being said, let me present my “rounded button” argument for cross-browser design experience. Recently, we rounded our CMS buttons. Great response. The CMS felt fresher to people. Such a small change. Rounded buttons (and corners, in general) are arguably a symbol of modern web design. If I rely on CSS3 for rounding, 40ish% of visitors see a square button. Those visitors, after visiting many other sites where corner images are used for rounding (if not image buttons), may understand that rounded buttons are kind of the norm, pleasing and may be representative of modern design and, more importantly, representative of quality. All of a sudden, my square buttons, to the 40%, look less modern, outdated, obsolete, low quality and downright bad. The non-CSS3 visitor’s perception may well be that the sites where buttons are rounded are superior to mine. I may be proud of my CSS3 buttons personally and have led my client to accept it, but the visitor seeing square buttons could care less about my technique or that there is a fallback, only about the final result and quality perception. Maybe some percentage of visitors choose another development company due to the lack of quality and modernity perceived from my site’s old-fashioned square buttons.

    I may be able to tell my client that browsers will catch up, and your site will be “ready”, and it will require less bandwidth and will cost less to develop and maintain…but I’m kind of lying about all that. Mainly, it’s easier for me to build. Your site needs to be ready NOW for today’s visitors. Bandwidth for corners and png shadows is minimal (sprite those small images to reduce connections). As an experienced developer, I’ve done it all, so cost is nothing. I’m not at a loss for solutions. If it costs you much money to figure those solutions out, you may be a novice without good resources or patience to develop your own cross-browser solutions.

    So, no matter how you do it, you should be focused on providing a common experience, and not resting on the development community’s disdain of older browsers and pretending that customer education is the right path. It’s not. Worst case, you may be midleading your clients in a direction where their sites are giving off a perception of low quality to 40ish% of their site visitors.

    As for when these browsers will go away, we’ve been talking about it for years. They’re still here now. This is today. Worry about today. When the time comes to allow change, then change. When browsers finally catch up, your old sites will still work whether elegantly built or not. Put your pride aside, and help your client.

    I don’t see the JS fix as a problem. If non-CSS is 40% and JS disabled is 5%, you provide the higher quality to 35% more with nice details and have fallbacks for the 5%. Yes, you should concern yourself with JS disabled. I myself “surf” that way sometimes.

    I totally agree that there’s no need to constantly plug in shadows, gradients, rounded corners and 3D effects. To me, it’s getting old in web design. It’s not timeless. It’s just an easy effect and is getting over-used, IMO.

    If my perspective is off, please help me to right it. Obviously, it’s been on my mind as I try to steer our company. Thanks.

    4
  64. 64

    Spotify (and apple.com mostly, see menu) and many other seriously branded sites are good examples of sites that want their design details to be crossbrowser. Spotify in IE7 looks almost exactly the same as it does in Chrome. As yourself, what if it used CSS3 only for those rounded corners? How would 40% perceive the design at that point?

    I’m sure there are other good examples of too much CSS3 usage for nice details, and those sites look like real dogs in non-CSS3 browsers.

    I really think if you’re working on a serious project, you’d have to consider that. Well, maybe we should take all of our projects seriously.

    Thanks.

    2
  65. 65

    why windows vista not supported some of the css3 animation property

    0

↑ Back to top