Chris Coyier

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.

Keith Cirkel demonstrates a brand new concept (requires Chrome Canary and the Experimental Web Platform Features flag right now) called Invokers, a proposal from the Open UI group that is polyfillable. You “invoke” events directly on a specific element in the DOM: Then you can listen for the invoke event on that element. Adding interactive […]

Did you know you can declare number values in JavaScript with notation like 1_000_000? This is especially useful for large numbers where you might be used to seeing commas within the number to help readability (but commas themselves are invalid). It’s perhaps even more useful when declaring numbers in binary, hexadecimal, or BigInt notation.

Josh W. Comeau: A cool thing I always forget: The <progress> tag can be put in an “indeterminate” state by omitting the value attribute. The idea is that we want to signal to the user that something is in progress, but we don’t know how far along it is. With a value: Indeterminate: