CSS

Now that we’re starting to see better support for @starting-style and the allow-discrete keyword, we’ve got a pretty straightforward way for defining *different* entry and exit states.

We’ll make some extremely stylized range sliders with simple semantic HTML and some very fresh CSS. You might be surprised how custom these things can get these days.

Syntax highlighting code on the web happens like coloring any other text on the web happens. You wrap the bits of text you want colored uniquely in some element, probably a meaningless <span>, then select that in CSS and apply a color. Ideally, the span-wrapping happens server-side so client-side JavaScript isn’t tied up doing something […]

CSS containment is used for optimization and opening styling possibilities by isolating elements from the rest of the page. Different contain values (size, paint, layout, etc.) provide various benefits and tradeoffs.

On iOS, there is a setting for Text Size. I’ll do a video here for the current version of iOS (17.5.1) to be clear: As far as I ever knew, that controlled the text size on the OS itself and native apps. It didn’t effect websites. I think that’s largely true, but I just learned […]

Support for the relative color syntax in CSS is across the board now (go interop!), so here we look at some basic (and still very useful) use cases, like applying alpha to a color you have on hand.

Brecht De Ruyte has a good rundown of what’s up with future named versions of CSS. You might remember “CSS3” and how hot of a buzzword that is. JavaScript still has successful “ES202X” naming that groups features into useful buckets. But CSS hasn’t benefited from named groups since CSS3. I’ve written: Then it felt like […]

I said to myself I said what if I used container units for every single unit in a design? I was wondering, partially because I thought the answer might be well, everything will probably scale really nicely then. Container units, in case you haven’t heard of them, are unit (like px or rem, but more […]

David Gerrells has a bunch of fun rendering far too many CSS box-shadows for things that box-shadow was never meant to do. I found out my m1 can render a stupid number of these bad boys and so I set out to see just how far you can push them and boy did I. Because […]

I enjoyed Micah R Ledbetter’s SVG triangle of compromise and generally think it’s a fair analysis of how any-which-way you use SVG on a page, you’re giving up some kind of nice ability it could have. For instance, if you use SVG through an <img> tag, it’s cached nicely, but you give up on CSS […]