Diferența dintre CSS2 și CSS3

Cea mai mare diferență între CSS2 și CSS3 este că CSS3 a fost împărțit în diferite secțiuni, numite module. Fiecare dintre aceste module își face drum prin W3C în diferite etape ale procesului de recomandare. Acest proces a făcut mult mai ușor acceptarea și implementarea diferitelor bucăți de CSS3 în browser de către diferiți producători.

Dacă comparați acest proces cu ceea ce s-a întâmplat cu CSS2, unde totul a fost trimis ca un singur document cu toate Foi de stil în cascadă informațiile din ea, începeți să vedeți avantajele divizării recomandării în bucăți mai mici, individuale. Deoarece fiecare dintre module este lucrat individual, dezvoltatorii se bucură de o gamă mult mai largă de suport pentru browser pentru module CSS3.

Selectoare CSS3 noi

CSS3 oferă mai multe modalități noi de a scrie reguli CSS cu noi selectoare CSS, precum și un nou combinator și câteva pseudo-elemente noi.

Există trei noi selectoare de atribute:

• Atributul de început se potrivește exact:

  element [foo ^ = "bară"]

  Elementul are un atribut numit foo care începe cu „bar” de ex.
instagram viewer
• Atributul care se termină exact se potrivește:

  element [foo $ = "bar"]

  Elementul are un atribut numit foo care se termină cu „bar” de ex.
• Atributul conține potrivirea:

  element [foo * = "bară"]

  Elementul are un atribut numit foo care conține șirul „bară”.

Au fost introduse 16 pseudo-clase noi:

• :rădăcină
  • Elementul rădăcină al documentului.
• : al n-lea copil (n)
  • Folosiți această opțiune pentru a potrivi elemente copil exacte sau utilizați variabile pentru a obține potriviri alternative.
• : n-ultimul-copil (n)
  • Potriviți elementele exacte ale copilului în numărare față de ultimul.
• : n-de tip (n)
  • Potriviți elemente de frate cu același nume înaintea acestuia în arborele documentului.
• : n-ultimul-de-tip (n)
  • Potriviți elemente de frate cu același nume numărând în sus de jos.
• :ultimul copil
  • Potriviți ultimul element copil a părintelui.
• : primul de tip
  • Potriviți primul element frate de acest tip.
• : ultimul tip
  • Potriviți ultimul element frate de acest tip.
• :singurul copil
  • Potriviți elementul care este singurul copil al părintelui său.
• : numai de tip
  • Potriviți elementul care este singurul de acest tip.
• :gol
  • Potriviți elementul care nu are copii (inclusiv noduri text).
• :ţintă
  • Potriviți un element care este ținta URI-ului de referință.
• :activat
  • Potriviți elementul când este activat.
• :dezactivat
  • Potriviți elementul când este dezactivat.
• : verificat
  • Potriviți elementul atunci când este bifat (butonul radio sau caseta de selectare).
• : nu (i)
  • Potriviți atunci când elementul nu se potrivește cu cel simplu selectoare.

Există un nou combinator:

• elementA ~ elementB
  • Potriviți când elementul B urmează undeva după elementul A, nu neapărat imediat.

Proprietăți noi

CSS3 a introdus, de asemenea, mai multe proprietăți CSS noi. Multe dintre aceste proprietăți creează stiluri vizuale care probabil s-ar asocia mai mult cu un program grafic precum Photoshop. Unele dintre acestea, cum ar fi border-radius sau box-shadow, au existat de la introducerea CSS3. Altele, cum ar fi flexbox sau chiar CSS Grilă, sunt stiluri mai noi care sunt încă considerate adesea adăugiri CSS3.

În CSS3, modelul cutiei nu s-a schimbat. Dar există o grămadă de noi proprietăți de stil care vă pot ajuta să stilizați fundalurile și marginile casetelor.

Imagini de fundal multiple

Folosind stilurile de imagine de fundal, poziție de fundal și repetare a fundalului, puteți specifica mai multe imagini de fundal care să fie stratificate una peste alta în casetă. Prima imagine este stratul cel mai apropiat de utilizator, cu următoarele pictate în spate. Dacă există o culoare de fundal, aceasta este pictată sub toate straturile de imagine.

Proprietăți noi ale stilului de fundal

Există, de asemenea, câteva proprietăți de fundal noi în CSS3:

• clip de fundal
• Această proprietate definește modul în care ar trebui decupată imaginea de fundal. Valoarea implicită este chenarul, dar poate fi schimbat în caseta de umplere sau în caseta de conținut.
• fundal-origine
• Această proprietate determină dacă fundalul trebuie plasat în caseta de umplutură, caseta de margine sau caseta de conținut.
• dimensiunea fundalului
• Această proprietate indică dimensiunea imaginii de fundal. Vă permite întindeți imagini mai mici pentru a se potrivi cu pagina.

Modificări ale proprietăților existente ale stilului de fundal

Există, de asemenea, câteva modificări ale proprietăților stilului de fundal existente:

• fundal-repetare
  • Există două valori noi pentru această proprietate - spaţiu și rundă. Spațiu spațiește imaginea cu faianță uniform în interiorul casetei, fără a fi decupată. Rundă redimensionează imaginea de fundal, astfel încât aceasta să fie plasată de mai multe ori în casetă.
• atașament de fundal
  • Se adaugă o nouă valoare „locală” astfel încât fundalul să deruleze cu conținutul elementului atunci când acel element are o bară de derulare.
• fundal
  • Proprietatea de scurtare a fundalului adaugă proprietățile de dimensiune și origine.

Proprietăți de margine CSS3

În CSS3, marginile pot fi stilurile cu care suntem obișnuiți (solide, duble, punctate etc.) sau pot fi o imagine. În plus, CSS3 acceptă colțuri rotunjite. Imaginile cu margini sunt interesante, deoarece creați o imagine a tuturor celor patru chenare și apoi spuneți CSS cum să aplicați acea imagine la bordurile dvs.

Proprietăți noi ale stilului de margine

Există câteva proprietăți noi de chenar în CSS3:

• frontieră-rază
• chenar-sus-dreapta-rază, chenar-jos-dreapta-rază, bordura-jos-raza stanga, chenar-sus-stânga-rază
• Aceste proprietăți vă permit să creați colțuri rotunjite pe margini.
• border-image-source
• Specifică fișierul sursă de imagine care urmează să fie utilizat în locul stilurilor de margine deja definite.
• border-image-felie
• Reprezintă compensările către interior de la marginile imaginii de margine.
• border-image-width
• Definește valoarea lățimii pentru imaginea dvs. de margine.
• frontieră-imagine-început
• Specifică cantitatea pe care zona de imagine a chenarului o extinde dincolo de caseta de margine.
• border-image-stretch
• Definește modul în care părțile laterale și părțile medii ale imaginii de margine ar trebui să fie placate sau scalate.
• border-image
• Proprietatea de prescurtare pentru toate proprietățile imaginii de margine.

Proprietăți CSS3 suplimentare legate de chenare și fundaluri

Când o casetă este întreruptă la o întrerupere de pagină, întrerupere de coloană sau întrerupere de linie (pentru elementele în linie), decor-cutie-pauză proprietatea definește modul în care noile cutii sunt împachetate cu bordură și căptușeală. Fundalele se împart între mai multe casete rupte folosind această proprietate.

Un nou cutie-umbră proprietatea adaugă umbre elementelor casetei.

Cu CSS3, acum puteți configura cu ușurință o pagină web cu mai multe coloane fără tabele sau complicate div structuri de etichete. Pur și simplu îi spuneți browserului câte coloane ar trebui să aibă elementul corp și cât de largi ar trebui să fie. În plus, puteți adăuga chenare (reguli) și culori de fundal care acoperă înălțimea coloanei, iar textul dvs. va curge automat prin toate coloanele.

Definiți numărul și lățimea coloanelor

Sunt trei noi proprietăți care vă permit să definiți numărul și lățimea coloanelor:

• lățimea coloanei
  • Definește lățimea coloanelor tale. Browserul va transmite apoi textul pentru a umple spațiul cu coloane atât de largi.
• număr de coloane
  • Definește numărul de coloane din pagină. Browserul va crea apoi coloane suficient de largi pentru a se potrivi în spațiu, dar numai numărul pe care îl specificați.
• coloane
  • Proprietate de stenografie în care puteți defini fie lățimea, fie numărul (sau ambele, dar asta rareori are sens).

CSS3 Coloane goluri și reguli

Lacunele și regulile sunt plasate între coloane în același scenariu cu mai multe coloane. Lacunele vor împărți coloanele, dar regulile nu ocupă spațiu. Dacă o regulă de coloană este mai mare decât decalajul ei, aceasta se va suprapune coloanelor adiacente. Există cinci proprietăți noi pentru regulile și golurile coloanelor:

• coloană-gol
  • Definește lățimea golurilor dintre coloane.
• coloană-regulă-culoare
  • Definește culoarea regulii.
• stil-regulă coloană
  • Definește stilul regulii (solid, punctat, dublu etc.).
• coloană-regulă-lățime
  • Definește lățimea regulii.
• coloana-regula
  • O proprietate de stenografie care definește toate cele trei proprietăți ale regulilor de coloană simultan.

CSS3 Întreruperi de coloane, Coloane care se întind și Coloane de umplere

Coloană pauzele utilizează aceleași opțiuni CSS2 utilizate pentru a defini pauzele în conținutul paginat, dar cu trei proprietăți noi: spargere înainte, spargere, și spargere în interior.

Ca și în cazul tabelelor, puteți seta elemente care să cuprindă coloane cu proprietatea coloană. Acest lucru vă permite să creați titluri care acoperă mai multe coloane mai mult ca un ziar.

Completarea coloanelor decide cât de mult conținut va fi în fiecare coloană. Coloanele echilibrate încearcă să pună aceeași cantitate de conținut în fiecare coloană, în timp ce automat pur și simplu conține conținutul până când coloana este plină și apoi trece la următoarea.

Mai multe funcții în CSS3 care nu sunt incluse în CSS2

Există o mulțime de funcții suplimentare în CSS3 care nu existau în CSS2, inclusiv:

• CSS Template layout module și CSS3 Grid positioning module: Crearea grilelor cu CSS.
• CSS3 Modul text: Descrieți textul și creați chiar umbre cu CSS.
• Modul CSS3 Color: Acum cu opacitate.
• Modificări ale modelului cutiei: Inclusiv a marchiză proprietate care acționează ca eticheta IE.
• Modulul CSS3 User Interface: Oferindu-vă cursori noi, răspunsuri la acțiuni, câmpuri obligatorii și chiar redimensionarea elementelor.
• Interogări media: Interogări media vă permit mai multă flexibilitate la definirea modului în care ar trebui utilizată o foaie de stil. De exemplu, ați putea defini o foaie de stil care este numai pentru dispozitivele portabile care au o fereastră mai mare de 20em.
• Modul CSS3 Ruby: Oferă suport pentru limbile care utilizează rubin textual pentru adnotarea documentelor.
• Modulul CSS3 Paged Media: Pentru mai multă asistență pentru suporturile paginate (hârtie, folii transparente etc.).
• Conținut generat: Rulează anteturi și subsoluri, note de subsol și alt conținut care este generat programatic, în special pentru suporturile paginate.
• Modul de vorbire CSS3: Modificări ale CSS fonetic.