Etsi sivuiltani:

	Aihepiiriluettelo > CSS-oppaan etusivu > Ehdotelmat > Cascading script sheets (CJS)

Cascading Script Sheets (CJS)

Käsiteltävät aiheet

• Yleistä
• Suorat tapahtumankäsittelyt
• Upotetut funktiot
  • Yhteiset piirteet
• Ulkopuoliset skriptitiedostot
• Hahmontunnistus
• Mediasääntö
• Ehdotelmani edut

Yleistä

Tällä sivulla on vertailua JavaScript ja CSS2-systeemien käytön tehokkuuksista sekä ehdotus, jonka olen jättänyt Sun Microsystems, Microsoft, Mozilla, Opera Software ja W3C firmoille ja organisaatioille tehokkaamman JavaScript-kieltä muistuttavan skriptiohjelmointikielen (scripting language) luomiseksi (tutustu siihen). Tämä on vähän lyhyempi suomenkielinen versio siitä eikä sisällä kaikkia yksityiskohtia.

Suorat tapahtumankäsittelyt

Tämä on esimerkki CSS-tyyliattribuutin käytöstä:

<TD style="border:1px solid #660033; background-color:aqua;">

Vastaavan tapainen suora skriptimäärittely elementin A sisällä voisi näyttää tältä:

<A href="some.html" name="my_face_image" onMouseOver= "document.my_face_image.src='redface.gif'; window.status='E-mail\ to\ Tapio\ Markula\ (@dnainternet.net)';return true">

Molemmissa tapauksessa eri määrittelyt erotetaan toisistaan käyttäen puolipistettä (;). skriptit tulee myös päättää puolipisteeseen (CSS-ominaisuuksien suhteen se ei ole välttämätöntä, mutta suosittelen niihinkin, jotta merkkien käyttäminen rutinoituisi). Monia skriptejä ei voi antaa suoraan, sillä se voi aiheuttaa vaikeuksia 1.0-versiota käyttäville selaimille (Netscape 2.x, MS IE 3.02).

Upotetut funktiot

Normaalisti skriptit tehdään niin, että elementin sisälle laitetaan ns. funktion kutsu (funtion call) ja kutsuttavan funktion nimi (esim. nayta (argumentteja)). Funktion kutsu liittyy tapahtumankäsittelijöihin (esim. onMouseOver ja on seuraavan kaltainen:

<A href="..." onMouseOver="if(browser) nayta(5, 'c');>

Funktiokutsulla on elementin SCRIPT dokumentin HEAD-osassa vastaava määrittely. Kyseiseen elementtiin merkitään tyyppi (type="text/javascript") ja mahdollisesti kieli (kielen voi eritellä tarkemmin kuin esimerkissä, esim. language="JavaScript1.1"). Seuravassa on esimerkkiskripti:

<SCRIPT language="JavaScript" type="text/javascript">
<!--
function nayta(num, typ)
{var uusikuva = typ+ "_ankkuri["+(num-8)+"].src";
document.images[num-8].src = eval(uusikuva); }

if (document.images)
{var browser=true;
var a_ankkuri=new Array(12);
var b_ankkuri=new Array(12);
var Nimi= new Array(" ...");
for (i="0"; i<12; i++)
{ a_ankkuri[i]= new Image();
a_ankkuri[i].src=Nimi[i]+".gif";
b_ankkuri[i]= new Image();
b_ankkuri[i].src=Nimi[i]+"b.gif"; }
}
else /* mikäli annettu ehto ei toteudu, toteutetaan tämä */
var browser=false; /* seuraavalla rivillä on kommentin päätös, joka on kommentoivat pois javatulkin käytöstä */
// -->
</SCRIPT>

Systeemi on aivan saman kaltainen kuin upotetuissa tyylisivuissa, esim. tässä:

<STYLE type="text/css">
<!--
h2{text-align:center; margin-left:20px;}
-->
</STYLE>

Yhteiset piirteet

• Molemmat käyttävä HTML-kommentteja vanhoja selaimia varten. skripteissä on tosin huomattava, että skriptin tulkitsija ei osaa kommentin päätöstä, jolloin se on kommentoiva pois ko. kielen kommenttimerkinnällä (//). Niille on pakko laittaa //-->, kun tyylimäärittelyissä riittää -->. Ero on pieni, mutta se on syytä muistaa.
• Molemmat käyttävät kaarisulkuja määrittelyissään. CSS käyttää niitä ns. kuvauksissa. Skriptikielessä funktioilla (merkintä function ()) on saman tapaisesti kuvauksia kuin tyylisivuissakin (Ek/Ekman nimittää kaarisulkujen välissä olevaa kuvausta funktion rungoksi). Kuvaukset voivat olla joskus molemmissa kielissä sisäkkäisiä (nested) eli ne ovat tällöin ryhmiä (groups).

Kuten tämän sivuston ensimmäisellä sivulla tuli ilmi, upotettu skriptejä ei voida käyttää XML-dokumenteissa eivätkä vanhat selaimet ymmärrä XML-dokumenlteille sopivia upotettuja skriptejä. Upotettuja skriptejä ei milloinkaan tule käyttää, jos dokumentti halutaan joskus muuttaa XML tai XHTML-dokumentiksi.

Perusero upotettuilla skriptikielen funktiokutsuilla ja upotetuilla tyylisivuilla on se, että skriptit tarvitsevat aina elementtien sisällä funktion kutsuihin liittyvät attribuutit. CSS ei niitä välttämättä tarvitse, vaikka sen yhteydessä voi käyttää attribuutteja class ja id.

Funktioista on hyötyä silloin kun niitä käytetään esim. kuvien vaihtamiseen ja vaihdettavia kuvia on paljon, jolloin koodia voi lyhentää funktioilla ja funktiokutsuilla.

Ulkopuoliset skriptitiedostot

Sekä JavaScript että CSS voivat käyttää ulkopuolisia tiedostoja. Tämä on viittaus ulkopuoliseen CSS-tiedostoon:

<LINK rel="stylesheet" type="text/css" href="external_stylesheet.css">

Viittaus ulkopuoliseen skriptitiedostoon on saman tapainen:

<SCRIPT language="JavaScript" type="text/javascript"></SCRIPT>

Molemmissa tapauksissa on muistettava, että niissä ei saa käyttää HTML elementtejä, sillä niitä tulkitsevat vain joko CSS tai skriptien tulkit.

Hahmontunnistus

JavaScript perustuu vanhempaan ajatteluun ja siitä puuttuu CSS-systeemissä oleva erittäin tehokas hahmontunnistusperiaate (pattern mathing; selitän sen sivulla Prosessointijärjestys. Tein esityksen, että ECMAScript (standardisoitu skriptikieli) voisi käyttää samaa systeemiä, jota nykyisin käyttää CSS2. Tämä merkitsisi sitä, että CSS2 tyylisiä elementeistä ja niiden attribuuteista koostuvia hahmoja voitaisiin käyttää funktioiden kutsumiseen suorien funktiokutsujen sijaan seuraavan esimerkin tapaan:

[name="my_face_image"] function() {document.my_face_image.src='redface.gif'}

Tämä syntaksi perustuu CSS2 tason attribuuttivalitsimiin :

[name="my_face_image"] { color: blue; }

Skriptien suhteen tuo ei olisi vielä toimiva ratkaisu. Edellinen määrittely auttaisi löytämään oikean elementin, mutta selain ei vielä tiedä, mitä sen tulisi tehdä. CSS2 sisältää kuitenkin jo ratkaisu syntaksimallin, jota voitaisiin tässä yhteydessä käyttää. Kun elementin A sisällä on attribuutti href sen eri tilat määritellään ns. näennäisluokilla. Skripteihin voitaisiin soveltaa aktiivisia näennäisluokkia (active pseudo-classes; tutustu niihin. Niillä on seuraava syntaksi:

a:hover { color: red }
:hover {color: red }

Tosiasiassa CSS2 aktiivisilla pseudoluokilla on olemassa vastaavat javaskritien tapahtuman käsittelyt:

• :hover vastaaonMouseOver tapahtumankäsittelyä
• :active on sama kuin onMouseDown ja onMoudeUp välinen tapahtuma
• :focus vastaa suurin piirtein sama kuin tapahtumankäsittelijä onClick

Teorissa skriptit voitaisiin luoda tämän kaltainen syntaksi:

[name="my_face_image"] :onMouseOver function() {document.my_face_image.src='redface.gif'}

OnMouseOver ja OnMouseOut toimisivat ikään kuin näennäisluokkina ja ne voitaisiin siirtää elementtien sisältä dokumentin HEAD-osaan tai erillistiedostoihin. Varmaan kysyt, mikä on systeemini etu. Ehdotukseni mukaan seuraavan aloituskoodin sisällä olevat attribuutit suorittaisivat funktionkutsun:

<A name="my_face_image" href="some.html">

Mutta CSS-periaatteita noudattaen attribuuttien käyttö ei ole välttämätöntä ja niiden sijaan voidaan hyödyntää hahmontunnistusperiaatetta. Myös seuraava aloituskoodi voisi toteuttaa funktiokutsun:

<DIV><Ahref="some.html"></DIV>

Se tarvitsee seuraavan kaltaisen tunnistettavan hahmon. Tämä vastaisi CSS sääntöjä (rule) tai lauseita (statements):

div :onMouseOver function() {document.my_face_image.src='redface.gif'}
/* toisaalta myös attribuuttivalitsimien tyylinen syntaksi olisi käyttökelpoinen, jolloin ei tarvita elementteihin perustuvia tunnistettavia hahmoja */
[href="some.html"] :onMouseOver function() {document.my_face_image.src='redface.gif'}

Myös ns. metodit, jotka on liitetty dokumentin BODY-osaan voitaisiin siirtää asiakirjasta muualle ja niitä voitaisiin kontrolloida hahmontunnistuperiaatteella.

<SCRIPT language="JavaScript" type="text/javascript">
<!--
document.write(document.lastModified)
// --></SCRIPT>
Edellisen sijasta voitaisiin kirjoittaa vaikka:
<DIV><SCRIPT language="JavaScript" type="text/javascript id="date"></SCRIPT></DIV>

Metodit voisivat saada eteensä tämän tyylisiä sääntöjä (rules):

[id="date"] document.write(document.lastModified) /* tämä olisi CSS2-tason attribuuttivalitsimen tyylinen syntaksi */
*.#date document.write(document.lastModified)/* tämä olisi CSS1-tason tyylinen id-valitsin syntaksi */
div script document.write(document.lastModified) /* tämä olisi CSS1-tason hahmontunnistukseen/ tapauskohtaisiin valitsimiin (contextual selectors) perustuva syntaksi */

Samoilla säännöillä voitaisiin kirjoittaa CSS:llä niille ulkoasun kuvaus, (presentation), esim.:

[id="date"] {background-color:yellow; border: 1px solid #660033;}
*.#date {background-color:yellow; border: 1px solid #660033;}
div script {background-color:yellow; border: 1px solid #660033;}

Mediasääntö

CSS2:n mediasääntö mahdollistaa tehdä samasta sivusta hyvin erilaisen version eri selaimille kun vain määrittelee omat tyylit eri laitteille. Tätä periaatetta voitaisiin aivan hyvin soveltaa myös JavaScript ja ECMAScript skripteihin. Tällöin esim. WAP-laitteille (media handheld tai tty) annettaisiin eri skriptit tai niitä ei annettaisi lainkaan.

Nykyisin skriptien käyttö on toimintaperiaatteeltaan vanhanaikainen verrattuna CSS:n, XSL:n ja XML:n toimintaperiaatteisiin ja skriptien toimintaperiaate tulisi uudistaa nykyhetken vaatimusten tasolla. Tämä tosin vie aikaa ja onko esim. Sun Microsystems tähän valmis? Ehdotelmani toisi kuitenkin monta etua.

Ehdotelmani edut

• CSS tai XSL tyylitiedostojen tapaa helppo tapa käyttää skriptejä isoilla sivustoilla
• Ei mitään ongelmia vanhojen selainten kanssa eli skripteistä aiheutuvat virheilmoitukset vähenisivät todella paljon!
• Skriptit voitaisiin helposti poistaa WAP-laitteisiin suunnitelluista versioista tai niihin voisi luoda kevyemmät skriptit. Erityisesti kannettaville laitteille suunnitellut sivut hyötyisivät ehdotuksestani