[?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