Ero CSS2: n ja CSS3: n välillä

Ymmärtääksesi tärkeimmät muutokset CSS3: een

Suurin ero CSS2: n ja CSS3: n välillä on se, että CSS3 on jaettu eri osioihin, nimeltään moduuleja. Kukin näistä moduuleista siirtyy W3C: n läpi suositusprosessin eri vaiheissa. Tämä prosessi on helpottanut useiden eri CSS3-kappaleiden hyväksymistä ja toteuttamista selaimessa eri valmistajien toimesta.

Jos verrataan tätä prosessia CSS2: n tapahtumiin, jossa kaikki on toimitettu yhtenä asiakirjana, jossa on kaikki Cascading Style Sheets -tietokannassa olevat tiedot, näet suosituksen rikkomisen etuja pienempiin yksittäisiin kappaleisiin. Koska kukin moduuleista työskentelee yksitellen, meillä on paljon laajempi valikoima selainta tukea CSS3-moduuleille.

Kuten kaikki uudet ja muuttuvat määritykset, varmista, että testat CSS3-sivuja huolellisesti niin monissa selaimissa ja käyttöjärjestelmissä kuin mahdollista. Muista, että tavoitteena ei ole luoda verkkosivustoja, jotka näyttävät täsmälleen samanlaisilta jokaiselta selaimelta, mutta varmistavat, että käyttämäsi tyylit, mukaan lukien CSS3-tyylit, näyttävät hyviltä selaimissa, jotka tukevat niitä, ja että ne sijoittuvat loistavasti vanhemmille selaimille, Älä.

Uudet CSS3-valitsimet

CSS3 tarjoaa joukon uusia tapoja kirjoittaa CSS-sääntöjä uusilla CSS-valitsimilla sekä uusi kombinaattori ja uudet pseudo-elementit.

Kolme uutta ominaisuusvalitsinta:

• Attribuutin alku vastaa täsmälleen elementtiä [foo ^ = "bar"] Elementillä on attribuutti nimeltä foo, joka alkaa "bar": lla
• Attribuutin päättyminen vastaa täsmälleen elementtiä [foo $ = "bar"] Elementillä on attribuutti nimeltä foo, joka päättyy "bar": lla
• Attribuutti sisältää otteluelementin [foo * = "bar"] Elementillä on attribuutti nimeltä foo, joka sisältää merkkijonon "bar" esim.

16 uutta pseudokurssia:

• : root
  • Asiakirjan juurihakemisto. HTML: ssä tämä on aina.
• : nnen-lapsi (n)
  • Käytä tätä vastaamaan tarkkoja lapsielementtejä tai käytä muuttujia saadaksesi vuorotellen otteluita.
• : nnen-last-lapsi (n)
  • Löydä tarkat lapsielementit, jotka laskevat viimeisestä.
• : nnen-of-tyypin (n)
  • Sisällön sisarukset, joiden nimi on sama kuin dokumenttipuussa.
• : nnen-last-of-tyypin (n)
  • Vastaa sisarukset, joilla on sama nimi alhaalta ylöspäin.
• :viimeinen lapsi
  • Vastaa vanhemman viimeistä lapsielementtiä.
• : ensimmäinen-of-tyyppinen
  • Vastaa tämän tyypin ensimmäistä sisaruselementtiä.
• : viimeinen-of-tyyppinen
  • Vastaa kyseisen tyypin viimeistä sisaruselementtiä.
• :ainoa lapsi
  • Vastaa elementtiä, joka on vanhempiensa ainoa lapsi.
• : vain-of-tyyppinen
  • Yhdistä elementti, joka on ainoa sen tyyppi.
• :tyhjä
  • Vastaa elementtiä, jolla ei ole lapsia (mukaan lukien tekstisolmut).
• :kohde
  • Vastaa elementti, joka on viittaavan URI: n kohde.
• : käytössä
  • Korvaa elementti, kun se on käytössä.
• :liikuntarajoitteinen
  • Korvaa elementti, kun se on poistettu käytöstä.
• : tarkistettu
  • Valitse elementti, kun se on valittu (valintanappi tai valintaruutu).

• : ei (t)
  • Match, kun elementti ei vastaa yksinkertaista valitsinta s.

Yksi uusi kombinaattori:

• elementA ~ elementB
  • 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 olivat luoda visuaalisia tyylejä, jotka todennäköisesti liittäisivät enemmän grafiikkaohjelmistoon, kuten Photoshopiin. Jotkut näistä, kuten raja-säde tai laatikko-varjo, ovat olleet noin käyttöönoton jälkeen, jos CSS3. Muut, kuten flexbox tai jopa CSS Grid ovat uudempia tyylejä, joita pidetään usein usein CSS3-lisäyksinä.

CSS3: ssa laatamalli ei ole muuttunut. Mutta on joukko uusia tyyliominaisuuksia, jotka auttavat sinua tyylittämään laatikoiden taustat ja rajat.

Useita taustoja I mages

Taustakuvan, tausta-aseman ja taustatyyppien tyylien avulla voit määrittää useita taustakuvia päällekkäin kerrallaan ruutuun. Ensimmäinen kuva on käyttäjälle lähinnä oleva kerros, ja seuraavat ovat maalattuja. Jos on taustan väri, se maalataan kaikkien kuvakerroksien alle.

Uudet taustatyyliominaisuudet

CSS3: ssa on myös uusia taustaominaisuuksia.

• tausta-clip
  • Tämä ominaisuus määrittää, miten taustakuva on leikattava. Oletus on raja-alue, mutta se voidaan vaihtaa padding-ruutuun tai sisältöruutuun.
• tausta-alkuperää
  • Tämä ominaisuus määrittää, onko taustan oltava paikkoja padding-laatikossa, raja-laatikossa tai sisältöruudussa.
• tausta-koko
  • Tämän ominaisuuden avulla voit ilmoittaa taustakuvan koon. Sen avulla voit venyttää pienempiä kuvia sopivaksi sivulle.

Muutokset olemassa oleviin taustatyyliominaisuuksiin

Myös olemassa olevia taustatyyliominaisuuksia on muutamia muutoksia:

• background-repeat
  • Tämä ominaisuus on kaksi uutta arvoa: tilaa ja kierrosta. Avaruus tilaa laatoitetun kuvan tasaisesti laatikossa ilman leikkaamista. Pyöreä palauttaa taustakuvan niin, että se laatoittaa koko ajan useaan kertaan laatikossa.
• tausta-kiinnitys
  • Uusi arvo "paikallinen" lisätään siten, että tausta rullaa elementin sisällön kanssa, kun kyseisellä elementillä on vierityspalkki.
• tausta
  • Taustan lyhytkielinen ominaisuus lisää koko- ja alkuperän ominaisuuksia.

CSS3-reunusominaisuudet

CSS3-reunuksissa voi olla tyylit, joihin olemme tottuneet (kiinteät, kaksinkertaiset, katkoviat jne.) Tai ne voivat olla kuva. Plus, CSS3 tuo kykyä luoda pyöristettyjä kulmia. Raja-aiheet ovat mielenkiintoisia, koska luodat kuvan kaikista neljästä reunasta ja kerro CSS: lle, miten soveltakaa kyseinen kuva rajoille.

Uudet Border Style -ominaisuudet

CSS3: ssa on joitain uusia raja-ominaisuuksia:

• border-säde
  • raja-ylä-oikea-säde , raja-ala-oikea-säde , raja-ala-vasen-säde , raja-top-vasen säde
  • Näiden ominaisuuksien avulla voit luoda pyöristettyjä kulmia rajoillesi.
• border-image-source
  • Määrittää käytettävä kuvanlähdetiedoston jo määritettyjen rajatyylien sijaan.
• border-image-siivu
  • Edustaa sisäänpäin siirtymiä reunan reunojen reunasta
• border-image-leveys
  • Määrittää rajakuvan leveyden arvon.
• border-image-alusta
  • Määrittää raja-alueen ylittävän raja-alueen määrän.
• raja-kuva-stretch
  • Määrittää, miten reunakuvan sivut ja keskiosat on laatoitettava tai skaalattu.
• border-kuva
  • Kaikkien rajapintaominaisuuksien pikakirjoitusominaisuudet.

Muita CSS3-ominaisuuksia, jotka liittyvät reunuksiin ja taustoihin

Kun ruutu on rikki sivuseurannassa, sarake katkeaa rivi tauon (inline-elementtejä varten) box-decoration-break-ominaisuus määrittää, kuinka uudet laatikot on kääritty reunuksella ja pehmusteella. Taustat voidaan jakaa useiden rikki ruutujen välillä käyttämällä tätä ominaisuutta.

Siellä on myös laatikko-varjo-ominaisuus, jolla voidaan lisätä varjoja laatikkoelementteihin.

CSS3: n avulla voit helposti luoda verkkosivun, jossa on useita sarakkeita ilman taulukoita tai monimutkaisia ​​div-jäsentorakenteita. Voit yksinkertaisesti kertoa selaimelle, kuinka monta saraketta kehon elementtiä olisi ja kuinka laaja heitä pitäisi olla. Lisäksi voit lisätä rajoja (sääntöjä), taustavärejä, jotka ulottuvat sarakkeen korkeuteen ja tekstisi kulkee läpi kaikki sarakkeet automaattisesti.

CSS3-sarakkeet - Määritä sarakkeiden lukumäärä ja leveys

Kolme uutta ominaisuutta, joiden avulla voit määrittää sarakkeiden määrän ja leveyden:

• sarakkeen leveys
  • Määrittää sarakkeen leveyden. Selaimen virtauksen jälkeen teksti täyttää tilan laajoilla sarakkeilla.
• sarake-count
  • Määrittää sivulla olevien sarakkeiden määrän. Selaimen avulla luodaan sarakkeita riittävän leveäksi, jotta ne sopisivat tilaan, mutta vain määrittämäsi numeron.
• pylväät
  • Kiinteä ominaisuus, jossa voit määrittää joko leveyden tai numeron (tai molemmat, mutta harvoin on järkevää).

CSS3-sarakkeen aukot ja säännöt

Eri puutteet ja säännöt sijoitetaan sarakkeiden välillä samassa monivaiheisessa skenaariossa. Aukot poistavat sarakkeet, mutta säännöt eivät vie tilaa. Jos sarakkeen sääntö on laajempi kuin sen aukko, se limittää vierekkäiset sarakkeet. sarakkeiden sääntöihin ja aukkoihin on viisi uutta ominaisuutta:

• sarake-aukko
  • Määrittää sarakkeiden välisten aukkojen leveyden.
• sarake-sääntö-väri
  • Määrittää säännön värin.
• sarake-sääntö-tyyliin
  • Määrittää säännön tyylin (kiinteä, pisteviivaus, kaksoiskappale jne.).
• sarake-sääntö-leveys
  • Määrittää säännön leveyden.
• sarake-sääntö
  • Lyhytaikainen ominaisuus, joka määrittää kaikki kolme sarakkeen sääntöominaisuutta kerralla.

CSS3-sarakkeen taukot, sarakepihdit ja täyttöpylväät

Sarakkeen taukot käyttävät samoja CSS2-vaihtoehtoja, joita käytetään määritettyjen taukojen määrittämiseen sivullisessa sisällössä, mutta kolmella uudella ominaisuudella: break-before , break-after ja break-inside .

Taulukoiden tapaan voit asettaa elementtejä sarakkeiden välille sarakkeen span-ominaisuuden avulla. Näin voit luoda otsikoita, jotka sisältävät useita sarakkeita enemmän kuin sanomalehti.

Täyttömäärät määrittävät, kuinka paljon sisältöä kullekin sarakkeelle. Tasapainotetut sarakkeet yrittävät laittaa saman sisällön määrän jokaiseen sarakkeeseen, kun auto vain virtaa sisällön, kunnes sarake on täynnä ja siirtyy sitten seuraavaan.

Lisää CSS3: n ominaisuuksia, jotka eivät sisälly CSS2: een

CSS3: ssa on paljon lisäominaisuuksia, joita ei ole olemassa CSS2: ssa, mukaan lukien:

• CSS Template -asennusmoduuli ja CSS3 Grid-paikannusmoduuli : Ristikoiden luominen CSS: llä.
• CSS3-tekstimoduuli : Piirrä tekstiä ja luo jopa pudotusvarjoja CSS: llä.
• CSS3-värimoduuli : nyt läpikuultamattomana.
• Laatikkomallin muutokset : Sisällytetään teltan ominaisuus, joka toimii IE-tunnisteena.
• CSS3-käyttöliittymämoduuli : antaa sinulle uusia kohdistimia, vastauksia toimintoihin, vaaditut kentät ja jopa kokoaikoja .
• Media-kyselyt : Mediakyselyt antavat sinulle entistä joustavammin määritettäessä tyyliarkin käyttöä. Voit esimerkiksi määrittää tyylilomakkeen, joka on tarkoitettu vain kannettaville laitteille, joiden katselualue on suurempi kuin 20 m.
• CSS3 Ruby -moduuli : Tarjoaa tukea tekstuaineita käyttäville kielille asiakirjojen merkitsemiseen.
• CSS3 Paged Media -moduuli : Jopa entistä enemmän tukea sivullisille (paperille, piirtoheitinkalvoille jne.).
• Luotu sisältö : L-käynnissä olevat otsikot ja alatunnisteet, alaviitteet ja muu sisältö, joka luodaan ohjelmallisesti, erityisesti sivullisille.
• CSS3 Puhe moduuli : Muutos kohinaan CSS.