Prihodnost oblikovne plati spleta
Čeprav se zdi, da razvoj specifikacije CSS 3 (Cascading Stylesheets version 3) poteka že celo večnost, se na obzorju počasi poraja nov standard, ki je že zdaj podprt v številnih brskalnikih. Kaj novega prinaša CSS3?
Kakor HTML5 tudi CSS 3 nastaja v sodelovanju z izdelovalci brskalnikov, to pa posledično pomeni, da številni brskalniki že zdaj podpirajo del specifikacije CSS3. Podpora CSS3 pa ne pomeni, da brskalniki poznajo tudi vse CSS3 novosti. Če brskalnik ne pozna določene CSS3 oznake, jo preprosto ignorira, tako da stran deluje, tudi če brskalnik ne pozna specifičnih CSS3 oznak (enako velja tudi za CSS2 oznake). Med elementi, ki jih vpeljuje CSS3, je polovica takšnih, ki so v delovni fazi (ang. working draft), četrtina takšnih, ki bodo z veliko gotovostjo sprejeti v nov standard (ang. candidate recommendation), in četrtina z nedorečenih statusom. V članku bomo na kratko predstavili najbolj zanimive novosti, ki jih vpeljuje CSS3.
Izbirniki in tipi
Med gradnike, ki bodo skoraj zagotovo sprejeti v specifikacijo CSS3, sodijo tudi t. i. izbirniki (ang. selectors). Že v CSS2.1 je mogoče stilno predlogo dodeliti elementnim tipom (p{...}, li{...}), razredom (table.oblika1 {...}) ali posameznim elementom s pomočjo ID atributov (#vsebina li {...}). CSS3 vpeljuje predvsem nove koncepte na ravni atributov in psevdorazredov. Večina brskalnikov podpira CSS3 izbirnike, razen Internet Explorerja 8, ki jih le delno podpira. Če je specifikacija CSS2.1 omogočala iskanje elementov po vrednosti atributa (input[type=text] najde vsa tekstovna polja), CSS3 to možnost precej razširja. Tako omogoča iskanje atributov, tudi če poznamo samo del vrednosti, in to ob pomoči regularnih izrazov (ang. regular expressions). Uporabljamo lahko izraze, kot so ^= (išči na začetku), $= (išči na koncu) ali *= (išči kjerkoli v vrednosti atributa). Izraz input[type$="t"] najde tako tekstovna polja kot tudi gumbe za potrditev (type="submit").
Veliko je tudi novih psevdorazredov. :nth-of-type() omogoča izmenjujoče obarvanje celic tabel, kar je že zdaj mogoče, vendar omenjeni konstrukt olajša delo. Tako lahko z tr:nth-of-type(2n) {background-color: yellow} obarvamo vsak drug element (oznaka 2n) <tr> z rumeno; če bi želeli obarvati lihe celice, bi namesto 2n uporabili 2n+1. Namesto formul lahko uporabimo tudi ključne besede, v našem primeru even ali odd. Med pomembne psevdorazrede, ki jih vpeljuje CSS3, sodijo še m:nth-last-of-type(), nth-last-child(); only-child; :only-of-type; :last-of-type ali :empty. Že sama imena nam dajejo slutiti funkcijo - :empty označuje elemente brez vsebine, #vsebina > p:last-child označuje zadnji odstavek v vsebniku "vsebina". Zanimiv problem rešuje :target, saj z njegovo pomočjo poljubnemu sidru (ang. Anchor) dodamo informacije o lokaciji, kamor bo preusmerjen ob pomoči povezave na sidro.
a:target {color: red}
a:target:hover:before
{content: "Cilj povezave "attr(name)" ";}
Zgornja koda po kliku povezave do sidra obarva sidro rdeče in hkrati izpiše besedilo ob prehodu z miško. Dodatne možnosti, ki jih vpeljuje CSS3 in so uporabne predvsem v obrazcih, so :disable; :enable in :checked. Ti omogočajo manipulacijo HTML atributa - tako z :disabled onemogočimo vnosno polje v obrazcu.
Tipi in z njimi povezane novosti
CSS3 pozna tudi psevdodokumente, vendar je novosti manj kot pri psevdorazredih. Ob pomoči :content je mogoče dodati poljubno besedilo (content: "Besedilo"), nastaviti vrednost atributov (content: att(title)) ali celo implementirati preprost števec:
h1:before {
content: counter(Nivo1) " ";
counter-increment: Nivo1; }
h2:before {
content: counter(Nivo1) "." counter(Nivo2) " ";
counter-increment: Nivo2; }
body {counter-reset: Nivo1;}
h1 {counter-reset: Nivo2;}
Koda pred elementi tipa <h1> in <h2> vstavi kombinacijo števca, tako da poglavja oštevilči podobno kot v urejevalniku besedil. Števec povečamo s counter-increment, pri čemer vsak element <h1> resetira števec za nižji nivo. S tem dobimo zaporedje tipa 1.1, 1.2...,2.1,2.2...
CSS3 omogoča definiranje preprostih števcev.
Mediji za izpis
Razen izbirnikov so pomembna novost CSS3 dodatni atributi in logični operatorji pri filtrih za medijske tipe (ang. media queries). Z njihovo pomočjo je mogoče dodeliti različnim medijskim tipom različne CSS predloge. Tipi medijev so sicer že sestavni del specifikacije HTML4 in CSS2.1. Med novosti sodijo tipi screen za spletne strani, print za izpis na tiskalniku, handheld za mobilne naprave in all za vse izhodne naprave. Tako je mogoče ob pomoči kode <link rel="stylesheet" media="print and (color)" "href="..."/> definirati stilno predlogo za barvne tiskalnike. Možno je pridobiti višino in širino okna (width, height), širino in višino zaslona (device-width, device-height), barvno globino v bitih na osnovno bravo (color; je 0 pri črno-belih zaslonih in 8 pri barvnih), ločljivost (resolution v enotah dpi ali dpcm) in postavitev (orientation, ki ima vrednost landscape ali portait).
Pisave in učinki besedila
Ena izmed najbolj dobrodošlih novosti CSS3 so zagotovo spletne pisave (ang. webfonts) - pisave, ki jih je mogoče naložiti iz spleta, kar nas "odreši" Arial-Verdana-Times-Courier skupine. Večina sodobnih brskalnikov podpira spletne pisave, a si niso povsem enotni. Firefox, Opera, Safari in Chrome podpirajo pisave tipa .ttf (TrueType) in .otf (OpenType). Po drugi strani pa Microsoftov Internet Explorer podpira format EOT. Microsoft je sicer dal na voljo orodje, ki lahko pretvori pisave v format EOT. Svojo pisavo si lahko definiramo na naslednji način:
@font-face {
font-family: 'MojaPisava';
src: url('MojaPisava.eot');
src: local('MojaPisava Web Regular'),
url('MojaPisava.otf'),
format('opentype');
Omenjena koda je povzeta po Paulu Irishu in omogoča vključitev za vse brskalnike. Najprej definiramo ime pisave oz. družine pisav (ang. font family), nato za Internet Explorer specificiramo datoteko EOT, z vrednostjo local Internet Explorerju "preprečimo" dostop do drugega dela deklaracije, ki je namenjen drugim brskalnikom. Dodatni argumenti nam omogočajo definirati tudi krepko in poševno različico pisave (font-weight: bold, font-style: italic). Da bi rešili zmešnjavo s formati se je Mozilla Foundation odločila in definirala svoj format, imenovan Web Open Font Format (.woff), ki zmanjšuje velikost pisave (prenesenih podatkov) in omogoča nadzor nad avtorskimi pravicami. Čas bo pokazal, ali se bo tehnologija uveljavila.
Zaradi varstva avtorskih pravic je trenutno mogoče uporabiti samo prosto dostopne pisave, a ostaja upanje, da se bo to z uveljavitvijo WOFF spremenilo.
Senčenje in megljenje pisave
Ne samo spletne pisave, tudi senčenje je bilo izločeno v CSS2.1. V CSS3 je slednje spet vstopilo, in sicer s pomočjo lastnosti text-shadow. p {text-shadow: #bbb 2px 2px;} ustvari senco v besedilu - prvi atribut definira barvo, druga dva pa vodoravni in navpični odmik (ang. offest). Dodatno je mogoče definirati tudi tretji parameter, ki označuje dolžino zabrisanosti. Zgled: h3 {color: transparent; text-shadow: black 0 0 2px;}. Omeniti je treba, da Internet Explorer ne pozna lastnosti text-shadow, vendar je enak učinek mogoče doseči na drug način (z zvijačami).
Omejevanje besedila s pomočjo škatle in dvostolpična postavitev sta novosti, ki ju prinaša CSS3.
Besedilo, ki se ne poda v oblikovno predlogo strani, lahko predstavlja težavo, zatu tudi na tem področju CSS3 vpeljuje novosti. Mogoče je definirati omejitve, t. i. škatlo (ang. Box), ki omejuje besedilo #box {width: 200px; word-wrap: break-word;}. Če besedilo presega 200 točk, se bo omenjena koda besedilo prelomila (lahko bi besedilo tudi preprosto odrezali).
Postavitev, prosojnost in zaobljeni robovi
Glavna težava CSS2.1 so pomanjkljivosti pri definiranju postavitve spletne strani (ang. site layout). CSS3 želi vrzel vsaj deloma zapolniti z lastnostmi, kot je box-sizing, box-orient, ki naj bi nadomeščala zvijače pri postavitvi float. Vsi sodobni brskalniki le deloma podpirajo omenjene novosti in to bo marsikoga odvrnilo. Med lastnosti za postavitev strani tako sodijo column-count oz. column-width za definiranje stolpcev, column-gap za definiranje praznega prostora med stolpci in column-rule za definiranje črt med stolpci. Ker gre za eksperimentalne lastnosti, je treba uporabiti predponi -wbkit- oz. -moz-. Ob pomoči .glavnoBesedilo {-moz-column-count: 2; -webkit-column-count:2;} tako definiramo dvostolpično postavitev strani.
Novost v rabi je prosojnost.
Morda najbolj uporabljena novost CSS3 v rabi je prosojnost. Z lastnostjo opacity je mogoče določiti stopnjo prosojnosti (1 - neprosojno, 0 - popolnoma prosojno). Tudi tokrat je treba v Internet Explorerju uporabiti zvijačo: #prosojnost {opacity: 0.3; filter: Alpha(opacity=30);}. Pri prosojnosti je mogoče uporabiti tudi barve, in sicer ali z #0000FF ali na način rgb(0,0,255).
Za brskalnike Firefox, Chrome in Safari (t. i. Webkit brskalnika) je mogoče uporabiti različne učinke za okvirje. Najbolj dobrodošli so zaobljeni okvirji. Kot okvir je mogoče uporabiti tudi slike. Za zaobljene okvirje uporabimo konstrukt -moz-border-radius: 5px oz. -webkit-border-radius: 5px, pri čemer je predpona -moz- in -webkit- obvezna, saj gre za eksperimentalne zadeve. Novost je tudi senčenje, ki ga določimo z box-shadow: #777 10px 10px 5px, pri čemer prvi parameter označuje barvo, druga dva zamik sence in četrti zamegljenost. Bolj kompleksna lastnost je border-image: url(border.png) 27 27 27 27 round round. Prvi parameter url določa sliko, ki jo bomo uporabili za rob, naslednja štiri števila določajo točke, ki si jih brskalnik pridobi od zgornjega, desnega, spodnjega in levega roba. Sledita prametra, ki kopirata sliko, ki smo jo določili, in jo prilagodita robovom. Debelina roba ni določena z velikostjo slike ali z omenjenimi štirimi številkami, temveč jo določimo kot ponavadi s parametrom border. Mogoče je tudi določiti slike za vsak rob in kote posebej, kar storimo z border-top-image, border-right-image, border-bottom-image, border-left-image, border-top-left-image, border-top-right-image, border-bottom-left-image, border-bottom-right-image. Podobno kot z border-image je mogoče definirati tudi border-corner-image, kar nam omogoča drugačne slike v kotih kot na preostalem robu. Tako pri border-image kot box-shadow je treba dodati ustrezno predpono (-webkit- ali -mozilla-).
Zaobljeni robovi, senčenje in slika kot rob
Za konec
CSS3 je še daleč od končne različice. Treba je še marsikaj postoriti in predvsem doreči določene dele specifikacije. Kljub temu je veliko novosti že zdaj uporabnih v praksi in podprtih s strani brskalnikov, to pa daje slutiti, da se CSS3 obeta svetla prihodnost. Spet je črna ovca Microsoft, ki s svojimi brskalniki (tudi najnovejšim Internet Explorerjem 8) "uvaja" svoje zakonitosti in interpretacije specifikacije. CSS3 tako s predstavljenimi novosti razvijalcem ponuja kopico možnih orodij, ki bodo marsikomu olajšale delo. Vprašanje je, kako to, da se omenjene novosti, kot so spletne pisave, megljenje, senčenje in sorodne tehnologije, niso uveljavile že prej. Ostaja tudi vprašanje, v katero smer bo šel razvoj, saj je veliko novosti, ki jih vpeljuje CSS3, še v fazi, ko je mogoče vse (le četrtina jih bo po vsej verjetnosti sprejeta v končno specifikacijo). Nekateri razvijalci menijo, da določenih novosti morda ne bi sprejeli v specifikacijo, temveč bi njihovo izvedbo prepustili razvijalcem, ki bi jih implementirali ob pomoči drugih tehnologij, npr. JavaScript. Morda se bo izkazalo, da bodo v prihodnosti, ko bosta sprejeta tako CSS3 kot HTML5, kompleksne postavitve in oblikovne predloge spletnih strani naš vsakdan.
Koristne povezave:
CSS3 . Info - All you ever needed to know about CSS3, www.css3.info/
W3C: CSS3 Modules, www.w3.org/Style/CSS/current-work#CSS3
W3C: CSS3 Roadmap , www.w3.org/TR/css3-roadmap/
CSS Selectors test, www.css3.info/selectors-test/
CSS3 Previews, www.css3.info/preview/
Uporaba pisav Webfonts, paulirish.com/2009/bulletproof-font-face-implementation-syntax/
CSS transformacije, webkit.org/blog/130/css-transforms/
CSS animacije, webkit.org/blog/138/css-animation/
Microsoft Web Embedding Fonts Tool (WEFT), www.microsoft.com/typography/WEFT.mspx