CSS Grids and Flexbox for Responsive Web Design CSS Grid: Browser Compatibility
This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "CSS Grid: Browser Compatibility" Lesson
>> Jen Kramer: So this is from the W3C. And you'll see here in figure one, this is the way Flexbox works, also the same way that Floats work. You have a series of rows, you have cells inside of them, they can have different numbers of cells, but fundamentally, one row has nothing to do with the other row.
[00:00:16] In the second example, if you're old enough to remember the golden fabulous table base layout days. It looks like table base layouts with column spans and row spans, doesn't it? Yeah, it's like fashion, what's old is new again, right? So, it's been 20 years since we did table base layout, it's about time for to come back around again.
[00:00:38] So, that is a way working, we've got the ability to span columns, the ability to span rows. Make sense? Okay. Browser support is always the big issue. And every time I talk about Grid, I have to go back and look up what the browser support is, [LAUGH] cuz it changes so rapidly.
[00:00:59] So basically, it is this. Full support in the latest browsers that you would expect, okay? So Edge 16 is where it starts to come in on the Microsoft side of things. But do you even are starting to get it on mobile devices, which wasn't true even as recently as like three months ago or six months ago.
[00:01:18] So, it is coming into full support. You do have partial support on all of the Microsoft browsers, okay? Even all the way back to IE 10. And that is because Grid has been kicking around in development for a long time, IE 10 supported an older version of the specification.
[00:01:37] And so you can work with Grid, using some of that prefixing, for some of these older browsers. So be aware that that's out there.
>> Jen Kramer: The browsers that have no support, or mostly mobile browsers that are not listed above. Things like Opera Mini, Opera Mobile, Blackberry, Samsung. Although I think Samsung might actually have just added it, I don't quite remember.
[00:02:03] But I am gonna make the following argument, it doesn't matter what mobile browsers do for grid support. I'm gonna make that argument. The reason why is, typically speaking on a mobile device, at least at this point in our design development on the Internet, we tend to stack our boxes on top of each other vertically, right?
[00:02:26] You don't need any layout in order to do that, you don't need CSS Grid in order to stack your boxes on top of each other vertically. So the fact that your mobile browsers may not necessarily have the best support for Grid doesn't necessarily impact you if that is in fact the layout that you want.
[00:02:41] If you wind up wanting to put things next to each other on your little mobile screens, then that might impact some of your decisions. But do consider that. What kind of design are you doing on a mobile device? And do you actually need grid support at all. Okay, and of course as always, go to caniuse.com to go and check with the latest is, and Grid is changing so rapidly that you can go there every month and learn something new.
[00:03:08] So I recommend it. Look at it often. Okay, so your next question is, all right, so we're doing pretty in terms of Grid support. What about polyfills? What about fallbacks? I am gonna address this towards this afternoon in a little bit more detail. But generally speaking if you are a polyfill kind of person, and not all of you are, and I respect that.
[00:03:31] If you are a polyfill kind of person, and you want to back fill to the old grid specification and pick up some of those older Microsoft browsers. There is a polyfilling existence for that, there it is. If you wanna polyfill for the new specifications, the one that's out there now, there's a polyfill for that, okay?
[00:03:50] There's also this new construct that's out there CSS called @supports. Has anyone heard of @supports before? Anybody here in the classroom? A few of you have kind of heard of it? Okay. So you can go and read up on @supports, but basically it's like this. @supports does a quick test, all right?
[00:04:11] The syntax basically. if the browser supports Grid, right? Then inside of that @supports construct that you're gonna put in your CSS, you can put in all the styles that pertain to like, this is what you're gonna do if it's Grid, right? Here's the one big problem with @supports.
[00:04:30] The browser must support @supports, okay? The browser must support @supports in order for that code to execute. So generally speaking if you use @supports you are gonna put your latest, hottest CSS inside of it because older browsers will just skip over it. Make sense?
>> Jen Kramer: Okay. I see a lot of blank looks in the classroom.
[00:05:01] What I'm going to suggest to you guys, because I hadn't really counted on focusing on @supports, you can go and read up on it. This is the link to the Mozilla Developer network, and it'll tell you a little bit about @supports. Really, you guys are solid CSS people, you can pick this up in like 5 minutes.
[00:05:19] Just read the article, okay? All right, and then we're gonna look more at this resource later on today. Rachel Andrew has been the leaders on the field of documenting and explaining CSS Grid. She has an absolutely fabulous cheat sheet that basically tells you everything you need to know in terms of your fallbacks and your overrides.
[00:05:40] And we will look at that in more detail this afternoon, okay? So using some combination of these things you can probably get this to work.
>> Jen Kramer: Okay, however, for the purposes of the class today we are still going to live in our perfect world in which we only work with latest versions of Firefox and Chrome, it is a glorious world.
[00:06:00] And Grid is perfectly supported everywhere, so we're really not gonna spend a whole lot of time worrying about cross browser compatibility as we learn the specification.