Aspect Ratio & Object-Fit

[00:00:00]
>> Kevin Powell: aspect ratio and object-fit. These ones are, we already looked at the object-fit really quickly, so we're going to look at the two of them together because they're sort of best friends, in my opinion. Aspect ratio is when you want to declare a size and you don't really know the height, but you want it to maintain a specific aspect ratio. So we can say aspect ratio 16/9, and it will get the aspect ratio of 16 to 9.

[00:00:27]
It's an image that I'm stretching now, it does not look very good, so then I can come in with my object-fit of cover, and it fixes the problem. It does crop the image, but at least I have my aspect ratio I wanted, and the image isn't squished, which is pretty cool. And you can do a 1 to 1. Get a perfect square. Come back in with the border-radius, 100 VW, get a perfect circle, those types of things, they all come together and work really well together.

[00:01:01]
Uh, aspect ratio is a bit funky in that sometimes you're going to use it and it doesn't quite work. You do need to have a defined size somewhere for it to work on some types of elements. If you just have a div, it can actually maintain or like a regular element. It will, it knows how wide it is, so it can set a height. Sometimes like with images and other things, you might have to set one of the values, and it can be a max size and other things, but just know that sometimes you might try it and go, oh, it's not doing what I thought it would be doing.

[00:01:28]
Make sure that there's some sort of size defined on the element just so it knows where to use it. I think there were some problems with Safari with that for a little while, but I'm not sure if it's been fixed or not. And really quickly, object-fit also works with video elements. I don't know if you'd want to use it with a video element, just because then you're cropping parts of your video off, but it is an option that you can use there.

[00:01:48]
An aspect ratio can be used on absolutely anything. In our topic of decoration and effects, I have to talk about pseudo-elements because I can't talk about CSS without talking about pseudo-elements, they're one of my favorite things. People either love them or hate them, I think, but a lot of people wish we had more. There's a very long list of pseudo-elements. The two that we're going to be focusing on are our before and after.

[00:02:11]
And it raises the question we've already seen pseudo-classes. Pseudo-classes were things that we could select that didn't exist in the HTML, and they were based on the state of those elements. Hover, focus were the two big ones that we looked at, but there's playing, paused, other things like that. It's the state of the element. A pseudo element, first of all, they're elements. We start with a double colon instead of a single colon.

[00:02:37]
It's how we distinguish the two of them. And a pseudo element is something that we're inserting into the HTML using CSS. So it's not actually there, it's not a real part of the HTML, but the CSS adds it in there. This is a slightly controversial topic in a way because we're generating content with CSS. It's a bit of a crossing of the border with the separation of concerns. There's potential accessibility issues that can come up, which we'll be talking about, and there's also new pseudo stuff that's been coming along before and after are pretty safe to use.

[00:03:11]
There's some newer ones with carousels and other stuff that has caused a little bit of controversy on that side of things, but nothing to worry about for what we're covering today. Every time we want to use a pseudo element, we have to say what element it's going to be on. I'm going to have an H1, before, title, after. There's no space. It has to be touching the element, because if not it would be a descendant of the element.

[00:03:34]
I want the before of the H1 or the after of the title as examples right there. The other thing is you have to declare content on it. Every element potentially could have a pseudo element, so some people are like, why don't we just have them all there and then we could use them when we need them. And that would just be bombarding our DOM with all these pseudo-elements that 99.9% wouldn't be used, which the browser would have to still render them, it would be weird.

[00:04:01]
So we select the pseudo element and then the content property tells it that it actually exists. That's how you can think about that. Now the problem is it exists, but the browser doesn't know what to do with it. It's saying, OK, it's there. But then we have to do something with it, so we actually have to enable one of the layout modes. There's two ways to enable a layout mode, display something or position something.

[00:04:22]
You can use either one of them, you can use both if you want to. You don't need to though, as long as you're doing a display block, display inline, display something so it knows, OK, these are the rules I'm living by, or position something. Again, now it will be part of the browser goes, oh, it's a position absolute. I know how to render position absolute elements, I know it exists because they told me it exists, and then it becomes a part of the page.