CSS

Container queries are similar to media queries but allow you set styles based on a particular element’s current size, typically the width. This is super handy because you can write CSS in a way that gives flexibility to the layout! With @media queries, there’s a tight coupling of the styling of a component’s content and […]

We just looked at how :has() in CSS makes quantity queries so easy, so this post by Terence Eden caught my eye, showing some trickery where you can style an entire page based on when it was published. That is, if there is something like a <time> or <meta> tag that has this information on […]

Ahmad Shadeed: Today I learned about the media scripting feature. It’s about detecting JS support via a CSS media query. Soon, we won’t need the .no-js or .js classes once this is widely available. Currently supported in Chrome 120, Firefox 119, Safari 17. Tweet

What is a quantity query? It’s a bit of CSS that allows you to style an element (and its descendants) based on how many children the element has. Example of a Quantity Query Situation Imagine a homepage currently showing 20 articles, more than you normally show. Maybe it’s a slow news day, and the lead […]

We typically think of border-radius in CSS as a way to round off corners making rectangles softer looking. Perhaps you know that you can control the four corners individually, or round them so much the element turns into a circle or oval. But border-radius can actually accept a pretty complex set of values, with multiple […]

If you were to only read one thing to catch you up on what’s new in CSS this year, it should probably be this fancy landing page that the The Chrome UI DevRel Team put together. If I had to pick the biggest one, the new CSS feature that will have the biggest impact on […]

If you need a mini build process just for your CSS, Lightning CSS is a pretty good modern choice. That, plus a file watcher and live reloader offers pretty good DX.

Stephanie Stimac: Use text-wrap: balance; on headings and subheadings. And use text-wrap: pretty; on paragraphs of text to get rid of orphans on the last line. Despite the Chromium-only support, these would be a good candidate for progressive enhancement. The performance impact is generally negligible but there in extreme conditions.

How often have you been frustrated because you’ve just joined a new project and can’t figure out why your styles aren’t being applied properly? Or maybe you’ve just integrated a new library, and suddenly all of your styles are being overridden. You could slap an !important declaration onto your styles and call it a day, but that […]