This course has been updated! We now recommend you take the CSS Grids and Flexbox for Responsive Web Design course.
Transcript from the "Retrofitting Media Queries" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Ben Callahan: So that's tables. And again, with just 100 lines of CSS, we were able to go from sort of an unusable experience at small screens to something that's very functional. You require some experimentation. So let's talk a little bit about how you might apply styles in a retrofitting scenario.
[00:00:29] We covered large resolution first in the 101 session but just as a recap, your original styles go here and then you could apply max with queries that sort of undo a lot of the layout that you've done at smaller resolutions. If you're retrofitting, this probably makes a lot of sense, right?
[00:00:49] Because this already exists. They've got a site. HTML, CSS, it's all working and this already exists. And if you could add a single CSS file. Behind a query, a media query that just had this kind of stuff in it, that'd be great. But what we found is occasionally we come across a site where they're asking for a retrofit but there is so much junk going on in their CSS that it's gonna take more work for us to undo all that stuff than it is to just start over with CSS.
[00:01:21] But I don't wanna have to recreate their top resolution layout, right. So what I really want is what I'm kind of calling small resolution first kept. Okay. I wanna keep their original style sheet and I want that to work at maybe 900 pixels and greater. And then I wanna start with no styles, mobile first up to that point.
[00:01:43] The trick is, I can't apply those styles at the same time as their styles are being applied because if I were to do that, it's gonna break their original layout, right? So this is what we're trying to do, don't change the original styles. Serve mobile first, CSS for small view ports and then just serve their original styles untouched at larger view port.
[00:02:08] So I'm gonna show you guys quickly a way hat we're actually that we've actually successfully implemented this. So again looking at the sort of the head of a document here. I'm using modernizer here and this moderniser.mq test will test a media query for you, okay? So, all I'm saying with this test is, hey is min-width; 0px true?
[00:02:34] Which is always true, if the browser understands media queries, right. So I can run this test to see if this browser actually supports media queries or not, that's what all that's doing. And then this is yep, no. So if this is true, I'm gonna load base. Otherwise I'm just gonna give them the original styles.
[00:02:53] So if they're in a browser that doesn't support media queries, all my fun stuff that's retrofitting ain't gonna work anyway. This is given the original styles, they get what they've always got, right. And then a noscript fallback to give them the original. So if JavaScript is disabled, in this case they're gonna get the original styles as well.
[00:03:10] Now let's take a look at that base CSS. Again this is a SAS aggregate, okay? So that base CSS is generated by this aggregate file, okay? Same kind of technique we were using before to build up a single file that has media queries in them. These are not requests, these imports, these are SAS imports, okay.
[00:03:34] But what we're doing is we're applying I've got basically three different tiers of styles that I wanna apply here. A small set of styles. A medium set and the original styles. So you could break these down however you needed for your specific project, just kind of proving their concept here.
[00:03:49] So if the browser viewport is 979 pixels or lower, okay, maximum is 979, I wanna import small. If it's between 661 and 979, I'm also gonna import medium, right. So this is true. In cases where this is true, this is also true. So you would import this regardless.
[00:04:15] And this is gonna get added on, if I'm between these two. So now if I've included medium, I've also included small. And then here, a mind-width 980 and higher, I just serve them the original. Okay, so what this does is it's that capping, okay. Neither of these two styles are applied over 979.
[00:04:34] And only this is applied over 979. It's a little bit crazy. There's a working demo though in the folder that shows kind of how this actually works pretty well. Again this kind of stuff is like, there's no need to figure this out unless you get that crazy request from a client.
[00:04:54] But just know that there's all kinds of creative ways that you can link styles. Using this sort of book and approach of media queries can really get you some cool results. Questions on how this is working or, no.
>> Ben Callahan: Okay.