metshein.com - 01 - Mis on CSS

01 - Mis on CSS

Kirjutas Mario Metshein

Mis on CSS?
(Cascading Style Sheet - astmelised stiililehed)
Veebi loomisega kokku puutunud inimesed teavad, et astmelisi stiililehti kasutades saab vaevata muuta ühe või isegi kümnete tuhandete veebilehtede kujundust, muudatusega vaid ühes CSS failis. Kokkuvõtlikult öeldes on tegemist veebi jaoks välja mõeldud kujundus- ja paigutusreeglitega, mille abil kontrollitakse eri veebielementide (sh piltide) suurust paigutust, värve, tüpograafiat, jmt.

Miks on CSS vajalik?
Kui HTML markeerimiskeel 90. aastate alguses Tim Berners-Lee poolt leiutati ning järgnevatel aastatel koos WWW ja HTTP protokolliga tööle akendati, oli selle peamiseks eesmärgiks andmete struktureeritud kuvamine. Interneti meeletu menu tõi päevakorda aga disainimisvajaduse. Õigete reeglite puudumisel hakati kujunduse loomiseks ära kasutama HTML-keele võimalusi, mille tegelik eesmärk oli (ja on) vaid andmete struktureeritud kuvamine.

Nii paigutatakse praegugi enamik kujunduselemente HTML-tabelitesse, mis pole oma ülesehituselt mõeldud disainilahenduste loomiseks. Sama kehtib näiteks ka teksti seadistuste kohta, kus suurus, värv, kirjastiil, jmt luuakse HTML-elementide kaasabil. See muutis hüpertekstidokumendid mahult suurteks ja kuvamiskiiruselt aeglasteks. Tuli leida uus lahendus ja selleks sai CSS.

Miks astmelised stiililehed
Astmelised on stiililehed seetõttu, et töötavad nn pärimis- ja pärandamismeetodil, st kui defineerida kõrgema taseme HTML-elemendi stiilivormingud (võtame nt <body> element), siis mitmed vormingutest kantakse üle madalama taseme HTML-elementidele, mis asuvad kõrgema taseme HTML-elementide mõjupiirkonnas (nt <p> element asub <body> elemendi mõjuväljas või <em> element asub <div> elemendi mõjuväljas). Pärimine katkeb kui madalama taseme elemendile samad reeglid eraldi defineerida.

Näide:
Element „body” teksti suuruseks on defineeritud 38 pikselit (px), mis kehtib ka lõigu kohta, juhul kui lõigu element „p” teksti suurus on defineerimata.

body{font-size:38px}

Kui defineeritud on nii „body” elemendi (38px) tekstisuurus, kui ka „p” elemendi (10px) tekstisuurus, siis lõigu tekstisuuruseks jääb 10 pikselit:

body{font-size:38px}
p{font-size:10px}

Miks ja kuidas optimeerida?

CSS-i optimeerimise all on mõeldud stiililehtede mahu minimeerimist saavutamaks veebilehe kiiremat allalaadimist ja kuvamist veebisirvijas. Loomulikult ei sõltu veebilehe allalaadimiskiirus vaid CSS-i optimeerimisest, vaid ka muudest faktoritest nagu HTML-koodi keerukusest, serveriseadistustest, administreerimismoodulist, piltide mahust, jmt. Kuid palju sõltub ka kohmakatest ja lahmakatest reeglitest.

Optimeerimise vajadus tuleneb eelkõige vajadusest sisu kiiremini ekraanile kuvada, sest kuigi veebikülastaja suudab teatud aja oodata, jääb ooteaeg piiratuks. Suurema korduvkülastuste arvu puhul ollakse nõus veelgi vähem ootama. Korduvkülastus on aga äriedu aluseks. Seega liigne aeglus viib veebiäri manalasse.
CSS-i optimeerimine pakub võimaluse veebilehe allalaadimist kiirendada. Järgnevalt ülevaade erinevatest optimeerimisvõimalustest.

Tühikud

Tühikuid kasutatakse CSS-i kirjapanemisel vaid selle keelestruktuuri korrektsemalt kuvamiseks. Iseenesest ei oma need tähtsust ja kuna CSS-i reeglid ei muutu üldjuhul niivõrd kompleksseteks kui programmeerimiskeelte süntaks, siis võib stiililehtedes kõik või enamiku tühikuid ära kaotada.

Tühikutega:

td {
font-size: 10px;
font-family: Verdana, Georgia
}

Tühikud ära kaotatud:

td{font-size:10px;font-famliy:Verdana,Georgia}

Semikoolonid

Iga deklaratsiooni lõppu lisatakse semikoolon, mis vajalik definitsioonide üksteisest eraldamiseks. Sageli lisatakse semikoolon ka reegli viimase definitsiooni järel. Reegli lõppu semikooloni lisamist põhjendatakse sellega, et definitsioonide kopeerimisel on neid mugav liigutada koos semikooloniga definitsiooni lõpul, kuna nii tekkivat vähem vigu. See tähendab, et reeglite kirjutaja ei pea ise enam semikoolonit lisama, kui kopeeritav definitsioon satub teiste definitsioonide vahele. Need „ülearused” semikoolonid tuleks
rahumeeli kõrvaldada. Võib ju olla, et üks selline semikoolon pole märkimisväärne, kuid saja mõttetu semikooloni puhul on CSS-i faili mahu kasv juba märgatav.

Semikoolon viimase definitsiooni järel:

p{font-size:12em;color:yellow;}

Sama reegel optimeerituna:

p{font-size:12em;color:yellow}

Värvikoodid

Teatud juhtudel lühendatakse ka värvikoode, millega sätestatakse eri värvitoonide väärtusi veebilehe taustale, tekstile, jne. Värvikoodi aluseks on RGB värvilaad. Värvikood koosneb kuuest märgikohast ja selle tööskeem on #rrggbb, kus esimesed kaks märgikohta tähistavad punase väärtust, kolmas ja neljas rohelise väärtust ning viies ja kuues sinise väärtust.

Kõik kolm RGB väärtust koos loovad värvitooni. Juhul, kui värvikoodis esinevad kõik kolm värvi väärtust võrdsete paariskoodidena, siis võib värvikoodi lühendada nii, et igast paarist kirjutatakse vaid üks märgikoht (nt: #8800cc võrdub #80c, #ff33cc võrdub #f3c). Kui kasvõi üks kolmest RGB väärtusest võrdset paari ei moodusta, siis ei saa värvikoodi lühendada.

Värvikood, mida on võimalik lühendada:

p{color:#ff33cc}, asemel võib kasutada p{color:#f3c}

Värvikoodid, mida ei saa lühendada:

p{color:#f033cc}
p{color:#11abcf}

Värvikoodi ekvivalendina võib kasutada ka värvi nimetust, kui see on kokkuhoiu mõttes värvikoodist väiksem. Näiteks kood #000000 on suurem kui värvinimetus black, mis omakorda suurem kui lühendatud kood #000. Seega tuleks kasutada lühendatud värvikoodi #000.

Kommentaarid

Stiililehtedes lisatakse kommentaarid „/*” ja „*/” märkide vahele. Nende kasu on stiililehtede dokumenteerimisel, lihtsustamaks reeglite hilisemat muutmist ja nendest aru saamist. Sellegipoolest tuleks kommentaare lühendada.

Lühendamata kommentaar:

/* Siit algab Hinnad ID elementi puudutavate reeglite kogum */

Lühendatud kommentaar:

/*Hinnad algus*/

Meediatüübid

CSS-i faile võib luua kindlate meediaväljundite jaoks: ekraan, väljatrükk, kõne süntesaator jt. Hetkel on võimalus kasutada 9 erinevat meediatüüpi (vt siit). Üha levinum on CSS-i failide jaotamine kahe meediatüübi vahel: media=”screen” ja media=”print”. Need on eri CSS-i failid, millest üks toimib kui veebilehte arvutiekraanil vaadata ja teine selle sisu väljaprintimisel. Nii ei
pea disainer arvestama ekraanile kuvatava veebilehe samaaegset sobimist väljaprindiks või programmeerija lisama eraldi trükkimiskuvasid.
Veebilehe printimisel hakkab kehtima meediatüüp „print”, mille reeglite abil mittevajalikke kujunduselemente ei kuvata (nt .menyy{display:none}), kasutatakse väljatrükiks sobilikumaid kirjastiile jne. Käesolev lahendus ei aeglusta veebilehe kuvamist, sest meediatüüp „print” võetakse kasutusse alles printimisel.

Näide
Viidatud on kahele CSS-i failile, millest üks sisaldab reegleid veebilehe ekraanile kuvamiseks ja teine väljatrükiks:

<link rel="stylesheet" href="stiil.css" type="text/css" media="screen">
<link rel="stylesheet" href="stiil.css" type="text/css" media="print">

CSS failide arv

Mida rohkem on CSS-i faile, seda aeglasem on veebilehe kuvamine (v.a meediatüübid). Seetõttu oleks kohane mitu CSS-i faili üheks kokku liita.

Kõrgema taseme elemendid

Võimalusel tuleks kasutada kõrgema taseme elementide pärandamismeetodit madalama taseme elementide määratlemiseks.
Seega, kui kõrgema tasandi element sisaldab definitsiooni, mida saab pärandada madalama tasandi elemendile, siis tuleks hoiduda madalama tasandi elemendile sama definitsiooni lisamisest.

Ühe elemendi reeglid

Kui ühe ja sama elemendi kohta on koostatud mitu reeglit, siis tuleks need ühendada.

Ühe elemendi kohta mitu reeglit:

td{width:500px;height:250px}
td{font-style:italic}
td{text-align:left;background:green}

Elemendil üks reegel:

td{width:500px;height:250px;font-style:italic;text-align:left;background:green}

Elementide grupeerimine

Kui mitme elemendi deklaratsioonid on samad, siis failimahu kokkuhoidmiseks liidetakse need üheks reegliks elementide grupeerimise teel.

Eri elementidel samad reeglid:

td{font-size:12pt}
p{font-size:12pt}

Elemendid grupeerituna üheks reegliks:

td, p {font-size:12pt}

Elementide lühitunnused

(shorthand properties)
Elementide lühitunnused võimaldavad ühes deklaratsioonis esitada korraga mitme eri tunnuse väärtused. Seeläbi väheneb deklaratsioonide arv. Elementide lühitunnuseid on kokku kuus: „font”, „background” „margin”, "border”, „padding” ja „list”. Järgnevalt neist lähemalt:

Lühitunnus „Font” võimaldab lühidalt määratleda kirjastiili puudutavaid väärtusi. Font deklaratsioon võib sisaldada järgnevaid kirjastiili väärtusi: {font: weight style variant size/line-height font-name(s)}
Meeles peab pidama, et iga väärtust eraldab tühik ning definitsioon töötab kõigis veebisirvijates vaid siis, kui „size” ning „font-name” väärtused kirjutatakse ülaltoodud järjestuses. Ülejäänud väärtused võib kirjutada suvalises järjestuses.

p {
font-family: Georgia, Verdana;
font-style: italic;
font-weight: bold;
font-size:120%;
}

Sama lühitunnuse abil:

p{font:120% Georgia, Verdana italic bold}

„Background” lühitunnus grupeerib tausta määrangud. „Background” deklaratsioon võib sisaldada järgnevaid väärtusi:

{background: color image repeat attachment position}

Kõik peale „position” väärtuste võivad esineda suvalises järjestuses.

div {
background-image:url(pilt.jpg) ;
background-repeat:repeat;
background-attachment:fixed;
background-position: 1px 0px;
}

Sama lühitunnuse abil:

div{background:url(pilt.jpg) repeat fixed 1px 0px}

"Margin" lühitunnus grupeerib servade vahekaugust määratlevad väärtused. Teisisõnu määravad äärised sisuala kauguse veebisirvija akna servadest. Näiteks võib tekstilõik, pilt, tabel, vm hüperteksti element alata veebisirvija vasakust servast 10 pikselit kaugemal, ülemisest servast 50 pikselit allpool või lõppeda 50 pikselit enne veebisirvija akna paremat serva vmt.

"Margin" deklaratsioon võib sisaldada järgnevaid ääriste väärtusi:

{margin: top right bottom left}

Kui määratleda ainult üks väärtus, siis see kehtib kõikidele ääristele:
{margin: top/right/bottom/left} nt

{margin:50px}

Kui määratleda kaks väärtust, siis need kehtivad, vastavalt esimene ülemisele ja alumisele äärisele ning teine vasakule ja paremale äärisele:
{margin: top/bottom right/left} nt

{margin:50px 20px}

Kui määratleda kolm väärtust, siis need kehtivad, vastavalt esimene ülemisele, teine vasakule ja paremale ning kolmas alumisele äärisele:
{margin: top right /left bottom} nt

{margin:50px 20px 50px}

„Border” lühitunnus grupeerib äärejooni määratlevad väärtused. „Border” deklaratsioon võib sisaldada järgnevaid äärejoone määranguid:

{border: width style color}

Näide

p{border: 3px dashed red}

„Padding” lühitunnus grupeerib hüperteksti elemendi ümber oleva tühja ala laiusi määratlevad väärtused. „Padding” deklaratsioon võib sisaldada järgnevaid väärtusi:

{padding: top right bottom left}

Vaikimisi väärtuseks on „0”. Kasutada võib nii protsente kui ka muid ühikuid, nt pikseleid. Kui elemendi iga külje ümber soovitakse ühelaiust tühja ala, siis kasutatakse vaid ühte väärtust (nt {padding:10px}).
„List” lühitunnus grupeerib kolm nimistu väärtust. „List” deklaratsioon võib sisaldada järgnevaid nimistu väärtusi: {list-style: image position type}

Näide
li {list-style: url(ring1.gif) outside square} - nimistu ridade tähiseks kuvatakse etteantud pildike (ring1.gif) ja selle asukohaks on väljapoole joondus (outside vastand inside).

Kui kasutada pilti, siis oleks viisakas lisada ka „type” väärtus, sest muidu ei pruugi pilt alati korralikult kuvada.

Klass- ja ID elemendid

Klass- ja ID elementide nimetused ei ole määratletud ja võivad olla suvalise pikkusega. Kuid vältida tuleks klass- ja ID elementide liigset pikkust.

Näide

Pikk klasselemendi nimetus:

.kassipildi_ees_olev_lahter{background:red}

Optimaalsema pikkusega klasselemendi nimetus:

.kass{background:red}

Stiili omistamine mitme klasselemendi abil

Kui mitme elemendi reeglid peaksid sisaldama ühte sama definitsiooni ja teisi erinevaid definitsioone, siis ei saaks neid elemente grupeerida, vaid samast definitsioonist tuleks luua eraldi klasselemendi reegel. Seejärel aga viidata HTML-koodis mitmele klasselemendile.

Erinevad elemendid ühe sarnase definitsiooniga:

.andmed{width:500px;height:250px; background:green}
.pealkirjalahter{font-style:italic; background:green}
.vasakmenyy{text-align:left; background:green}

Sarnasest definitsioonist on loodud eraldi reegel:

.andmed{width:500px;height:250px}
.menyy{text-align:left}
.jalus{font-style:italic}

.taust{background:green}

HTML-koodis töötab eelnev järgnevalt:

<div class="andmed taust">Andmed</div>
<div class="menyy taust">Menüü</div>
<div class="jalus taust">Uudised</div>

Lisavõimalused

CSS-i abil võib optimeerida ka HTML-koodi, kui kasutada veebilehtede kujundamisel tabelite asemel CSS klass- või ID elementidega määratletud kihte (nt <div class= ”kujunduskiht1">Menüü</div>).

CSS reeglid võimaldavad luua nupuefekte (rollover), mis muidu lahendatud programmeerimiskeelte abil (nt Javascriptis). CSS-i nupuefektid vähendavad veebilehe mahukust ja nende kasutamisel võib loobuda sarnastest Javascripti lahendustest. Nupuefektide, jm huvitava CSS-i puudutava materjali võib leida Jeffrey Zeldmani kirjutistest Internetis.

Lõpetuseks

CSS-i optimeerimiseks leidub mitmeid võimalusi. Erinevate lahenduste kombineerimisel on võimalik saavutada korralik kokkuhoid CSS-i faili mahus ning kiirendada see läbi veebilehtede kuvamist. Veebisait, mis teenindab palju kliente, ei saa lubada kohmakaid stiililehti ja peab eelistama kiireid lahendusi.
Väga keeruliste ja mahukate stiililehtede loomisel tuleb otsustada kas aegluse või kiiruse kasuks. Alati ei saa ka nõuda maksimaalset
optimeerimist, sest see võib raskendada stiililehtede hilisemat muutmist näiteks tühikute ära korjamise või kommentaaride lühendamise tõttu on reeglitest raskem aru saada.
CSS-i optimeerimisest huvitatutel soovitan tutvuda Andrew B. Kingi raamatuga „Speed Up Your Website”.

CSS-i plussid

• kasutamislihtsus - ei vaja loomiseks lisatarkvara, stiililehe reeglid võib kirjutada lihtsate tekstiredaktoritega (nt Notepad);
• kokkuhoidlikkus - vaid ühte faili kirjutatud reeglitega võib määratleda saja või isegi kümnete tuhandete veebilehtede kujunduse. Kui reegleid kirjutada iga veebilehe jaoks eraldi, siis on nende muutmine aeganõudev ja maht pretensioonikas;
• vähenenud uuendus-/muutmisaeg - reegli vahetamisega ühes CSS failis, muutuvad paljude HTML failide kuvad;
• interoperaablus ja käideldavus - vastavus W3C standarditele (veebistandarditele), toetus nii erivajadustega kui uuemate veebisirvijate kuvamisviisidele;
• suurenenud struktureeritus - HTML markeerimiskeelest on CSS-i kasutamisel eraldatud paljud või praktiliselt kõik kujunduselemendid, mis parendab andmete käideldavust.