Inline Styles, User Style Sheets and Accessibility

There’s been a lot of buzz in front-end development around CSS organization and optimization. Two techniques that have emerged involve using inline styles. One is to inline critical styles in the head of the document for a performance improvement. The other is to inline styles directly on components managed by a javascript framework, like React, to improve code organization and performance. This got me wondering if these techniques, particularly their CSS specificity, could have an effect on user style sheets. I ran some tests and the results were surprising.

User Style Sheets

A user style sheet is an assistive tool that allows users to customize the display of web content by writing their own CSS to override a site author’s styles. This is particularly useful for people with low vision disabilities who might need different fonts, font sizes, contrast or other modifications to read more comfortably.

A few examples are:

• Forcing a certain font, maybe even one on the user’s hard drive, because serif or sans-serif are less readable.
• Making sure that text-decoration: underline is enabled on all links so it’s easier to see what can be clicked.
• Ensuring that an obvious outline appears whenever an element receives keyboard focus, even when individual sites have turned it off with outline: none.

These style sheets are generally straightforward to create and install:

1. Create the desired styles in a CSS file. There’s nothing special in writing the styles, except that each declaration should use !important to ensure that it takes precedence.
2. Add the styles to your browser. Each browser is slightly different, but here is instructions for Chrome, Firefox and Internet Explorer.

This is a great feature based on W3C user agent guidelines implemented by (nearly) all browsers. When used, user styles should override all site styles, even inline ones using !important. So is that actually the case?

The Fly in the Ointment

Unfortunately, as of this writing, the most popular desktop browser, Chrome, does not support user style sheets. This is very disappointing! Fortunately plugin developers have filled the gap.

The Stylish plugin for Chrome (there’s one for Firefox too) provide a UI for adding global and site-specific styles. In fact, there’s a repository of site-specific styles for Stylish so you can, for example, give YouTube a Nyan Cat progress bar — fun!

Stylish can’t interfere with the browser’s CSS rendering engine, so it has to work by appending user styles to the bottom of the page’s source code.This generally works because, as the last thing on the page, these styles will override anything set before them. However, will this work with more specific inline styles?

The Test

I set up a very simple page to test user styles versus various style locations. My page used an external style sheet to set links to blue. Then I uploaded a user style sheet that set links to white with a red background. It looked like this:

a {
  background-color: red !important;
  color: white !important;
}

After checking that my user styles worked in my test browsers (white links with red background were overriding the linked style sheet) I started trying more and more specific styles:

• a { color: brown; } inline in the head of the page.
• a { color: brown !important; } inline in the head of the page.
• a { color: brown; } inline in a link on the page.
• a { color: brown !important; } inline in a link on the page.

The Results

What I saw was fairly expected based on what I’d learned about Chrome. In every case, except Chrome, the user style sheet always trumped the site’s styles. However, since Stylish works by appending styles to the bottom of the page, it’s possible for an inline style to be more specific and override it.

Takeaway

Using inline styles is a safe practice from an accessibility perspective as long as one doesn’t get overzealous and use !important.

One Caveat

Unrelated to accessibility, the spec for the Content Security Policy would block inline styles for sites using Level 2. In their recommendations for optimizing CSS delivery, Google recommends not using inline styles for this reason.