You've already started watching Graceful Degradation
In this video, you'll learn about a cross-browser technique called graceful degradation. This concept allows you to utilize the latest standards while continuing to support older browsers.
-
0:00
[?mellow guitar music?]
-
0:03
Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com
-
0:07
Design: Browser Testing - Graceful Degradation with Nick Pettit
-
0:13
In the previous video, we took a look at several techniques
-
0:16
that can help you mitigate cross-browser issues.
-
0:19
One popular technique called "graceful degradation" allows you
-
0:22
to take advantage of advanced browser features
-
0:25
while still playing nice with older browsers.
-
0:28
Let's take a look.
-
0:29
CSS3 and HTML5 aren't just on the horizon anymore.
-
0:34
Many browsers now support a large majority of CSS3 properties
-
0:39
and HTML5 features, so it can be tempting to start using them.
-
0:44
The problem is that older browsers don't always support all of these features,
-
0:49
so simple logic might dictate that you just have to code your site
-
0:54
to the lowest common denominator so that it can work in every browser.
-
0:58
This might seem like the easiest thing to do,
-
1:01
but often times, it's easier to code for newer browsers and then make some small tweaks
-
1:06
so that your site looks presentable in other browsers.
-
1:10
With graceful degradation, certain visual elements are replaced in older browsers
-
1:16
with something that still functions and looks presentable, but maybe doesn't work
-
1:21
quite as well or look quite as good as the optimal experience
-
1:26
which is featured in more modern browsers.
-
1:29
In other words, if graceful degradation is done right, you can use modern technology
-
1:35
without sacrificing too much usability.
-
1:38
This is a fairly broad concept, so let's focus on a specific example in CSS3.
-
1:45
Let's say that you wanted to create a really awesome hover state for this page element
-
1:50
using some box shadows, transforms, and transitions.
-
1:54
When you hover over the box, it will float off the page.
-
1:57
Our target browsers are Chrome, Firefox, and Internet Explorer.
-
2:02
Let's code that up now and then step through some of the issues.
-
2:06
So you can see that we've already created our basic page here.
-
2:10
I'll switch over to my text editor and we have some basic HTML here, nothing too fancy--
-
2:17
just a wrapper div and our page element--
-
2:20
and we have some basic CSS just to kind of boot-strap the page,
-
2:24
and here's where we will be doing our CSS.
-
2:28
So to start out, I'll go ahead and select my div
-
2:33
and we will add a webkit-transition, and we want it to be applied to all properties--
-
2:41
we'll have it last for about 0.2 seconds--
-
2:44
and we want to use a linear animation curve.
-
2:48
For the hover state, we want to do a webkit-transform:
-
2:56
and we'll scale it up by about (1.1) and rotate it a little bit (3deg).
-
3:06
We also want to add a box shadow, so we'll do offsets of 5 pixels,
-
3:14
we'll do a blur radius of 20 pixels,
-
3:17
and we'll use the RGBA function and make it a black shadow,
-
3:21
and we'll put it at about half opacity.
-
3:24
So when we switch over to Google Chrome and refresh the page,
-
3:28
you can see that when we hover over our element now,
-
3:32
it floats off the page.
-
3:34
Now, this won't work in Firefox.
-
3:36
To make it work in Mozilla's browser,
-
3:38
we need to add all the same properties, but with the vendor prefixes specific to Firefox.
-
3:45
Let's switch back to the text editor, and we'll add a moz transition
-
3:52
and we want all the same properties here, so we'll just copy and paste.
-
3:57
We also want the transition to be on all the same properties,
-
4:02
so we'll copy and paste those and add them in down here.
-
4:07
We just need to change webkit- to moz-
-
4:13
and if we switch over to Firefox, we'll refresh--
-
4:18
and when I hover over, you'll notice something funny here.
-
4:23
The transform and the shadow are there, and the shadow appears to be animated
-
4:28
via the transition, but the transform is not being animated.
-
4:34
Rather, the transform just pops into place.
-
4:39
This is because as of Firefox 4, beta 1,
-
4:42
CSS3 transitions do not yet support the transform properties,
-
4:48
which is why the shadow animates but the transform does not.
-
4:52
In other words, if a CSS property is not supported in a particular browser,
-
4:57
it typically won't break the entire page.
-
4:59
Rather, it will just be ignored.
-
5:02
You have to decide for yourself and your particular situation
-
5:05
if this is acceptable or not.
-
5:07
If it is not acceptable, you have to decide how to fix it.
-
5:11
More on this in a moment.
-
5:13
Because these properties are simply ignored, it's a good idea
-
5:16
to try and isolate your usage of advanced browser technologies
-
5:20
to visual flair that can be safely ignored without obstructing usability.
-
5:26
Next up is Internet Explorer.
-
5:28
Let's see how Internet Explorer 8 handles this.
-
5:32
So I have IE8 here in VMware Fusion, and I'll just refresh the page
-
5:38
and in this case, absolutely nothing happens when you hover over the element,
-
5:43
so a fallback solution is needed.
-
5:45
You could use a javascript library, like jQuery, to animate the transform manually
-
5:50
in place of a CSS3 transform, or you could change the functionality
-
5:55
or aesthetic of your site, and simply forget about it altogether.
-
5:59
Or you could just decide that it's fine like it is
-
6:02
and it's okay if it looks different in various browsers,
-
6:05
provided usability problems are fixed.
-
6:08
These are the kinds of decisions involved with graceful degradation.
-
6:12
Aesthetics aside, the usability goal here is to indicate to the user
-
6:17
that the element has been hovered over by their cursor.
-
6:20
In Firefox, this is still indicated, but in the case of Internet Explorer,
-
6:24
nothing is indicated when you hover over,
-
6:27
so let's implement a basic fallback in CSS.
-
6:31
So we'll switch back to our text editor and let's change the background color of the element
-
6:37
when it's hovered over in IE.
-
6:39
Now, we could take a basic approach like this, where we change the background color,
-
6:48
and if we switch back to Internet Explorer and refresh, you can see
-
6:53
that the background color now changes when you hover over.
-
6:57
Now, the solution will work in IE, but the problem here is that
-
7:01
the background color will also change in browsers like Chrome and Safari
-
7:06
Here's Chrome,
-
7:08
and it will also do it in Firefox.
-
7:13
Now, this might be what you want, but in this particular instance
-
7:16
we only want the background color to change in Internet Explorer
-
7:21
and not the other browsers.
-
7:24
To handle this, we'll create a separate style sheet and use an IE conditional comment.
-
7:29
Let's switch back over to our text editor, and I've already set up
-
7:32
a separate IE style sheet here, and we'll just go ahead and take that background color
-
7:40
and remove it from our normal CSS, and in the IE CSS file, we'll select our div again
-
7:50
and we want to select the 'hover' state, and we'll drop in that background color right there.
-
7:55
Now, this won't work by itself--in our HTML we need to include this style sheet
-
8:02
and wrap it in an IE conditional comment.
-
8:05
Let's switch over to our HTML, and we want to use a similar link tag here,
-
8:13
but we want to use the IE style sheet,
-
8:16
and we need to wrap this in an IE conditional comment.
-
8:20
So we'll go ahead and do that right now.
-
8:31
And there we have it.
-
8:33
Now, when we switch back to Chrome and refresh, we can hover over the element
-
8:38
and the background color won't change.
-
8:40
The same is true in Firefox.
-
8:43
If we switch over to Internet Explorer and refresh the page,
-
8:48
you can see that the background color does indeed change in Internet Explorer.
-
8:52
That wraps it up for graceful degradation.
-
8:55
In the next video, we'll address some common problems in Internet Explorer.
-
8:59
[?mellow guitar music?]
-
9:01
Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com
You need to sign up for Treehouse in order to download course files.
Sign up