Alternate Style Sheets

HTML documents can be themed using Stylesheets as per the W3C Specification. Styles in different files can be grouped together as a single style. This comes in very handy during testing to say the least. Internet Explorer, Firefox and Opera have implemented this. Chrome needs an extension.

<link href="Simple.css" rel="stylesheet" type="text/css" title="Simple">
<link href="Classic.css" rel="alternate stylesheet" type="text/css" title="Classic">
<link href="Casablanca.css" rel="alternate stylesheet" type="text/css" title="Casablanca">

There are 4 pieces for this magic to work.

• rel Attribute : The value of “stylesheet” denotes the default stylesheet the browser loads. The alternates are identified with “alternate stylesheet”.
• title : this is mandatory and used to identify and group style sheets. For example, if you are using a bootstrap theme and have stylesheets to override some elements or classes, these can be grouped together using the title. This is how the browser knows to use them as a set.
• Switching Stylesheets : This is accomplished by using the View | Page Style menu in Firefox and View | Style menu in IE. Firefox does not remember the settings when the page is reloaded, but Internet Explorer seems to remember the preference.
• id : using this property helps locate and change attributes easily.

Yet another alternative is use client side script to dynamically switch out the Stylesheet and also remember the users preference. In order for us to accomplish this via code, there are 2 options.

The first option is to use only the default theme and not use alternate stylesheets. Add an ID property to each link tag and change the href like so,

<link id="cs1" href="Simple.css" rel="stylesheet" type="text/css" title="Simple">

and switch the style using JavaScript like so,

document.getElementById('cs1').setAttribute('href', 'classic.css');

The above technique does not work when using alternate styleheets, because the browser uses the disabled property to enable and disable stylesheets based on the menu selection. So we declare a function as below

function setActiveStyleSheet(title) {
  var i;
  var lnk = document.getElementsByTagName("link");
  for(i=0; i < lnk.length; i++) {
    if(lnk[i].getAttribute("rel").indexOf("style") != -1) {
      if(lnk[i].getAttribute("title") == title) {
			lnk[i].disabled = false;
		} 
	  else {
		lnk[i].disabled = true;
		}
    }
  }
}

and then call it like so

setActiveStyleSheet('Classic')

CSS3 Browser Scores

Cross browser compatibility has been the hottest topic for projects of any size. The amount of time we spend testing features across devices and browsers version is daunting. For those of us wanting tools to help us along the way ,comes this cool site that does just that. Check out CSS3 Test

(Firefox 49.0.2 on OS X scored 65%)

Visit CSS3 Test using different browsers and see how each browser score against the CSS3 specs. The score is based on the availability of a feature in each browser and not how well it has been implemented.

The CSS Specs are initialized as part of “tests.js”, creating DOM elements and assigning properties as defined in window.Specs. The feature set is compared against the Draft and the formalized Technical Report. Click each Property to see each style.

All credits to Lea.