Razlike med CSS in CSS3

Izvirna specifikacija Cascading Style Sheets in njena precej novejša revizija CSS3 sta tehnologiji, ki se uporabljata za izboljšanje in oblikovanje spletnih strani HTML. CSS je bil prvotno zasnovan za obravnavo predstavitvenega sloja spletne strani na učinkovitejši način kot oblikovanje s HTML, ki nikoli ni bil namenjen obravnavi kompleksne zgradbe sodobnega spleta. Ker je CSS2 splošno sprejeta razširitev CSS1, izraz CSS brez številke pomeni vključitev CSS2. Specifikacija CSS3 je od julija 2014 še vedno v razvoju, zato morajo spletni razvijalci upoštevati, da se podpora funkcij razlikuje med brskalniki.

CSS3 je nazaj združljiv s CSS

CSS3 je posodobitev CSS2, ki ohranja združljivost z vsemi funkcijami CSS -- CSS3 ne opušča nobene kode CSS. Koda CSS3 je zasnovana tako, da spletne strani izgledajo bolje in se hitreje nalagajo ter skrajšajo razvojni čas za izdelavo strani v brskalniku uporabnika. S CSS3 je spletno oblikovanje manj odvisno od slikovnih datotek za elemente oblikovanja strani ter zmanjša zahteve za prenos datotek in čas prenosa z uporabo manj slik. CSS1 se je osredotočil na oblikovanje videza, medtem ko je CSS2 dodal zmožnosti pozicioniranja besedila in predmetov. Starejše različice brskalnika, kot je IE 9 in prejšnje, ne podpirajo široko dodanih funkcij CSS3, kar lahko zahteva dodaten razvojni čas za vzdrževanje nadomestne kode CSS.

CSS3 doda zaobljene vogale in prelive

Pred CSS3 so morali spletni razvijalci oblikovati slikovne datoteke za dodajanje stvari, kot so zaobljeni vogali za strukturne meje in prelive slike ozadja; CSS3 vključuje primerljive funkcije, ki jih je mogoče dodati z nekaj vrsticami kode. V CSS mora spletni razvijalec oblikovati obrobo ali gradient, jo naložiti na slikovni strežnik, postaviti sliko na stran in uporabiti CSS za pravilen položaj obrobe. V CSS3 lahko spletni razvijalec doseže nekaj podobnega s kodo, kot je ".roundBorder{border-radius:10px;}". Prelivi ozadja so nekoliko bolj zapleteni in zahtevajo različno kodo za različne brskalnike. Na primer, preliv iz bele v črno za Chrome in IE uporablja kodo, kot je ».gradBG{background:liner-gradient(white,black);}«.

CSS3 doda funkcije animacije in besedilne učinke

CSS3 ima nekaj funkcij, ki niso prisotne v CSS, za izboljšanje videza vaših elementov strani. S CSS3 lahko spletni razvijalci besedilu dodajo senco besedila za lažje branje ali dodajo vizualni pridih in lahko vsilijo prelome vrstic v daljših besedah, da se prilegajo v stolpce s prelivom besed. Pred CSS3 so spletni razvijalci morali kodirati animacijo v skriptnih jezikih, kot sta JavaScript in jQuery; CSS3 dodaja več funkcij animacije v oblikovno plast. W3C še vedno dela na standardu spletnih animacij, da bi rešil težave z združljivostjo med različnimi tehnikami animacije.

CSS3 določa besedilne stolpce

CSS3 dodaja zmožnost razdelitve odsekov besedila v več stolpcev, da se bere kot časopis. V specifikaciji CSS2 imajo spletni razvijalci težave pri izdelavi besedilnih odsekov z več stolpci, ker standard ni opremljen za samodejno razdeljevanje besedila. Zlasti pri spletnih mestih z odzivnim dizajnom, razvojno tehniko, ki preureja in spreminja velikost vsebine glede na ločljivost zaslona naprave za gledanje, imajo lahko ljudje z večjimi monitorji težave z branjem besedilnih vrstic, ki se razprostirajo po zaslonu.