Naispuolinen web-suunnittelija työskentelee tietokoneella modernissa toimistossa
Kuvan luotto: monkeybusinessimages/iStock/Getty Images
Alkuperäinen Cascading Style Sheets -spesifikaatio sekä sen paljon uudempi CSS3-versio ovat tekniikoita, joita käytetään parantamaan ja muotoilemaan HTML-verkkosivuja. CSS oli alun perin suunniteltu käsittelemään Web-sivun esityskerrosta tehokkaammin kuin muotoilu HTML: llä, jota ei koskaan ollut tarkoitettu käsittelemään nykyajan Webin monimutkaista rakennetta. Koska CSS2 on yleisesti hyväksytty CSS1:n laajennus, termi CSS ilman numeroa tarkoittaa CSS2:n sisällyttämistä. CSS3-spesifikaatiota kehitetään edelleen heinäkuussa 2014, joten verkkokehittäjien on otettava huomioon, että toimintojen tuki vaihtelee selaimittain.
CSS3 on taaksepäin yhteensopiva CSS: n kanssa
CSS3 on CSS2:n päivitys, joka säilyttää yhteensopivuuden kaikkien CSS: n ominaisuuksien kanssa – CSS3 ei poista mitään CSS-koodia. CSS3-koodi on suunniteltu saamaan Web-sivut näyttämään paremmilta ja latautumaan nopeammin sekä lyhentämään sivujen luomiseen kuluvaa aikaa käyttäjän selaimessa. CSS3 tekee Web-suunnittelusta vähemmän riippuvaisia kuvatiedostoista sivun suunnitteluelementeissä ja vähentää tiedostojen siirtopyyntöjä ja latausaikaa käyttämällä vähemmän kuvia. CSS1 keskittyi ulkoasun muotoiluun, kun taas CSS2 lisäsi paikannusominaisuudet tekstille ja objekteille. Vanhemmat selainversiot, kuten IE 9 ja aikaisemmat, eivät tue laajasti CSS3:n lisättyjä ominaisuuksia, jotka voivat vaatia lisäaikaa CSS-varakoodin ylläpitämiseen.
Päivän video
CSS3 lisää pyöristettyjä kulmia ja liukuvärejä
Ennen CSS3:a verkkokehittäjien piti suunnitella kuvatiedostoja lisätäkseen esimerkiksi pyöristettyjä kulmia rakenteellisia reunoja ja taustakuvan liukuvärejä varten. CSS3 sisältää vertailukelpoisia ominaisuuksia, jotka voidaan lisätä muutamalla koodirivillä. CSS: ssä verkkokehittäjän on suunniteltava reunus tai kaltevuus, ladattava se kuvapalvelimelle, asetettava kuva sivulle ja asetettava reunus oikein CSS: n avulla. CSS3:ssa Web-kehittäjä voi saada aikaan jotain vastaavaa koodilla, kuten ".roundBorder{border-radius: 10px;}". Taustagradientit ovat hieman monimutkaisempia ja vaativat eri koodin eri selaimille. Esimerkiksi Chromen ja IE: n valkoisesta mustaan liukuväri käyttää koodia, kuten ".gradBG{background: liner-gradient (valkoinen, musta);}".
CSS3 lisää animaatioominaisuuksia ja tekstitehosteita
CSS3:ssa on kourallinen ominaisuuksia, joita CSS: ssä ei ole, jotka parantavat sivun elementtien ulkoasua. CSS3:n avulla verkkokehittäjät voivat lisätä tekstiin tekstin varjon helpottaakseen lukemista tai lisätä visuaalista tyylikkyyttä ja pakottaa rivinvaihtoja pidempiin sanoihin, jotta ne mahtuvat sarakkeiden sisään rivittämällä. Ennen CSS3:a verkkokehittäjien piti koodata animaatioita komentosarjakielillä, kuten JavaScript ja jQuery; CSS3 lisää useita animaatioominaisuuksia suunnittelukerrokseen. W3C työskentelee edelleen Web-animaatiostandardin parissa selvittääkseen yhteensopivuusongelmia eri animaatiotekniikoiden välillä.
CSS3 määrittää tekstisarakkeet
CSS3 lisää mahdollisuuden jakaa tekstiosat useisiin sarakkeisiin luettavaksi kuin sanomalehti. CSS2-spesifikaatiossa verkkokehittäjien on vaikea rakentaa monisarakkeisia tekstiosia, koska standardia ei ole varustettu automaattisesti jakamaan tekstiä. Erityisesti sivustoilla, joissa on responsiivinen suunnittelu, kehitystekniikka, joka järjestää uudelleen ja muuttaa sisällön kokoa Kun katsot laitteen näytön resoluutiota, suurempia näyttöjä käyttävien ihmisten voi olla vaikea lukea tekstirivejä, jotka leviävät näyttö.
