As promised, the second instalment of accessible, degradable style control (that follows [part 1](/2007/02/23/accessible-degradable-style-control-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.

[![](/images/terminal-600.jpg)](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

[READER DISCOUNTSave $50 on terminal.training](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

[I’ve published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today.](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

[$49 - only from this link](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

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[](#steps-involved)

  1. [The HTML](#html)

  2. [Server side script to managed non-JavaScript enabled browsers](#server_side)

  3. [JavaScript to manage the style sheet dynamically](#javascript)

HTML[](#html)

When someone visits [my business web site](http://leftlogic.com), they will see the [font control](/2007/02/23/accessible-degradable-style-control-part-1/) 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](http://www.w3.org/TR/html401/struct/links.html#adef-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](#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[](#server_side)

As per, [part 1](/2007/02/23/accessible-degradable-style-control-part-1/#server_side), you will need to set up .htaccess and non-htaccess (if you don’t have mod\_rewrite).

Change file[](#files)

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[](#changephp)

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[](#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[](#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](http://kelvinluck.com/article/switch-stylesheets-with-jquery) 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](/images/cookie.js) if you don’t have it already.

Wrapping up[](#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.

Published 24-Oct 2007 under #accessbility & #css & #degradable & #htaccess & #javascript & #php & #style & #web. [Edit this post](https://github.com/remy/remysharp.com/blob/main/public/blog/accessible-degradable-style-control-part-2.md)

Comments

Lock Thread

Login

Add Comment[M ↓   Markdown]()

[Upvotes]()[Newest]()[Oldest]()

?

Anonymous

0 points

16 years ago

Very good article!\ Thanks!

[Commento](https://commento.io)