CSS-opas

CSS-TYYLEIHIN LIITTYVÄÄ KOULUTUSTA VUONNA 2008!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! IT-koulutuksen asiantuntijasi, Koulutus- ja konsultointipalvelu KK Mediat

CSS ja JavaScript

CSS ei ole pelkästään staattisia HTML / XHTML-dokumentteja varten, vaan tyylimäärittelyjä voi hallita ja hyödyntää myös clientside-pohjaisisia skriptikielä (JavaScript, VBScript) hyödyntäen. Hyödyntämällä skriptikielten tarjoamia piirteitä, on mahdollista saada erittäin tehokkaita ja uusia tapoja CSS:n hyödyntämiseen. Seuraavilla sivuilla muutamia esimerkkejä CSS:n ja JavaScriptin hyödyntämiseen yhdessä.

Selaimen tunnistus

Kenties kaikkein yleisimmin käytetty piirre CSS:n ja muiden ohjelmointimenetelmien välillä on UA-laitteen tunnistus skriptikielen avulla. Tunnistuksen avulla voidaan kiertää selainkohtaisia bugeja tarjoamalla kullekin selaimelle erikseen räätälöity tyylitiedosto.

Selaimen tunnistus perustuu asiakkaan tarjoamaan tietoon nk. UA/UserAgent-laitteesta. Tämän avulla on mahdollista saada selville mm. selaimen valmistajan, versionumero ja lukuisia muita piirteitä. JavaScript-kielessä tietoa aksessoidaan navigator-olion avulla. Alla oleva esimerkkiskripti tarkistaa onko selain IE vai joku muu, ja tarjoaa sopivan tyylitiedoston.


...
<title>CSS tyylitiedoston liittäminen JavaScriptin avulla</title>

<script type="text/javascript">
function lisaaTyyli(sTyylitiedosto) {
 /* 
 xhtml + xml dokumenteissa tulisi hyödyntää 
 DOM:n mukaisia menetelmiä document.write-menetelmän sijaan
 */  
 if (document.getElementById) {
   if(document.createElementNS) {
     var l=document.createElementNS("http://www.w3.org/1999/xhtml","link");
     l.setAttribute("rel", "stylesheet");
     l.setAttribute("type", "text/css");
     l.setAttribute("href", sTyylitiedosto);
     l.setAttribute("media", "screen");
     document.getElementsByTagName("head")[0].appendChild(l);
   }
  }
  //else {...}
}

var sTyyli;
if (navigator.appName == "MSIE"){
    sTyyli = "/tyylit/ie.css";
}
else {
    var sTyyli = "/tyylit/gecko.css";
}
lisaaTyyli(sTyyli);
</script>
</head>
...

Tutustu artikkelin muihin osiin:
»»» CSS »»»CSS ja JavaScript: selaimen tunnistus
»»» CSS »»»CSS ja JavaScript: Tyylin dynaaminen hallinta DOM:n style-kokoelman avulla
»»» CSS »»»CSS ja dHTML / AJAX-koodin tehokkaampi hallinta

CSS-opas

CSS ja JavaScript

Selaimen tunnistus

Tallenna tämä sivu kirjanmerkkeihin!