[?mellow guitar music?]

Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com

Design: Browser Testing - Graceful Degradation with Nick Pettit

In the previous video, we took a look at several techniques

that can help you mitigate cross-browser issues.

One popular technique called "graceful degradation" allows you

to take advantage of advanced browser features

while still playing nice with older browsers.

Let's take a look.

CSS3 and HTML5 aren't just on the horizon anymore.

Many browsers now support a large majority of CSS3 properties

and HTML5 features, so it can be tempting to start using them.

The problem is that older browsers don't always support all of these features,

so simple logic might dictate that you just have to code your site

to the lowest common denominator so that it can work in every browser.

This might seem like the easiest thing to do,

but often times, it's easier to code for newer browsers and then make some small tweaks

so that your site looks presentable in other browsers.

With graceful degradation, certain visual elements are replaced in older browsers

with something that still functions and looks presentable, but maybe doesn't work

quite as well or look quite as good as the optimal experience

which is featured in more modern browsers.

In other words, if graceful degradation is done right, you can use modern technology

without sacrificing too much usability.

This is a fairly broad concept, so let's focus on a specific example in CSS3.

Let's say that you wanted to create a really awesome hover state for this page element

using some box shadows, transforms, and transitions.

When you hover over the box, it will float off the page.

Our target browsers are Chrome, Firefox, and Internet Explorer.

Let's code that up now and then step through some of the issues.

So you can see that we've already created our basic page here.

I'll switch over to my text editor and we have some basic HTML here, nothing too fancy--

just a wrapper div and our page element--

and we have some basic CSS just to kind of boot-strap the page,

and here's where we will be doing our CSS.

So to start out, I'll go ahead and select my div

and we will add a webkit-transition, and we want it to be applied to all properties--

we'll have it last for about 0.2 seconds--

and we want to use a linear animation curve.

For the hover state, we want to do a webkit-transform:

and we'll scale it up by about (1.1) and rotate it a little bit (3deg).

We also want to add a box shadow, so we'll do offsets of 5 pixels,

we'll do a blur radius of 20 pixels,

and we'll use the RGBA function and make it a black shadow,

and we'll put it at about half opacity.

So when we switch over to Google Chrome and refresh the page,

you can see that when we hover over our element now,

it floats off the page.

Now, this won't work in Firefox.

To make it work in Mozilla's browser,

we need to add all the same properties, but with the vendor prefixes specific to Firefox.

Let's switch back to the text editor, and we'll add a moz transition

and we want all the same properties here, so we'll just copy and paste.

We also want the transition to be on all the same properties,

so we'll copy and paste those and add them in down here.

We just need to change webkit- to moz-

and if we switch over to Firefox, we'll refresh--

and when I hover over, you'll notice something funny here.

The transform and the shadow are there, and the shadow appears to be animated

via the transition, but the transform is not being animated.

Rather, the transform just pops into place.

This is because as of Firefox 4, beta 1,

CSS3 transitions do not yet support the transform properties,

which is why the shadow animates but the transform does not.

In other words, if a CSS property is not supported in a particular browser,

it typically won't break the entire page.

Rather, it will just be ignored.

You have to decide for yourself and your particular situation

if this is acceptable or not.

If it is not acceptable, you have to decide how to fix it.

More on this in a moment.

Because these properties are simply ignored, it's a good idea

to try and isolate your usage of advanced browser technologies

to visual flair that can be safely ignored without obstructing usability.

Next up is Internet Explorer.

Let's see how Internet Explorer 8 handles this.

So I have IE8 here in VMware Fusion, and I'll just refresh the page

and in this case, absolutely nothing happens when you hover over the element,

so a fallback solution is needed.

You could use a javascript library, like jQuery, to animate the transform manually

in place of a CSS3 transform, or you could change the functionality

or aesthetic of your site, and simply forget about it altogether.

Or you could just decide that it's fine like it is

and it's okay if it looks different in various browsers,

provided usability problems are fixed.

These are the kinds of decisions involved with graceful degradation.

Aesthetics aside, the usability goal here is to indicate to the user

that the element has been hovered over by their cursor.

In Firefox, this is still indicated, but in the case of Internet Explorer,

nothing is indicated when you hover over,

so let's implement a basic fallback in CSS.

So we'll switch back to our text editor and let's change the background color of the element

when it's hovered over in IE.

Now, we could take a basic approach like this, where we change the background color,

and if we switch back to Internet Explorer and refresh, you can see

that the background color now changes when you hover over.

Now, the solution will work in IE, but the problem here is that

the background color will also change in browsers like Chrome and Safari

Here's Chrome,

and it will also do it in Firefox.

Now, this might be what you want, but in this particular instance

we only want the background color to change in Internet Explorer

and not the other browsers.

To handle this, we'll create a separate style sheet and use an IE conditional comment.

Let's switch back over to our text editor, and I've already set up

a separate IE style sheet here, and we'll just go ahead and take that background color

and remove it from our normal CSS, and in the IE CSS file, we'll select our div again

and we want to select the 'hover' state, and we'll drop in that background color right there.

Now, this won't work by itself--in our HTML we need to include this style sheet

and wrap it in an IE conditional comment.

Let's switch over to our HTML, and we want to use a similar link tag here,

but we want to use the IE style sheet,

and we need to wrap this in an IE conditional comment.

So we'll go ahead and do that right now.

And there we have it.

Now, when we switch back to Chrome and refresh, we can hover over the element

and the background color won't change.

The same is true in Firefox.

If we switch over to Internet Explorer and refresh the page,

you can see that the background color does indeed change in Internet Explorer.

That wraps it up for graceful degradation.

In the next video, we'll address some common problems in Internet Explorer.

[?mellow guitar music?]

Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com