Skirtumai tarp CSS ir CSS3

Moteris, dirbanti prie stalo užimtame kūrybiniame biure

Moteris interneto dizainerė šiuolaikiškame biure dirba prie kompiuterio

Vaizdo kreditas: monkeybusinessimages/iStock/Getty Images

Originali Cascading Style Sheets specifikacija ir daug naujesnė CSS3 versija yra technologijos, naudojamos HTML tinklalapiams tobulinti ir formatuoti. Iš pradžių CSS buvo sukurta efektyviau apdoroti tinklalapio pateikimo sluoksnį nei formatavimas naudojant HTML, kuris niekada nebuvo skirtas sudėtingoms šiuolaikinio žiniatinklio konstrukcijoms. Kadangi CSS2 yra visuotinai priimtas CSS1 plėtinys, terminas CSS be numerio reiškia CSS2 įtraukimą. 2014 m. liepos mėn. CSS3 specifikacija vis dar kuriama, todėl žiniatinklio kūrėjai turi atsižvelgti į funkcijų palaikymą įvairiose naršyklėse.

CSS3 yra atgal suderinamas su CSS

CSS3 yra CSS2 naujinimas, kuris palaiko suderinamumą su visomis CSS funkcijomis – CSS3 nepanaikina jokio CSS kodo. CSS3 kodas sukurtas tam, kad tinklalapiai atrodytų geriau ir būtų greičiau įkeliami, taip pat sutrumpėtų kūrimo laikas, skirtas puslapiams kurti vartotojo naršyklėje. Dėl CSS3 interneto dizainas mažiau priklauso nuo vaizdo failų, skirtų puslapio dizaino elementams, ir sumažina failų perdavimo užklausas bei atsisiuntimo laiką, naudojant mažiau vaizdų. CSS1 daugiausia dėmesio skyrė išvaizdos formatavimui, o CSS2 pridėjo teksto ir objektų padėties nustatymo galimybes. Senesnės naršyklės versijos, pvz., IE 9 ir ankstesnės, nepalaiko CSS3 papildomų funkcijų, todėl gali prireikti papildomo kūrimo laiko, kad būtų išlaikytas atsarginis CSS kodas.

Dienos vaizdo įrašas

CSS3 prideda suapvalintus kampus ir gradientus

Iki CSS3 žiniatinklio kūrėjams reikėjo sukurti vaizdo failus, kad būtų pridėti, pavyzdžiui, užapvalinti kampai struktūrinėms kraštinėms ir fono vaizdo gradientai; CSS3 apima panašias funkcijas, kurias galima pridėti keliomis kodo eilutėmis. Naudojant CSS, žiniatinklio kūrėjas turi sukurti kraštinę arba gradientą, įkelti jį į vaizdo serverį, įdėti vaizdą į puslapį ir naudoti CSS, kad būtų tinkamai išdėstyta kraštinė. CSS3 žiniatinklio kūrėjas gali atlikti kažką panašaus naudodamas tokį kodą kaip ".roundBorder{border-radius: 10px;}". Fono gradientai yra šiek tiek sudėtingesni ir reikalauja skirtingo kodo skirtingoms naršyklėms. Pvz., „Chrome“ ir IE gradientas nuo baltos iki juodos naudoja tokį kodą kaip „.gradBG{background: liner-gradient (balta, juoda);}“.

CSS3 prideda animacijos funkcijas ir teksto efektus

CSS3 turi keletą funkcijų, kurių CSS nėra, kad pagerintų jūsų puslapio elementų išvaizdą. Naudodami CSS3, žiniatinklio kūrėjai gali pridėti teksto šešėlį prie teksto, kad būtų lengviau skaityti, arba suteikti vaizdinės nuojautos, ir gali priversti ilgesnius žodžius pertraukti eilutes, kad jie tilptų stulpeliuose su žodžių laužymu. Prieš CSS3 žiniatinklio kūrėjai turėjo koduoti animaciją tokiomis scenarijų kalbomis kaip JavaScript ir jQuery; CSS3 prideda keletą animacijos funkcijų į dizaino sluoksnį. W3C vis dar kuria žiniatinklio animacijos standartą, kad išspręstų skirtingų animacijos metodų suderinamumo problemas.

CSS3 apibrėžia teksto stulpelius

CSS3 prideda galimybę padalyti teksto dalis į kelis stulpelius, kad būtų galima skaityti kaip laikraštį. CSS2 specifikacijoje žiniatinklio kūrėjams sunku sudaryti kelių stulpelių teksto dalis, nes standartas nėra pritaikytas automatiškai skaidyti tekstą. Ypač su svetainėmis, kuriose yra interaktyvus dizainas – kūrimo technika, kuri pertvarko turinį ir keičia jo dydį pagal žiūrint įrenginio ekrano skiriamąją gebą, žmonėms, turintiems didesnį monitorių, gali būti sunku skaityti teksto eilutes, besidriekiančias ekranas.