CSS

Articles and resources in the CSS category. A full list of categories is also available.

Windows high contrast mode and focus outlines or: My focus indicators were inaccessible

Article posted 22nd March 2023 in Accessibility, CSS and Development

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.
Safari 15.4

Article posted 15th March 2022 in Accessibility, Apple, CSS and HTML

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, focus-visible and accessibility

Article posted 14th February 2022 in Accessibility and CSS

Safari is the last browser to support the :focus-visible pseudo-class, and with that support comes a huge accessibility win.
Always style links with a pseudo-class

Article posted 1st October 2021 in CSS and Development

Ever wondered why we have the :link pseudo-class as well as the a selector in CSS? Aren’t they doing the same thing? Turns out they’re not.
How I approach CSS: my ABC system

Article posted 3rd September 2021 in CSS and Development

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.
Critical CSS: what it is, why it’s useful, and how it works

Article posted 19th August 2021 in CSS and Development

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.
Sass mixins for Increased Contrast Mode (and Dark Mode)

Article posted 22nd June 2021 in CSS and Development

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.
Using the Increased Contrast Mode CSS media query

Article posted 21st June 2021 in Accessibility, CSS, Design and Development

Satisfying the enhanced contrast AAA WCAG rule can be limiting; luckily prefers-contrast: more allows us more freedom with our default themes.
Fixing Safari’s HTML-only Dark Mode bug

Article posted 3rd June 2021 in Accessibility, CSS and HTML

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.
HTML-only Dark Mode

Article posted 2nd June 2021 in Accessibility, CSS and HTML

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!
Front of the frontend

Article posted 1st June 2021 in CSS, Development and HTML

Frontend development use to be simple. First it was just HTML, then it was HTML, CSS and some JavaScript; then it exploded.
Accessible responsive tables

Article posted 28th May 2021 in Accessibility, CSS, Development and HTML

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!
Refining focus styles with focus-visible

Article posted 25th May 2021 in CSS and Development

:focus-visible triggers only on keyboard focus; not on click. This can make our interfaces cleaner, but should it replace :focus completely?
Cleaner focus outlines with box-decoration-break

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-break has made things consistent.
Scrollbar marker colours on macOS

Article posted 25th January 2021 in Accessibility and CSS

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.
Scroll-bounce page background colour

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?
Why I prefer not to use CSS shorthand

Article posted 23rd December 2020 in CSS

Instead of using the padding declaration, I use the longhand padding-top, padding-right, and so on. Why? A few of good reasons: let me explain.
Form styling limitations are an accessibility issue

Article posted 27th November 2020 in Accessibility, CSS and Development

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.
Accessibility issues when removing list markers

Article posted 12th October 2020 in Accessibility, CSS and Development

If we remove the list markers from an ordered or unordered list, we’re likely to run into some issues with VoiceOver.
Custom unordered list markers, done right

Article posted 8th October 2020 in CSS and Development

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!
Styling list markers the right way

Article posted 7th October 2020 in CSS and Development

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!
Styling underlines with CSS

Article posted 9th September 2020 in CSS, Design and Development

Never mind border-bottom for making your links a bit more visually engaging, here’s how to do it properly with text-decoration.