CSS3 vs CSS - Cascading Style Sheets sau CSS este un element cheie al designului web. Ca dezvoltator web sau designer, trebuie să înțelegeți cu stăpânire CSS, în special diferența dintre CSS3 și CSS.

Este posibil să fi auzit sau să întâlniți termenul CSS3 dacă ați citit despre dezvoltare web sau design web. Dacă v-ați gândit vreodată care ar putea fi diferența dintre CSS3 și CSS, iată unde se vor pune toate îndoielile dvs.: Amândoi sunt la fel.

Așa este: CSS3 vs CSS sunt la fel de diferite unele de altele ca HTML și HTML5. CSS3 este pur și simplu cea mai recentă iterație a CSS. Oamenii care vorbesc despre codificarea CSS chiar acum se referă doar la CSS3.

Atât HTML5 cât și CSS3 au devenit în general cuvinte cheie, cu semnificații dincolo de tehnologiile lor reale. Acestea simbolizează respectarea anumitor standarde de bază în dezvoltarea web, în ​​loc să folosească software proprietar. În cea mai mare parte, hiperul din jurul acestor cuvinte cheie a dispărut deja. Majoritatea companiilor, chiar și cele care înjură prin păstrarea tuturor în interior, ar fi de acord că respectarea acestor standarde de bază face viața mult mai ușoară pentru toată lumea.

Acum, a trecut ceva timp de când CSS3 a fost lansat și acceptat de unul singur. A adus o mulțime de lucruri grozave în industrie și a marcat un pas destul de mare înainte pentru dezvoltarea web în general. Versiunea anterioară, CSS2, a fost lansată până în 1998. Asta este acum aproape 20 de ani. Singura revizuire pe care a primit-o după lansarea sa a fost în 2011, numită CSS2.1. Chiar și cu revizuirea, majoritatea experților au început deja să spună că CSS3 este inevitabil. CSS3 a venit cu o serie de caracteristici și capabilități devenite complet necesare până atunci.

Ceea ce poate nu știați despre CSS3 este că a început dezvoltarea la doar un an după ce versiunea sa anterioară a fost trimisă. Acest lucru înseamnă că W3C lucra la versiunea îmbunătățită începând cu 1999. A fost nevoie de mai mult de 12 ani pentru a lansa prima versiune stabilă a CSS3.

Există diferențe uriașe între CSS3 și CSS (la care vom ajunge în curând). Cert este însă că browserele web erau deja gata pentru completările la CSS3 până la momentul lansării. Drept urmare, s-au adaptat destul de repede la noua versiune. Fiecare browser web important acceptă acum CSS3, chiar și Internet Explorer!

Desigur, W3C continuă să dezvolte CSS3 și HTML5, deci o versiune finală este puțin probabilă. Pentru a fi corect, o versiune finală nu este deocamdată o necesitate, având în vedere cât de rapid progresează internetul. Având în vedere că cerințele web și industria în sine cresc și se schimbă atât de rapid, codificarea trebuie să avanseze la fel de rapid, dacă nu mai mult.

Infografie CSS3 vs CSS

Diferențe CSS3 vs CSS Definite

Acum că știți un pic despre fundalul din spatele CSS3, să aruncăm o privire mai atentă la ce sa schimbat. Poate cea mai mare diferență între CSS3 și versiunea anterioară pe care a înlocuit-o este separarea modulului. În CSS2, totul a fost o singură specificație mare, care a definit diferite caracteristici. Cu toate acestea, CSS3 a modificat acest lucru prin introducerea mai multor documente numite module. Fiecare modul are propriile sale funcții care nu afectează compatibilitatea versiunii anterioare stabile CSS.

Interogări media

Există o mulțime de module disponibile, dar doar patru sunt publicate ca recomandări formale de către W3C. Aceste patru module mari sunt următoarele:

  1. Color, publicat în 2011
  2. Selectori de nivel 3, publicat în 2011
  3. Namespaces, publicat 201
  4. Interogări media, publicate în 2012

Printre acestea, cel mai important modul este interogările media. De fapt, acest modul ar putea fi probabil cea mai importantă adăugare pe care CSS3 a adus-o CSS în general. Interogările media fac unele destul de simple: permite aplicarea anumitor condiții pe diferite foi de stil. Acest lucru permite ca site-urile să fie fluide sau să răspundă la diferite dimensiuni ale ecranului. Cu alte cuvinte, site-urile web își pot regla dimensiunile și elementele pentru a se potrivi diferitelor dispozitive. Astăzi, design-ul web receptiv este probabil cel mai mare cuvânt cheie. Având în vedere că majoritatea utilizării internetului sunt acum pe dispozitive mobile, designul receptiv este absolut esențial, iar interogările media ajută la realizarea acestui lucru. De asemenea, modulul permite dezvoltatorilor să adapteze site-urile la diverse rezoluții fără a schimba sau a elimina conținut.

Interogările media sunt, de asemenea, destul de ușor de descoperit și de adăugat. Odată ce le folosiți de câteva ori, puteți descoperi destul de mult restul. Iată câteva exemple de linii de cod:

Ecranul @media și (lățimea maximă: 600px) (

fundal: #FFF;

)

Pare destul de simplu, nu-i așa? Cu aceste câteva linii de cod, puteți activa stilarea pentru ecrane cu o lățime de maximum 600 de pixeli. Aceasta înseamnă că toate ecranele cu o lățime de maximum 600 de pixeli vor afișa un fundal alb. Lățimea maximă este doar una dintre mai multe condiții pe care le-ați putea aplica pe o foaie de stil pe CSS3. Un altul este lățimea maximă a dispozitivului. Aceasta este rezoluția ecranului și nu zona de vizualizare. De asemenea, o valoare minimă poate fi declarată în loc de maximă; folosiți „min” în loc de „max”. Puteți combina, de asemenea, cele două, ca mai jos:

Ecranul @media și (lățimea mină: 600px) și (lățimea maximă: 900px) (

fundal: #FFF;

)

Aici, stilul se aplică numai pentru ecrane cu o lățime de vizualizare de 600-900 pixeli. CSS3 vine cu câteva foi de stil predefinite pentru dispozitive mobile populare, cum ar fi Apple iPad și iPhone. Aici sunt câțiva dintre ei:

Ar trebui să fie clar acum cât de importante sunt interogările media. Acest modul este foarte util pentru dezvoltatorii care doresc să creeze un web design cu cea mai mică cantitate posibilă de codificare.

Granițele rotunjite

CSS3 vine, de asemenea, cu câteva considerații esențiale ale proiectării web. Pentru cazuri, granițele pot fi rotunjite fără hacks, cu CSS3 introducând chenare rotunjite. Acesta a fost un plus uriaș pentru dezvoltatorii web și designerii care se luptau cu granițele CSS înainte. Nu este surprinzător, unele dintre aceste funcții încă nu funcționează în versiunile vechi ale Internet Explorer. Singurul cod suplimentar pe care trebuie să-l adăugați clasei specifice din foaia de stil este, de exemplu:

-moz-graniță-rază: 5px;

-webkit-border-raza: 5px;

graniță: 2px solid # 897048;

Astfel, CSS3 face viața mult mai ușoară dezvoltatorului și designerului web. Eliberarea a venit și cu gradiente, ceea ce a fost surprinzător indisponibil în versiunile anterioare.

Cursuri recomandate

  • Instruire online despre servicii web în Java
  • Dezvoltarea profesională a jocului în formare C ++
  • Programul de hacking etic
  • Pachetul de instruire Vegas Pro 13

Imagini de graniță, umbre de text

Alte elemente care au fost adăugate cu CSS3, dar care lipseau în versiunile anterioare au inclus imagini de bord și umbre de casetă / text. CSS3 a făcut lucrurile mult mai simple, eliminând nevoia de a adăuga hacks pentru oricare dintre elementele de styling comune de mai sus. De exemplu, aici este linia solitară de cod care trebuie adăugată pentru umbrele de text:

text-shadow: 2px 2px 2px # ddccb5;

coloane

CSS3 a simplificat de asemenea modul de a adăuga coloane la conținut. Tot ce trebuie să faceți acum este să adăugați patru linii de cod:

  1. coloană-count
  2. lățimea coloanei
  3. coloană-gap
  4. coloană regulă

Fundaluri multiple

Cea mai recentă versiune CSS a adăugat, de asemenea, capacitatea de a informa direct mai multe fundaluri de la CSS, mai degrabă decât să folosească bare de sens giratoriu ca înainte. Codul este incredibil de simplu de reținut și de scris și este, de asemenea, foarte important pentru crearea elementelor moderne de design web. Iată un exemplu:

.multiplebackgrounds (

inaltime: 100px;

latime: 200px;

captusire: 20px;

fundal: url (top.gif) dreapta-dreapta fără repetare,

url (jos.gif) repetare-stânga sus, stânga,

url (mijloc.gif) partea de jos repetare-z;

)

Prefixe de vânzător

Prefixurile furnizorului au fost frecvent utilizate în perioada în care CSS3 tocmai a lansat. Au ajutat browserele să interpreteze codul CSS. Sunt obișnuiți până în zilele noastre, în cazul în care browserul dvs. web nu poate citi codul. Iată prefixurile furnizorului pentru browserele principale:

  • -moz- : Firefox
  • -webkit- : browsere Webkit precum Apple Safari și Google Chrome
  • -o- : Operă
  • -ms- : Internet Explorer

Prefixul Opera a devenit, de asemenea, redundant de când compania și-a schimbat browserul mobil și desktop pe platforma Webkit din motorul său de redare Presto. Deși prefixul vânzătorului continuă să fie utilizat într-o oarecare măsură, acesta a dispărut mai ales în acest moment.

S-au adăugat pseudo-clase

Cu suplimentul CSS3, am obținut și o mulțime de pseudo-clase suplimentare, inclusiv cele structurale pentru direcționarea elementelor bazate pe poziția documentului și relația cu alte elemente diferite. Aici sunt câțiva dintre ei:

  • : root vizează elementul rădăcină al documentului
  • : nu (se) țintește elemente care nu corespund selectoarelor specificate în
  • : primul copil vizează primul copil dintr-un container, indiferent de tipul articolului
  • : primul de tip vizează primul tip de element specificat în cadrul unui părinte
  • : al șaptelea copil (n) folosește valori numerice din (n) pentru a viza elementele copilului în ceea ce privește poziția lor în părinte. De exemplu, puteți utiliza acest lucru pentru a adăuga culori alternative de fundal la comentariile blogului
  • : goluri vizează elemente care nu au text sau copii, cum ar fi elemente goale, cum ar fi
  • : numai copilul țintește elemente dintr-un arbore de documente care este singurul element copil din părinte

Noi selectoare CSS3

CSS3 oferă o serie de moduri de a scrie regulile CSS prin intermediul noilor selectori, un nou element combinativ și pseudo-elemente: iată trei noi selectoare de atribute:

  • Pentru potriviri exacte, element (foo = „bar”)
  • Pentru potrivirea unui element cu un atribut numit foo începând cu „bar”, element (foo $ = ”bar”)
  • Pentru potrivirea unui element cu un atribut numit foo care se termină cu „bar”, element (foo * = ”bar”)

CSS3 vine cu mai multe pseudo-clase noi, dintre care unele au fost discutate mai sus. Iată câteva altele:

  • : nth-last-child (n) se potrivește cu elementele exacte ale copilului din ultimul
  • : nth-of-type (n) se potrivește cu elementele surori care au același nume înaintea lor în arborele de documente
  • : nth-last-of-type (n) se potrivește cu elementele de frați care au același nume din partea de jos
  • : ultimul tip vizează ultimul tip de element specificat în cadrul unui părinte
  • : numai de tip vizează elementul din care este singurul tip
  • : elemente țintă vizate de URI de referință
  • : activat se potrivește cu elementul atunci când este activat
  • : dezactivat se potrivește cu elementul când este dezactivat
  • : bifat vizează elementul atunci când este bifat printr-o casetă de selectare sau buton radio

Un nou combinator

CSS3 vine și cu un nou combinator: elementA ~ elementB

Acest nou combinator se potrivește când elementA este urmat undeva după elementB, dar nu imediat după aceea.

Proprietăți noi în stilul cutiei

CSS3 prezintă același model de casetă ca versiunea precedentă, dar cu unele proprietăți de stil noi care vă ajută să modelați marginile și fundalul casetelor dvs. Noile proprietăți de fundal în CSS3 sunt:

  • fundal clip

Această proprietate este utilizată pentru a defini cum să decupați o imagine de fundal. Dimensiunile implicite de decupare sunt caseta de chenar, dar o puteți schimba în caseta de conținut sau caseta de umplere.

  • fundal origine

Această proprietate particulară este utilizată pentru a determina dacă ar trebui să se pună fundalul în caseta de frontieră, caseta de conținut sau caseta de umplere.

  • background-size

Această proprietate permite dezvoltatorului să indice dimensiunea imaginii de fundal și să întindă imagini mai mici pentru potrivirea paginii.

CSS3 a modificat, de asemenea, unele dintre proprietățile de stil de fundal existente. Iată o privire asupra modificărilor:

  • fundal repetare

Această proprietate vine acum cu două valori noi: rotundă și spațiu. Rotund redescalează imaginea pentru a o placa de mai multe ori într-o cutie. Spaționați în mod uniform imaginea cu gresie în interiorul cutiei fără a tăia.

  • background-attachment

Proprietatea nr include o valoare „locală” astfel încât fundalul să deruleze cu conținutul elementului în cazul în care elementul are o bară de defilare.

Proprietăți noi de frontieră

CSS3 permite ca bordurile să fie stilate ca fiind duble, solide, punctate sau chiar ca imagine. Imaginile de graniță sunt un plus interesant: acestea vă permit să creați o imagine a tuturor celor patru granițe și apoi spuneți CSS să aplice imaginea la granițe. Iată câteva dintre noile proprietăți de frontieră care vin cu CSS3:

  • rază de frontieră, graniță-jos-dreapta-rază, graniță-sus-dreapta-rază, graniță-sus-stânga-rază, graniță-jos-stânga-raza vă permit să creați borduri rotunjite
  • border-image-source vă permite să specificați un fișier sursă de imagine în loc să utilizați stiluri de chenar predefinite
  • border-image-slice reprezintă compensări interioare de la marginile imaginilor de bordură
  • border-image-width definește valoarea lățimii pentru imaginea dvs. de bord
  • border-image-outset specifică suma dincolo de caseta de frontieră la care se extinde imaginea
  • border-image-stretch definește gresia sau scalarea părților de mijloc și laterale ale imaginii de bord

Concluzie - CSS3 vs CSS

Veți afla multe mai multe despre CSS3 pe măsură ce codați mai multe. Există însă o singură atenție: nu puteți stăpâni CSS3 decât dacă cunoașteți CSS. Învățarea CSS3 presupune bazarea pe înțelegerea și experiența dvs. cu CSS. Dacă nu cunoașteți CSS, trebuie să îl învățați de sus împreună cu CSS3. Lucrul bun este că, dacă nu sunteți familiarizat cu CSS, ar trebui să fie mai ușor să învățați atât CSS3, cât și CSS, învățând împreună pentru a face mai ușor și mai rapid.

Articole recomandate

Iată câteva articole care vă vor ajuta să obțineți mai multe detalii despre CSS3 și CSS, așa că treceți doar prin link.

  1. CSS vs HTML
  2. Încântător să cunoaștem esențialul CSS Flexbox pentru începători
  3. HTML5 vs JavaScript Cel mai bun lucru de învățat
  4. CSS vs CSS3: Diferențe

Categorie:

Dezvoltare de software