2 min
light-dark()
Two color values in one declaration, picked by the color scheme, which removes most of the reason a theme needed a second block of custom properties at all.
CSS
All writing →35 posts filed under CSS, newest first.
9 min
Style queries
A card with 5 surface variants and 4 children that each had to know which one they were sitting in, and 20 selectors across 4 files holding that together until a feature I'd been ignoring since 2024 deleted all of them.
2 min
scrollbar-gutter
The layout shifts by fifteen pixels when a modal opens, everybody blames the modal, and the actual cause is the scrollbar disappearing along with it.
9 min
Custom properties for color
A client moved to a slightly different red, I ran the find and replace across the stylesheet, and one icon came out the old color, which sent me off counting how many times I'd typed a value the browser was going to use anyway.
2 min
text-wrap: balance and pretty
Two values that fix the two ugliest things typesetting does on the web, and the rule for which to use is entirely about how many lines you have.
6 min
One word on the second line
A three-up card grid where at exactly one width a heading broke as 5 words and then 1, and every fix I'd ever used for it lived in the content instead of the stylesheet.
9 min
Put the box under the button
The popover attribute gave me the top layer last spring and left me doing all the math, and the CSS that finishes the job has landed in one browser and deletes a positioning library, 2 scroll listeners and a resize observer.
2 min
aspect-ratio
The padding-top percentage trick is dead and has been for a while, replaced by one declaration that says the thing it means.
10 min
Native nesting and the ampersand
I moved one component off the preprocessor and the card came back as a column of unstyled text with the padding still on it, because every rule in that file whose selector started with an ampersand had quietly stopped being a rule.
9 min
z-index: 9999
A size dropdown on a client's product grid kept rendering underneath the row of products below it, and the 9999 already sitting on it had been doing nothing at all for 3 years.
8 min
color-scheme and the white flash
A client's site was flashing white on every load for anyone whose operating system is dark, and the declaration that fixed it also closed the unreadable checkout dropdown I'd had filed under Chrome being weird for months.
11 min
10% lighter
A designer said the hover on a button looked purple, and it did, even though the hue number hadn't moved a single degree off the blue it was supposed to be.
8 min
Thumbnails and heroes
A designer sent over a few seconds of the client's own phone app, where a tapped product photo grows into the hero image on the next screen, with a note asking whether the website could do that.
2 min
:is() and :where()
Two selectors that look interchangeable in every example anybody writes, and differ on the one thing that actually causes problems later.
8 min
Subgrid
A client circled three buttons in a screenshot and asked why one of them sat lower than the other two, and the answer was a hole in Grid I complained about six years ago and then stopped noticing.
10 min
They moved the card themselves
A client dragged a product card out of the main column into their sidebar and the button ended up hanging off the edge of it, because the class that would have laid it out narrow gets applied by a developer and there wasn't one in the room.
9 min
Styling on what's inside, with :has()
A card came out with its heading jammed against the top border, because the class that says a card has no image gets added by a template, and the template rendering that particular row had never been told to add it.
8 min
I couldn't read it in the sun
I took my phone out to the front steps to look at a page I'd built, couldn't read a word of it, and then found that every pair of colors on it cleared the threshold with room to spare.
2 min
prefers-reduced-motion
An operating system setting that has been sitting there since 2018 telling you somebody gets motion sick, and the two-line stylesheet that is the whole of respecting it.
9 min
Six kinds of white
A client asked what it would take for their site to go dark along with their laptop, I said half a day, and then I searched the stylesheet for white and got 61 results.
8 min
The apology
A parallax hero I was pretty pleased with gave a coworker a headache that lasted the rest of the afternoon, and they were the one who said sorry.
8 min
Both cards were mine
A client asked whether the price on the product cards could be bigger. There were two card components in that stylesheet, four months apart, both of them written by me.
9 min
I named it after the page
A landing page needed one block to sit closer to the heading above it, and the modifier I wrote to do that had the name of a page in it.
7 min
position: sticky and its containing block
Four declarations, all of them correct, and the one line stopping them from working was something I wrote three years ago on an element seven ancestors up.
8 min
Drawings and lists
Everyone answers grid or flexbox with one dimension against two, which is true and has never once helped me pick, so I've started asking a different question instead.
9 min
CSS Grid and the wrapper div
CSS Grid landed in Firefox and Chrome in the same week, and the first thing I did with it was break a layout with an empty wrapper div my hands typed on their own.
6 min
content: "\00a0"
Why the most-used string in my stylesheets is an invisible one, how CSS escapes will silently eat the character after them, and the parts of the content property that aren't strings at all.
6 min
Nobody prints anything
Except invoices, tickets, recipes, directions, order confirmations, and every page a client's accountant touches, and the stylesheet for all of that is about 40 lines nobody thinks to write.
10 min
Picking the green on a call
A client spent most of a call deciding whether their green was too cold, and I spent that same call in DevTools changing the green one rule at a time.
2 min
word-break and overflow-wrap
Two properties that sound like synonyms, do different things, and get reached for in the wrong order roughly every time a long URL breaks out of a card.
5 min
Six breakpoints and a prayer
Device breakpoints go stale the moment a new phone comes out. We can do better than yet another list of numbers.
5 min
@extend considered harmful
The Sass feature that looks like it saves you bytes will quietly rewrite the order of your selectors, move your rules to a part of the file you didn't write them in, and refuse to work inside a media query.
6 min
BEM and the long class name
A naming convention is a bet that the next person reads class names before they read CSS, and the ugly double underscores are paying for something real, which is not having to know the whole stylesheet just to change one thing.
6 min
display: flex, finally
Flexbox has crossed the line where I can use it on real work, and the surprise isn't the layouts it enables. It's how much of my CSS turns out to have been compensation for not having it.
6 min
float: left is a layout system
We are building every grid on the web out of a property invented to wrap text around a picture, and the pile of workarounds we've grown on top of it has stopped looking like workarounds.