Više stilova (prezentacija)
Prednosti odvajanja prezentacije (vizualnog sučelja) od sadržaja su:
- jednostavniji (X)HTML kod (markup)
- jednostavna promjena izgleda na svima stranicama site-a
- mogućnost izrade više prezentacija
- omogućavanje korisniku da sam izabere prezentaciju koja mu najviše odgovara
- mogućnost izrade različitih prezentacija za različite uređaje (ekran, printer...)
U nekim preglednicima (engl. browser) možemo mijenjati stilove putem menija, pa tako u Mozilli imamo View->Use Style, u Firefox-u View->Page Style, u Operi View->Style. U Internet Explorer-u, u svim verzijama uključujući 6.0, korisnik ne može sam izabrati stil. Pa i gdje postoji, veliki postotak korisnika nije upoznat s takvom opcijom. Zbog toga pojednostavljujemo izbor stila.
Stil (CSS)
Autor stranice smješta svaki stil u zasebnu datoteku. Datoteke se navode u <head> dijelu, npr.
<link rel="stylesheet" type="text/css" href="1.css" /> <link rel="alternate stylesheet" type="text/css" href="2.css" title="quick" /> <link rel="alternate stylesheet" type="text/css" href="3.css" title="light" />
Na samu stranicu, u XHTML kod (markup), postavimo gumbe (button-e) ili neki ekvivalent (npr. <a> element) koji treba posjetiocu stranice objasniti o čemu se radi, te mu omogućiti pokretanje naše JavaScript funkcije koja će promijeniti stil. Jednostavan način je:
<div id="styleswitcher">Izaberite stil:
<a href="#" onclick="setCSS('default')">default</a>
<a href="#" onclick="setCSS('quick')">quick</a>
<a href="#" onclick="setCSS('light')">light</a>
</div>
Očigledno, u samim stilovima definiramo prezentaciju elementa <div id="styleswitcher">.
JavaScript i DOM
Standardizacijom DOM-a te implementacijom DOM Level-1 verzije u sve popularne preglednike, autorima je omogućeno pisanje JavaScript koda koji se prilično dobro ponaša na različitim platformama.
Kako JavaScript kod koristimo na više stranica, izdvojimo ga u zasebnu datoteku, npr. css-switch.js. Uključivanje JavaScript koda navodi se u <head> dijelu (kao i CSS-ovi):
<script type="text/javascript" src="css-switch.js"></script>
HTTP protokol kojim se prenose stranice ne pamti stanja (stateless), pa posjetioc stranice prelaskom na drugu stranicu ponovo dobiva default stil. U ovom primjeru, postavlja se cookie "style" u koji zapisujemo izabrani stil. Ta informacija čuva se 365 dana. Kad posjetioc zatraži novu stranicu, zajedno s njegovim zahtjevom putuje cookie s informacijom o izabranom stilu. Kad stranica stigne (od servera do posjetioca), poziva se funkcija setCSS() koja postavlja svojstvo (property) disabled svim stilovima osim onom stilu čiji title je zapisan u cookie-u.
Naravno, ako su onemogućeni JavaScript ili cookie-ji (ili imate preglednik koji ne podržava CSS) prikazat će se stranica bez formatiranja. U tom slučaju još uvijek je dostupan sadržaj (za takav pristup koristi se sintagma gracefully degrade).