Webasticno

Tek je Microsoftov Internet Explorer proĹĄao Acid 2 test, a već čujemo sve viĹĄe o CSS3. Za razliku od svojih boljih polovica trećina, Firefoxa i Safarija, IE će opet kaskati. No, ja sam uvijek bio za onu gusarsku, “ostavimo one koji nas usporavaju”. Jako bi lijepo bilo kada bi svi koji rade web stranice odjednom ostavili Internet Explorer i svu neuku rulju koja ga koristi u prvom desetljeću 21. stoljeća, no svi znamo da se to neće dogoditi. Zato nam ne preostaje niĹĄta nego samo sliniti nad ovim prekrasnim mogućnostima CSS3-a kojeg ćemo moći potpuno koristiti za koju godinu.

Border madness

Jedna od stvari koje me posebno veseli su rubovi tj. borders. Naime, odskače se od već prihvaćenih mogućnosti stavljanja bordera na strane boxa (gore, dolje, lijevo, desno) te bojanja tih bordera i određivanje njihovih širina i tipova. U CSS3 se ide prema boljem i naprednijem stvaranju niza boja koje čine border. Evo kako bi to trebalo funkcionirati. Nakon toga bi te boje trebale biti nizane izvana prema unutra. Za sada je ova funkcija prihvaćena samo od strane Firefoxa.

Border se također može prikazati uz pomoć slika, a njihovo umetanje sličilo bi umetanju normalnog backgrounda. CSS3 namjerava riješti jednu od najgorih praksi otkad je web 2,0 stil zavladao internetom, a to su zaobljeni kutevi. Umjesto omraženog rezuckanja photoshopiranih djelova, sada možemo odrediti radius na rubovima našeg box modela. Ove dvije opcije za sada su podržane od strane poslijednjeg Firefoxa i Safarija.

Još jedna mogućnost box modela je box shadow. Kao što sam naziv kaže, radi se o postavljanju sjene na rubove našeg box modela. Iako kažu da bi uz Safari trebalo raditi i na Firefoxu 3, kod mene se, na žalost, ne očitavaju sjene.

Pozadine

Od zanimljivijih opcija bi trebao izdvojiti slijedeću, a to je višestrukost backgrounda. Više neću morati otvarati brdo div-ova kojima ću određivati zasebne backgrounde, sada je moguće staviti više backgrounda pod jedan element.

Jako korisna mogućnost je i postavljanje veličine backgrounda. Gdje ovo može dobro doći? Pa svi koji su ikad stavljali fotografije kao background vašoj stranici znaju kako zamorno može biti za svaku rezoluciju raditi novu sliku. Ipak će lakše biti koristiti css za ovakve probleme.

Oboji i razrjedi

Jedna od najjačih stvari CSS3 je opacity. Dok IE6 ne može ni podržati .png kojim smo prije rješavali ovaj problem, ipak može riješiti opacity. Zapravo, ovo je jedna od rijetkih stvari u kojoj IE rula već duže vrijeme. Za one koji ne znaju što je opacity, to je transparentnost. Potpuni vodič o ovoj mogućnosti možete naći ovdje.

Text

Yep, i tekst doživljava promjene, iako bi neke trebale raditi sa FF3, one ne rade, ali vi koji koristite Safari tu imate prednost, poslijednja verzija Safarija podržava CSS3 po pitanju teksta. Prvo one male nevažne sitnice koje će pomoći da vaša stranica izgleda više kič, a jedna od njih je definitivno dodavanje sjena na tekst. Tu su još i text-overflow i word-wrap kojeg je izumio Microsoft, ali ga i dalje ne podržava. Toliko o profesionalnosti.

A sada onaj najbolji dio. To je embedanje fontova. Naime, fontovi se više neće otvarati ovisno o tome ima li ih korisnik na svojem hardu, kao što je to sada bio slučaj. Ako korisnik nema instaliran font na hardu, vi ga možete staviti na server. Fenomenalna stvar. Znate što je još fenomenalnije? To što je ova mogućnost bila dostupna od, pazite sad ovo, Internet Explorera 5. Da, to je trebao biti standard u CSS2, ali će postati standard tek u CSS3. Za sad je Safari 3.1 predvodnik ovakve revolucije te omogućava .oet format, koji je bio zastupljen sa IE5 te uobičajenije .ttf i .otf formate. Nešto o ovoj revolucionarnoj mogućnosti je pisao i A List Apart.

Stupci - Newspaper style…

Kako bi se riješili floatanja teksta u više stupaca, CSS3 nam nudi multicolumn raspored tekstova, tj. tekst se raspoređuje po više stupaca, kao u novinama. U novinama je to tako kako se ne bi gubili čitajući tekst, ali za web to nije potrebno zbog niskih rezolucija. No vjerujte mi, ova će opcija svakako naći svoje mjesto na webu. Kakvo? Meni na pamet pada printable verzija nekog članka koja bi bila raspoređena u stupce Pa o tome je (također) pisao A List Apart. Za sada je multicolumn moguć samo u Mozillinim browserima i Safariju.

Ostale perverzarije

Zapravo, bilo bi glupo od mene da sad nabrajam sve što nam donosi CSS3 jer je popis dug. Tu su između ostalog mogućnost resizeanja elemenata, gradients, implementacija Ruby programskog jezika, korištenje osnovnih matematičkih funkcija, rotacija elemanata i dr.

Kada ćemo to dočekati?

Pa Mozilla Firefox 3 i Appleov Safari su dva browsera koja ubrzano prihvaćaju ove standarde. To je dobro, no tu je Microsoftov Internet Explorer koji kasni. Na žalost, većina korisnika koristi Windowse te s time i defaultni browser Internet Explorer. Što je najgore, oni koriste starije verzije te zbog toga sada udio IE6 je jednak udjelu IE7 i IE8 na tržištu, a oni zajedno čine 74% tržišta. S druge strane Firefox povećava svoj udio, ali on iznosi malih 18% dok Safari ima 6% tržišta. Želite znati kako to stoji na ovoj stranici? Pa Firefox drži prvo mjesto s 73,68% posjeta, zatim dolazi IE s 12,28%, a Opera čini 11,39% posjeta. Safari ima 2,51% posjeta dok Mozilla ima 0,16% posjeta. Zadnji je već pokojni projekt Netscape s 0,02% posjeta. Na ovom siteu IE7 ima 57,4% udjela u IE posjetama dok šestica ima 41,60% posjeta.

Što to znači? Pa to znači da se broj osvještenih korisnika povećava, a ti osvješteni korisnici češće upgradeaju svoje browsere. No to je i dalje presporo. Na žalost velika većina koristi IE i još uvijek veliki udio IE6 korisnika govori kako ćemo se načekati dok sadašnji korisnici ne downloadaju novije verzije svojih browsera, a kad ih i downloadaju, ti browseri još uvijek neće imati podršku za CSS3. Jako frustrirajuće.

Ne moĹže se ni pribliĹžno pretpostaviti kada će CSS3 postati normala, ali zato moĹžemo ĹĄpekulirati i sliniti za danom kada ćemo moći postaviti shadow na svoju web stranicu i poredati dvadeset redova bordera dodavajući najveći kič od fonta uz rounded cornere i sve to jedva vidljivo od svog tog silnog opacityja. Ah, CSS3, is there anything you can’t do?

Povezani postovi

• CroPortal button - kako postaviti i urediti?
• Optimizacija za AdSense, eTarget i slične PPC programe
• Koji font koristiti za post?
• Gdje pronaći te kako napraviti patterne?
• 6 načina kako poboljĹĄati sadrĹžaj
• Filteri i pojačala
• 8 propusta poznatih domaćih web siteova
• Kako napraviti dobar portfolio!?
• AIDA tehnika za efikasniji banner…
• Utjecaj boja na korisnike