Anthony's Web Site

One benefit of using a pure CSS design is that live real time skin changes can be made using only CSS and Javascript. As you will see along the side of my pages I list the current skin design. Below is a list of alternative skin designs, and clicking them changes the design, and sometimes the layout of the pages, in an instant. No need to refresh because all of the layout information is contained in CSS files the html can remain the same and does not try to fight with the CSS. No padding images, no forced tables.

I find that using CSS to do the formatting also makes site updates much easier as I don't have to remember how or where I achieved design ideas. It's all in the CSS. I even have a global CSS file that applies to all layout and includes the basics to img Border set to 0. No need to key it in, no need to have a program default the property. To create a common CSS just add the CSS tag but don't include the title. Mine is

<link rel="stylesheet" type="text/css" href="common/common.css">

Then to create you first and default skin give the next link a title. I just used numbers because it made it easier to add new ones and to use the switcher.

<link rel="stylesheet" type="text/css" href="skins/orion/orion.css" title="style1">

Then the other sheets have the rel property alternate stylesheet

<link rel="alternate stylesheet" type="text/css" href="skins/professional/professional.css" title="style3">

Then using some Java you can disable the unwanted sheets and enable the one you want

//function from http://www.alistapart.com/articles/n4switch/

function setActiveStyleSheet(title) {

var i, doc, main;

for(i=0; (doc = document.getElementsByTagName("link")[i]); i++) {

if(doc.getAttribute("rel").indexOf("style") != -1 && doc.getAttribute("title")) {

doc.disabled = true;

if(doc.getAttribute("title") == title) doc.disabled = false;}

} }

This definitely give you: cleaner code; the ability to do skin changes on the fly; your designs are not hampered by the content; and site wide changes are a breeze!

logged by Anthony at 10:59:39 AM Link