Articles and resources in the CSS category. A full list of categories is also available.
I’ve written about Increased Contrast Mode and Windows High Contrast Mode, but what’s the difference? And where does Forced Colours Mode come in?
In order to make my website’s keyboard focus outlines pretty in Safari, I inadvertently broke things for people who use Windows High Contrast Mode.
macOS 12.3 and iOS 15.4 landed yesterday, and with them came Safari 15.4 and some exciting new features. Here are the five that stood out to me.
Safari is the last browser to support the
:focus-visiblepseudo-class, and with that support comes a huge accessibility win.
Ever wondered why we have the
:linkpseudo-class as well as the
aselector in CSS? Aren’t they doing the same thing? Turns out they’re not.
CSS is easy to write but can become messy and bloated over time. A solid methodology can make maintenance much more comfortable; here’s how I do it.
With Critical CSS, we can give our visitors the most important styling as early as possible and the rest when it’s ready. Here’s why and how to do it.
When I added a high contrast version of my website I used an almost-identical Sass mixin to the one I use for Dark Mode. Here’s how it works.
Satisfying the enhanced contrast AAA WCAG rule can be limiting; luckily
prefers-contrast: moreallows us more freedom with our default themes.
A bug with link text colours in Safari’s HTML-only Dark Mode theme means we need a bit of extra code. Here’s how to patch things until it’s fixed.
When our CSS contains Dark Mode rules and the file fails to load, we’re left with plain old HTML. Luckily we can request Dark Mode in our markup!
Tables can be tricky to make work responsively; they can also be tricky to make accessible. Here’s a step by step guide to making your tables both!
:focus-visibletriggers only on keyboard focus; not on click. This can make our interfaces cleaner, but should it replace
Article posted 8th April 2021 in CSS
When I changed my site’s form and button focus styles, links felt a bit left out. But discovering
box-decoration-breakhas made things consistent.
The other day, I realised the scroll markers were invisible on my website in Light Mode. The fix was pretty easy once I knew what was going on.
Article posted 24th January 2021 in CSS
In most browsers, if you scroll and hit the top or bottom of the page, there’s a bounce. Did you know you can change the colour behind your page?
Article posted 23rd December 2020 in CSS
Instead of using the
paddingdeclaration, I use the longhand
padding-right, and so on. Why? A few of good reasons: let me explain.
A summary of the things missing in CSS got me thinking about how lack of some form styling may have seriously damaged accessibility on the web.
If we remove the list markers from an ordered or unordered list, we’re likely to run into some issues with VoiceOver.
Did you know you can choose any icon you like for unordered/bulleted lists with a single line of CSS? Any Unicode character; no hacky CSS!
Simple list styling like changing the bullets’ colour has always felt like a hack, involving a lot of CSS. But now there’s a proper way to do it!
border-bottomfor making your links a bit more visually engaging, here’s how to do it properly with