CSS/Pildiasendustehnikad

Teinekord ei piisa meil CSS-i poolt pakutavatest fondi sättimise vahenditest. Näiteks soovime me kasutada pealkirjana mingit erilise kujuga kalligraafilist kirja nagu näiteks järgmine tekst "Eriline pealkiri":

Kui me määraksime oma pealkirjale CSS-ga sellise fondi, siis töötaks meie arvutis kõik kenasti, aga oleks naiivne loota, et ka kõigi meie lehekülje külastajate arvutisse see font installeeritud on (tegelikult ei saa me kindlad olla üheski konkreetses fondis). Üks võimalus oleks märkida atribuudi 'font-family' parameetriks fondifaili aadressi:

h1#eriline { font-family: url("http://www.allthefonts.com/specialfont.ttf") }

Aga seda ei peeta heaks tooniks, ja lisaks võivad fondifailid olla suhteliselt suured. Ja veelkord: selline kasutajale pealesunnitud fontide allalaadimine on äärmiselt taunimisväärne tegevus ning ainukeseks mõeldavaks variandiks jääb teksti asendamine pildiga - pealegi ei pruugi me ju kasutada lihtsalt mingit fonti vaid hoopis näiteks mõnda fotot tekstiga või 3D programmiga renderdatud tähti, misiganes.

Üheks variandiks, mis esimesena pähe kargab on panna pealkirja asemele 'img' element:

<img src="eriline_pealkiri.png" alt="eriline pealki" />

Aga sellega me rikume struktuuri ja kujunduse lahus hoidmise põhimõtet, sest sedasi tehes me lisame leheküljele pildi, mis tegelikult omab vaid kujunduslikku tähtsust ning ühtlasi ei saa me enam lehekülje kujundust muuta ilma et viiksime sisse muutusi HTML-i. Seda me aga teha ei soovi.

Õnneks on loodud mitmeid tehnikaid, mis võimaldavad HTML-i elemendi sisuks oleva teksti asendada pildiga. Ükski nendest tehnikatest pole ideaalne, ning juhul kui olete idealist, siis need võtted teile tõenäoliselt ei sobi, aga kuna me elame nagunii vigaste brauserite ja kohutavalt ebastandartsete veebilehtede maailmas, siis on need tehnikad siiski üsna süütud.

FIR

Fahrner Image Replacement (FIR) on oma nime saanud selle meetodi looja Todd Fahrner'i järgi. Tehnika seisneb selles, et asendatava HTML-i elemendi sisse lisatakse üks ekstra 'span' element:

<h1 id="eriline"><span>Eriline pealkiri</span></h1>

Seejärel seatakse elemendi taustaks meie soovitud pilt ning seatakse elemendi kõrgus võrdseks pildi kõrgusega. Lisaks peidetakse 'span' sees asuv tekst.

h1#eriline {
    /* taustapilt */
    background-image: url("eriline_pealkiri.png");
    background-repeat: no-repeat;

    /* pildi suurus */
    height: 59px;
}

h1#eriline span { display: none }

Plussid

Kui kasutaja on CSS välja lülitatud või ta kasutab brauserit, mis CSS-i ei toeta, siis näeb ta harilikku pealkirja. Kui CSS on lubatud, näidatakse hariliku pealkirja asemel pilti.
Lihtsus.

Miinused

Ei tööta paljudes ekraanilugejates (ing. k. screenreader - vaegnägijatele mõeldud programm, mis loeb arvutiekraanilt teksti valjult ette). Sellel teemal on kirjutanud pikalt Joe Clark "A List Apart'i" artiklis Facts and Opinion About Fahrner Image Replacement.
Ei tööta siis kui kasutaja on piltide näitamise välja lülitanud, aga CSS on sisse lülitatud. Paljud kasutajad, kelle internetiühendus on aeglane või kes maksavad iga edastatud baidi pealt kasutavad aga tihti võimalust pilte mitte alla laadida, küll aga CSS-i.
Lisab HTML koodi mittesemantilist müra 'span' elemendi näol.

LIR

Leahy/Langridge Image Replacement (LIR) on tehnika, mille mõtlesid üksteisest sõltumatult ja praktiliselt üheagselt välja Seamus Leahy ja Stuart Langridge. Selle võtte eesmärk oli vabaneda FIR-i vajadusest kasutada mittesemantilist 'span' elementi. Meetodi idee on äärmiselt lihtne: selle asemel, et peita tekst 'span'-i nähtamatuks muutmisega, seatakse elemendi kõrgus nulliks, pildi jaoks aga tehakse ruumi ülemise või alumise polstri suuruse määramisega.

<h1 id="eriline">Eriline pealkiri</h1>

h1#eriline {
    /* taustapilt */
    background-image: url("eriline_pealkiri.png");
    background-repeat: no-repeat;
    
    /* teksti peitmine */
    height: 0;
    overflow: hidden;

    /* pildi suurus */
    padding-top: 59px;
}

See meetod töötab kenasti kõigis uuemates brauserites, ent IE5 vigase box-modeli tõlgenduse tõttu ei ilmu seal midagi nähtavale. Õnneks aitab meid vastav häkk, mida kasutades meie kood omandab alljärgneva kuju ja hakkab ka IE5-s kenasti tööle.

h1#eriline {
    background-image: url("eriline_pealkiri.png");
    background-repeat: no-repeat;
    
    padding-top: 59px;
    overflow: hidden;
    
    /* Väärtus IE5-le */
    height: 59px;
    
    /* IE box-model hack */
    voice-family: "\"}\""; 
    voice-family:inherit;
    
    /* Väärtus teistele brauseritele */
    height: 0;
}

Plussid

CSS-i toetuse puudumisel näeb kasutaja harilikku pealkirja.
Ekraanilugemistarkvara (screenreader) loeb teksti ette hoolimata sellest, et silma eest on ta peidetud.
Puudub vajadus mittesementilise 'span' elemendi järgi.

Miinused

Ei tööta juhul, kui CSS on sisse lülitatud, aga pildid välja lülitatud.
Vajab mõne olulise brauseriga (IE5) töötamiseks häkki.

text-indent meetod

Selle meetodi autoriks on Mike Rundle. Üldpõhimõte on sama FIR-il, aga kõrguse nullimise asemel kasutatakse siin teksti taandamist nii kaugele, et see kaob vaateväljast.

<h1 id="eriline">Eriline pealkiri</h1>

h1#eriline {
    /* taustapilt */
    background-image: url("eriline_pealkiri.png");
    background-repeat: no-repeat;
    
    /* teksti peitmine */
    text-indent: -9000px;

    /* pildi suurus */
    height: 59px;
}

Ka siin tekib probleem IE5-ga, mis koos teksti negatiivse taandamisega liigutab kaasa ka taustapildi. Üheks võimaluseks on paigutada see element absoluutselt positsioneeritud konteineri sisse, aga mõistagi pole see variant kaugeltki alati vastuvõetav. Teine võimalus oleks ära jätta 'no-repeat' ning taandada teksti mingi arvu pildipikkuste jagu ja ühtlasi fikseerida ka elemendi laius. Näiteks nõnda:

h1#eriline {
    /* taustapilt */
    background-image: url("eriline_pealkiri.png");
    background-repeat: repeat-x; /* selle võib ka üldse ära jätta */
    
    /* teksti peitmine -10x560px */
    text-indent: -5600px;

    /* pildi suurus */
    height: 59px;
    width: 560px;
}

Plussid

CSS-i toetuse puudumisel näeb kasutaja harilikku pealkirja.
Ekraanilugemistarkvara (screenreader) loeb teksti ette hoolimata sellest, et silma eest on ta peidetud.
Puudub vajadus mittesementilise 'span' elemendi järgi.
Lõplik lahendus on pigem kompromiss brauserite vahel, kui tõeline häkk.

Miinused

Ei tööta juhul, kui CSS on sisse lülitatud, aga pildid välja lülitatud.

Katmise meetod

See tehnika püüab vältida kõigis eelnevates sisalduvat puudust, ning tulla vastu neile kasutajatele, kes on oma brauseril pildid välja lülitanud. Idee seisneb selles, et koodile lisatakse üks tühi 'span' element, millele määratakse taust, ning läbi absoluutse positsioneerimise kaetakse sellega tekst (absoluutselt positsioneeritud elemendid asuvad teadagi "kõrgemal" kui muud elemendid). Kui mingil põhjusel pilti ei laeta, siis jääb 'span'-i läbipaistvuse tõttu nähtavale harilik pealkiri, pildi laadimisel aga kaetakse see.

<h1 id="eriline"><span></span>Eriline pealkiri</h1>

h1#eriline {
    /* pildi suurus */
    width: 560px;
    height: 59px;

    /* väärtuse 'relative' läbi hakkab selle
       elemendi sees absoluutne positsioneerimine
       toimuma selle elemendi suhtes */
    position: relative;
}

h1#eriline span {
    /* taustapilt */
    background-image: url("eriline_pealkiri.png");
    background-repeat: no-repeat;
    
    /* positsioneerimine */
    position: absolute;
    left: 0;
    top: 0;

    /* pildi suurus */
    width: 560px;
    height: 59px;
}

Plussid

CSS-i toetuse puudumisel näeb kasutaja harilikku pealkirja.
Ekraanilugemistarkvara (screenreader) loeb teksti ette hoolimata sellest, et silma eest on ta peidetud.
Lõplik lahendus on pigem kompromiss brauserite vahel, kui tõeline häkk.
Töötab juhul, kui CSS on sisse lülitatud, aga pildid välja lülitatud.

Miinused

Lisab HTML koodi mittesemantilist müra 'span' elemendi näol.

Kokkuvõte

Pildiasendustehnikaid ja nende variatsioone on veel palju-palju rohkem kui siin kirjeldatud, aga kõigil neil on vähemalt üks arvestatav viga ning halvemal juhul rohkem. Kindlasti ei tasuks kasutada FIR-i, mis on küll kõige vanem ja ka kõige lihtsam, kuid sisaldab liialt palju puudusi. Järgnevalt, kui oleme FIR-i kõrvale jätnud tuleb meil kaaluda, kas meile on olulisem, et meie koodis poleks mittesemantilisi tühjasid 'span' elemente või see, et meie lehekülge saaksid kasutada ka aeglase modemiühendusega kliendid, kes on brauseril piltide allalaadimise keelanud. Kui otsustame esimese valiku kasuks, siis on meil valida LIR-i ning text-indent meetodi vahel, kui aga kaldume teisele poolele, siis jääb meile katmise võimalus. See valik pole kerge ning mõnel juhul võime valida hoopis taolistest tehnikatest loobumise, aga see valik jääb igaühe enda teha, seni kuni näiteks brauserid ei hakka toetama hetkel loomisel olevat standardit CSS 3, aga see aeg on mägede taga.

Raamat: CSS

<< Float

Häkid >>

Sisukord