Custom Styles for iOS

By October 1st, 2010

iOS allows the user to switch to a "high contrast" display—essentially reversing the colour scheme. This doesn't give the fine control of colours that a desktop operating system provides. With the use of a user style sheet and a slick bookmarklet, a user can apply a custom stylesheet to mobile Safari on their iPhone, iPad, or iPod Touch so that they can display the web site or application to suit their own styles.

I love user styles. Back in the days of WCAG 1.0, I wrote some user styles to make the WCAG Guidelines and Checklist more palatable (see my post: Doing it with user style).

I love user styles because they allow us, the users, to customize the way we want things to look. We can modify and override what the author suggests in their style sheets so that our preferences take priority over the author’s. My browser, my fonts, size, colours and layout.

Most browsers, including Internet Explorer, FireFox, Chrome, Opera, and Safari (see Safari 5 User Styles) all have mechanisms built into the browser that allow us to apply a user style sheet. This may be done at the browser level or through an extension mechanism, but ultimately this lets the end user control how a web page looks. This could be something simple like choosing a different background colour and text colour to be applied to every web site they view to something more complex where styles are reset and then set for every element possible in a web page.

The beauty of this mechanism is that it allows for much more customization of:

  • font size
  • background and foreground colour combinations
  • displaying of hidden content
  • arrangement of elements on the page
  • size and colour of form controls

The user style sheet gives you full control over how pages appear in your browser.

Unfortunately, we don’t have that ability on the iPhone or the iPad.

Actually, we do, but it isn’t as convenient as setting up a user style sheet.

Here’s an example:

  1. I borrowed my friend Wayne Dick’s user stylesheet and uploaded it to: http://examples.furtherahead.com/userstyles/waynedick.css
  2. I edited Gez Lemon’s Accessible Style Sheet Bookmarklet so that it includes that URL: Wayne’s Styles (feel free to click it now if you like and you’ll see it in action)
  3. bookmark it in Safari, and sync to iPhone or iPad.

Launch that bookmarklet in mobile Safari and you should see something like this:

Screenshot of Simply Accessible customized with Wayne's styles

Screenshot: Here you can see Wayne’s styles customize the site to show a brownish background, large text, outlined headings, and links as display: block so that links in the middle of a paragraph are always easy to discern.

Limitations

Of course, there are limitations. Here’s what I see as the two most significant:

Persistence. You need to apply this bookmarklet every time a page loads. That’s a limitation you could live with though if you need to be able to read the content with your preferred fonts, colours, sizes, and layout.

Technical savviness. In order to employ this technique, you need to be able to author a user style sheet, upload to a server, edit the bookmarklet, save and sync the bookmarklet. Many end users that need this functionality may not have the chops to do this.

Here’s a helpful thought though – if you are reading this article, the odds are that you DO have the chops. If you know someone that could use some support with things like this, help them out. We’re all in this together, and all that.

Tagged with: