This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.
Transcript from the "Syntax & Punctuation" Lesson
[00:00:01]
>> Estelle: Okay, so I've been using lots of words and I didn't tell you what the words meant. So it's media, and then it says screen and usually, right? You don't actually need to have screen and but it's just the common way to do it, it just says screen and.
[00:00:17] There's a word called only. And basically it just leaves out older browsers that don't understand. It's basically a way to just say only modern browsers. And by older browsers I mean like, well, here it would be print, it would be an old printer. You don't wanna reach an old printer, then you put the word only in front of it and then the browser wouldn't understand it.
[00:00:39] So, in this case, I was gonna say old IE, it's like, no, this has nothing to do with IE, it has to do with the printer. So if you don't want to hit an old printer, and I don't know what the limit is of these printers, but only is just a way of leaving out old devices that don't really fully understand.
[00:00:55] They understand through CSS, the old media queries, but not the newer stuff. So the word and means both parts must be true. So it has to be screen and a portrait orientation. So then second one it's not, both screen and color. It might be screen, it might be color, but it's not both screen and color.
[00:01:19] So it only matches it if it's either screen or color or neither. And then in the last one, there's a comma in there. So it says, if it's print, right? All printers, or if it's screen and has a min-width of 480 pixels. So that comma is basically saying, what comes between each comma is its own separate entity.
[00:01:43] It could have an and and an only and everything else, but then start over again with the next thing it's gonna target, that's what the comma means. In the future, we are going to be able to use greater than and equals instead of min and max. So basically this right here says media is greater than or equal to 600 pixels, which means min-width 600 pixels.
[00:02:09] Because when we had min-width, it means a minimum width of 600, so it's inclusive of 600, whereas the greater than sign would be exclusive of 600 pixels. And this one is something you would never wanna use because it won't match anything. So we don't have this yet but we will have those new symbols.