CSS

Jake Archibald has some great examples of awkward gotchas with View Transitions. View Transitions are naturally great at tweening one state of a DOM element to the next, but you’ll see likely-unwanted ghosting if the element changes shape from one state to the next. You can either prevent it from changing shape by changing either […]

Creating unusual shapes is always a fun exercise and a good way to practice your CSS skills. One might argue that SVG is better for this job, but nowadays we have a lot of new CSS tricks that allow us to create shapes with a clean and optimized code. Through this two-article series, we will […]

I’m already a little over all the green. What was I thinking? I’m much more of a nice gray color palette kinda guy with some fun poppy colors. That’s what we need to get to here. When we left off, we just had wireframes going. It’s time to get some style on this thing! Custom […]

Jeremey Keith uses the little-used CSS property content-visibility to improve the performance on a fairly heavy page. It works a treat. I did a before-and-after check with pagespeed insights on the page for Out On The Ocean. The “style and layout” part of the main thread work went down considerably. Total blocking time went from more than 600 […]

When I think of showing off syntax highlighted code on the web, I think of code that takes in a string of code, finds relevant substrings (tokens) with elaborate RegExes, then wraps them in <span>s with classes to that color can be applied to those classes. This is quite literally how it works. The really […]

I just wrote about the <dialog> element, with some basic usage and things to watch for. It’s a great addition to the web platform. Here’s another interesting thing we can do, connecting it to another one of my favorite new things on the web platform: :has(). (You can see I’ve been pretty into it lately.) […]

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