Chris’ Corner: Doin’ Stuff in CSS
Read the original on blog.codepen.io ↗The float property in CSS is old school. CSS developers used to have to think about it all the time, because it was one of the mechanisms we had for building actual layouts like side-by-side columns and stuff. Those days are gone, but it doesn’t mean float as a property is entirely dead. It remains the only property where you can get content to flow around another bit of content. Maureen Holland makes that clear in Floats are dead! Long live floats! Even when you’re using something fancy like shape-outside, to actually get the content to flow around the shaped thing, you gotta float!
Speaking of rather new CSS stuff, I feel like Anchor Positioning almost doesn’t get enough praise. Where it felt like @container queries were gonna be the biggest thing since sliced bread, and then actual usage is maybe more niche, to me, it felt like Anchor Positioning was going to be more niche, and it’s turning out to be super commonly useful. Still, tooltips are the ultimate use case for it, and that’s what Josh Comeau goes for with his wonderful intro, Getting Started with Anchor Positioning.
(Ahmad Shadeed’s detecting overlap idea is an example of getting awfully fancy with what Anchor Positioning can do.)
David Bushell gets down and dirty with some utility CSS to make a full-width (full bleed on the document, if you will) element within a limited-width container: Fixing full-bleed CSS. Logical properties and container units account for some minor bugs in past clever solutions.
There was a blog post on Cory LaViska‘s site “Named breakpoints without Sass” that has disappeared somehow, but there is a kinda weird recap post about it. I was interested, as I was just looking at the status of @custom-media in CSS the other day (the status: bad). But it’s the kinda thing that feels pretty “easily” processed. I was thinking there is that PostCSS plugin for it, plus it’s probably already covered by postcss-preset-env. But I just asked CodePen AI to have a look:
It actually decided LightningCSS was the way to go, and made a great basic demo.
