Sitemap O nama Kontakt Web design

CSS: Napokon jednostavno

Bookmark:

Zaboravite sve što ste naučili o CSS-u i naučite CSS3!

Jer sve što je do sada, u CSS-u, bilo komplicirano, postalo je jednostavno. Ne, nije došlo do novih standarda. Sve je već godinama isto i nepromjenjeno. Ali, dogodilo se čudo:

Microsoft je, napokon, odlučio slijediti standarde i to u svom novom Internet Exploreru 8.

Mada je još uvijek u svojoj beta, dakle probnoj, inačici, uspješno je prošao Acid2 test koji je napravljen još 2005. godine i koji je trebao pokazati kako bi to bilo kad bi svi preglednici slijedili CSS2 standard.

U to vrijeme, niti jedan preglednik nije prošao cijeli test, no IE6 je bio daleko najgori. Programeri Firefoxa, Opere, Safarija i Konquerora su se potrudili i uskoro su njihovi preglednici prošli test. Ali, Microsoft je uporno spavao, a njegov IE6, ne samo da ne slijedi standarde, nego je i toliko 'bugovit' da još uvijek zadaje glavobolje web dizajnerima koji pokušavaju primjenjivati CSS onako kako je zamišljen.

Ako ste ikada pokušali napraviti web stranicu tako da na njoj razdvojite sadržaj (HTML) od dizajna (CSS) i da pri tome jednako dobro izgleda na svim preglednicima, onda znate o čemu govorim.

Osnova web dizajna je raspored elemenata (layout) na stranici. Za raspored elemenata (tekstova, slika, obrazaca..) najviše se koristi raster (rešetka ili grid). Pogledajte samo raspored elemenata na ovoj stranici.

Na vrhu je zaglavlje, ispod zaglavlja (header) je glavni dio (main) koji se sastoji od 3 stupca i na kraju je zanožje (footer). Unutar svakog stupca se postavljaju elementi koji se nalaze jedan ispod drugoga. Ovo je vrlo jednostavan raster, ali ga nije jednostavno napraviti, ako želimo slijediti preporuke da se dizajn (CSS) odvaja od sadržaja (HTML).

Problem je najlakše riješiti kreiranjem tablice, ali, sjetimo se, tablica je HTML element koji služi za prikaz tabelarnih podataka i ne bi se trebala koristiti za dizajn rasporeda elemenata na web stranici.

Za tu svrhu postoji DIV tag koji uz pomoć CSS-a zauzima svoje mjesto u rasteru. Inače, DIV elementi se nižu jedan ispod drugoga, što je potpuno neprirodno za kreiranje rastera. Nekako moramo DIV elemente staviti jedan pored drugoga.

Dva su načina da se to uradi:
  1. Apsolutnim pozicioniranjem
  2. CSS float svojstvom
Samo pokušajte pozadinu jednog od stupaca prikazati u drugoj boji. Odmah se pojavljuje problem nejednake visine stupaca. To se, također, može riješiti na više načina.

Jedan je taj da se pomoću JavaScripta izmjeri visina najdužeg stupca, a zatim se druga dva stupca postave na istu dužinu. Drugo rješenje je korištenje 'lažnog' stupca. Naime, cijela pozadina glavnog kontejnera (koji drži sva tri stupca) se oboji tako da izgleda kao da je jedan stupac u drugoj boji.

Ako koristite float svojstvo, onda morate paziti da na kraju dodate clear: both; kojeg ćete smjestiti u neki prazan DIV ili BR tag.

U svakom slučaju, ni jedna od spomenutih metoda nije praktična. Apsolutno pozicioniranje namjenjeno je za sasvim druge stvari, a ne za kreiranje nečeg, tako jednostavnog, kao što je raster. Float (left ili right) koristi se zato da se određena slika uklopi u tekst, odnosno da bude okružena tekstom. To je osnovna namjena, a ne kreiranje rastera.

Kao što vidite, godinama smo se dovijali na razne načine i koristili razne zaobilazne metode, samo da bismo izvršili tako jednostavan zadatak kao što je kreiranje rasporeda elemenata.

Zar mozgovi koji sjede u W3C nisu mogli izmisliti nešto sasvim jednostavno za obavljanje tog zadatka?

Naravno da jesu. Izmislili su to odavno i zapisali u CSS specifikaciju i svi preglednici su to primjenili još od 2005. godine. Svi osim jednog - MS Internet Explorera, preglednika koji dolazi uz Windowse, tako da velika većina korisnika niti ne zna da postoje i drugi, puno bolji, preglednici.

Upravo zbog toga se, na većini računala, još i danas koristi, IE5 ili IE6. U međuvremenu se pojavio IE7 koji je nastavio tradiciju ne slijeđenja standarda. To je nama, web dizajnerima, blago rečeno, zagorčavalo život, svih ovih godina.

A moglo je biti tako jednostavno. Odnosno izlaskom IE8 na scenu, postati će jednostavno, ako uspijemo uvjeriti korisnike IE < 8 da smeće bace u smeće i ugrade si pristojan preglednik.

Da vidimo, napokon, o čemu se radi, odnosno, kako smo mogli raditi da je MS poštivao CSS standarde?

Ako ste pregledavali CSS reference za display svojstvo, sigurno ste našli da postoje vrijednosti koje počinju s table, a koje uopće ne funkcioniraju. Upravo je to ono što nam treba, a nismo mogli koristi, jer nije bilo podržano u najraširenijem pregledniku.

Kažu da se na primjeru najlakše uči. Pa, pogledajmo:

<div id='wrapper'>
<div id='header'>zaglavlje</div>
<div id='main'>
<div id='left'>
lijevi stupac, izbornik…
</div>
<div id='middle'>
srednji stupac, glavni tekst…
</div>
<div id='right'>
desni stupac, reklame…
</div>
</div>
</div>
Slijedi pripadajući CSS koji će prikazati zaglavlje i tri stupca ispod njega.

#main {
display: table;
border-collapse: collapse;
}
#left {
display: table-cell;
width: 180px;
padding-left: 10px;
background-color: #e7dbcd;
}
#middle {
display: table-cell;
width: 380px;
padding-left: 10px;
border-right: 1px dotted #d7ad7b;
}
#right {
display: table-cell;
width: 180px;
padding-left: 10px;
}

Vidimo da div#main ima svojstvo 'display' koje je postavljeno na vrijednost 'table'. To znači da se kontejner 'main' mora prikazivati kao tablica, odnosno elementi koje sadrži mogu biti redovi (rows), stupci (columns) ili polja (cells).

Unutar kontejnera div#main postavili smo tri kontejnera: div#left, div#middle i div#right, a njihova 'display' svojstva imaju vrijednost 'table-cell', što znači da se moraju prikazivati kao polja unutar nadređene tablice div#main.

Drugim riječima, sva tri polja nalaze se u jednom redu i jednake su visine. To je upravo ono za čim godinama težimo.

Vidimo da ovdje nedostaje div kontejner koji bi imao display:table-row;

U našem slučaju, to je anonimni ili nepostojeći element tablice koga preglednik sam kreira u skladu s zadanim pravilima.

Mogli smo tako izostaviti i div#main kontejner pa bi preglednik i njega kreirao kao anonimni element.

Pogledajmo sada, koje sve vrijednosti može imati svojstvo 'display':
table - element se ponaša kao tablica (table)
table-row - element se ponaša kao red tablice (tr)
table-cell - element se ponaša kao polje tablice (td)
table-row-group - element se ponaša kao grupa redova koji tvore tijelo tablice (tbody)
table-header-group - element se ponaša kao grupa redova koji tvore zaglavlje tablice (thead)
table-footer-group - element se ponaša kao grupa redova koji tvore zanožje tablice (tfoot)
table-caption - element se ponaša kao naslov (caption) tablice
table-column - element se ponaša kao stupac (col) tablice
table-column-group - element se ponaša kao grupa stupaca (colgroup)

Možda se pitate u čemu je razlika između ovoga i korištenja HTML tablica?

Osnovna razlika je u tome što HTML tablica odgovara na pitanje što je podatak, a ne kako podatak izgleda? Izgled podatka definira se u CSS-u, a ne u HTML-u. Zato nam je korisno 'display' svojstvo sa svojim različitim vrijednostima koje opisuje kako podatak izgleda.

Osim toga, ovo je puno preglednije nego postavljati tablicu unutar tablice i tako u nekoliko nivoa. Treba znati da tražilice ne vrednuju jednako podatak koji se nalazi duboko u tablicama, kao onaj koji se nalazi na prvoj razini, odnosno, izvan tablice.

Postoji još jedna struktura za koju, ponekad, koristimo tablice, a nebi trebali. To su forme ili obrasci. Ako želimo da nam forma lijepo izgleda, pogotovo ako ima više stupaca, onda pribjegavamo tablicama. Ovo je puno elegantnije i efikasnije rješenje, jer umjesto tablica koristimo CSS za definiranje izgleda forme.

Adam Filić

Teorija boja «-- ♦ --»
Bookmark: