🚇 CTA ‘L’ sign CSS
:has(), make things so much more flexible and responsive.
Last night I put together a quick demo of a Chicago Transit Authority ‘L’ sign generator.
There are a few things I like about this:
- The entire sign is sized based on the font size.
aspect-ratio, combined with
emunits, means that you set the font size, and the whole rest of the sign — its overall aspect ratio and the ratio between the colored bars and the rest of the sign — is proportionally correct.
font-size: clamp(1.30rem, calc(-0.05rem + 6.73vw), 5.00rem);
grid-template-columns: 1fr 4fr 1fr;
- The train line color stripes are automatically laid out by a grid layout. Being able to add and remove stripes and have the rest of them adjust is very handy.
- As many others have noted, the
:has()selector lets you easily hook up checkboxes and radio buttons to other parts of the DOM. It’s new, so it’s neat :)
Most of this isn’t exactly new, but when it all comes together it can be quite powerful.