🚇 CTA ‘L’ sign CSS

CSS has gotten to the point where things that, a few years ago, I would have used SVG and JavaScript for I can now do in just HTML and CSS. Being able to rely on the browser for layout, plus :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:

1. The entire sign is sized based on the font size. aspect-ratio, combined with fr and em units, 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.

   .sign {
       font-size: clamp(1.30rem, calc(-0.05rem + 6.73vw), 5.00rem);
       height: 1.8em;
       aspect-ratio: 8;
       grid-template-columns: 1fr 4fr 1fr;
   }

2. 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.
3. 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.