Accessible, degradable style control

As promised, the second instalment of accessible, degradable style control (that follows part 1).

This entry will cover style sheet control, and although this has been covered by other posts in the past, often they rely entirely on JavaScript. This method does not.

UK EVENTAttend ffconf.org 2024

The conference for people who are passionate about the web. 8 amazing speakers with real human interaction and content you can't just read in a blog post or watch on a tiktok!

£249+VAT - reserve your place today

My aim is to provide two links, one to strip all the style from the page, and one to return to the default style.

Steps Involved

The HTML
Server side script to managed non-JavaScript enabled browsers
JavaScript to manage the style sheet dynamically

HTML

When someone visits my business web site, they will see the font control links, and the 'no style' link.

When the style is turned off, they will also be able to see the 'default style' link:


<li><a href="/change/style/blank" class="ctlStyleSwitcher" rel="blank">No Style</a></li>
<li class="hide"><a href="/change/style/default" class="ctlStyleSwitcher" rel="default">Default Style</a></li>

Class 'hide' refers to 'display: none'.

Note that we're using classes as a hook for the JavaScript, and the 'rel' attribute to define the particular type of style.

In our head tag we add the following style sheet links, note that this needs to be later managed by the server side:

<link rel="stylesheet" title="default" href="/css/default.css" type="text/css" />
<link rel="alternate stylesheet" title="blank" href="/css/blank.css" type="text/css" />

default.css contains our core style. blank.css is, literally, an empty css file.

Server Side

As per, part 1, you will need to set up .htaccess and non-htaccess (if you don't have mod_rewrite).

Change file

The change file from the part 1, will be upgrade to handle the style sheet. This script will only be accessed when JavaScript enabled, and thus used to switch styles.

change.php

Upgrading change.php from part 1, here's what we will add:


...
if ($methods[2] == 'style') {
  $s = isset($methods[3]) ? $methods[3] : 'default';
  $ok = setcookie("style", $s, time()+(3600*365), '/'); // expire in a year
}
...

Printing the <link> tag


$styles = array('stylesheet', 'alternate stylesheet');
if (isset($_COOKIE['style']) && ($_COOKIE['style'] == 'blank')) {
  $styles = array('alternate stylesheet', 'stylesheet');
}

echo '<link rel="' . $styles[0] . '" title="default" href="/css/default.css" type="text/css" />';
echo '<link rel="' . $styles[1] . '" title="blank" href="/css/blank.css" type="text/css" />';

This allows browsers that don't have JavaScript enabled to select the right style sheet when the page is loaded, and leaving the alternative style sheet aside.

JavaScript

The solution so far should work without JavaScript enabled. However, we want to allow this functionality without having to reload the page.

Using Kelvin Luck's style switcher we're going to select the correct style on the page loading:


function switchStylestyle(styleName) {
  // note - pre jQuery 1.2 the selector needs to read $('link[@rel*=style][@title]')
  $('link[rel*=style][@title]').each(function(i) {
    this.disabled = true;
    if (this.getAttribute('title') == styleName) this.disabled = false;
  });
  createCookie('style', styleName, 365);
}

var c = readCookie('style');
if (c) switchStylestyle(c);

Get the cookie module if you don't have it already.

Wrapping up

Remember to test your implementation with both JavaScript turned on and turned off - otherwise all your hard work is wasted if someone else finds a silly little bug.

If you have any questions, comments or recommendations please drop me a comment and I'll do my best to reply.

Accessible, degradable style control - part 2