Selle lehe tegemisest

0

Tehes väikest viisi algust, kirjutan selle sama lehe tegemisest, millel praegu asud. Umbes poolteist aastat tagasi, peale kooli lõpetamist tegin omale kiiruga tööde näitamiseks portfoolio lehe. Asjad läksid aga sedaviisi, et enne kui sain lehte põhjalikumaks muutma hakata, tulid ette juba järgmised ettevõtmised. Ja ka uuendamise koha pealt jäi üsnagi unarusse. Nüüd uue versiooni tegemisel oli plaanis teha põhjalikum ja terviklikum lahendus. Tehnilisemaks minnes, siis algselt tahtsin teha suuresti CSS3 ja HTML5 võimalusi katsetava ja ära kasutava veebisaidi. Teatud kaalutlustel siiski loobusin sellest. Arvan, et kui soov on jõuda ühesuguse kujunduse ja funktsionaalsusega võimalikult paljude inimesteni (erinevatel op. süsteemidel, erinevatel brauseritel, erinevatel ekraanisuurustel), siis pelgalt standardlahendustega seda minu hinnangul täna teha ei saa. Kahjuks jääb see tehnoloogia pideva arengu ja inimeste erinevate tehnoloogiliste võimaluste kasutamise tõttu püsima ka edasipidi.

Menüüs teksti kuvamine nurga all

Nüüd aga täpsemalt. Alustades lehe ülevalt otsast, siis menüü kirjed sai sellisel kujul toimima ilma javaskripti või muu taolise lahenduse kasutamiseta. Pean silmas siinjuures teksti nurga all kuvamist. Enamlevinud brauserite uuemates versioonides on see saavutatud pööramise parameetrit kasutades. CSS3 standard süntaks on transform:rotate(30deg);, Mozilla brauserite jaoks -moz-transform:rotate(30deg);, webkit brauserite jaoks -webkit-transform:rotate(-33deg); ning Opera jaoks -o-transform:rotate(-33deg);. Nagu näha, tuleb kõikide suuremate lehitsejate jaoks oma lahendust kasutada. Loomulikult kehtib see ka Internet Exploreri kohta. Teatavasti laialdaselt kasutusel olevates IE6, IE7 ja IE8 versioonides, ei toimi enamus CSS3 parameetreid. Sageli saab sellistel juhtudel kasutada Microsofti poolt loodud filtreid IE jaoks, kuid antud juhul on sellel oluline puudus juures. Nimelt on olemas pööramiseks filter filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);. Kahjuks on seal võimalik kasutada vaid nelja väärtust: 0, 1, 2 ja 3. Vastavalt siis 0, 90, 180 ja 270 kraadi pööramiseks. Minul oli aga vaja saada erineva nurga all ühe kraadise täpsusega. Küll on see aga võimalik ühe “pisut” keerukama filtri abil, nimelt kasutades maatriksit. Sellisel viisil nurkade välja arvutamine nõuab suhteliselt heal tasemel matemaatilisi teadmisi, kuid õnneks on mõned head inimesed loonud lihtsad abivahendid, mis meile arvutustöö ise ära teevad. Näiteks siin ja siin. Märkuseks, et selle filtri puhul, kui jätta lisamata maatriksi väärtuste järele tekst SizingMethod='auto expand', siis pööratakse elementi tema esialgste mõõtmetega kasti sees. See tähendab, et kasti alast välja jääv osa läheb peitu. Aitab eelpool kirjutatud koodilõik või padding‘uga elemendi ümber ala suurendamine.

CSS3 parameetrite imiteerimine

Probleemid, mida lahendada tuli, olid veel tekstile varjud (text-shadow), elementide varjud (box-shadow), gradient taustad ja ümarad nurgad (rounded-corners). IE jaoks on varjude genereerimiseks mitmeid erinevaid filtreid: DropShadow, Shadow, Blur ja Glow. Kõigil neil on omad miinused, iseärasused ja puudujäägid, kuid kõige paremini sobis nendest Shadow. DropShadow puuduseks on varju sujuva ja ähmase ääre puudumine, vari on kindla tugeva äärega. Blur’i kasutamiseks tuleb lehe html struktuuri lisada lisaelemente, kui on soov saada näiteks taustana vari. Nimelt muudab antud filter elemendi tervenisti ähmaseks. Glow lisab elemendile ümber “sära”, mida võib ka nimest järeldada. See ei jäta aga ühtlast ilusat sujuvat varju efekti, vaid pigem jääb säbruline ebaühtlane ümbris. Shadow puuduseks võib pidada ebaühtlast jaotumist elemendi ümber. Kui CSS3 box-shadow tekitab ühtlaselt kõikide servade alt paistva kerge varjundi, siis IE filter kuvab varju sirgjooneliselt ühes suunas. Siiski on ka võimalik kasutada sama Shadow filtrit ühe elemendi juures mitu korda ja niimoodi luua võimalikult hea tulemus. Lisaks on siis võimalus määrata 360 kraadi ulatuses, mis suunas varju soovid, mis ulatuses vari on ja mis värvi see on. Samuti on seda võimalik kasutada nii teksti, pildi kui ka näiteks div’i juures.

IE filter gradiendi jaoks

Gradiendi ehk värvide sujuva ülemineku juures on IE-l täitsa korralik filter, mida saab edukalt kasutada mitmete probleemide lahendamisel. Filter ise on selline: filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=0, startColorStr='#AARRGGBB', EndColorStr='#AARRGGBB');. Määrata saab siis filtri juures gradiendi suuna, vaikimisi on 0 ehk vertikaalne ja 1 on horisontaalne. Lisaks veel alguse ja lõpu värvid kuueteistkümnendsüsteemis. AA määravad alpha ehk läbipaistvuse, RRGGBB on värv RGB süsteemis. Siit tuleneb ka üks suur pluss, mida nüüd veel enam saab ära kasutada. Põhimõtteliselt võimaldab antud filter imiteerida vägagi edukalt CSS3 RGBA värvi parameetrit ja seda juba Internet Explorer 5.5-st alates! Määrates filtris alguse ja lõpu värvi samaks, näiteks must, ning läbipaisvuse 60% peale, olen saanud elemendi soovitud taustavärviga ja läbipaistvusega. Filter näeks sel juhul välja nii: filter:progid:DXImageTransform.Microsoft.Gradient (startColorStr='#99000000', EndColorStr='#99000000');. Ainuke keerulisem aspekt on alpha värvuse 16-süsteemi saamine, kuid loomulikult on ka selleks abivahendeid. Üks neist on Google Chrome’i JavaScript Console’i või Firefoxi Firebugi Console’i kasutades sinna järgmise rea kirjutamine: Math.floor(0.6 * 255).toString(16);. Antud näites on 0.6 soovitud läbipaistvus, mis annab vastuseks 99. Kuigi on olemas ka CSS-i parameeter opacity ja ka IE filter opacity jaoks, siis nende puuduseks on lisaelemendi vajadus html koodis. Põhjus selles, et määrates näiteks mingile teksti sisaldavale div’le läbipaistvuse, muutub ka see tekst samamoodi läbipaistvaks!

Ümarad nurgad

Ühe väga laialdaselt kasutatava stiili saamiseks aga IE-l enda loodud filtrit pole – need on ümarad nurgad. Ning loomulikult ei ole ka puhtalt standardse CSS-i koodiga saavutatavat lahendust. Kui me selleks ei loe erinevaid taustapiltidega teostatavaid asju. Seega ei jäägi muud üle kui kasutada kas täismõõdus fikseeritud ümarate nurkadega taustapilti, ümaraid pildifaile kõigist nurkadest, javascripti abi või spetsiaalselt IE jaoks sobilikku behavior parameetrit. Selle abil on võimalik näiteks määrata parameetrile HTML komponente (htc faile). Mina kasutasin PIE nimelist toodangut. See võimaldab määrata IE6-IE8 brauserites mitmeid CSS3 atribuute, sealhulgas ka ümaraid nurkasid.

Kokkuvõtteks

Kokkuvõtteks võib öelda, et soovitud tulemuse saavutamiseks on alati mitmeid võimalusi, kuid hea on osata kasutada rohkemat kui ühte neist! Seega võib ka minu käsitluse juures küsida, et miks kuskil kasutasin just seda või teist lahendust, kuid enda lehe juures ongi parim võimalus katsetada, proovida, testida, demonstreerida ja õppida. Postitusega sain küll anda põgusa ülevaate kasutatud tehnikatest, aga loomulikult ei ole see piisav selgitamaks lahti kõiki nüansse. Siiski loodan, et nii mõnigi inimene sai siit midagi kasulikku teada.

Lisa kommentaar

Sinu e-postiaadressi ei avaldata. Nõutavad väljad on tähistatud *-ga