CSS

HTML
Cascading Style Sheets Kodiranja Dinamičen HTML Pisave Urejevalniki HTML Elementi HTML Unicode in HTML Spletne barve W3C XHTML

Cascading Style Sheets (sl. kaskadne stilske podloge) poznane pod kratico CSS so podloge, predstavljene v obliki preprostega slogovnega jezika, ki skrbi za prezentacijo spletnih strani. Z njimi definiramo stil HTML oz. XHTML elementov v smislu pravil, kako se naj ti prikažejo na strani. Določamo lahko barve, velikosti, odmike, poravnave, obrobe, pozicije in vrsto drugih atributov, prav tako pa lahko nadziramo aktivnosti, ki jih uporabnik nad elementi strani izvaja (npr. prekritje povezave z miško). Podloge so bile razvite z namenom konsistentnega načina podajanja informacij o stilu spletnim dokumentom.

Bistvo uporabe CSS je poleg defirniranja pravil, pred vsem ločitev strukture strani - ki jo podaja označevalni jezik skupaj z vsebino - od njene predstavitve. S tem omogočimo lažje urejanje in dodajanje stilov ter poskrbimo za večjo preglednost dokumentov temelječih na HTML sintaksi. Prav tako zmanjšamo ponavljanja kode, saj omogočimo množici strani uporabo istih podlog, kar lahko bistveno zmanjša njihovo velikost.

Specifikacija in vzdrževanje CSS je v rokah skupine CSS Working Group znotraj organizacije World Wide Web Consoritum (W3C). Specifikacijo uradno potrdijo člani W3C (podjetja kot so Adobe, IBM, Microsoft ... ) in tako nastanejo CSS priporočila. Ta pa niso omejena samo na internetnih brskalnikih, uporabljajo se tudi v programih za pisanje dokumentov in elektronskih preglednic kakor tudi na napravah, kot so prenosni telefoni in dlančniki.

Zgodovina in razvoj

Z začetkom HTML-ja leta 1990 se je drastično povečala uporaba interneta. Zmožnosti označevalnega jezika pa niso zadovoljevale širše množice uporabnikov, tako se je pojavila potreba po stiliranju dokumentov. Oktobra leta 1994 je Håkon Wium poslal svoj predlog pravil imenovanih Cascading HTML Style Sheets (CHSS), organizaciji W3C. Njegov predlog je sprejel Bert Bos, ki je prav tako delal na razvoju svojih stilskih podlog imenovanih Stream-Based Style Sheet Proposal (SSP). Z združenimi močmi sta izdala ti. Cascading Style Sheets, pri čemer sta iz Håkonovega poimenovanja odstranila 'HTML', saj je lahko podloga uporabljena tudi v drugih označevalnih jezikih. Predlog je bil prvič predstavljen novembra 1994 na konferenci "Mosaic and the Web" v Chicagu in še drugič oktobra 1995, kjer sta sodelovala oba (Bert in Håkon). V tem času se je pri W3C ustanovila skupina HTML Editorial Review Board (HTML ERB) z glavno nalogo - razvoj bodočih specifikacij. Cilj organizacije in članov W3C je bila, da se CSS specifikacija razglasi za priporočilo, kar se je zgodilo decembra 1996, ko je izšel ti. CSS level 1 (CSS 1). Vpliv na to sta imela tudi brskalnika Microsoft Internet Explorer in Netscape, ki sta se poenotila za uporabo CSS in ga podprla že pred uradno potrditvijo. V začetku leta 1997 se je ERB razdelil na tri delovne skupine: HTML Working Group, DOM Working Group in CSS Working Group. Ustanovljena skupina za CSS je kmalu naletela na določene pomanjkljivosti pri trenutni verziji in dodala funkcije, ki jih ta ni podpirala. Tako je maja 1998, izšlo priporočilo za CSS level 2 (CSS 2). Razvoj se je nadaljeval, narejeno je bilo veliko osnutkov in izdano precej predlogov za uveljavitev novega priporočila CSS 2.1, ta pa je zagledal luč komaj junija 2011 in še zdaj velja za najnovejše priporočilo.

CSS 3

Začetki CSS level 3 segajo v leto 1999, ko so bili izdani prvi osnutki te verzije. Za razliko od prejšnjih priporočil, ki so bile izdane v obliki enega dokumenta za definiranje priporočila, se CSS 3 deli na module, ki nadgrajujejo CSS 2 in uporabljajo CSS 2.1 specifikacijo za njihovo jedro. Vsak modul doda in/ali zamenja del CSS 2.1. Po zaključitvi vsakega modula, bo ta vključen v obstoječ sistem CSS 2.1 poleg vseh predhodno zaključenih modulov. Trenutno poteka delo na več kot štiridesetih različnih modulih, do sedaj pa so bili uradno sprejeti trije - barve (ang. color), imenski prostori (ang. namespaces) in selektorji (ang. selectors).

Sintaksa in uporaba

Vse verzije CSS od 1 do 2.1 in prav tako vse prihodnje izdaje, bodo uporabljale isti temeljni koncept sintakse. Ta je relativno enostavna in sestoji iz angleških ključnih besed, ki poimenujejo stilske lastnosti. Podlogo sestavlja vrsto pravil, določenih za enega ali več selektorjev, kateremu lahko pripada psevdo-razred ali psevdo-element in dekleracijskega bloka. V telesu dekleracijskega bloka (med zavitima oklepajema { }), je zapisana lastnost, kateri sledi dvopičje :, za njo pa vrednost, ki definira dan atribut. Posamezna lastnost ima lahko tudi več atributov - te pa zaključi podpičje ;.

• Selektor določa markirni element, na katerega se stilska pravila nanašajo. Ta je lahko določen glede na HTML elemente določenega tipa (img, div, span ...) ali pa glede na njihov atribut (id, class). Na selektor vpliva tudi način, kako so elementi postavljeni relativno drug na drugega ali gnezdeni med seboj.
• Psevdo-razred predstavlja način identifikacije elementov, v odvisnosti od uporabnikovih aktivnosti, psevdo-element pa nabor okoliščin v katerem se element nahaja. Primer psevod-razreda je prekritje elementa z miško, kar mu določa stanje :hover. Posledično bo element prevzel nabor pravil, ki so zanj predpisana v teh razmerah. Primer psevdo-elementa je :first-line, ki predstavlja okoliščino, da se v več vrstičnem besedilu, del nahaja v prvi vrstici. Ta vrstica je zato drugače klasificirana in bo prevzela predpisan stilski blok. Psevdo-razred in psevdo-element se vedno začneta s podpičjem : in sta zapisana takoj za selektorjem.

Splošen zapis deklaracijskega bloka (elementi v oglatih oklepajih [] niso zahtevani):

selektor1 [, selektor2, selektor3 ...][:psevdo-razred ali :psevdo-element]{
	lastnost1: vrednost1;
	[lastnost2: vrednost2;
	lastnost3: vrednost3; 
	...]
}

Omogočeno je tudi pisanje komentarjev, katerega začnemo z nizom /* in končamo z */.

Primer CSS podlog

Primer deklaracijskega bloka z razlago.

/* modro podčrtano besedilo */
p, .besedilo:first-line, div #moder:hover{
	color: blue;
	text-decoration: underline;
}

Posamezni selektorji so ločeni z vejicami , in tako sestavljajo skupino. Stil se bo zato uporabil na vseh elementih odstavek (p), prav tako na vseh elementih, ki imajo podan razred (class) besedilo in se nahajajo v prvi vrstici. Element z identifikatorjem (id) moder bo ta stil prevzel samo v primeru, da bo čez njega postavljen miškin kazalec (to določa psevdo-razred :hover) in se bodo nahajali znotraj značke oddelek (div). Pod navedenimi pogoji, bo besedilo obarvano modro in podčrtano.

Kaskadiranje

V splošnem lahko stil za poljuben HTML element prihaja iz različnih virov, zato ima CSS navedena pravila, kateri izmed stilov se naj predpiše. Omogočeno je tudi zlivanje oz. prepisovanje pravil iz več virov, kar imenujemo kaskadiranje. Vrednosti pravil z višjo prioriteto bodo prepisala tiste z nižjo, kar je predstavljeno v spodnjem seznamu prioritet, razvrčenem od najvišje do najnižje:

• Avtorjev stil (pridobljen s spletnega mesta, ki smo ga obiskali):

• Vrstični stil, je definiran v notranjosti HTML elementa pod atributom style

<p style="color: red;">vsebina odstavka</p>

• Vgrajen stil, je definiran znotraj HTML dokumenta med značkami style

<style type="text/css">
	p{color: red;}
</style>

• Zunanji stil, je definiran znotraj CSS dokumenta (končnica .css) in je vključen v HTML stran

vsebina dokumenta stil.css

p{color: red;}

vsebina dokumenta stran.html

<head>
	<link rel="stylesheet" href="http://primer-stila.si/stil.css" type="text/css"/>
</head>

• Uporabnikov stil (uporabnik lokalno definira stil in prepiše brskalnikovega)
• Brskalnikov stil (brskalniki imajo privzet stil za vsakega izmed HTML elementov)

Izjemo pri zgornjih prioritetah predstavlja deklaracija !important, ki jo uporabimo na način lastnost: vrednost !important;. Ta v vsakem primeru, ne glede ali je vir podloge avtorjev ali uporabnikov, prepiše trenutno vrednost za podano lastnost. V primeru, da ima tako avtorjev, kot uporabnikov stil pri isti lasnosti elementa deklaracijo !important, daje specifikacija prednost uporabnikovemu.

Podpora brskalnikov

Ob koncu 1996 in začetku 1997 sta Microsoftov Internet Explorer 3 ter Netscape 4.0 podpirala specifikacijo CSS 1, vendar je bila podpora slaba in nepopolna. Pretekla so skoraj tri leta preden je postala implementacija v brskalnikih zadovoljiva. V tem času so se pojavili drugi brskalniki, med njimi tudi Opera, ki je določeno obdobje nudila najboljši prikaz strani (v smislu podpore CSS). Prvi brskalnik z več kot 99 odstotno podporo CSS 1 je Internet Explorer 5.0, ki je bil izdan marca 2000. Takrat pa je bil v veljavi seveda že CSS 2, za katerega pa vse do leta 2009, ni bilo popolne podpore. Za organizacijo W3C je nekonsistentna in pomankljiva implementacija predstavljala problem. Tako so že pred tem začeli z delom na reviziji CSS 2.1, pri kateri so izločili ali spremenili lastnosti CSS 2, ki so predstavljale težave. Tako se je zgodil "preskok" iz CSS 2 na revizijo 2.1, ki jo od avgusta 2009 dokaj uspešno podpirajo vsi večji brskalniki, kot so Firefox, Google Chrome, Internet Explorer, Opera in Safari.

Spletni brskalniki, ki standarda CSS ne podpirajo, bodo prikazali običajen HTML dokument brez oblikovanja.

Težave s prikazi

Za sam prikaz (X)HTML, CSS in izvajanje JavaScript (JS) kode v brskalnikih, skrbijo izvajalni sistemi, kot so WebKit (Chrome in Safari), Gecko (Firefox) in Presto (Opera). Med njimi prihaja do razlik v hitrosti izvajanja JS in izrisa HTML kode pa tudi do razhajanj v prikazu stilskih podlog in HTML elementov samih. To predstavlja oblikovalcem spletnih strani dodatno delo v obliki usklajevanja prezentacije za vse sisteme, kar pa lahko predstavlja težave. Določene lastnosti niso podprte ali pa delujejo drugače v starejših brskalnikih (IE 6 in 7), ki so še vedno v uporabi. Tako so včasih prisiljeni v pisanje stilov posebej za določen tip brskalnika ali pa poskušajo te zaobiti s tako imenovanimi CSS triki. Ti izrabljajo dejstvo, da vsi izvajalni sistemi drugače berejo oz. skladajo CSS podlogo, s čimer lahko nek del skrijemo ali prikažemo v specifičnem brskalniku.

Glej tudi

• HTML
• JavaScript
• spletni brskalnik

Zunanje povezave

• Specifikacija CSS 2
• The W3C CSS Validation Service (angleško)
• W3C Schools - learn CSS (angleško)
• Comparison of layout engines (angleško)