Î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:
- Atributul de început se potrivește exact cu elementul [foo ^ = "bar"] Elementul are un atribut numit foo care începe cu "bar" de ex
- Atributul final se potrivește exact cu elementul [foo $ = "bar"] Elementul are un atribut numit foo care se termină cu "bar", de ex.
- Atributul conține elementul de potrivire [foo * = "bar"] Elementul are un atribut numit foo care conține șirul "bar", de ex.
16 pseudo-clase noi:
- :rădăcină
- Elementul rădăcină al documentului. În HTML acest lucru este întotdeauna.
- : nth-child (n)
- Utilizați această funcție pentru a se potrivi cu elementele copilului exact sau pentru a utiliza variabile pentru a obține potriviri alternative.
- : nth-ultimul-copil (n)
- Potriviți elemente de copil exacte de la ultima.
- : nth-de-tip (n)
- Se potrivesc elemente de sibling cu același nume înainte de a fi în arborele de documente.
- : nth-ultimul-de-tip (n)
- Se potrivesc elemente de sibling cu același nume, numărate din partea de jos.
- :ultimul copil
- Se potrivește cu ultimul element copil al părintelui.
- : primul-de-tip
- Se potrivește cu primul element frate de acel tip.
- : ultima-de-tip
- Se potrivește cu ultimul element de sibling al acelui tip.
- :singurul copil
- Se potrivește elementul care este singurul copil al părintelui său.
- : numai de tip
- Se potrivește elementul care este singurul de tipul său.
- :gol
- Se potrivește elementul care nu are copii (inclusiv nodurile de text).
- :ţintă
- Se potrivește un element care este ținta URI-ului referitor.
- :activat
- Se potrivește elementul atunci când este activat.
- : dezactivat
- Se potrivește elementul atunci când este dezactivat.
- : verificat
- Se potrivește elementul când este bifat (butonul radio sau caseta de selectare).
- : nu (s)
- Se potrivește atunci când elementul nu se potrivește cu selectorii simpli.
Un combinator nou:
- elementA ~ elementB
- Se potrivește atunci când elementul B urmează după undeva după elementul A, nu neapărat imediat.
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.
- fundal clip
- Această proprietate definește modul în care imaginea de fundal trebuie tăiată. Implicit este caseta de frontieră, dar poate fi schimbată în caseta de umplere sau în caseta de conținut.
- fundal origine
- Această proprietate determină dacă fundalul trebuie să fie localizat în caseta de umplere, caseta de margine sau în caseta de conținut.
- background-size
- Această proprietate vă permite să indicați dimensiunea imaginii de fundal. Acesta vă permite să întindeți imagini mai mici pentru a se potrivi paginii.
Modificări ale proprietăților stilului de fundal existent
Există, de asemenea, câteva modificări la proprietățile stilului de fundal existent:
- fundal repetare
- Există două valori noi pentru această proprietate: spațiu și rotund. Spațiul sparge imaginea din faianță în mod uniform în cutie fără a fi tăiat. Rotundul redresează imaginea de fundal astfel încât să se înmulțească de mai multe ori în cutie.
- background-attachment
- Se adaugă o nouă valoare "locală", astfel încât fundalul să parcurgă conținutul elementului atunci când acel element are o bară de defilare.
- fundal
- Proprietatea stenogramei de fond adaugă proprietățile dimensiunii și originii.
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:
- border-radius
- raza de sus-dreapta-dreapta, raza de jos-dreapta-dreapta, raza de la capatul de jos la stanga, raza de la capatul stanga-stanga
- Aceste proprietăți vă permit să creați colțuri rotunjite la granițele dvs.
- border-image-source
- Specifică fișierul sursă de imagine care urmează să fie utilizat în locul stilurilor de frontieră deja definite.
- border-image-felie
- Reprezintă decalajul interior de la marginea imaginii marginii
- border-image-lățime
- Definește valoarea lățimii pentru imaginea de la frontieră.
- border-image-bun inceput
- Specifică suma pe care suprafața imaginii de frontieră se extinde dincolo de cutia de frontieră.
- border-image-stretch
- Definește modul în care fețele și părțile medii ale imaginii de pe margine ar trebui să fie acoperite sau scalate.
- border-image
- Proprietatea sintagmă pentru toate proprietățile imaginii la graniță.
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.:
- lățimea coloanei
- Definește lățimea coloanelor dvs. Browserul va rula apoi textul pentru a umple spațiul cu coloane atât de largi.
- coloană-count
- Definește numărul de coloane din pagină. Browserul va crea apoi coloane suficient de largi pentru a se încadra în spațiu, dar numai numărul pe care îl specificați.
- coloane
- Proprietatea Shorthand unde puteți defini fie lățimea, fie numărul (sau ambele, dar rareori are sens).
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:
- coloană-gap
- Definește lățimea decalajelor dintre coloane.
- coloană regulă culori
- Definește culoarea regulii.
- coloana-regula stil
- Definește stilul regulii (solid, punctat, dublu, etc.).
- coloană regula lățime
- Definește lățimea regulii.
- coloană regulă
- O proprietate stenogramă care definește toate cele trei proprietăți ale regulilor de coloană simultan.
Ș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:
- CSS Modulul de configurare a șabloanelor și modulul de poziționare a rețelei CSS3 : Crearea de rețele cu CSS.
- Modul text CSS3 : Schițați textul și chiar creați umbre cu CSS.
- Modul CSS3 Culoare : acum cu opacitate.
- Modificări ale modelului cutie : include o proprietate marquee care acționează ca eticheta IE.
- Modul de interfață cu utilizatorul CSS3 : Vă oferă noi cursoare, răspunsuri la acțiuni, câmpuri obligatorii și chiar elemente de redimensionare .
- Întrebări media : Întrebările media vă permit o mai mare flexibilitate atunci când definiți modul în care ar trebui să fie utilizată o foaie de stil. De exemplu, puteți defini o foaie de stil care este numai pentru dispozitive portabile care au un port de vizualizare mai mare de 20 de emi.
- Modul CSS3 Ruby : oferă suport pentru limbile care folosesc ruby textual pentru a adnota documente.
- Modulul CSS3 pentru medii paged : Pentru un suport suplimentar pentru mediile paginate (hârtie, folii transparente etc.).
- Conținut generat : L antete și subsoluri care rulează, note de subsol și alte materiale care sunt generate programabil, în special pentru mediile paginate.
- Modul de vorbire CSS3 : Modificări la CSS aural.