Razlika između CSS2 i CSS3

Razumijevanje glavnih izmjena u CSS3

Najveća razlika između CSS2 i CSS3 je da je CSS3 podijeljen u različite odjeljke, nazvane modulima. Svaki od tih modula kreće se kroz W3C u različitim fazama preporuka. Ovaj je proces učinio mnogo lakšim za prihvaćanje i implementaciju različitih dijelova CSS3 u pregledniku od strane različitih proizvođača.

Ako usporedite ovaj proces s onim što se dogodilo s CSS2, gdje je sve poslano kao jedan dokument s svim podacima o Cascading Style Sheetsu , počnite vidjeti prednosti prekinute preporuke u manje, pojedinačne dijelove. Budući da se svaki od modula radi pojedinačno, imamo mnogo širi raspon podrške preglednika za module CSS3.

Kao i kod bilo kakvih novih i promjenjivih specifikacija, svakako isprobajte svoje CSS3 stranice temeljito u onoliko preglednika i operativnih sustava koliko god možete. Ne zaboravite da cilj nije stvoriti web stranice koje izgledaju točno u svakom pregledniku, ali kako bi se osiguralo da svi stilovi koje koristite, uključujući CSS3 stilove, izgledaju sjajno u preglednicima koji ih podržavaju i da se povlače graciozno za starije preglednike koji nemoj.

Novi CSS3 izbornici

CSS3 nudi hrpu novih načina na koje možete pisati CSS pravila s novim CSS selektorima, kao i novi kombinator i neke nove pseudo-elemente.

Tri nova odabira atributa:

• Početak atributa točno odgovara elementu [foo ^ = "bar"] Element ima atribut nazvan foo koji počinje s "bar" npr.
• Element koji završava odgovara točno elementu [foo $ = "bar"] Element ima atribut nazvan foo koji završava s "bar" npr.
• Atribut sadrži element podudaranja [foo * = "bar"] Element ima atribut nazvan foo koji sadrži niz "bar" npr.

16 novih pseudo-klasa:

• :korijen
  • Korijen element dokumenta. U HTML-u to je uvijek.
• : n-ti-dijete (n)
  • Upotrijebite ovo da biste podudarali točne elemente djeteta ili upotrijebite varijable da biste izmijenili podudaranja.
• : n-ti-zadnji-dijete (n)
  • Podudaranje točnih dječjih elemenata koji računaju od posljednjeg.
• : n-ti-o-tipa (n)
  • Podudaranje elemenata sestara s istim imenom koji se nalazi na stablu dokumenta.
• : n-ti-zadnji-of-tipa (n)
  • Podudaraju se elementi sestara s istim imenom koji odbrojavaju odozdo.
• :zadnje dijete
  • Podudaranje s posljednjim dječjim elementom roditelja.
• : prvi od tipa
  • Pridružite se prvom bračnom elementu tog tipa.
• : posljednji od tipa
  • Podudaranje s posljednjim elementom braće te vrste.
• :jedino dijete
  • Odgovara elementu koji je jedino dijete svog roditelja.
• : samo-of-type
  • Podudaranje s elementom koji je jedini u svojoj vrsti.
• :prazan
  • Podudaranje s elementom koji nema djece (uključujući tekstne čvorove).
• :cilj
  • Podudaranje s elementom koji je cilj preporuke URI.
• : omogućeno
  • Podudaranje s elementom kada je omogućeno.
• :onemogućeno
  • Podudaranje s elementom kada je onemogućen.
• Isprobali
  • Podudaranje s elementom kada je označeno (radio gumb ili potvrdni okvir).

• : nije (s)
  • Podudaranje kada element ne odgovara jednostavnom izborniku .

Jedan novi kombinator:

• elementA ~ elementB
  • Podudaranje kada elementB prati negdje poslije elementA, a ne nužno odmah.

Novi entiteti

CSS3 je također predstavio niz novih CSS svojstava. Mnoge od ovih svojstava trebale su stvoriti vizualne stilove koji bi vjerojatno povezivali više s grafičkim programom poput Photoshopa. Neki od njih, poput graničnog polumjera ili okvira sjenila, već su od početka uvodili CSS3. Drugi, kao fleksibilni ili čak CSS Grid, novi su stilovi koji se još uvijek često smatraju dodatkom CSS3.

U CSS3, model kutija nije se promijenio. No, tu je hrpa novih svojstava stila koja vam mogu pomoći u oblikovanju pozadina i granica vaših okvira.

Višestruki pozadini mage

Pomoću pozadinske slike, pozadine pozadine i stilova ponavljanja pozadine možete odrediti više pozadinskih slika koje se međusobno slojevite u okviru. Prva slika je sloj koji je najbliži korisniku, a iza njih su oslikane sljedeće. Ako postoji boja pozadine, ona je naslikana ispod svih slojnih slojeva.

Novi svojstva stila pozadine

Postoje i neke nove značajke pozadine u CSS3.

• pozadine-isječak
  • Ovo svojstvo definira kako se pozadinska slika treba odrezati. Zadano je granični okvir, ali se može promijeniti u okvir za ispunjavanje ili okvir za sadržaj.
• Pozadina-podrijetla
  • Ovo svojstvo određuje treba li se pozadina nalaziti u okviru za ispunjavanje, graničnom okviru ili okviru za sadržaj.
• Pozadina veličine
  • Ovo svojstvo omogućuje vam da navedete veličinu pozadinske slike. Omogućuje vam da se protežu manje slike kako bi odgovarale stranici.

Promjene postojećih svojstava stila u prošlosti

Postoje i neke promjene postojećih svojstava stila pozadine:

• background-repeat
  • Za ovu nekretninu postoje dvije nove vrijednosti: prostor i krug. Prostor mjesta ravnomjerno postavlja pločicu u okvir bez kutije. Okrugli rescale pozadinsku sliku tako da će pločica čitav niz puta u kutiji.
• Pozadina-pričvršćivanje
  • Dodana je nova vrijednost "lokalno", tako da će se pozadina pomicati sa sadržajem elementa kada taj element ima traku za pomicanje.
• pozadina
  • Stenografska svojstva pozadine dodaju svojstva veličine i podrijetla.

CSS3 granična svojstva

U CSS3 granicama mogu biti stilovi na kojima smo navikli (čvrsti, dvostruki, crtani itd.) Ili mogu biti slika. Osim toga, CSS3 donosi mogućnost stvaranja zaobljenih uglova. Granične slike zanimljive su jer stvarate sliku svih četiriju granica, a zatim recite CSS-u kako primijeniti tu sliku na vaše granice.

Svojstva novih graničnih stilova

Postoje neke nove granične značajke u CSS3:

• granica-radijus
  • polumjer granice-desno-desno, radijus desno-desno-desno-desno, radijus lijevo-donji-lijevi radijus , radijus lijevog gornjeg lijevog ruba
  • Ova svojstva omogućuju vam stvaranje zaobljenih uglova na vašoj granici.
• granica-slika-izvor
  • Određuje datoteku izvora slike koja će se koristiti umjesto graničnih stilova koji su već definirani.
• granica-slika-slice
  • Predstavlja unutarnje pomake iz graničnih rubova slike
• Granica slika širine
  • Određuje vrijednost širine slike vaše granice.
• granica-slika-polazak
  • Određuje iznos koji granično područje slike proteže izvan graničnog okvira.
• granična slike protežu
  • Određuje kako bi stranice i srednji dijelovi granične slike trebali biti popločani ili skalirani.
• Granica slika
  • Stenografski entitet za sva svojstva graničnih slika.

Dodatni CSS3 svojstva povezana s granicama i pozadinama

Kada je kutija slomljena na pauzi stranice, prekid stupca za prekid linije (za inline elemente) imovina okvira za dekompresiju definira kako su nove kutije zamotane s granicom i padding. Pozadine se mogu podijeliti između više slomljenih okvira pomoću ove značajke.

Tu je i okvirno-sjena svojstvo koje se može upotrijebiti za dodavanje sjena u elemente kutija.

S CSS3 sada možete jednostavno postaviti web stranicu s više stupaca bez tablica ili složenih struktura div tagova. Jednostavno reći pregledniku koliko stupova treba imati tijelo element i koliko bi trebali biti široki. Osim toga možete dodati granice (pravila), boje pozadine koje obuhvaćaju visinu stupca, a tekst će automatski proći kroz sve stupce.

CSS3 stupci - Definirajte broj i širinu stupaca

Postoje tri nova svojstva koja omogućuju definiranje broja i širine stupaca:

• stupac širine
  • Određuje širinu vaših stupaca. Preglednik će zatim dotaknuti tekst kako bi ispunio prostor sa širokim stupcima.
• kolona-count
  • Određuje broj stupaca na stranici. Preglednik će zatim stvoriti stupce dovoljno široke da se uklapaju u prostor, ali samo broj koji navedete.
• stupovi
  • Stenografska svojstva u kojoj možete odrediti širinu ili broj (ili oboje, ali to rijetko ima smisla).

CSS3 praznine i pravila stupaca

Praznine i pravila postavljaju se između stupaca u istom višeskom scenariju. Rupa će razdvojiti stupce, ali pravila ne zauzimaju nikakav prostor. Ako je pravilo stupca širi od praznine, preklapat će susjedne stupce. postoji pet novih svojstava za pravila i praznine stupaca:

• kolona-gap
  • Određuje širinu praznina između stupaca.
• stupac pravilo boja
  • Određuje boju pravila.
• stupac pravilo stilu
  • Određuje stil pravilnika (čvrsta, isprekidana, dvostruka itd.).
• stupac pravilo širine
  • Određuje širinu pravila.
• stupac pravilo
  • Skraćeni entitet koji definira sva tri svojstva pravila stupca odjednom.

Stupci CSS3 stupaca, obuhvaćajući stupce i punjenje stupaca

Stupne stanke upotrebljavaju iste CSS2 opcije koje se upotrebljavaju za definiranje odmora u stranici sadržaja, ali s tri nova svojstva: break-before , break-after i break-inside .

Poput tablica, možete postaviti elemente koji obuhvaćaju stupce s entitetom stupca. To vam omogućuje stvaranje naslova koji obuhvaćaju više stupaca više nalik novinama.

Stupovi za ispunjavanje odlučuju koliko će sadržaja biti u svakom stupcu. Uravnoteženi stupci pokušavaju staviti istu količinu sadržaja u svaki stupac dok automatski samo prenosi sadržaj sve dok stup ne napuni pa odlazi na sljedeći.

Više značajki u CSS3 koje nisu uključene u CSS2

Postoji mnogo dodatnih značajki u CSS3 koji nisu postojali u CSS2, uključujući:

• Modul izgleda CSS Template i CSS3 Modul za pozicioniranje mreže: Izrada rešetki s CSS-om.
• CSS3 tekstni modul : Outline tekst i čak kreirajte sjenke s CSS-om.
• Modul CSS3 boje : sada s neprozirnosti.
• Izmjene modela kutija : Uključujući imidž koji djeluje kao IE oznaka.
• Modul korisničkog sučelja CSS3 : daje vam nove pokazivače, odgovore na radnje, obavezna polja, pa čak i promjenu veličine elemenata .
• Upiti medija : medijski upiti dopuštaju veću fleksibilnost prilikom definiranja načina upotrebe obrasca stila. Na primjer, možete definirati obrazac stila koji je dostupan samo za ručne uređaje s prikazom većim od 20 godina.
• Modul Ruby CSS3 : Pruža podršku jezicima koji koriste tekstualnu rubinu za bilježenje dokumenata.
• CSS3 modul za plaćene medije : za još veću podršku za stranice s pozivom (papir, prozirne folije itd.).
• Generirani sadržaj : L pokreće zaglavlja i podnožje, fusnote i drugi sadržaj koji se generira programski, pogotovo za stranice s privremenim stranicama.
• Govorni modul CSS3 : Promjene na Curalu.