The Antidote to Positioning in CSS

[00:00:00]
>> Sarah Drasner: Sometimes people talk about positioning in CSS and how it's kind of hard to do and it can be kind of a drag. If you don't like positioning in CSS, especially if you're making an animation where things are kind of all over the place. And you've got so much stuff going on, SVG might be the coolest thing that you found.

[00:00:18]
Sometimes people are like, Sarah's really good at CSS and I'm like, [SOUND] I'm better at SVG. It just looks like I'm good at CSS because everything's positioned all over the place and that would be really hard to do with CSS, it's really simple to do in SVG. So if we take something like this, it's just a really simple SVG with some stars in it.

[00:00:38]
I can go over to the CSS first, I can take the width and height out of it. And then it expands to fill all of the space, as soon as I take the width and height out it expands whatever container it's in. So now I can make whatever width and height I want, I'm gonna say 100% of the viewport width and height.

[00:00:58]
And then it will scale in all directions there, right, that's amazing. So all of the things inside of there, all of the stars and all of their positioning, stayed totally consistent. No matter if it was stretched out for the whole page, whether it's stretched out into just getting constrained into that one little place.

[00:01:16]
So if you need to put text all over the place,, if you need to put images all over the place. Even if you need to put bitmaps, even if you wanna put JPEGs all over the place it can keep things totally consistent. So if you wanna do something like a text lockup so you can see this responsive text lockup by Chris Coyer.

[00:01:34]
So it goes back and forth and you can see how that title, that would be hard to do in CSS and make is totally responsive, right. But with the SVG you're making it, you put it in there, that text is living, it's actually a text element, right. So people can actually read that text element, and it's still available to screen readers, and it contracts and moves, cool.

[00:01:58]
We can use the stability of SVG for page transitions. So this is something that I made in React. And as you move between the pages you can see how the element just changes shape, and it changes transforms, and all of these little pieces stay totally consistent. So all of the things that you're seeing here, I mean, the text is actually text and stuff.

[00:02:20]
But all of the other pieces stayed totally consistent across pages and it's responsive as well.