Chris Coyier

A good point by Mayank: The multiple attribute on <select> should pretty much never be used. It’s like the polar opposite of single <select>, where instead of universal familiarity, it has universal unfamiliarity. Perhaps its only saving grace is that I have yet to encounter this attribute in any codebase. HTML: The Bad Parts

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

VS Code has code folding already, of course. Almost any logical bit of code is foldable. A CSS ruleset, a JavaScript function, a nested bit of JSON, any HTML element with children, etc. But if you want to make a custom section of code foldable, you can wrap in special code comments like this:

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 […]

First: the Light DOM is just… the regular DOM. When people talk about native Web Components, the Shadow DOM comes up a lot. I have extremely mixed feelings about the Shadow DOM. On one hand, it’s a powerful scoping tool. For example, CSS applied inside the Shadow DOM doesn’t “leak” outside, meaning you can be […]

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.