- So the biggest question everybody always has
when they learn about something new, like CSS Grid, is,
"How can I use this today when I need to support
"a bunch of users that have Internet Explorer?"
It's a pretty important question.
We don't want to just blow off a whole bunch of our users.
It's not only important to think about Internet Explorer,
but, all of the browsers that might not have support
for a new feature, a new part of CSS that you wanna use.
So what is going on with CSS Grid?
There's actually quite a lot of support,
more than you might imagine,
given that Grid shipped in March of 2017.
It shipped in Safari, Firefox, Chrome, and Opera,
all within the same four-week period.
And all of those browsers update automatically,
so over the last several months,
many, many, many users of any of those versions
of any of those browsers have gotten the latest version,
and they have CSS Grid.
That puts, if you look here, let's look at Can I Use,
a great website if you've never been there, caniuse.com,
to look up a property, a CSS property, or value,
and see what kind of browser support that it has.
And you can see here, globally, it's got 70% support.
That might not match your users, and what's important is,
are the users for your website, of course,
not what's going on everywhere in the globe.
But 70%, right now, this is July 2017,
so, it's just been a handful of months,
and we were already at a vast majority of people
who have CSS Grid.
This has never happened before.
So, for one, don't imagine that it's gonna take two years
to get a 70% support, we're already there.
The other thing is, let's look here,
you can see that IE 11, Edge 14 and 15,
and actually every version of Edge,
already have CSS Grid embedded in it,
including here, let's look at Show All.
IE 10, Grid shipped in IE 10 back when IE 10 was brand new.
This is an older version of the specification,
and it's quite different than the new version.
It only gets used if you use the MS prefix
which leaves you with a choice.
You can either use the MS-prefixed version of Grid
and go ahead, and have support for Grid
in IE 10, 11, and earlier versions of Edge,
or you can not prefix anything, not MS prefix anything,
and leave IE and older versions of Edge in the dark
with no Grid code at all.
It really depends on your project.
Sometimes one choice is a good idea,
sometimes the other choice is a good idea.
The best way to figure out which one to do
is to start to learn,
what is it that the very first version
of the Grid specification did,
and what is it that is new in Grid,
and sorta came later as the specification evolved?
Because it's those kinds of things
that are not gonna be in the IE version of Grid.
In general, a lot of the placement stuff,
when you define lines,
and you specifically place things into a grid,
that is supported in the very early version in IE.
Under different syntax, but it still can be done,
you can use autoprefixer for example,
and it's gonna go ahead, and rewrite the syntax, and work.
If you're using any of the things where the browser
automatically places the content,
or the browser automatically changes the size
or the numbers of the columns in a certain kind of a way,
then, there's no such thing in the earlier version,
and if you run autoprefixer,
that's not gonna make it magically work in IE,
your IE layout is gonna be broken.
So, learn about that.
You can go to...
Rachel Andrew wrote a really great blog post called,
Should I try to use the IE implementation
of CSS Grid Layout?
And in here, she details exactly what it is
that works in the old versions of IE,
and what doesn't work in those old versions
to get you a good idea of which way you wanna go.
An earlier version of autoprefix goes ahead
and automatically autoprefixes all the time.
Probably not a good idea.
The folks who run autoprefixer changed it,
so now autoprefixer doesn't automatically
auto-prefix everything for Grid,
and you'll need to manually do it,
or you'll need to tell autoprefixer to turn on
prefixing for Grid.
Personally, I just manually do it,
because I wanna be able to control, maybe,
one grid on the page, I do wanna prefix,
and the other grid, I don't wanna prefix,
maybe, I, you know, wanna mix that together.
And maybe I just wanna leave the robots out of it,
let the humans make the decisions.
But whatever, for your project, it's up to you,
it depends on what you're doing.
But check out Rachel's post when you wanna get into it.
It's a really good solution for any of you
who have a very large population of people on IE.
I've talked to folks who work on
internet software for an enterprise corporation,
and 80% of their users, or 90% of their users are on IE 11,
because it's for the company, inside the company,
and that software, you know, the company uses IE 11.
You could use Grid, just pretend like it's 2012,
and you can only use the very original idea version of Grid,
just write your code using that, and you'll have it in IE,
if that works for you.
I think for many of the rest of us,
what we'll do is we'll have a layout that works
in all browsers, including IE, that doesn't use Grid at all.
Maybe it's sort of the mobile layout,
maybe it's just a simple column, a simple flow layout,
and that's what the non-Grid supporting browsers will get,
including IE, and then, everybody else,
the Grid browsers, the browsers that have Grid,
will get a more complicated layout.
These are the principles of progressive enhancement,
maybe you're not familiar with them,
but if you start to learn about
how to write code that works in browsers,
and doesn't work in browsers at the same time,
it's actually not so hard to do for Grid.
There's a really great article at MDN.
Actually, MDN has an entire section on Grid layout,
you can see here, there's a page
for all of these different properties,
there's also a bunch of different guides.
And one of the guides is about CSS Grid
and progressive enhancement.
This was written by Rachel Andrew, in fact,
and you can see in here a lot more information about
how exactly to make a choice of whether or not
to use the old IE syntax version of CSS Grid,
and how it is that you might write your code,
and structure your code,
so that you have a basic flow-based layout
that works in every browser,
and then it gets overridden by a Grid-based layout,
only in the browsers that understand Grid,
and Rachel lays out in this page on MDN
exactly how to do that.
All the details that you would wanna need,
and things to get into.
Part of the reason that we're gonna be able to do this
is because of this thing called a feature query.
The feature query is a lot like a media query,
where media queries are this little bit of code
that gets run, where, it asks,
hey browser, if the viewport width...
The browser itself, or the screen that the user is on,
if it's a certain width, if it's at least 400 pixels wide,
or if it's at least 800 pixels wide,
if it's at least 1000 pixels wide,
then I want you to do all these things
at media, blah, blah, blah,
if it's blah, the wide, blah,
minimum, maximum, do these things.
If not, skip all of these things.
That idea, that came around with responsive web design,
and we figured out how to do that,
even when some devices didn't know what a media query is,
by using a mobile sort it first layout,
where you would kinda send the mobile first layout
to every browser, and then you would override it
with media query-based layouts.
Same principle applies here.
This time, however, we're gonna use what's called
a feature query, where you say, at support,
and then you write a little conditional.
At support, display Grid.
Which means, if, you, browser, understand Grid,
then I want you to run this code.
If you don't understand Grid,
then you're gonna skip all of this code.
And what you wanna do is put that second
in the order of your CSS.
The first thing you wanna do is
write the CSS that every browser will get,
including the ones that don't understand Grid,
and then put the CSS that's just for the browsers
that understand Grid inside of feature query.
That's gonna get you code that works in every browser,
including really old browsers.
One of the things is, a lot of folks are talking about IE,
and what do we do about IE?
But IE actually has a smaller market share globally.
In fact, if you look on Can I Use,
IE 10, and 11, and maybe even if you include
nine, eight, seven, back to six, this is like 4%
of the whole market around the world,
which is really surprising,
that it's already that small.
It feels like yesterday that it was 60%
of users in China that had IE 6.
Those numbers have gone way down very quickly.
The thing that we're not paying enough attention to,
many of us, especially those of us in North America,
and in Europe, are these other browsers.
The UC Browser for Android has a 9% market share
around the globe.
The QQ Browser, though, is another one.
Samsung Internet Browser,
that's becoming more and more popular.
A lot of these are mobile OS browsers,
so they're for Android phones, Android tablets,
they don't necessarily mean
that they're for skinny screens only,
they could be for larger screens, like a tablet screen.
But they are for, kinda,
mobile operating system-type situations,
and we have a tendency to pretend that they don't exist,
but they do.
There's a lot of devices
that don't necessarily show up in some of these statistics,
like refrigerator browsers, or game console browsers,
which are really popular.
So there may be browsers out there
that you don't even know about.
We should always write our code so that it's gonna work,
even for the browsers that don't have something
like CSS Grid.
I know Samsung Internet Browser, for example,
is working on their Grid implementation right now,
they will ship Grid, I don't know when.
Maybe super-soon, maybe it will be awhile.
The folks at Microsoft are working on
the Edge implementation right now,
it's very close to shipping here in July 2017.
Perhaps it will have already shipped
before you watch this video.
Who knows, sometimes you don't even have to worry about
exactly which one ships when, though,
if you just make sure it works
in both browsers that have Grid,
and both browsers that don't.
So, check out feature queries,
check out Rachel's documentation of
what the old version of IE does,
if that's a big population for you,
and you wanna think about using that.
And really, just learn how to do
progressively-enhanced CSS,
you'll have all your bases covered,
and you can use Grid today.