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 ja dHTML / AJAX-koodin tehokkaampi hallinta

Web-sivustot jotka hyödyntävät runsaasti JavaScript-teknologiaa kärsivät hyvin usein tietynlaisista ongelmista. Muuten siististä HTML / XHTML-merkinnästä kehittyy jo hyvin yksinkertaisten toimintojen lisäämisen jälkeen nk. spagettikoodia, joka vilisee script-attribuutteja ja onmouseclick, onmouseover ym. tapahtumankäsittelijöitä. Alla oleva onclick-tapahtumankäsittelijä on hyvin yleinen esimerkki normaalista koodirivistä, laajamittaisissa sovelluksissa samanlaisia koodirivejä voi olla satoja, jos ei tuhansia:

<ul>
<li onclick="this.parentNode.style.display='none';">Piilota listaus </li>
...

Koodin hallinnan (ja XHTML-semantiikan kannalta) kannalta olisi järkevämpää jos yo. koodin voisikin ilmaista siistimmin, kuten:

<ul>
<li id="piilota-lista">Piilota lista </li>
...

Asian toteuttamiseksi onkin olemassa kaksi eri mahdollisuutta:

dHTML Behaviours (IE5.x ja uudemmat)
JavaScript-kirjastot / kirjastojen muokkaus (kuten CSS Behaviour)

dHTML Behaviours

dHTML Behaviours on Microsoftin dHTML-teknologian esittelemä ratkaisu, jonka avulla CSS-tyylimäärittely voidaan yhdistää nk. HTML-komponenttiin.

3 faktaa HTML-komponenteista: 1. HTML komponenttien tiedostopääte on .htc. 2. HTML-komponentit ovat käytettävissä vain Internet Explorer-selaimessa. 3. HTML-komponentti voidaan toteuttaa millä tahansa asiakkaan tukemalla komentosarjakielellä.

Toiminnon käyttöönottaminen HTML / XHTML-dokumentissa tapahtuu lisäämällä elementin tyylimäärittelyyn ominaisuus behaviour ja määrittämällä sille arvoksi linkki HTML-komponenttitiedostoon . behaviour-ominaisuus on vain Internet Explorerin tukema dHTML-teknologiaan liittyvä CSS-laajennus.

<!--[if IE]>
<style type="text/css">
li#piilota-lista {
  behavior:url(/demo.htc); 
  cursor:crosshair;
</style>
<![endif]-->

HTML komponentin (eli htc-tiedoston) sisältö noudattaa tavallisia JavaScript / DOM-käskyjä lukuunottamatta komponenttimäärittelyä (xml-muotoiset elementit):

<public:component>
<!-- tiedosto: demo.htc -->
<public:attach event="onclick" onevent="piilota()" />
<script type="text/javascript">
   
function piilota() {
	var parent = element.parentNode;
 	parent.style.display  = "none";
   }
   
</script>
</public:component>

CSS + AJAX - CSS Behaviour

AJAX (Asynchronous JavaScript And Xml)-alustojen, kuten Prototype ja Dojo yleistymisen myötä vanhaan ongelmaan tarvitaan uusia lääkkeitä, jotka toimivat laajemmin kuin Internet Explorer-alustalla. Hyvin usein tämä on tarkoittanut hyvin työlästä (ja pelottavaa) frameworkin tarjoaman koodin muokkausta.

Eräs nerokkaimmista ratkaisuista ongelmaan on CSS Behaviour-kirjasto, joka yhdistää CSS:n valitsimet tavalliseen JavaScript-koodiin. Esimerkiksi aiemmin esitetyn koodin voisi CSS Behaviour-kirjastoa hyödyntäen ratkaista myös näin:

/*tiedosto: behaviours.js */
var piilotaLista = {
	'ul li#piilota-lista' : function(e){
		e.onclick = function(){
			this.parentNode.style.display='none'
		}
	}
};

Behaviour.register(piilotaLista);

Toisin sanoen itse elementtiin ei tarvitsisi tehdä minkäänlaista muutosta, kuten ei myöskään CSS-määrittelyyn. Kaikki dynaamiseen toiminnallisuuteen liittyvä määritellään JavaScript-tiedostossa.

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

CSS ja dHTML / AJAX-koodin tehokkaampi hallinta

dHTML Behaviours

CSS + AJAX - CSS Behaviour

Tallenna tämä sivu kirjanmerkkeihin!