Diferența dintre CSS2 și CSS3

Înțelegerea modificărilor majore la CSS3

Cea mai mare diferență dintre CSS2 și CSS3 este că CSS3 a fost împărțit în diferite secțiuni, numite module. Fiecare dintre aceste module se îndreaptă spre W3C în diferite etape ale procesului de recomandare. Acest proces a făcut mult mai ușor ca diferite piese de CSS3 să fie acceptate și implementate în browser de diferiți producători.

Dacă comparăți acest proces cu ceea ce sa întâmplat cu CSS2, în cazul în care totul a fost trimis ca un singur document cu toate informațiile din foaia de stil Cascadă , acesta începe să vadă avantajele ruperii recomandării în bucăți mai mici, individuale. Deoarece fiecare dintre module este lucrat individual, avem o gamă mult mai largă de suport pentru browser pentru modulele CSS3.

Ca și în cazul oricărei specificații noi și în schimbare, asigurați-vă că testați temeinic paginile CSS3 în cât mai multe browsere și sisteme de operare. Amintiți-vă că scopul nu este de a crea pagini web care să pară exact la fel în fiecare browser, dar pentru a vă asigura că toate stilurile pe care le utilizați, inclusiv stilurile CSS3, arată excelent în browserele care le suportă și că acestea cad din nou grațios pentru browserele mai vechi nu face.

Noi selectori CSS3

CSS3 oferă o grămadă de moduri noi în care puteți scrie reguli CSS cu noi selectori CSS, precum și un combinator nou și câteva pseudo-elemente noi.

Trei selectori de atribute noi:

16 pseudo-clase noi:

Un combinator nou:

Proprietăți noi

CSS3 a introdus, de asemenea, o serie de proprietăți CSS noi. Multe dintre aceste proprietăți au fost create pentru a crea stiluri vizuale care ar putea fi asociate mai mult cu un program grafic, cum ar fi Photoshop. Unele dintre acestea, cum ar fi raza de graniță sau umbra de box, s-au aflat în jurul valorii de la introducerea în cazul CSS3. Altele, cum ar fi flexbox sau chiar CSS Grid, sunt stiluri mai noi, care sunt încă adesea considerate adăugiri CSS3.

În CSS3, modelul cutiei nu sa schimbat. Dar există o grămadă de proprietăți noi de stil care vă pot ajuta să modelați fundalul și marginile cutiilor dvs.

Fundal multiplu I mages

Folosind stilurile de fundal-imagine, fundal-poziție și stiluri de repetiție de fundal puteți specifica mai multe imagini de fundal care urmează să fie stratificate unul peste celălalt în cutie. Prima imagine este stratul cel mai apropiat de utilizator, cu urmatoarele pictate in spate. Dacă există o culoare de fundal, este vopsită sub toate straturile imaginii.

Noile proprietati de stil de fundal

Există, de asemenea, unele proprietăți de fundal noi în CSS3.

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

Există, de asemenea, câteva modificări la proprietățile stilului de fundal existent:

Proprietăți de graniță CSS3

În granițele CSS3 pot fi stilurile la care suntem obișnuiți (solid, dublu, punctat etc.) sau pot fi o imagine. În plus, CSS3 aduce capacitatea de a crea colțuri rotunjite. Imaginile frontale sunt interesante pentru că creați o imagine a tuturor celor patru margini și apoi spuneți CSS cum să aplicați acea imagine la granițele dvs.

Noi proprietăți de stil de frontieră

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

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

Atunci când o casetă este ruptă la o întrerupere a paginii, pauză de coloană pentru ruperea liniei (pentru elemente inline), proprietatea box-decoration-break definește modul în care casetele noi sunt înfășurate cu margine și cu căptușeală. Fundalurile pot fi împărțite între mai multe casete rupte utilizând această proprietate.

Există, de asemenea, o proprietate box-umbra care poate fi utilizată pentru a adăuga umbre la elementele casetei.

Cu ajutorul CSS3, puteți configura cu ușurință o pagină Web cu mai multe coloane fără tabele sau structuri de etichete complicate div. Spuneți pur și simplu browserului câte coloane trebuie să aibă elementul corpului și cât de largi ar trebui să fie. În plus, puteți adăuga granițe (reguli), culori de fundal care să atingă înălțimea coloanei, iar textul dvs. va trece automat prin toate coloanele.

Coloane CSS3 - Definiți numărul și lățimea coloanelor

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

Câmpurile și regulile CSS3

Diferențele și regulile sunt plasate între coloane în același scenariu multicolumn. Golurile vor împinge în afară coloanele, dar regulile nu ocupă nici un spațiu. Dacă o regulă a coloanei este mai mare decât decalajul, aceasta va suprapune coloanele adiacente. există cinci proprietăți noi pentru regulile și golurile coloanelor:

Ștergerea coloanei CSS3, a coloanelor și a coloanelor de umplere

Împărțirea coloanelor utilizează aceleași opțiuni CSS2 utilizate pentru a defini întreruperile în conținutul paginat, dar cu trei noi proprietăți: spargere , spargere și spargere .

Ca și în tabele, puteți seta elemente pentru a include coloane cu proprietatea span coloanei. Acest lucru vă permite să creați titluri care cuprind mai multe coloane mai mult ca un ziar.

Coloanele de completare determină cât de mult va fi conținutul în fiecare coloană. Coloanele echilibrate încearcă să pună aceeași cantitate de conținut în fiecare coloană, în timp ce automat rulează conținutul numai 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 caracteristici suplimentare în CSS3 care nu existau în CSS2, inclusiv: