πŸš‡ 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.

See the Pen CTA β€˜L’ sign CSS by Noah (@noleli) on CodePen.

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.