CSS
CSS (engl. Cascading Style Sheets) je jezik formatiranja pomoću kog se definiše izgled elemenata veb-stranice.
Prvobitno, HTML je služio da definiše kompletan izgled, strukturu i sadržaj veb-stranice, ali je od verzije 4.0 HTML-a uveden CSS koji bi definisao konkretan izgled, dok je HTML ostao u funkciji definisanja strukture i sadržaja.
Istorija
urediCSS je u određenoj formi postojao još u začecima SGML-a 1970ih godina.
Kako je HTML postajao komplikovaniji, davao je sve više mogućnosti za definiciju izgleda elemenata, ali je istovremeno postajao nečitljiviji i teži za održavanje. Različiti brauzeri su prikazivali dokumente na različite načine, i postojala je potreba za dosljednom tehnikom definisanja prikaza elemenata na stranici.
Da bi se ovo postiglo, devet različitih metoda je predloženo na zvaničnom forumu W3C-a. Od devet, dvije metode su izabrane kao temelj onoga što je kasnije postalo CSS: CHSS (engl. Cascading HTML Style Sheets) i SSP (engl. Stream-based Style Sheet Proposal). Prvo je Hakon Vium Li (koji je sada šef tehničke službe kompanije Opera) predložio CHSS u oktobru 1994, jezik koji je imao dosta sličnosti sa današnjim CSS-om. Bert Bos je radio na brauzeru po nazivu Argo, koji je imao sopstveni način definisanja stilova, SSP. Li i Bos su radili zajedno da bi osnovali CSS standard (slovo H je izbačeno iz skraćenice CHSS jer se CSS mogao odnositi i na druge jezike pored HTML-a).
Za razliku od postojećih jezika poput DSSSL-a i FOSI-a, CSS je dozvoljavao da više opisa utiče na dokument, tj. jedna definicija stilova je mogla naslijediti osobine od druge.
Lijev prijedlog je postavljen na konferenciji "Veb mozaik" u Čikagu 1994. godine, i ponovo sa Bosovim prijedlogom 1995. Otprilike u ovo vrijeme je osnovan W3C, koji je preuzeo funkciju razvoja CSS-a. Do kraja 1996, CSS je bio spreman da se objavi kao standard, i CSS1 je objavljen u decembru.
Razvoj HTML-a, CSS-a i DOM-a se odvijao u jednoj istoj grupi, HTML Editorial Review Board (ERB). Početkom 1997. grupa ERB se podijelila na tri radne grupe: radna grupa za HTML, kojom je upravljao Den Konoli iz W3C-a, radna grupa za DOM, kojom je upravljao Loren Vud iz kompanije Softkvod, i radna grupa za CSS, kojom je upravljao Kris Lili iz W3C-a.
Radna grupa za CSS je počela da radi na problemima koji nisu bili obuhvaćeni CSS-om verzije 1, koji se tako razvio u CSS2, 4. novembra 1997; objavljen je kao zvanična verzija 12. maja 1998. CSS3, čiji je razvoj započet 1998. se još uvijek razvija.
Jezik
urediCSS sintaksa se sastoji od opisa izgleda elemenata u dokumentu. Opis može da definiše izgled više elemenata, i više opisa može da definiše jedan element. Na taj način se opisi slažu jedan preko drugog da bi definisali konačni izgled određenog elementa (otuda naziv Cascading (engl. cascade - crijep) da bi se dočaralo slaganje jednog stila preko drugog u definisanju konačnog izgleda elementa)
Svaki opis se sastoji od tri elementa:
- definicija ciljnih elemenata
- svojstva
- vrijednosti
Nakon što definišemo ciljne elemente, tj. elemente na koje će se trenutni opis odnositi, nizom parova svojstvo-vrijednost definišemo izgled svakog ciljnog elementa. Sintaksa koja se pri tome definiše je sljedećeg oblika:
ciljni elementi {
svojstvo: vrijednost;
svojstvo: vrijednost;
...
}
CSS podržava i komentare, koji izgledaju kao u programskom jeziku C, dakle navodeći se između znakova /*
i */
.
Ciljni elementi
urediCiljni elementi se definišu na tri načina:
- navodeći HTML tag ciljnih elemenata
- navodeći klasu elemenata
- navodeći direktnu identifikacionu vrijednost (
ID
) elementa
Kada definišemo preko HTML taga, to znači da će opis uticati na sve elemente u dokumentu koji imaju ovaj tag. Definicija ciljnih elemenata se tada vrši preko direktnog upisa odgovarajućeg HTML taga:
body {
svojstvo: vrijednost;
...
}
Klasa HTML elementa je riječ koju stavimo kao vrijednost argumenta CLASS
pri definiciji tog elementa. Definicija ciljnih elemenata (svih koji imaju određenu istu klasu) se vrši tako što upišemo znak tačke (.) a zatim naziv klase:
.imeKlase {
svojstvo: vrijednost;
...
}
Ovaj opis će, dakle, imati uticaja na sve elemente u dokumentu koji su definisani na sljedeći način:
<p class="imeKlase">...</p>
<div class="imeKlase">...</p>
...
Identifikaciona vrijednost elementa je vrijednost argumenta ID
pri definiciji tog elementa. U jednom dokumentu identifikacione vrijednosti moraju biti jedinstvene, tj. može postojati samo jedan element sa određenom identifikacionom vrijednošću, što znači da ovakvi opisi mogu uticati samo na po jedan element u dokumentu. Definišu se pomoću znaka tarabe (#) a zatim identifikacionu vrijednost:
#identifikacionaVrijednost {
svojstvo: vrijednost;
...
}
Ovaj će, dakle, opis uticati na sve elemente koji u svojoj HTML definiciji imaju id="identifikacionaVrijednost"
.
Svojstva i vrijednosti
urediSvojstva na koja želimo da utičemo u datom opisu se definišu preko niza ključnih riječi definisanih u W3C standardu, a koje se kategorišu u sljedeće grupe:
- definicija pozadine elementa
- ivica
- okvir
- prikaz
- dimenzije
- font
- generisani sadržaj
- margine
- unutrašnji prazan prostor
- pozicija
- izgled pripadajućeg teksta
Vrijednosti pojedinih svojstava se definišu na dva načina:
- predefinisanim ključnim riječima
- brojevnim vrijednostima
Predefinisane ključne riječi za vrijednosti svojstava se koriste u situacijama kada dato svojstvo ima ograničen broj mogućnosti. Tako na primjer svojstvo za definiciju pozadine elementa može biti samo scroll
(da se kreće uvijek zajedno sa sadržajem elementa) i fixed
(da stoji uvijek na istom mjestu bez obzira na sadržaj).
Brojevne vrijednosti se mogu zadavati na nekoliko načina:
- zadajući samo brojevnu vrijednost
- navodeći i jedinicu veličine skupa sa opisom (
px
,em
,pt
, ...)
Ako zadajemo samo brojevnu vrijednost, imamo mogućnost da je pišemo na dva načina:
- u dekadnom sistemu (709)
- u heksadekadnom sistemu (#a4fde3); ovaj sistem se najviše koristi u definiciji boje
Primjeri
uredi- Primjer za definiciju pozadine cijele stranice:
body {
background-color: aqua; /* pozadina boje aqua */
}
- Primjer za definiciju izgleda svih elemenata klase "citat":
.citat {
font-family: serif; /* font sa kukicama, kao Times New Roman */
font-style: italic; /* iskošen tekst */
font-size: 9pt; /* veličina slova 9 tačaka */
}
Organizacija CSS koda
urediCSS kod se može zadavati na tri standardna mjesta:
- direktno u tagu, koristeći argument
style
- u zaglavlju dokumenta unutar taga
style
- u eksternoj datoteci, koja se u dokument uključuje tagom
link
Za jako male dokumente, argument style
taga može biti prihvatljiv, ali za veće dokumente ne može jer se na ovaj stil definiše za svaki element ponaosob. Definicija stilova se najčešće radi grupišući elemente u klase, pomoću argumenta class
taga, a zatim definišući izgled tih klasa bilo u okviru elementa style
u zaglavlju ili u eksternoj datoteci. Argument style
taga se najčešće koristi ako neki element ne pripada nijednoj grupi i ima posebne zahtjeve u odnosu na sve ostale elemente.
Stilovi u eksternoj datoteci imaju jednu posebnu prednost u odnosu na preostala dva načina, a to je da na taj način možemo da utičemo na elemente više dokumenata, praktično na čitav jedan sajt. Dovoljno je da pisac bude dosljedan u definisanju klasa elemenata, da bi jedan fajl sa stilovima određivao izgled svih stranica. Na ovaj način jedna promjena u fajlu sa stilovima utiče na sve stranice te su stilovi centralizovani.
Ograničenja
urediPoznata ograničenja "čistog" CSS-a uključuju u sledeća:
- Nedosljednost brauzera:
- Različiti brauzeri će interpretirati CSS-kŏd na različite načine zbog svojih bagova ili zbog nepodržavanja određenih mogućnosti CSS-a. Na primjer, Majkrosoftov Internet Eksplorer, čija ranija izdanja nisu podržavala mnoge mogućnosti CSS-a 2.1, su pogrešno interpretirala veliki broj bitnih opisa objekata, uključujući širinu, visinu i plutanje. Da bi se postigla dosljednost prikaza u brojnim popularnim brauzerima, moraju se koristiti raznorazne "vještine" i "štimanja". I pored toga, ponekad je nemoguće postići identičan prikaz dokumenta u različitim brauzerima.
- Složenost
- Veliki sajtovi imaju problem veličine CSS dokumenata, koji vremenom postaju toliko složeni i dugački da održavanje i dodavanje novih svojstava postaje izuzetno težak posao.
- Opisi elemenata se ne mogu bazirati na drugim objektima
- CSS ne podržava „nasljeđivanje“ - ne postoji način da se izabere opis nekog drugog elementa na kojem bi se bazirao trenutni element. Nasljeđivanje postoji, ali se bazira na unaprijed utvrđenom pravilu da se opisi nasljeđuju od elementa u kojem se dotični element nalazi, tj. od roditeljskog elementa. Radna grupa za CSS objašnjava da ne želi da uvede proizvoljno nasljeđivanje jer bi to otežalo i usporilo rad brauzera.
One block declaration cannot explicitly inherit from another
- Problemi pri vertikalnoj orijentaciji elemenata
- Iako je prilično lako postići horizontalni tok elemenata, vertikalni tok je prilično teško, i ponekad nemoguće, postići na željeni način. Jednostavni prohtjevi, poput centriranja objekta po vertikali, ili prikaz podnožja dokumenta na samom dnu vidljivog dijela prozora, zahtijevaju prilično komplikovane opise, ili opise koje podržavaju samo određeni brauzeri. Ponekad je najlakše uposliti skriptni jezik poput Javaskripta da na osnovu tekućeg stanja klijenta prikaže element na odgovarajućoj poziciji, čime se opet gubi na kompatibilnosti jer određeni korisnici ne žele da koriste Javaskript.
- Nedostatak aritmetičkih operacija
- Dosadašnje verzije CSS-a ne podržavaju ni najjednostavnije aritmetičke operacije (npr.
margin-left: 10%-10px;
). Neki pomaci su napravljeni, raspravom Radne grupe za CSS o uvođenju izrazacalc()
, a Internet Eksplorer od verzije 5.0 podržava izrazexpression
, sa sličnim mogućnostima.
- Neslaganje pojedinačnih opisa
- Određena svojstva imaju sličnu svrhu, i često se ne slažu u potpunosti. Na primjer, svojstva
position
,float
idisplay
određuju lokaciju prikaza elementa i njihovo kombinovanje često prouzrokuje neočekivane rezultate a određene kombinacije su po pravilu zabranjene. Na primjer, ako određenom elementu dodijelimo svojstvodisplay: table-cell
, onda mu ne možemo dodijeliti svojstvofloat
nitiposition: relative
.
- Određeni elementi ne mogu sadržati plutajuće pod-elemente
- Ne postoji svojstvo koje takve elemente forsira da podržavaju plutajuće pod-elemente. Ponekad dodjeljivanje svojstva
position: relative
rješava ovaj problem, ili definisanje i samog nad-elementa da ima plutajuće svojstvo, ali u situacijama kada to nije prihvatljivo za organizaciju dokumenta, to nije rješenje.
- Nemogućnost postavljanja više pozadinskih tema istom elementu
- Složena grafička rješenja zahtijevaju više od jedne pozadinske slike po elementu, ali CSS podržava samo jednu. Zbog toga su dizajneri primorani da elemente slažu jedan preko drugog da bi dobili ono što su tražili, ili da odustanu od prvobitne ideje. Ovaj problem se planira riješiti u trećoj verziji CSS-a[1], a određena rješenja već postoje u brauzerima Safari (brauzer) i Konkveror.
- Kontrola oblika elemenata
- CSS trenutno dopušta samo pravougaone elemente. Elementi zaobljenih uglova ili drugih nepravougaonih oblika zahtijevaju izlaženje iz opsega CSS-a ili korišćenje sličica.
- Ne postoje striktna pravila o redoslijedu opisa i pripadajućih svojstava
- Trenutno se opisi i svojstva mogu zadavati u bilo kom redu, ali ukoliko su u konfliktu, prednost ima posljednje zadati izraz.
- Nepostojanje promjenljivih
- CSS ne podržava promjenljive ni u kakvom obliku. Promjenljive bi poslužile za centralizovani opis određene boje, veličine ili čitavog skupa svojstava, što bi obezbijedilo lakše održavanje i mijenjanje, ali i manje CSS dokumente. Sa trenutnim verzijama, pristupa se grupnom opisivanju nekoliko različitih klasa razdvojenim zarezom, da bi se umanjio problem nepostojanja promjenljivih.
- Nedostatak kolumna
- Kolumne teksta, poput novinarskih, se najčešće rješavaju plutajućim elementima ili tabelama, ali različiti brauzeri, na monitorima različitih rezolucija, veličina i odnosa strana će prikazati različite rezultate. Dodavanje jednostavnih deklaracija za definisanje kolumna bi riješilo ove probleme.
Povezano
urediIzvori
urediVanjske veze
uredi- W3Schools, "Referenca za CSS2" Arhivirano 2007-09-04 na Wayback Machine-u
- W3, "CSS standard"
- Instant CSS Code Arhivirano 2010-10-31 na Wayback Machine-u
- ((eng.)) CSS1 specifikacija
- ((eng.)) CSS2 specifikacija
- ((eng.)) Instant CSS Code Arhivirano 2010-10-31 na Wayback Machine-u