This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.
Transcript from the "Browser Capability @supports" Lesson
[00:00:03]
>> Estelle Weyl: Then we have @supports.
>> Estelle Weyl: Okay, so whenever I have CodePen it kinda messes with everything. So I'm just gonna stay on this slide and then I'll move over to the next slide. So @supports, it basically says, does this browser support display: flex? If yes, then we can use these features.
[00:00:31] And so a while ago, I was actually talking about the @supports and how you could basically say, does it support ligature? And if it supports ligature, then use this font, right? Don't use material icons unless it supports ligature.
>> Estelle Weyl: Before we used to have this, which was @media screen and (transform-3d), or and (animation).
[00:01:00] That is the old way of doing it, so don't use that anymore. You might see it, so I'm printing it out just in case you come across it. It used to be valid and it still is, it still works. But it only works for transform-3d and animation, so what's the point.
[00:01:14] Whereas this works for, basically, you put a property and a value. And it's not gonna render that, it just says, can I support it? So if you've heard of Modernizr, who here has heard of Modernizr? Pretty much everyone. It's basically Modernizr in the browser without pulling in any JavaScript framework.
[00:01:32] So a lot of people used to do JS and then they used to basically decide which CSS features to use, based on what Modernizr said was supported. You don't need to use Modernizr at all for your CSS. You just say, hey do you support this?
>> Estelle Weyl: Media screen.
[00:01:54] So here,
>> Estelle Weyl: It says @media screen and (-webkit-transition). So that was probably one of the words that used. We have to open up this in a window, right? Visit Site, here we go. I think it won't load. Okay, this browser supports @media and @supports. So what I did here is I said, this browser supports @media or @supports.
[00:02:22] And, which ones does it support? And then I did a class of transitions, a class of animations, a class of transforms, and a class of supports, right? And then here I did webkit-screen and webkit-transition.
>> Estelle Weyl: Save transitions, yes, and it doesn't support that one anymore. So it used to, but it doesn't anymore.
[00:02:44] And then moz-transition, obviously this is not a Mozilla browser, it's not gonna support that one. ms-transition, it's not gonna support that one, o-transition, not that one. Then it says, does it support transition? Well, that is an old way of writing it, it doesn't support that anymore. But all the way down here are the ones where it does support it which is @supports (display: table-cell).
[00:03:09] Which is what we really want to happen, right? So I'm in Chrome right now and let's name an advanced feature.
>> Estelle Weyl: Anyone?
>> Speaker 2: Grid?
>> Estelle Weyl: So (display: grid).
>> Estelle Weyl: You saw that bottom one disappeared? If I type in grid, it popped up, okay? So we know it supports the property value, and it happens to support grid as well.
[00:03:42]
>> Estelle Weyl: So,
>> Estelle Weyl: You can put any property and value, prefixed or not. And it's a way to basically do browser detection, cuz I could just basically do browser detection by doing moz-animation. Doesn't support moz-animation.
>> Estelle Weyl: And just give it a name, moz-animation-name and then colon red, right? Does it support that?
[00:04:13] Then I know I have the Mozilla browser, just because I prefixed it with moz. So that's a hack, but it is a way of doing user agent detection.