Razlika med CSS2 in CSS3

Razumevanje glavnih sprememb v CSS3

Največja razlika med CSS2 in CSS3 je, da je CSS3 razdeljen na različne dele, imenovane moduli. Vsak od teh modulov poteka skozi W3C v različnih fazah postopka priporočanja. Ta postopek je veliko olajšal, da so različni deli CSS3 sprejeli in izvajali v brskalniku različni proizvajalci.

Če primerjate ta postopek s tem, kar se je zgodilo s CSS2, kjer je bilo vse poslano kot en dokument z vsemi informacijami Cascading Style Sheets v njej, začnete videti prednosti razbijanja priporočila na manjše, posamezne dele. Ker vsak od modulov deluje individualno, imamo veliko več podpore za brskalnik CSS3.

Kot pri vseh novih in spreminjajočih specifikacijah, temeljito preizkusite svoje CSS3 strani v toliko brskalnikih in operacijskih sistemih, kot lahko. Ne pozabite, da cilj ni ustvariti spletne strani, ki v vsakem brskalniku izgledajo popolnoma enake, temveč zagotoviti, da so vsi slogi, ki jih uporabljate, vključno s slogmi CSS3, v brskalnikih, ki jih podpirajo, videti odlični in da se starejše brskalke znova ne.

Novi izbirniki CSS3

CSS3 ponuja vrsto novih načinov, kako lahko napišete pravila CSS z novimi CSS selektorji, novim kombinatorjem in nekaj novimi psevdo-elementi.

Tri nove izbirnike atributov:

• Začetek atributa se natančno ujema z elementom [foo ^ = "bar"] Element ima atribut, imenovan foo, ki se začne z "vrstico" npr.
• Atribut se konča s točno elementom [foo $ = "bar"] Element ima atribut, imenovan foo, ki se konča z "vrstico" npr.
• Atribut vsebuje element ujemanja [foo * = "bar"] Element ima atribut, imenovan foo, ki vsebuje niz "bar" npr.

16 novih psevdo-razredov:

• : root
  • Korenski element dokumenta. V HTML-ju je to vedno.
• : n-otrok (n)
  • Uporabite to, da se ujemajo s točnimi otroškimi elementi ali uporabite spremenljivke, da dobite izmenična ujemanja.
• : nth-last-child (n)
  • Ujemanje natančnih otroških elementov, ki se štejejo od zadnjega.
• : nth-of-type (n)
  • Ujemite elemente s sestrami z enakim imenom pred njim v drevesu dokumentov.
• : nth-last-of-type (n)
  • Ujemanje elementov s sestrami z enakim imenom, ki se štejejo od spodaj.
• : zadnji otrok
  • Ujemanje zadnjega otroka elementa staršev.
• : prvi tip
  • Ujemajoč se s prvim bratovskim elementom te vrste.
• : zadnji-of-type
  • Ujemajte se s temi tipom.
• : samo-otrok
  • Ujemite element, ki je edini otrok njenega starša.
• : samo-vrste
  • Ujemajte element, ki je edini njegov tip.
• :prazno
  • Ujemajte element, ki nima otrok (vključno z besedilnimi vozlišči).
• : cilj
  • Ujemanje elementa, ki je cilj referenčnega URI.
• : omogočeno
  • Ujemanje elementa, ko je omogočeno.
• :onemogočeno
  • Ujemanje elementa, ko je onemogočen.
• : preverjeno
  • Element se prilagodi, ko je preverjen (izbirni gumb ali potrditveno polje).

• : ne (i)
  • Ujemanje, če se element ne ujema s preprostim izbirnikom s.

En novi kombinator:

• elementA ~ elementB
  • Ujemanje, ko element B sledi nekje po elementu A, ne nujno takoj.

Nove lastnosti

CSS3 je uvedel tudi številne nove CSS lastnosti. Mnogi od teh lastnosti so bili ustvariti vizualne sloge, ki bi se verjetno povezali z grafičnim programom, kot je Photoshop. Nekatere od teh, kot so mejni polmer ali polje sence, so bile od uvedbe, če CSS3. Drugi, kot so flexbox ali celo CSS Grid, so novejši slogi, ki se še vedno pogosto štejejo za dodatke CSS3.

Model CSS3 v CSS3 ni spremenjen. Vendar pa obstajajo številne nove lastnosti sloga, ki vam lahko pomagajo oblikovati ozadja in meje vaših polj.

Večkratno ozadje sem mages

Z uporabo slikovnih ozadij, pozadinskega položaja in slogov za ponovitev ozadja lahko v polju določite več slik v ozadju, ki jih je treba nadoknaditi drug na drugega. Prva slika je plast, ki je najbližja uporabniku, z naslednjimi slikami. Če je barva ozadja, je barvana pod vsemi slikovnimi sloji.

Nove lastnosti sloga v ozadju

V CSS3 obstajajo tudi nove lastnosti ozadja.

• ozadje
  • Ta lastnost določa, kako je treba sliko ozadja obrezati. Privzeto je polje za okna, vendar ga lahko spremenite v polje za polnjenje ali polje z vsebino.
• ozadje
  • Ta lastnost določa, ali naj bo ozadje mesta v polju za prilagajanje, mejnem polju ali vsebini.
• velikost ozadja
  • Ta lastnost vam omogoča prikaz velikosti slike v ozadju. Omogoča vam, da raztezate manjše slike, da se prilegajo strani.

Spremembe obstoječih lastnosti sloga v ozadju

Obstaja tudi nekaj sprememb obstoječih lastnosti sloga ozadja:

• ponovitev ozadja
  • Za to lastnost sta dve novi vrednosti: prostor in okrogla. Prostor v prostoru je ploščata slika enakomerno znotraj škatle, ne da bi ga obrezali. Okrogla slika ponovno prekriža sliko ozadja, tako da bo v polju večkrat zaprta.
• background-attachment
  • Nova vrednost "local" se doda tako, da se ozadje pomakne z vsebino elementa, če ima ta element drsni trak.
• ozadje
  • Ozadje lastnosti ozadja se doda v velikosti in izvornih lastnostih.

Lastnosti meje CSS3

V mejah CSS3 so lahko slogi, na katere smo navajeni (trdna, dvojna, črtkana itd.) Ali pa so lahko slike. Plus, CSS3 prinaša možnost ustvarjanja zaobljenih kotov. Slike obrobe so zanimive, ker ustvarite sliko vseh štirih meja in nato poveste CSS, kako uporabiti to sliko na svojih mejah.

Nove značilnosti mejnega stila

V CSS3 je nekaj novih mejnih lastnosti:

• mejni polmer
  • mejni zgornji del desnega mejnega prehoda, desno od spodnjega desnega dela desnega dela , meja spodnjega levega polmera , mejnega zgornjega levega polmera
  • Te lastnosti vam omogočajo ustvarjanje zaobljenih kotov na vaših mejah.
• border-image-source
  • Določa izvorno datoteko slike, ki jo je treba uporabiti namesto že določenih mejnih slogov.
• border-image-rezina
  • Predstavlja notranja odmikanja od robov robov
• meja-širina slike
  • Določi vrednost širine za vašo mejno sliko.
• meja-slika-začetek
  • Določa količino, ki jo območje mejnega območja razširi čez mejno polje.
• meja-slika-stretch
  • Določa, kako naj bodo stranice in srednji deli mejne podobe označeni ali ovrednoteni.
• border-image
  • Skrajšana lastnost za vse lastnosti mejne slike.

Dodatne CSS3 lastnosti, povezane z mejami in ozadji

Ko je polje prekinjeno s prelomom strani, prelom stolpca za prelom vrstic (za elemente v vrstici), lastnost polje-dekoracija-odmor določa, kako so nove škatle zavite z robom in oblazinjenjem. Ozadje je mogoče razdeliti med več zlomljenih polj, ki uporabljajo to lastnost.

Obstaja tudi polje s senci, ki se lahko uporablja za dodajanje sence v elemente polja.

S CSS3 lahko sedaj preprosto nastavite spletno stran z več stolpci brez tabel ali zapletenih struktur z različnimi oznakami. Preprosto povejte brskalniku, koliko stolpcev mora vsebovati element telesa in kako široko naj bodo. Poleg tega lahko dodate tudi meje (pravila), barve ozadja, ki obsegajo višino stolpca, in vaše besedilo samodejno prehaja skozi vse stolpce.

Stolpci CSS3 - Določite število in širino stolpcev

Obstajajo tri nove lastnosti, ki vam omogočajo, da določite število in širino stolpcev:

• širina stolpca
  • Določi širino, katere morajo biti stolpci. Brskalnik teče besedilo, tako da zapolni prostor s tako širokimi stolpci.
• štetje stolpcev
  • Določi število stolpcev na strani. Brskalnik nato ustvari stolpce, ki so dovolj široki, da se prilegajo v presledek, vendar le število, ki jo določite.
• stolpce
  • Shorthand lastnost, kjer lahko določite bodisi širino ali številko (ali oboje, toda to je redko smiselno).

CSS3 stolpične vrzeli in pravila

Vrzeli in pravila so postavljeni med stolpci v istem scenariju več scenarijev. Vrzeli bodo potisnile stolpce, vendar pravila ne zajemajo prostora. Če je pravilo stolpca širše, kot je vrzel, se bo prekrival sosednjih stolpcev. za pravila stolpca in vrzeli je pet novih lastnosti:

• razlike med stolpci
  • Določa širino reže med stolpci.
• barva stolpca-pravila
  • Določa barvo pravila.
• slog stolpca-pravila
  • Določi slog pravila (trdno, črtkano, dvojno, itd.).
• širina stolpca-pravila
  • Določa širino pravila.
• pravilo stolpca
  • Skrajšana lastnost, ki hkrati definira vse tri lastnosti pravilnika stolpca.

CSS3 prelomi stolpcev, stolpci za polnjenje in polnilni stolpci

Odlomki stolpcev uporabljajo iste možnosti CSS2, ki se uporabljajo za določanje odlomkov v paginirani vsebini, vendar s tremi novimi lastnostmi: prekinitev , prelom in razčlenitev .

Tako kot pri tabelah lahko nastavite elemente za razporejanje stolpcev s lastnostjo stolpca-span. To vam omogoča, da ustvarite naslove, ki obsegajo več stolpcev bolj kot časopis.

Stolpci za polnjenje določajo, koliko vsebine bo v vsakem stolpcu. Uravnoteženi stolpci poskušajo v vsakem stolpcu dati enako količino vsebine, medtem ko avto samo pretaka vsebino, dokler stolpec ni poln in nato gre na naslednjo.

Več funkcij v CSS3, ki niso vključeni v CSS2

V CSS3 je veliko dodatnih funkcij, ki v CSS2 niso obstajale, vključno z:

• Modul za postavitev predloge CSS in modul za pozicioniranje omrežja v omrežju CSS3 : Ustvarjanje mrež z CSS.
• CSS3 Tekstovni modul : besedilo besedila in celo ustvarite kapljice s CSS.
• CSS3 Barvni modul : Zdaj z motnjami.
• Spremembe modela polja : Vključno z znamko znamke, ki deluje kot oznaka IE.
• Modul za uporabniški vmesnik CSS3 : vam daje nove kazalce, odgovore na dejanja, potrebna polja in elemente s spreminjanjem velikosti .
• Poizvedbe v medijih : medijske poizvedbe omogočajo večjo prilagodljivost pri določanju, kako naj se uporabi slogovni list. Na primer, lahko določite slogovni list, ki je namenjen samo ročnim napravam, ki imajo pogled v pogledu, ki je večji od 20em.
• Modul CSS3 Ruby : Omogoča podporo jezikom, ki uporabljajo tekstilni rubin, da bi označevali dokumente.
• Modul Paged Media CSS3 : Za še večjo podporo paged medijev (papir, prosojnice itd.).
• Ustvarjena vsebina : L glave in noge za tek, opombe in druge vsebine, ki se ustvarijo programsko, zlasti za paged medije.
• CSS3 Govorni modul : spremembe na slušnem CSS.