Razlika između CSS2 i CSS3

Razumijevanje glavnih promjena u CSS3

Najveća razlika između CSS2 i CSS3 jeste da je CSS3 podeljen na različite sekcije, nazvane modulima. Svaki od ovih modula ide kroz W3C u različitim fazama procesa preporučivanja. Ovaj proces je učinio mnogo lakšim da različiti dijelovi CSS3 budu prihvaćeni i implementirani u pretraživaču od strane različitih proizvođača.

Ako uporedite ovaj proces sa onim što se desilo sa CSS2, gde je sve dostavljeno kao jedinstveni dokument sa svim informacijama Cascading Style Sheets unutar njega, počinjete da vidite prednosti razbijanja preporuke na manje pojedinačne komade. Budući da se svaki modul obrađuje pojedinačno, imamo mnogo širi opseg podrške za CSS3 modele.

Kao i sa bilo kojom novom i promenljivom specifikacijom, obavezno testirajte svoje CSS3 stranice temeljito u onom broju pretraživača i operativnih sistema koliko možete. Ne zaboravite da cilj nije kreiranje web stranica koje izgledaju potpuno isto u svakom pretraživaču, već kako bi se osiguralo da svi stilovi koje koristite, uključujući i CSS3 stilove, izgledaju odlično u pretraživačima koji ih podržavaju i da se grejsmno vraćaju za starije pregledače koji nemoj.

Novi CSS3 selektori

CSS3 nudi niz novih načina na koje možete pisati CSS pravila sa novim CSS selektora, kao i novi kombinator i neki novi pseudo-elementi.

Tri nova selektora atributa:

• Atribut koji počinje poklapa tačno element [foo ^ = "bar"] Element ima atribut pod nazivom foo koji počinje sa "barom" npr.
• Atribut koji se završava u skladu sa tačno elementom [foo $ = "bar"] Element ima atribut pod nazivom foo koji se završava sa "barom" npr.
• Atribut sadrži element meča [foo * = "bar"] Element ima atribut pod nazivom foo koji sadrži string "bar" npr.

16 novih pseudo-klasa:

• : root
  • Osnovni element dokumenta. U HTML-u ovo je uvek.
• : n-dijete (n)
  • Koristite ovo da biste podudarali sa tačnim elementima deteta ili koristite varijable da biste dobili izmjenična podudaranja.
• : nth-last-child (n)
  • Ispunite tačne elemente deteta koji se računaju od poslednjeg.
• : nth-of-type (n)
  • Podudarite elemente s sestrama sa istim imenom pre njih u stablo dokumenta.
• : nth-last-of-type (n)
  • Podudarite elemente s sestrama sa istim imenom, računajući odozdo.
• : poslednje dete
  • Podudaranje poslednjeg deteta elementa roditelja.
• : prvi tip
  • Podudarajte s prvim srodnim elementom tog tipa.
• : poslednja vrsta
  • Podudarajte se sa poslednjim elementom srodstva tog tipa.
• :jedino dijete
  • Podesite element koji je jedino dete njegovog roditelja.
• : samo-vrste
  • Podesite element koji je jedini njegov tip.
• : prazno
  • Podesite element koji nema djecu (uključujući i tekst čvorove).
• : cilj
  • Podesite element koji je cilj referentnog URI-a.
• : omogućeno
  • Podesite element kada je omogućen.
• : onemogućen
  • Podesite element kada je onemogućen.
• : provereno
  • Podesite element kada je označen (radio dugme ili polje za potvrdu).

• : ne (i)
  • Utakmica kada se element ne podudara s jednostavnim selektorima .

Jedan novi kombinator:

• elementA ~ elementB
  • Utakmica kada element B sledi negde nakon elementa A, ne mora odmah.

Nove nekretnine

CSS3 je takođe uveo nekoliko novih CSS osobina. Mnoga od ovih osobina bila su stvaranje vizuelnih stilova koji bi verovatno više povezali sa grafičkim programom kao što je Photoshop. Neke od njih, kao što su granični radijus ili senka senka, su otprilike od uvoda ako je CSS3. Drugi, poput fleksboks ili čak CSS Grid, su noviji stilovi koji se i dalje često smatraju dodacima CSS3.

U CSS3 model kutije se nije promenio. Ali postoje gomila novih stilova koji vam mogu pomoći da oblikujete pozadinu i granice svojih kutija.

Višestruko pozadinsko pozivanjem

Pomoću pozadinskog, pozadinskog i pozadinskog stila možete odrediti više slika u pozadini koje će biti postavljene jedan pored drugog u okvir. Prva slika je sloj koji je najbliži korisniku, sa slijedećim bojama. Ako postoji boja pozadine, slika je ispod svih slojeva slike.

Nova svojstva stila pozadine

Postoje i neke nove osobine pozadine u CSS3.

• background-clip
  • Ova svojstva definišu kako se slika u pozadini treba obeležiti. Podrazumevana je granična kutija, ali se ona može promeniti u polje za dopunu ili polje za sadržaj.
• pozadinsko poreklo
  • Ova osobina određuje da li će pozadinu biti mjesta u polju za dopunjavanje, polje za granice ili polje za sadržaj.
• background-size
  • Ova svojstva vam omogućuje da označite veličinu pozadinske slike. Omogućava vam da proširite manje slike kako bi odgovarali stranici.

Promjene postojećih stilova pozadine u pozadini

Postoji i nekoliko izmena postojećih stilova stila:

• pozadina-ponavljanje
  • Za ovu osobinu postoje dvije nove vrijednosti: prostorno i okruglo. Prostor razmere ravnomerno sliku ravnomjerno unutar kutije bez prirezivanja. Okrug se uklapa u pozadinsku sliku tako da cepljivati ​​ceo broj puta u kutiji.
• background-attachment
  • Dodata je nova vrijednost "lokalna" tako da će pozadina biti pomjerena s sadržajem elementa kada taj element ima traku za pomicanje.
• background
  • Funkcija shorthand pozadine dodaje se u veličini i poreklu svojstava.

CSS3 granične osobine

U CSS3 granicama mogu biti stilovi na koje smo navikli (čvrsti, dvostruki, prekidani, itd.) Ili oni mogu biti slika. Plus, CSS3 donosi mogućnost stvaranja zaobljenih uglova. Slike granice su zanimljive jer kreirate sliku svih četiri granice i onda kažete CSS kako da primenite tu sliku na svoje granice.

Svojstva novih stilova biranja

U CSS3 postoje nova granična svojstva:

• granični radijus
  • granični desno-desni radijus , granični donji desni-radijus , granični donji-lijevi radijus , granični gornji levi-radijus
  • Ove osobine omogućavaju vam da kreirate zaobljene uglove na vašim granicama.
• granični izvor slike
  • Određuje izvornu datoteku slike koja će se koristiti umjesto već definisanih graničnih stilova.
• border-image-slice
  • Predstavlja unutrašnje pomake od ivica ivica granice
• granična širina slike
  • Definiše vrijednost širine za vašu graničnu sliku.
• granična slika-početak
  • Određuje količinu koju granična oblast slike prolazi izvan graničnog polja.
• granična slika-rastezanje
  • Definiše kako strane i srednji delovi granične slike trebaju biti popločani ili skalirani.
• granična slika
  • Stenografska svojstva za sve karakteristike granične slike.

Dodatne CSS3 svojine vezane za granice i pozadine

Kada je kutija slomljena na prekidu stranice, prekid kolone za prekid linije (za elemente u liniji), svojstvo box-decoration-break definira način na koji su nove kutije omotane granicama i paddingom. Pozadina se može podijeliti između više slomljenih kutija koristeći ovu osobinu.

Tu je i property box-shadow koja se može koristiti za dodavanje senki u elemente polja.

Sa CSS3, sada možete lako postaviti Web stranicu sa više kolona bez tabela ili komplikovane strukture oznaka div. Jednostavno prikažite pregledaču koliko kolona ima tjelesni element i koliko bi trebalo biti. Pored toga, možete dodati granice (pravila), boje pozadine koje prelaze visinu kolone i tekst će automatski proticati kroz sve kolone.

CSS3 kolone - Definišite broj i širinu kolona

Postoje tri nova svojstva koja vam omogućavaju da definišete broj i širinu kolona:

• kolona-širina
  • Definiše širinu koju trebaju biti vaši koloni. Pretraživač će zatim proći tekst da popuni prostor sa širokim kolonom.
• broj kolona
  • Definiše broj stupaca na stranici. Pretraživač će zatim stvoriti kolone dovoljno široke da se uklope u prostor, ali samo broj koji ste naveli.
• kolone
  • Stenografska svojina gde možete definisati širinu ili broj (ili oboje, ali to retko ima smisla).

CSS3 praznine i pravila kolone

Praznine i pravila se postavljaju između kolona u istom multicolumn scenariju. Propusti će razdvojiti kolone, ali pravila ne zauzimaju nikakav prostor. Ako je pravilo stupca šire nego što je jaz, on će se preklapati susedne kolone. postoje pet novih osobina za pravila kolone i praznine:

• kolona-praznina
  • Definiše širinu praznina između stupaca.
• column-rule-color
  • Definiše boju pravila.
• style-rule-style
  • Definiše stil pravila (čvrsta, tačkasta, dvostruka, itd.).
• column-rule-width
  • Definiše širinu pravila.
• pravilo kolone
  • Stenografska svojstva koja definiše sva tri pravila stupca pravila istovremeno.

CSS3 prelomi kolone, kolone za raspoređivanje i kolone punjenja

Rasporedi kolona koriste iste CSS2 opcije koje se koriste za definisanje pauza u paginiranom sadržaju, ali sa tri nova svojstva: prekid ranije , pauza i prekid unutar .

Kao i sa tabelama, možete postaviti elemente za raspoređivanje kolona sa svojstvima stupca raspona. Ovo vam omogućava da kreirate naslove koji više sadrže više kolona kao novine.

Stolovi za punjenje odlučuju koliko će sadržaja biti u svakoj koloni. Balansirane kolone pokušavaju staviti istu količinu sadržaja u svaku kolonu dok auto samo protiče sadržaj dok se kolona ne popuni, a zatim ide na sledeću.

Više funkcija u CSS3 koji nisu uključeni u CSS2

U CSS3 postoji mnogo dodatnih funkcija koje nisu postojale u CSS2, uključujući:

• Modul za postavljanje CSS šablona i CSS3 Grid modul za pozicioniranje : Kreiranje mreža pomoću CSS-a.
• CSS3 Tekstualni modul : Oblikuj tekst i čak kreira senke sa CSS-om.
• CSS3 Modul boje : Sada sa prozirnošću.
• Promjene modela kutije : Uključujući osobinu marquee koja se ponaša kao IE oznaka.
• Modul korisničkog interfejsa CSS3 : Dati vam nove kursore, odgovore na radnje, potrebna polja i elemente promene veličine .
• Media Queries : Media queries vam omogućavaju veću fleksibilnost pri definisanju načina korišćenja stila. Na primjer, možete definirati stilski stil koji se odnosi samo na ručne uređaje koji imaju prikaz veće od 20em.
• Modul CSS3 Ruby : Pruža podršku za jezike koji koriste tekstualni ruby ​​za anotiranje dokumenata.
• CSS3 Paged Media modul : Za još više podrške za paged medije (papir, transparencije, itd.).
• Generisani sadržaj : L zaglavlja i podnožja glave , fusnote i drugi sadržaj koji se generiše programski, posebno za paged medije.
• Govorni modul CSS3 : Promjene na usmeni CSS.