CSS In-Depth, v2 Media Type, Screen Size, Resolution

[00:00:05]
>> Estelle Weyl: So this is a quick little section and we're gonna talk about media types and screen sizes. So we're not gonna talk about screen resolution. We're not gonna talk about device capability, but we are gonna talk about browser capability. So originally in CSS 2.1, we were provided with media queries.

[00:00:21] And the media queries were basically what type of device is going to be presented in this information. So we had oral which was spoken. Handheld which back then was a phone without a real browser. Braille embossed which print, projection, screen, TTY, and TV. Because we thought that televisions were gonna have their own way to display in the web, not using your browser.

[00:00:55] Pretty much it's the browser used everywhere. On a TV, it's a browser. On your smart phone, it's definitely a browser. In your car, it's definitely a browser. So we definitely, still have print and screen, and there's also aural and braille.
>> Estelle Weyl: So we basically have tons of devices.

[00:01:21] And we have everything from things that are way larger than this screen here. What is showing on the screen here it is a picture of my computer, we're not targeting the projector or we're not targeting the whiteness of the screen, we're targeting the browser that is then being shown on the screen.

[00:01:44] So this is definitely a browser, it's definitely a screen. All of these have our screen and there's a fake ruler at the top. Which basically, it's how many inches and you have centimeters or whatever. You have the watch which is hopefully, less than 10 centimeters, but I've seen some crazy looking things.

[00:02:04] You have cellphones which are a bit bigger, the guy sitting next to me on the plane had something like this big and it said Verizon on it. I'm like, that is not a phone, please tell me that's not a phone. It wasn't, it was a small tablet, but I was scared, I was definitely scared.

[00:02:18] Then we have tablets that, there was someone on the plane with a tablet that was bigger than my laptop. So I have a laptop that's 15 inches, most people have 13 inch. I don't use a separate screen so I really need as much here. And then, at home I have a Google Chrome box on my 72 inch TV.

[00:02:39] And it might not be a 72 inch TV. To me it's huge, but it's smaller than a bar TV, so I don't know what size it is. You want to provide sometimes different looks and feels to different devices. You definitely don't want to do a widescreen, you don't want to send this deck as is to that watch.

[00:03:03] They're not going to be able to read it, it's 960 pixels wide. And that is fixed, because my deck is not responsive. Sorry, you can't watch this deck on your watch. So to target that we have media queries and so, one of the things we can ask is we can say in the CSS, we can tell the CSS and say, hey, if something is 600 pixels wide or smaller then send them the CSS.

[00:03:35] If something has the orientation of portrait which means it is taller than it is wide send them this CSS. If it's landscape, which means it's wider than it is tall, add this feature. I think this deck will change colors, I'm not sure. Let's try it. Does this change colors?

[00:04:00] I think I removed it. Yeah, no, it does. When it turns from when it is smaller than 600 pixels, it actually goes red. And when it is taller than it is wide, it turns yellow. You can see that by the back color right there on top. So you see now it's yellow, because it's portrait.

[00:04:22] A portrait, it might be, portrait, it's yellow. Had it been above the previous declaration, they have the exact same specificity, then it would just stayed red. But because I declared the red above the yellow, that's how come it does that. So that is an example of using a media query with width, or max-width in this case, and orientation to change the color.

[00:04:53]
>> Estelle Weyl: You can put these media queries in your CSS, as the previous example did. Or you can actually add it directly to your link tag. It can be an attribute of your link. It can save media link real stylesheet, media screen, blah-blah-blah-blah, called this CSS file.
>> Estelle Weyl: So,

[00:05:20]
>> Estelle Weyl: Basically, when you're doing design, you wanted always use the same aspect ratio, but you don't want a targeted specific break. These are the breaks, the sizes of various devices and I made some red and some green just so you can see that there were more. When it was red, it just looked like a big blob.

[00:05:39] So this code means absolutely nothing. It's just to show that there's a lot a lot of dots, they're all basically on one line. You know? They all have the same pretty much aspect ratio. But you don't want to actually pick a break point. Because it is the iPhone.

[00:05:54] You don't want to say 320 and 460. That is what we used to do. You want to pick a break point that makes sense with your design, right?
>> Estelle Weyl: Nothing else, don't think about devices. Think about the breakpoints like when my screen is this big, it starts looking really ridiculous.

[00:06:15] If I've one line of text this long, change with text, you actually just always wanna say max width and use M's. You don't need to use, most times, you don't need to use media queries. I very rarely use media queries, I use widths in terms of Ms and I say basically, on a paragraph, max width equals 60 M's.

[00:06:37] It means, it will never get longer than 60 characters.
>> Estelle Weyl: It doesn't matter then what font size the person has that way the length is stable. So in terms of media queries, there's certain properties that we can look at. We can look at the width and the height and both of those have max and min.

[00:07:00] So if we were to say width colon 600 pixels, it would only match, if it was exactly 600 pixels. So generally, we wanna use min or max width min or max height. And then the same with aspect ratio.
>> Estelle Weyl: And then we also have portrait and landscape, which we've also covered.

[00:07:24] And then there's the ones below it which are like, min/max-color, and color-index, and monochrome, and progressive versus interlaced. I think we are also considering web development here, so the bottom stuff doesn't have much to do with us, so we won't go into those. And also, I could even if I tried I couldn't teach you something that I don't know.

[00:07:43] So these are the things that we can actually look at width, height, aspect-ratio, orientation, resolution. Overflow-inline, color, color-index, display-mode, inverted-colors, pointer, hover, these are all media features. Does the primary input mechanism allow the user to hover over elements? And that's gonna be in Media Queries 4, so there's gonna be more and I'm just presenting this to you so that you know that these things will exist.

[00:08:14] Generally, if you want responsive, if you want squishy websites, cuz there's a big difference between responsive and squishy. Most of us are developing squishy websites which means they grow, and they shrink, and they squish nicely. Responsive means that you're not increasing the number of rather you're decreasing it, and you're not putting in 45 different JavaScript frameworks.

[00:08:36] And making it really slow, because that's not responsive, and it's quick to the touch, that's what responsive means. It actually responds to user interaction, and it loads quickly. What people are calling responsive web design is actually squishy web design. Not that I have an opinion on that either.

[00:08:53] I'm not opinionated on anything. So resolution units, we have DPI, DPCM, and DPPX. Mobile devices have, and even desktops, have been coming up with really high DPI features. And sometimes you wanna serve them higher resolution images, cuz it just looks really crisper. So before you do that you basically, wanna say like let me serve this image if my DPCM or DPI is higher so,

[00:09:37]
>> Estelle Weyl: When you use any of these, don't use number zero without something afterwards. Zero, in a lot of lengths, zero works, when it comes to degrees, zero doesn't work. Zero, you have to put like degree after zero for it to be zero degrees. But if it's like the length is zero pixels, or zero M's, or zero CHS, or zero points.

[00:10:01] Zero works fine for lengths, but for DPI, DPCM, and DPPX, no, okay. So in Safari, we had device pixel ratio and if you noticed back here, device aspect ratio,
>> Estelle Weyl: Is actually just aspect ratio now. So the correct way is resolution or aspect ratio, but not device aspect ratio.

[00:10:32] That's why it was crossed out. You can say min-resolution of either 2 DPPX or 192 DPI, those are all equivalent. Okay, so I'm showing you again that for Safari it is -webkit-min-device-pixel-ratio, everyone else min-resolution 192. And that would be what your usual phone is. There are phones that come up with four times.

[00:11:05] My eyesight is, I'm not wearing glasses, I can see all of you. I can't tell the difference between three and four. When the device pixel ratio is four verses three verses two. Two I can see. I can see it's much crisper than one, but then you get crisper than that and I have no clue.

[00:11:28] So generally, in images are 72 pixels per inch, maybe 96. But sometimes we'll see them served up 300, which is really nice if you want to print it. There's no reason to send something that's 300 pixels per inch to a browser, because it doesn't have 300 pixels to display.

[00:11:50] It has usually 196 max and some mobile devices will have higher, but you can't see that. So let's just open this up into a new window and exit out of this. So this one you can actually play with.
>> Estelle Weyl: At one point it changes to a slight gray, and then light steel blue, see that?

[00:12:23] So the reason that I want, I pulled it out, and want you to do it is because I want you to play with it. So if i just did width of 600 pixels.
>> Estelle Weyl: There, just at that one pixel, we would actually be slate gray, right? They go shorter or bigger.

[00:12:52] It isn't anymore, and I wanna go down lower. So that's why use min and max, because what's the point of having one pixel or something is the unique color. You're never going to just have one pixel, so always use min and max.