Razlika između CSS2 i CSS3

Najveća razlika između CSS2 i CSS3 je da je CSS3 podijeljen u različite odjeljke, tzv modula. Svaki od ovih modula prolazi kroz W3C u raznim fazama postupka preporuke. Ovaj je postupak znatno olakšao prihvaćanje i primjenu različitih dijelova CSS3 u pregledniku od strane različitih proizvođača.

Ako ovaj postupak usporedite s onim što se dogodilo sa CSS2, gdje je sve predano kao jedan dokument sa svim Kaskadni listovi stilova informacije unutar nje, počinjete uviđati prednosti razbijanja preporuke na manje pojedinačne dijelove. Budući da se na svakom od modula radi pojedinačno, programeri uživaju mnogo širi raspon podrške preglednika za CSS3 module.

Novi CSS3 birači

CSS3 nudi nekoliko novih načina za pisanje CSS pravila s novim CSS selektorima, kao i novi kombinator i neke nove pseudo-elemente.

Tri su nova birača atributa:

• Atribut na početku se točno podudara:

  element [foo ^ = "bar"]

  Element ima atribut zvan foo koji započinje s "bar" npr.
• Atributi koji završavaju točno odgovaraju:

  element [foo $ = "bar"]

  Element ima atribut zvan foo koji završava s "bar" npr.
instagram viewer
• Atribut sadrži podudaranje:

  element [foo * = "bar"]

  Element ima atribut pozvao foo koji sadrži niz "traka".

Uvedeno je 16 novih pseudo-klasa:

• :korijen
  • Korijenski element dokumenta.
• : n-to dijete (n)
  • Koristite to za podudaranje točnih podređenih elemenata ili pomoću varijabli za dobivanje izmjeničnih podudaranja.
• : n-zadnje-dijete (n)
  • Uskladite točne podređene elemente koji se računaju od zadnjeg.
• : n-tipa (n)
  • Uskladite bratske elemente s istim imenom prije njega u stablu dokumenata.
• : nth-last-of-type (n)
  • Uskladite bratske elemente s istim imenom odbrojavajući odozdo.
• :zadnje dijete
  • Odgovara posljednjem podređeni element roditelja.
• : prvi tip
  • Odgovara prvom bratskom elementu te vrste.
• : posljednji tip
  • Uskladite zadnji element braće i sestre te vrste.
• :jedino dijete
  • Uskladite element koji je jedino dijete njegovog roditelja.
• : samo-tipa
  • Uskladite element koji je jedini takve vrste.
• :prazan
  • Uskladite element koji nema djece (uključujući čvorove teksta).
• :cilj
  • Uskladite element koji je cilj URI-a koji upućuje.
• : omogućeno
  • Uskladite element kad je omogućen.
• :onemogućeno
  • Uskladite element kad je onemogućen.
• : provjereno
  • Uskladite element kad je označen (radio gumb ili potvrdni okvir).
• : ne
  • Podudaranje kada se element ne podudara s jednostavnim selektori.

Postoji jedan novi kombinator:

• elementA ~ elementB
  • Podudaranje kada element B slijedi negdje iza elementa A, ne nužno odmah.

Nova svojstva

CSS3 je također predstavio nekoliko novih CSS svojstava. Mnoga od ovih svojstava stvaraju vizualne stilove koji bi se vjerojatno više povezali s grafičkim programom poput Photoshop. Neke od njih, poput border-radius ili box-shadow, postoje od uvođenja CSS3. Drugi, poput flexboxa ili čak CSS Grid su noviji stilovi koji se još uvijek često smatraju dodacima CSS3.

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

Više pozadinskih slika

Pomoću stilova pozadinske slike, položaja pozadine i ponavljanja pozadine u okviru možete odrediti više pozadinskih slika koje će se slojiti jedna na drugu. Prva slika je sloj najbliži korisniku, a slijedeći su naslikani iza. Ako postoji boja pozadine, ona je obojena ispod svih slojeva slike.

Nova svojstva pozadinskog stila

U CSS3 postoje i neka nova svojstva pozadine:

• pozadina-isječak
• Ovo svojstvo definira kako treba izrezati pozadinsku sliku. Zadana vrijednost je okvir s okvirom, ali se može promijeniti u okvir za popunjavanje ili okvir za sadržaj.
• podrijetlo podrijetla
• Ovo svojstvo određuje treba li pozadinu staviti u okvir za popunjavanje, obrub ili okvir za sadržaj.
• veličina pozadine
• Ovo svojstvo označava veličina pozadinske slike. Omogućuje vam razvucite manje slike kako bi odgovarale stranici.

Promjene u postojećim svojstvima pozadinskog stila

Postoji i nekoliko promjena u postojećim svojstvima stila pozadine:

• pozadina-ponavljanje
  • Dvije su nove vrijednosti za ovo svojstvo - prostor i krug. Prazan prostor ravnomjerno razmaknite unutar okvira, bez da bude isječen. Okrugla ponovno skalira pozadinsku sliku tako da će cijeli okvir biti pločica cijeli niz puta.
• pozadina-prilog
  • Dodaje se nova vrijednost "local" tako da će se pozadina pomicati sa sadržajem elementa kada taj element ima traku za pomicanje.
• pozadini
  • Svojstvo pozadine u stenografiji dodaje svojstva veličine i podrijetla.

Svojstva obruba CSS3

U CSS3, obrubi mogu biti stilovi na koje smo navikli (puni, dvostruki, isprekidani itd.) Ili mogu biti slika. Osim toga, CSS3 podržava zaobljene kutove. Slike obruba su zanimljive jer stvarate sliku sve četiri granice, a zatim CSS-u kažete kako tu sliku primijeniti na vaše obrube.

Nova svojstva obrubnog stila

U CSS3 postoje neka nova svojstva obruba:

• granica-radijus
• granica-gornji-desni-radijus, granica-dolje-desno-radijus, granica-donji-lijevi radijus, granica-gornji-lijevi-radijus
• Ova svojstva omogućuju vam stvaranje zaobljenih kutova na vašim granicama.
• border-image-source
• Određuje izvornu datoteku slike koja će se koristiti umjesto već definiranih stilova obruba.
• granica-slika-kriška
• Predstavlja unutarnji pomak od rubova slike obruba.
• border-image-width
• Definira vrijednost širine vaše rubne slike.
• granica-slika-početak
• Određuje količinu koja se područje granične slike proteže izvan okvira s rubom.
• granica-slika-protezanje
• Definira kako stranice i srednji dijelovi granične slike trebaju biti popločani ili skalirani.
• granična slika
• Stenografsko svojstvo za sva svojstva rubne slike.

Dodatna svojstva CSS3 koja se odnose na granice i pozadine

Kad se okvir razbije na prijelomu stranice, prijelomu stupca ili prijelomu retka (za umetnute elemente), kutija-ukras-prelom svojstvo definira kako će se novi okviri omotati obrubom i popunjavanjem. Pozadine se dijele između nekoliko razbijenih okvira pomoću ovog svojstva.

Nova kutija-sjena svojstvo dodaje sjene elementima okvira.

Pomoću CSS3 sada možete jednostavno postaviti web stranicu s nekoliko stupaca bez tablica ili komplicirano div strukture oznaka. Jednostavno kažete pregledniku koliko stupaca element tijela treba imati i koliko trebaju biti široki. Uz to možete dodati obrube (pravila) i boje pozadine koje se protežu po visini stupca, a vaš će tekst automatski prolaziti kroz sve stupce.

Definirajte broj i širinu stupaca

Tri su nova Svojstva koji vam omogućuju definiranje broja i širine vaših stupaca:

• širina stupca
  • Definira širinu vaših stupaca. Preglednik će zatim pretočiti tekst kako bi prostor ispunio širokim stupcima.
• brojanje stupaca
  • Definira broj stupaca na stranici. Preglednik će tada stvoriti stupce dovoljno široke da stanu u prostor, ali samo broj koji navedete.
• stupaca
  • Stenografsko svojstvo gdje možete definirati širinu ili broj (ili oboje, ali to rijetko ima smisla).

CSS3 praznine i pravila u stupcu

Praznine i pravila postavljaju se između stupaca u istom scenariju s više stupaca. Praznine će razdvojiti stupce, ali pravila ne zauzimaju prostor. Ako je pravilo stupca šire od praznine, preklapati će susjedne stupce. Pet je novih svojstava za pravila i praznine stupaca:

• stup-jaz
  • Definira širinu praznina između stupaca.
• stupac-pravilo-boja
  • Definira boju pravila.
• stupac-pravilo-stil
  • Definira stil pravila (jednobojni, točkasti, dvostruki itd.).
• širina stupca-pravila
  • Definira širinu pravila.
• stupac-pravilo
  • Stenografsko svojstvo koje definira sva tri svojstva pravila stupca odjednom.

CSS3 prijelomi stupaca, rasponi stupaca i popunjavanje stupaca

Stupac pauze koriste iste CSS2 opcije koje se koriste za definiranje pauza u straničnom sadržaju, ali s tri nova svojstva: prijelomni, prekid nakon, i provaliti.

Kao i kod tablica, možete postaviti elemente da obuhvaćaju stupce sa svojstvom raspona stupca. To vam omogućuje stvaranje naslova koji obuhvaćaju više stupaca više poput novina.

Ispunjavanje stupaca odlučuje koliko će sadržaja biti u svakom stupcu. Uravnoteženi stupci pokušavaju staviti istu količinu sadržaja u svaki stupac, dok auto samo ulijeva sadržaj dok se stupac ne popuni i zatim prelazi na sljedeći.

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

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

• CSS modul za raspored predloška i CSS3 modul za pozicioniranje mreže: Stvaranje mreža s CSS-om.
• CSS3 Tekstualni modul: Ocrtajte tekst, pa čak i stvorite sjene s CSS-om.
• CSS3 modul u boji: Sada s neprozirnošću.
• Promjene u modelu kutija: Uključujući a nadstrešnica svojstvo koje djeluje poput IE oznake.
• Modul korisničkog sučelja CSS3: Davanje novih kursora, odgovora na akcije, potrebna polja, pa čak i promjena veličine elemenata.
• Upiti za medije: Upiti za medije omogućuju vam veću fleksibilnost pri definiranju načina na koji treba koristiti stilsku tablicu. Na primjer, mogli biste definirati tabelu stilova koja je samo za ručne uređaje koji imaju okvir za prikaz veći od 20em.
• CSS3 Ruby modul: Pruža podršku za jezike koji koriste tekstualni rubin za bilješke dokumenata.
• CSS3 Paged Media modul: Za još veću podršku za stranične medije (papir, prozirne folije itd.).
• Generirani sadržaj: Pokretanje zaglavlja i podnožja, fusnota i drugog sadržaja koji se generira programski, posebno za stranične medije.
• CSS3 Govorni modul: Promjene u zvučnom CSS-u.