CSS

The page scrollbar in web browsers serves a useful function: The vertical position of the scrollbar thumb tells the user where they are in the page (their scroll position), while the size (height) of the scrollbar thumb tells them roughly how long the page is. Because scrollbars are useful, they should be clearly visible. On […]

I had the thought gosh I wish this table’s rows were numbered when I was looking at the big table of Interop 2024 popular votes. I don’t know the that the <table> needed numbering, but when I wanted to know the “rank” of some of the items, I found myself wishing it did. Fortunately, CSS […]

I’m a fan of just chucking SVG icons right into the HTML where you need them: This has lots of benefits, like instant loading with no additional requests, and is 100% styleable, including all the internal parts (i.e. multicolor icons). But, putting your SVG icons in CSS can be advantageous too. This converter is handy. […]

There was quite a long period of time (say 2011-2024) where if you wanted to style scrollbars in CSS, your best bet was using the pseudo elements ::-webkit-scrollbar and friends (there were about 7 of them). That got you custom scrollbars in Safari and Chrome and offshoots. Firefox never supported those. They were never really […]

Ryan Mulligan digs into a Jhey Tompkins Pen and discovers a neat little trick involving two @keyframe animations. The first is a “trigger” animation that triggers when a certain element comes into view, and flips a –trigger custom property. Via a Style Query, that triggers the actual animation. Why bother? Scroll-driven animation durations are, well… […]

If you’re going to fade out some text, I’m gonna call it and say the best way, while also being the easiest, is using a mask. Kilian Valkhof covered this recently, rejecting the idea of an overlay gradient, and also offering the idea of using background-clip. But mask is the clear winner. Let’s get that […]

Here’s a thing you’re sure to do in your web developer career: add form validation to a form. You can’t leave that name field blank! That doesn’t look like an email address! That quantity is too high! Forms are a part of the beating heart of the web, and especially important to business. You can’t […]

I think the styling story for Shadow DOM Web Components is not great. I’ve got what seems to me like a simple idea that would help that. Fair warning: I’m just some dude on the internet with an opinion here. I’m coming at it from an author’s perspective who has only written a handful of […]

I’m still obsessed with how awesome and powerful :has() is in CSS. Ryan Mulligan really drives it home in We can :has it all with a single Pen that offers simple, realistic UI controls for: These are things you can easily imagine on any website, and now handled here entirely without JavaScript at all.

After I wrote up my Basic CSS Processing Setup that used Lightning CSS, Michael Bishop responded saying he uses PostCSS for essentially the same thing, with a forked repo demonstrating. I think Michael has a good point that PostCSS has a built-in watcher which simplifies the setup nicely. And postcss-preset-env is very similar in spirit, […]