Razlike med CSS in CSS3

Ženska, ki dela za mizo v zaposleni ustvarjalni pisarni

Spletna oblikovalka pri delu na svojem računalniku v sodobni pisarni

Zasluga slike: monkeybusinessimages/iStock/Getty Images

Prvotna specifikacija kaskadnih slogovnih listov in njena precej novejša revizija CSS3 sta tehnologije, ki se uporabljajo za izboljšanje in formatiranje spletnih strani HTML. CSS je bil prvotno zasnovan tako, da obvladuje predstavitveno plast spletne strani na učinkovitejši način kot oblikovanje s HTML, ki nikoli ni bil namenjen obravnavanju kompleksne konstrukcije 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 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 zastara nobene kode CSS. Koda CSS3 je zasnovana tako, da spletne strani izgledajo bolje in se hitreje nalagajo ter skrajša čas razvoja za izdelavo strani v brskalniku uporabnika. CSS3 naredi spletno oblikovanje manj odvisno od slikovnih datotek za elemente oblikovanja strani in 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 za besedilo in predmete. Starejše različice brskalnika, kot je IE 9 in prej, ne podpirajo široko dodanih funkcij CSS3, kar lahko zahteva dodaten čas razvoja za vzdrževanje nadomestne kode CSS.

Video dneva

CSS3 doda zaobljene vogale in prelive

Pred CSS3 so morali spletni razvijalci oblikovati slikovne datoteke, da bi dodali stvari, kot so zaobljeni koti za strukturne meje in prelivi 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, ga naložiti na slikovni strežnik, postaviti sliko na stran in uporabiti CSS za pravilno postavitev obrobe. V CSS3 lahko spletni razvijalec doseže nekaj podobnega s kodo, kot je ".roundBorder{border-radius: 10px;}". Gradienti ozadja so nekoliko bolj zapleteni in zahtevajo drugačno kodo za različne brskalnike. Na primer, preliv od bele do črne za Chrome in IE uporablja kodo, kot je ".gradBG{background: liner-gradient (belo, black);}".

CSS3 dodaja funkcije animacije in besedilne učinke

CSS3 ima peščico funkcij, ki v CSS niso prisotne za izboljšanje videza elementov vaše strani. S CSS3 lahko spletni razvijalci besedilu dodajo senco besedila za lažje branje ali dodajo vizualni pridih in lahko prisilijo prelome vrstic v daljših besedah, da se prilegajo v stolpce s prelomom besed. Pred CSS3 so morali spletni razvijalci kodirati animacijo v skriptnih jezikih, kot sta JavaScript in jQuery; CSS3 doda 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 definira besedilne stolpce

CSS3 doda možnost razdelitve besedilnih odsekov na več stolpcev, da se berejo kot časopis. V specifikaciji CSS2 imajo spletni razvijalci težave pri izdelavi besedilnih razdelkov z več stolpci, ker standard ni opremljen za samodejno razdelitev besedila. Zlasti pri spletnih mestih, ki imajo odzivno zasnovo, razvojno tehniko, ki preureja in spreminja velikost vsebine na podlagi če gledate ločljivost zaslona naprave, imajo ljudje z večjimi monitorji morda težave pri branju vrstic z besedilom, ki se razprostirajo po zaslon.