1.2 Using Firefox Nightly

Hello and welcome back. In this lesson, I wanna talk a little bit about the current state of the CSS Grid Layout and what we can expect when we start experimenting with it. So since the Grid Layout is still a W3C working draft, we can't expect a whole lot of browser support for it just yet. For example, if you go to caniuse.com and then do a search here for CSS grid, we can see that when we scroll down to the browser support, that it's not very well supported. We see a lot of red here. Now some of these red items have flags which means that they're not supported by default but you can turn them on. For example, in Chrome, if you navigate to Chrome ://flags and then scroll down, you'll find a flag called experimental web platform features. If you turn that on, then you can use the Grid Layout in Chrome. But even then, the functionality doesn't always turn out to be what you might expect. In Chrome, for example, nested grids don't really work all that well even though they should be supported by the spec. So, you're not always going to get the functionality that you desire. Now there is a browser made by Mozilla, the Firefox Nightly browser, which is the browser we're gonna be using in this course, which does seem to work really well with all of the features that I have tested so far. So it works really well with nested grids, it works really well when you're trying to combine the use of the CSS Grid Layout and CSS Flex box. So the Nightly browser is what we're gonna be using. Now the Nightly browser, in case you haven't heard about it, it's made by Mozilla. It's basically another copy of the Firefox browser, but it's updated nightly. And it's intended for experimental purposes or for testing new features that haven't quite come out yet. So it's called Nightly because every night they release new updates for it. So it's constantly trying to stay up to date with all of the current working draft in the W3C and things like that. So most of the things that are currently undergoing experiments or that are currently in draft status. Most of those features work really well in the Nightly browser. And so you can find the Nightly browser by going to nightly.mozilla.org. And you can download it for Windows or Mac or even Linux if you want to. Now, I'm using a Mac. So if you're using a Mac as well you'll just click on the download link here and install it, just like you would any other browser. Now we're going to be using codepen.io for all of our sample projects in this course. And as long as you're using the Firefox Nightly browser, you should be able to see everything just fine. Now keep in mind that all of this discussion is at the time of this recording. So I would highly advise you to go to caniuse.com and do a search for CSS Grid just to see where the current support is at the time that you start watching this video course. But again, my main goal in this course is not necessarily to walk you through the basics of the CSS Grid Layout, but to show you a few practical projects. And to show you what we have to look forward to once this becomes more widely supported. So thank you for watching and I'll see you in the next lesson.