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