Suurin ero CSS2: n ja CSS3 on, että CSS3 on jaettu eri osioihin, nimeltään moduulit. Jokainen näistä moduuleista on matkalla läpi W3C: n suositusprosessin eri vaiheissa. Tämä prosessi on helpottanut useiden CSS3-palojen hyväksymistä ja toteuttamista selaimessa eri valmistajien toimesta.
Jos verrataan tätä prosessia CSS2: n kanssa tapahtuneeseen, jossa kaikki toimitettiin yhtenä asiakirjana kaikkien CSS-tyylilehdet sen sisältämien tietojen perusteella, alat nähdä edut, joita suosituksen jakaminen pienempiin, yksittäisiin kappaleisiin. Koska jokaista moduulia kehitetään erikseen, kehittäjät nauttivat paljon laajemmasta selaintuesta CSS3-moduuleille.
Uudet CSS3-valitsimet
CSS3 tarjoaa useita uusia tapoja kirjoittaa CSS-sääntöjä uusilla CSS-valitsimilla, uuden yhdistimen ja joitain uusia pseudoelementtejä.
Uusia määritteen valitsimia on kolme:
-
Määritteen alku vastaa tarkalleen:
elementti [foo ^ = "bar"]
Elementillä on määritelmä nimeltä foo, joka alkaa "bar": lla. -
Määritteen loppu vastaa tarkalleen:
elementti [foo $ = "bar"]
Elementillä on attribuutti nimeltä foo, joka päättyy "bar": iin, esim. -
Attribuutti sisältää ottelun:
elementti [foo * = "bar"]
Elementillä on määritteen olla nimeltään foo joka sisältää merkkijonon "bar".
16 uutta pseudoluokkaa on otettu käyttöön:
-
: juuri
- Asiakirjan juurielementti.
-
: n. lapsi (n)
- Käytä tätä vastaamaan tarkkoja alielementtejä tai käyttämällä muuttujia saadaksesi vuorotellen vastaavuuksia.
-
: n. viimeinen lapsi (n)
- Yhdistä tarkat lapsielementit viimeisestä laskettuna.
-
: n-tyypin tyyppi (n)
- Yhdistä sisaruselementit samalla nimellä ennen sitä dokumenttipuuhun.
-
: tyypin viimeinen viimeinen (n)
- Yhdistä sisaruselementit samalla nimellä laskien alhaalta ylöspäin.
-
:viimeinen lapsi
- Yhdistä viimeinen lapsielementti vanhemman.
-
: ensimmäisen tyyppinen
- Yhdistä tämän tyyppinen ensimmäinen sisarelementti.
-
: tyypin viimeinen
- Yhdistä viimeinen sisarelementti.
-
:ainoa lapsi
- Yhdistä elementti, joka on vanhempiensa ainoa lapsi.
-
: vain tyypin
- Yhdistä elementti, joka on ainoa sen tyyppistä.
-
:tyhjä
- Yhdistä elementti, jolla ei ole lapsia (mukaan lukien tekstisolmut).
-
:kohde
- Yhdistä elementti, joka on viittaavan URI: n kohde.
-
: käytössä
- Yhdistä elementti, kun se on käytössä.
-
:liikuntarajoitteinen
- Yhdistä elementti, kun se on poistettu käytöstä.
-
: tarkastettu
- Yhdistä elementti, kun se on valittu (valintanappi tai valintaruutu).
-
: ei (t)
- Ottelu, kun elementti ei vastaa yksinkertaista valitsimet.
Yksi uusi yhdistäjä on:
-
elementti ~ elementtiB
- Ottelu, kun elementti B seuraa jonnekin elementin A jälkeen, ei välttämättä välittömästi.
Uudet ominaisuudet
CSS3 esitteli myös useita uusia CSS-ominaisuuksia. Monet näistä ominaisuuksista luovat visuaalisia tyylejä, jotka todennäköisesti liittyisivät enemmän grafiikkaohjelmaan, kuten Photoshop. Jotkut näistä, kuten raja-säde tai laatikko-varjo, ovat olleet olemassa CSS3: n käyttöönoton jälkeen. Toiset, kuten flexbox tai jopa CSS Ruudukko ovat uudempia tyylejä, joita pidetään usein CSS3-lisäyksinä.
CSS3: ssa laatikkomalli ei ole muuttunut. Mutta on joukko uusia tyyliominaisuuksia, jotka voivat auttaa sinua muotoilemaan laatikoidesi taustoja ja reunoja.
Useita taustakuvia
Käyttämällä taustakuvan, taustan sijainnin ja taustan toistamisen tyylejä voit määrittää useita taustakuvia kerrostettaviksi päällekkäin. Ensimmäinen kuva on käyttäjää lähinnä oleva kerros, jonka jälkeen seuraavat on maalattu. Jos taustaväri on, se maalataan kaikkien kuvakerrosten alle.
Uudet tausta-tyyliset ominaisuudet
CSS3: ssa on myös joitain uusia taustatietoja:
- taustaleike
- Tämä ominaisuus määrittää, miten taustakuva leikataan. Oletusarvo on reunuslaatikko, mutta se voidaan vaihtaa täyttö- tai sisältölaatikkoon.
- tausta-alkuperä
- Tämä ominaisuus määrittää, pitäisikö tausta sijoittaa täyte-, reunus- tai sisältöruutuun.
- taustakoko
- Tämä ominaisuus osoittaa taustakuvan koko. Sen avulla voit venytä pienempiä kuvia sivulle sopiviksi.
Muutokset olemassa oleviin taustatyyliominaisuuksiin
Olemassa oleviin taustatyyppisiin ominaisuuksiin on myös tehty muutamia muutoksia:
-
tausta-toisto
- Tälle omaisuudelle on kaksi uutta arvoa - tilaa ja pyöristää. Välilyönti laatoitetun kuvan tasaisesti laatikossa ilman leikattavaa. Pyöreä skaalaa taustakuvan niin, että se ruuduttaa useita kertoja ruutuun.
-
tausta-kiinnitys
- Uusi arvo "paikallinen" lisätään niin, että tausta vierittää elementin sisältöä, kun kyseisellä elementillä on vierityspalkki.
-
tausta
- Lyhyt tausta -ominaisuus lisää koko- ja alkuperäominaisuudet.
CSS3 Border Properties
CSS3: ssa reunat voivat olla tyylejä, joihin olemme tottuneet (kiinteät, kaksinkertaiset, katkoviivat jne.) Tai ne voivat olla kuvia. Lisäksi CSS3 tukee pyöristettyjä kulmia. Reunuskuvat ovat mielenkiintoisia, koska luot kuvan kaikista neljästä reunasta ja kerrot sitten CSS: lle, kuinka tätä kuvaa käytetään rajoillesi.
Uudet reunustyyliominaisuudet
CSS3: ssa on joitain uusia rajaominaisuuksia:
- raja-säde
- raja-ylä-oikea-säde, raja-oikea-oikea-säde, raja-ala-vasen-säde, raja-ylä-vasen-säde
- Näiden ominaisuuksien avulla voit luoda pyöristettyjä kulmia rajoillesi.
- border-image-source
- Määrittää käytettävän kuvalähdetiedoston jo määritettyjen reunatyyppien sijaan.
- border-image-slice
- Edustaa sisäpuolisia siirtymiä reunakuvan reunoista.
- reunan kuvan leveys
- Määrittää reunuskuvan leveyden arvon.
- reuna-kuva-alku
- Määrittää määrän, jonka reunuskuva-alue ulottuu reunaruudun ulkopuolelle.
- reunus-kuva-venytys
- Määrittää, miten reunuskuvan sivut ja keskiosat tulee laatoittaa tai skaalata.
- reunakuva
- Kaikkien reunakuvan ominaisuuksien lyhenneominaisuus.
Reunoihin ja taustoihin liittyvät muut CSS3-ominaisuudet
Kun ruutu rikkoutuu sivunvaihdon, sarakkeenvaihdon tai rivinvaihdon aikana (sisäisissä elementeissä), laatikko-sisustus-tauko ominaisuus määrittelee, miten uudet laatikot kääritään reunuksella ja pehmusteilla. Taustat jaetaan useiden rikkoutuneiden laatikoiden kesken tällä ominaisuudella.
Uusi laatikko-varjo ominaisuus lisää varjoja laatikkoelementteihin.
CSS3: n avulla voit nyt helposti luoda useita sarakkeita sisältävän verkkosivun ilman taulukoita tai monimutkaista div tag-rakenteet. Kerrot yksinkertaisesti selaimelle, kuinka monta saraketta rungon elementillä tulisi olla ja kuinka leveän niiden tulisi olla. Lisäksi voit lisätä reunuksia (sääntöjä) ja taustavärejä, jotka ulottuvat sarakkeen korkeuteen, ja teksti kulkee automaattisesti kaikkien sarakkeiden läpi.
Määritä sarakkeiden määrä ja leveys
On kolme uutta ominaisuudet joiden avulla voit määrittää sarakkeiden lukumäärän ja leveyden:
-
sarakkeen leveys
- Määrittää sarakkeiden leveyden. Selain kuljettaa sitten tekstiä täyttämään tilan leveillä sarakkeilla.
-
sarakemäärä
- Määrittää sarakkeiden määrän sivulla. Selain luo sitten sarakkeet, jotka ovat riittävän leveät mahtuakseen tilaan, mutta vain määrittämäsi numeron.
-
sarakkeita
- Lyhytominaisuus, jossa voit määrittää joko leveyden tai lukumäärän (tai molemmat, mutta sillä on harvoin merkitystä).
CSS3-sarakkeen aukot ja säännöt
Puutteet ja säännöt sijoitetaan sarakkeiden väliin samassa monisarakkeisessa skenaariossa. Rakot työntävät sarakkeet erilleen, mutta säännöt eivät vie tilaa. Jos sarakesääntö on leveämpi kuin aukko, se menee päällekkäin vierekkäisten sarakkeiden kanssa. Sarakesäännöille ja aukoille on viisi uutta ominaisuutta:
-
sarakeväli
- Määrittää sarakkeiden välisten aukkojen leveyden.
-
sarake-sääntö-väri
- Määrittää säännön värin.
-
sarake-sääntö-tyyli
- Määrittää säännön tyylin (kiinteä, pisteviiva, kaksinkertainen jne.).
-
sarake-säännön leveys
- Määrittää säännön leveyden.
-
sarake-sääntö
- Lyhytominaisuus, joka määrittelee kaikki kolme sarakesääntöominaisuutta kerralla.
CSS3-sarakkeenvaihdot, ulottuvat sarakkeet ja täyttösarakkeet
Sarake tauot käyttävät samoja CSS2-vaihtoehtoja, joita käytetään määritettäessä taitteita sivutetussa sisällössä, mutta niillä on kolme uutta ominaisuutta: tauko ennen, taukoja murtautua sisälle.
Kuten taulukoiden kohdalla, voit asettaa elementit sarakkeiden väliin sarake-span-ominaisuudella. Tämän avulla voit luoda otsikoita, jotka kattavat useita sarakkeita enemmän kuin sanomalehti.
Sarakkeiden täyttäminen päättää, kuinka paljon sisältöä kussakin sarakkeessa on. Tasapainotetut sarakkeet yrittävät laittaa saman määrän sisältöä kuhunkin sarakkeeseen, kun taas auto vain siirtää sisällön sisään, kunnes sarake on täynnä ja siirtyy seuraavaan.
Lisää CSS3: n ominaisuuksia, joita ei sisälly CSS2: een
CSS3: ssa on paljon lisäominaisuuksia, joita ei ollut CSS2: ssa, mukaan lukien:
- CSS Template -asettelumoduuli ja CSS3 Grid -paikannusmoduuli: Ruudukkojen luominen CSS: llä.
- CSS3-tekstimoduuli: Esitä teksti ja luo jopa varjoja CSS: llä.
- CSS3-värimoduuli: Nyt peittämättömyydellä.
- Muutokset laatikkomalliin: Sisältää a teltta ominaisuus, joka toimii kuten IE-tunniste.
- CSS3-käyttöliittymämoduuli: Uusien kohdistinten antaminen, vastaukset toimintoihin, pakolliset kentät ja jopa elementtien koon muuttaminen.
- Mediakyselyt: Mediakyselyt antaa sinulle enemmän joustavuutta määriteltäessä, kuinka tyylitaulukkoa tulisi käyttää. Voit esimerkiksi määrittää tyylisivun, joka on tarkoitettu vain kämmenlaitteille, joiden näkymä on suurempi kuin 20em.
- CSS3 Ruby -moduuli: Tarjoaa tukea kielille, jotka käyttävät tekstirubiinia asiakirjojen merkinnöissä.
- CSS3 Paged Media -moduuli: Saat vielä enemmän tukea sivutetuille materiaaleille (paperi, piirtoheitinkalvot jne.).
- Luotu sisältö: Ylätunnisteiden ja alatunnisteiden, alaviitteiden ja muun ohjelmallisesti luodun sisällön käyttäminen, erityisesti sivutettua mediaa varten
- CSS3-puhemoduuli: Muutokset foneen CSS: ään.