Skip to main content

CSS

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

  1. 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.

  2. 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.

  3. 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?

  4. 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.

  5. 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

  6. 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.

  7. 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!

  8. 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!

  9. 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.