Jedna od korisnih mogućnosti CSS-a je i korištenje takozvanih "shorthand" opcija, odnosno skraćenih naziva. Na taj način moćete nekoliko opcija "ugurati" u jednu opciju. Ukoliko ste do sada već upoznati sa CSS.om brzo ćete uvidjeti korisnost skraćenih naziva. Poanta je učiniti vaš CSS kod jednostavnijim, optmiziranijim i kraćim, što znači manje KB za učitavanje. Kako bi makmimalno iskoristili ovaj tekst pretpostavlja se da ste već upoznati sa osnovnim CSS svojstvima i njihovim korištenjem. U tekstu će se koristiti poznatija svojstva, no neće svugdje biti objašnjena njihova primjena. Naglasak je dakle, na pojašnjenju korištenja kratkih naziva.
Primjetite kako smo u tekstu spomenuli i podršku Web brosera za pojedine skraćene nazive. Važno je znati da te infomormacije nisu u potpunosti točne, budući se kompatibilnost browsera prema W3C standardu HTML koda mijenja iz dana u dan.
Osnovna struktura CSS-a
Podsjetimo se prvo osnovnih značajki unutar CSS koda i njihovih naziva:
_____________Selektor / Pravilo
| _________ Opcija
| | ____ Vrijednost
| | |
H1 { color: red }
|____________|
Deklaracija
CSS pravilo ili selektor često deklarira nekoliko opcija. Shorthand ili skraćeni naziv omogućava deklaraciju više opcija unutar jedne.
Pogledajmo jedan primjer kako bi si bolje predočili skraćene nazive. U primjeru ćemo dodati opcije koje se odnose na html body tag:
body {
background: url(bg.gif);
background-color: #003366;
background-repeat: repeat-x;
background-position: top left
}
Navedeni primjer je uobičajeni način korištenja CSS koda među raznim webmasterima cijelog svijeta. Pogledajmo sada kako izgleda kod kada background svojstvo prikažemo pomoću skraćene sintakse. Takodjer koristimo isto svojstvo, samo sve vezane postavke "uguramo" u jedno svojstvo. Time smo povećali učinkovitost i gotovo pola memorije uštedjeli.
body {background: url(bg.gif) #036 repeat-x top left;}
Kao što vidite, vaš CSS kod može biti "kraći" i jednostavniji.
1. Kratki zapis font svojstva
| |
Windows |
Macintosh |
Sve platforme
|
Ostalo |
| Browser |
IE4 |
IE5.0 |
IE5.5 |
IE6 |
IE7 |
IE4 |
IE4.5 |
IE5 |
Safari |
NS4 |
NS6 |
Opera 4-7 |
FireFox 1-2 |
WebTV 1 |
| Support |
partial |
partial |
yes |
yes |
yes |
partial |
partial |
yes |
yes |
partial |
yes |
yes |
yes |
Buggy |
Syntax
font: font-style | font-variant | font-weight | font-size | line-height | font-family
p { font: strong x-large/110% "new century schoolbook", serif; }
U ovom primjeru nismo definirali font-variant svojstvo. Koristit će,mo default vrijednost ili vrijednost nekog drugog CSS pravila. Vrijednost x-large/110% se odnosi na font-size i line-height vrijednost. x-large predstavlja vrijednost veličine fonta koja je u navedenom paru uvijek prva vrijednost.
2. Kratki zapis margin i padding svojstva
| |
Windows |
Macintosh |
All Platforms |
Other |
| Browser |
IE4 |
IE5.0 |
IE5.5 |
IE6 |
IE7 |
IE4 |
IE4.5 |
IE5 |
Safari |
NS4 |
NS6 |
Opera 4-7 |
FireFox 1-2 |
WebTV 1 |
| Support |
buggy |
partial |
yes |
yes |
yes |
partial |
yes |
yes |
yes |
buggy |
yes |
yes |
yes |
no |
Sintaksa:
margin: margin-top | margin-right | margin-bottom | margin-left
padding: padding-top | padding-right | padding-bottom | padding-left
NAPOMENA: Iako Internet Explorer podržava kratki zapis CSS svojstava, postoji nelogičnost pri implementaciji kratkih zapisa za CSS box model. Razlog je zato što IE drugačije koristi padding svojstvo od ostalih browsera.
Primjeri:
p { margin: 2em }
U prvom primjeru sve margine su postavljene na 2em. Kad je samo jedna vrijednost definirana tada sve margine poprimaju istu vrijednost.
p { margin: 1em 2em }
U ovom su primjeur dvije vrijednosti definirane. CSS ovo interpetira kao prvu vrijednost za gornju i donju marginu, te drugu vrijednost za lijevu i desnu marginu.
p { margin: 1em 2em 3em }
U zadnjem primjeru koriste se tri vrijednosti. Gornja margina poprima prvu vrijednost, lijeva i desna margina poprimaju drugu vrijednost, dok donja margina poprima treću vrijednost.
Kada su definirane 4 vrijednosti, tada margine poprimaju vrijednosti u smejru kazaljke na satu počevši od gornje margine.
Pravilo interpretacije padding svojstva je identično i za margin svojstvo.
3. Kratki zapis border / obrub svojstva
| |
Windows |
Macintosh |
All Platforms |
Other |
| Browser |
IE4 |
IE5.0 |
IE5.5 |
IE6 |
IE7 |
IE4 |
IE4.5 |
IE5 |
Safari |
NS4 |
NS6 |
Opera 4-7 |
FireFox 1-2 |
WebTV 1 |
| Support |
partial |
partial |
yes |
yes |
yes |
partial |
yes |
yes |
yes |
buggy |
yes |
partial |
yes |
no |
Sintaksa:
border: border-width | border-style | color
Primjeri:
p { border: solid red }
Ovaj primjer će postaviti obrub p tagu na tanku punu liniju crvene boje.
p { border: 1px dotted #369 }
Ovaj primjer će postaviti obrub oko p taga na isprekidanu plavu liniju.
4. border-top, border-right, border-bottom, border-left kratki zapisi
| |
Windows |
Macintosh |
All Platforms |
Other |
| Browser |
IE4 |
IE5.0 |
IE5.5 |
IE6 |
IE7 |
IE4 |
IE4.5 |
IE5 |
Safari |
NS4 |
NS6 |
Opera 4-7 |
FireFox 1-2 |
WebTV 1 |
| Support |
partial |
partial |
yes |
yes |
yes |
partial |
partial |
yes |
yes |
no |
yes |
yes |
yes |
no |
Sintaksa: border-top: border-width | border-style | color Ovaj kodi se interpretira na isti način kao i border / obrub kod. Budući border kratki zapis ne razlikuje lijevo-desno, gore-dolje, ovim svojstvima možete eksplicitno definirati obrub za pojedinu stranu.
Primjer:
p { border-right: 4px groove blue;}
5. Kratki zapis list-style svojstva
| |
Windows |
Macintosh |
All Platforms |
Other |
| Browser |
IE4 |
IE5.0 |
IE5.5 |
IE6 |
IE7 |
IE4 |
IE4.5 |
IE5 |
Safari |
NS4 |
NS6 |
Opera 4-7 |
FireFox 1-2 |
WebTV 1 |
| Support |
partial |
yes |
yes |
yes |
yes |
partial |
partial |
yes |
yes |
partial |
yes |
yes |
yes |
no |
Sintaksa
list-style: list-style-type | list-style-position | list-style-image
Primjeri:
ul { list-style: url("dot.gif") disc inside}
U ovom primjeru lista koristi ikonicu nazvanu "dot.gif". Ukoliko datoteka nije dostupna browser će koristiti "disc".
6. Kratki zapis background (pozadine) svojstva
| |
Windows |
Macintosh |
All Platforms |
Other |
| Browser |
IE4 |
IE5.0 |
IE5.5 |
IE6 |
IE7 |
IE4 |
IE4.5 |
IE5 |
Safari |
NS4 |
NS6 |
Opera 4-7 |
FireFox 1-2 |
WebTV 1 |
| Support |
partial |
yes |
yes |
yes |
yes |
yes |
yes |
yes |
yes |
partial |
yes |
yes |
yes |
partial |
Sintaksa
background: background-color | background-image | background-repeat | background-attachment | background-position
Primjeri:
p {background: url("bg.gif") gray 50% repeat fixed }
Kao što vidite slika pozadine je postavljena na "bg.gif", dok je boja pozadine siva. Pozadina će se ponavljati, ali će ostati fixna. Samo je jedna pozicija postavljena, dakle vrijednost od 50% će se koristiti za horizontalno.
Zaključak
Naučili smo da je korištenje kraćih zapisa korisnije u mnogim primjerima. No treba pripaziti na podršku browsera koja ne ide uvijek u prilog.
|
Tutorials 
