This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.

Check out a free preview of the full CSS Grids and Flexbox for Responsive Web Design course:
The "History and Browser Support" Lesson is part of the full, CSS Grids and Flexbox for Responsive Web Design course featured in this preview video. Here's what you'd learn in this lesson:

Three previous versions of Flexbox are explored, and Jen shows examples of prefixing for browser support, before getting into a discussion of current Flexbox support.

Get Unlimited Access Now

Transcript from the "History and Browser Support" Lesson

>> Jen Kramer: There are and this is part of the reason that syntax with flexbox has been challenging. There are three versions of flexbox. Originally flexbox came out in 2009, can you believe it? And we used to set it up this way display colon box. And then, somebody came through with a W3C and said, no, we should totally rewrite the syntax and so, we then had this display of flexbox.

[00:00:28] This is the so called, tweener syntax, because it goes in between the original syntax and what's actually in use now. And there is one browser out there that you probably support that works with the tweener syntax. Does anyone know what it is?
>> Jen Kramer: One browser, only one and it will surprise you.

>> Speaker 2: Safari. [LAUGH]
>> Jen Kramer: Not Safari.
>> Speaker 3: IE.
>> Jen Kramer: IE which,
>> Speaker 2: 9, 10.
>> Jen Kramer: IE10.
>> Speaker 2: [LAUGH]
>> Jen Kramer: IE10, okay. IE10 is the only one that's supports the tweener syntax, and then finally, now going forward the correct syntax, the standard compliance syntax is display flex. So a word on this.

[00:01:19] What I am gonna be teaching you is the standards compliant code. We live in a perfect world in this classroom. We only support Firefox and Chrome, only in their most recent version, I know. It's a wonderful dream isn't it? We don't have to support all the old IE.

[00:01:35] We don't have to support Edge or Safari or all those other ones. So I'm gonna teach you the standards compliant code. And I know that for many of you, you're working with Sass. You have some sort of methodology that's gonna put in all of those backwards compatibility hacks and prefixing and all the rest of the stuff that goes with it.

[00:01:56] We're gonna keep our code simple, we're just gonna write it standards compliant. All right, so as i say here, prefixing may still be required depending on what your browser set is to support. Generally speaking, when I teach, I don't teach a whole lot of cross browser capability stuff because everybody's supporting different browsers.

[00:02:14] And we can really get bogged down in these details that change rapidly. Here's an example of what this might look like with prefixing, that's all the prefixing you are going to see today. Let's say I'm putting the UL is going to be my flex container, my LIs would be flex items.

[00:02:33] That's actually what's going to happen in the demo that I'm about to show you. So here we go this is what this might look like. Here's our prefixing, we have web kit flex for old versions of Chrome and Safari. We have MS flex box for IE10, that's the tweener syntax, and then finally display flex is the standards compliant quote.

[00:02:53] So that's it, that's all I'm gonna say about prefixing And from this point, we'll just say display flex. All right, the current supports and where it stands, if you are under IE 9, IE 9 and less, not supported at all, IE 10 is the tweener syntax. IE 11 and Edge, so called full support, it can be a little bit buggy in IE 11, you'll have to look that up.

[00:03:16] Generally speaking, older versions of Safari, we're gonna require that webkit prefix and there's lots of others that support the current syntax, like including Opera. So feel free to use, always your friend for looking up what the current state of support is.