Rozdiel medzi CSS2 a CSS3

Pochopenie hlavných zmien v CSS3

Najväčší rozdiel medzi CSS2 a CSS3 spočíva v tom, že CSS3 bol rozdelený na rôzne časti nazývané moduly. Každý z týchto modulov prechádza cez W3C v rôznych fázach odporúčania. Tento proces značne zjednodušil prijatie a implementáciu rôznych častí CSS3 v prehliadači rôznymi výrobcami.

Ak porovnáte tento proces s tým, čo sa stalo s CSS2, kde bolo všetko odoslané ako jediný dokument so všetkými informáciami o kaskádových štýloch v ňom, začnete vidieť výhody porušenia odporúčania na menšie jednotlivé diely. Pretože každý z modulov pracuje samostatne, máme oveľa širšiu škálu podpory pre prehliadače modulov CSS3.

Rovnako ako pri každej novej a meniacej sa špecifikácii, dôkladne otestujte svoje stránky CSS3 v čo najväčšom počte prehliadačov a operačných systémov. Pamätajte, že cieľom nie je vytvárať webové stránky, ktoré vyzerajú úplne rovnako v každom prehliadači, ale zabezpečiť, aby všetky štýly, ktoré používate, vrátane štýlov CSS3, vyzerali skvele v prehliadačoch, ktoré ich podporujú, a že sa starším prehliadačom nie.

Nové výbery CSS3

CSS3 ponúka veľa nových spôsobov, ako môžete písať pravidlá CSS pomocou nových voličov CSS, ako aj nového kombinátora a niektorých nových pseudoelementov.

Tri nové výbery atribútov:

• Začiatok atribútu zodpovedá presne prvku [foo ^ = "bar"] Element má atribút nazvaný foo, ktorý začína na "bar" napr
• Atribút končíci zodpovedá presne prvku [foo $ = "bar"] Prvok má atribút nazvaný foo, ktorý končí "barom" napr.
• Atribút obsahuje prvok zápasu [foo * = "bar"] Prvok má atribút nazvaný foo, ktorý obsahuje reťazec "bar" napr.

16 nových pseudotried:

• : root
  • Koreňový prvok dokumentu. V HTML je to vždy.
• : N-té dieťa (n)
  • Použite to na to, aby ste vybrali presné podradené elementy alebo použili premenné na získanie striedajúcich sa zápasov.
• : Nth-last-child (n)
  • Zhodte presné detské elementy od predchádzajúceho.
• : N-té o-typu (n)
  • Priradte súrodenské elementy s rovnakým názvom pred stromom dokumentov.
• : N-té posledný-of-typu (n)
  • Súbežné súrodenské prvky s rovnakým názvom sa počítajú od spodnej časti.
• :posledné dieťa
  • Priraďte prvok posledného podriadeného rodiča.
• : Prvý-of-type
  • Priraďte prvý súrodenský prvok tohto typu.
• : Last-of-type
  • Priraďte prvý súrodenský prvok tohto typu.
• :len dieťa
  • Priraďte prvok, ktorý je jediným dieťaťom svojho rodiča.
• : Only-of-type
  • Priraďte prvok, ktorý je jediný svojho typu.
• : prázdný
  • Prispôsobte prvok, ktorý nemá deti (vrátane textových uzlov).
• : cieľová
  • Priraďte prvok, ktorý je cieľom referenčného identifikátora URI.
• : zapnuté
  • Prirovnanie prvku, keď je zapnuté.
• : vypnuté
  • Prirovnanie prvku, keď je vypnuté.
• : zaškrtnuté
  • Prvok porovnajte, keď je začiarknutý (rádiové tlačidlo alebo začiarkavacie políčko).

• : Nie (y)
  • Zhoda, keď sa prvok nezhoduje s jednoduchým voličom .

Jeden nový kombinátor:

• elementA ~ elementB
  • Zhoda, keď elementB nasleduje niekde po prvku A, nie nevyhnutne okamžite.

Nové vlastnosti

CSS3 tiež predstavil niekoľko nových vlastností CSS. Mnohé z týchto vlastností mali vytvoriť vizuálne štýly, ktoré by sa pravdepodobne viac spájali s grafickým programom, ako je Photoshop. Niektoré z nich, ako hraničný polomer alebo box-tieň, sa nachádzajú od zavedenia, ak je CSS3. Ostatné, ako flexbox alebo dokonca CSS Grid sú novšie štýly, ktoré sú stále považované za dodatky CSS3.

V modeli CSS3 sa model schránky nezmenil. Existuje však veľa nových vlastností štýlu, ktoré vám môžu pomôcť štýlovať pozadie a okraje vašich políčok.

Viaceré pozadie I mages

Pomocou štýlov pozadia pozadia, pozadia pozície a opakovania pozadia môžete v poli zadať viac obrázkov na pozadí, ktoré sa majú navrstvené navzájom. Prvý obraz je vrstva najbližšie k používateľovi, pričom nasledujúce sú namazané za sebou. Ak je farba pozadia, je namalovaná pod všetkými vrstvami obrázka.

Nové vlastnosti štýlu pozadia

V CSS3 sú aj niektoré nové vlastnosti pozadia.

• background-clip
  • Táto vlastnosť definuje, ako by mal byť obrázok na pozadí orezaný. Predvolená je políčko na okraji, ale môže byť zmenené na políčko alebo políčko s obsahom.
• background-origin
  • Táto vlastnosť určuje, či sa má pozadie umiestniť do políčka vyčistenia, okrajového poľa alebo do políčka s obsahom.
• background-size
  • Táto vlastnosť umožňuje určiť veľkosť obrázka pozadia. Umožňuje vám roztiahnuť menšie obrázky, aby sa zmestili na stránku.

Zmeny existujúcich vlastností štýlu pozadia

Existuje aj niekoľko zmien existujúcich vlastností štýlu pozadia:

• background-repeat
  • K dispozícii sú dve nové hodnoty pre túto vlastnosť: priestor a okrúhle. Priestorové priestory dlaždice rovnomerne v ráme, bez toho, aby boli orezané. Okrúhle zmenší pozadie na pozadí tak, aby sa v krabici celé číslo opakovalo.
• background-attachment
  • Pridá sa nová hodnota "local", aby sa pozadie posúvalo s obsahom prvkov, keď má prvok posuvnú lištu.
• pozadie
  • Vlastnosť stenčnosti pozadia pridáva veľkosť a pôvodné vlastnosti.

Vlastnosti hranice CSS3

V hraniciach CSS3 môžu byť štýly, na ktoré sme zvyknutí (pevné, dvojité, prerušené atď.), Alebo môžu byť obrazom. Plus, CSS3 prináša schopnosť vytvárať zaoblené rohy. Obrázky na hraniciach sú zaujímavé, pretože vytvoríte obraz všetkých štyroch okrajov a potom informujte CSS, ako aplikovať tento obrázok na vaše hranice.

Nové vlastnosti štýlu hraníc

V CSS3 sú niektoré nové vlastnosti hraníc:

• border-radius
  • polomer okrajov vpravo-vpravo , okraj spodný-pravý-okrúhly , okraj-spodný-ľavý-polomer , okraj-horný-polomer vľavo
  • Tieto vlastnosti umožňujú vytvárať zaoblené rohy na vašich hraniciach.
• border-image-source
  • Určuje súbor zdroja obrázkov, ktorý sa má použiť namiesto už definovaných štýlov hraníc.
• border-image-slice
  • Predstavuje vnútorné posuny od okrajov okrajov obrázka
• border-image-width
  • Definuje hodnotu šírky pre hraničný obrázok.
• border-image-úvod
  • Určuje veľkosť, ktorá presahuje hraničnú oblasť obrázka.
• border-image-stretch
  • Určuje, ako by mali byť obdĺžnikové a stredné časti hraničného obrazu dlaždené alebo zmenšené.
• border-image
  • Vlastnosť skratky pre všetky vlastnosti hraničného obrázku.

Ďalšie vlastnosti CSS3 súvisiace s hranicami a pozadím

Ak je rozbitá skrinka pri prestávke strany, prestávka stĺpca pre prerušenie riadku (pre inline elementy) vlastnosť box-decoration-break definuje spôsob, akým sú nové polia obalené okrajom a polstrovaním. Pozadie možno rozdeliť medzi viaceré rozbité polia pomocou tejto vlastnosti.

K dispozícii je aj vlastnosť tieňovej skrinky, ktorá sa môže použiť na pridávanie tieňov do prvkov krabice.

Pomocou CSS3 môžete teraz jednoducho nastaviť webovú stránku s viacerými stĺpcami bez tabuľky alebo složitými štruktúrami značiek div. Jednoducho povedzte prehliadaču, koľko stĺpcov má prvok tela a aký by mal byť rozsah. Okrem toho môžete pridať hranice (pravidlá), farby pozadia, ktoré sa vzťahujú na výšku stĺpca a váš text bude automaticky pretekať cez všetky stĺpce.

Stĺpce CSS3 - Definujte počet a šírku stĺpcov

Existujú tri nové vlastnosti, ktoré umožňujú definovať počet a šírku stĺpcov:

• stĺpec šírky
  • Definuje šírku vašich stĺpcov. Prehliadač potom pretečie text tak, aby vyplnil medzeru so širokými stĺpcami.
• Kolóna-count
  • Definuje počet stĺpcov na stránke. Prehliadač potom vytvorí stĺpce dostatočne široké na to, aby sa zmestili do medzery, ale len na zadané číslo.
• stĺpce
  • Vlastnosť skratky, kde môžete definovať buď šírku, alebo číslo (alebo oboje, ale zriedka má zmysel).

CSS3 Stĺpce medzery a pravidlá

Medzery a pravidlá sa umiestňujú medzi stĺpce v rovnakom viacjadrovom scenári. Medzery oddelia stĺpce od seba, ale pravidlá nevyužívajú žiadny priestor. Ak je pravidlo stĺpca širšie než jeho medzera, prekrýva susedné stĺpce. existuje päť nových vlastností pre pravidlá stĺpcov a medzery:

• stĺpec medzery
  • Definuje šírku medzier medzi stĺpcami.
• column-pravidlo-color
  • Definuje farbu pravidla.
• column-pravidlo-style
  • Definuje štýl pravidla (pevný, bodkovaný, dvojitý atď.).
• stĺpec meter šírky
  • Definuje šírku pravidla.
• stĺpec-pravidlo
  • Vlastnosť skratky, ktorá definuje všetky tri vlastnosti pravidiel stĺpcov naraz.

CSS3 prerušuje stĺpce, rozkladá stĺpce a plní stĺpce

Prerušenia stĺpcov používajú rovnaké možnosti CSS2, ktoré sa používajú na definovanie zlomov v stránkovom obsahu, ale s tromi novými vlastnosťami: prerušenie , prerušenie a prerušenie .

Rovnako ako u tabuliek, môžete nastaviť prvky na rozloženie stĺpcov s vlastnosťou rozptylu stĺpcov. To umožňuje vytvárať nadpisy, ktoré sa rozprestierajú viac stĺpcov ako noviny.

V stĺpcoch plnenia sa rozhoduje, koľko obsahu bude v každom stĺpci. Vyvážené stĺpce sa pokúšajú vložiť rovnaké množstvo obsahu do každého stĺpca, zatiaľ čo automaticky preteká obsah, kým sa stĺpec nezaplní, a potom prejde na ďalší.

Viac funkcií v CSS3, ktoré sú zahrnuté v CSS2

Existuje mnoho ďalších funkcií v CSS3, ktoré v CSS2 neexistovali, vrátane:

• Modul rozloženia šablón CSS a modul CSS3 Grid positioning : Vytváranie mriežok pomocou CSS.
• Textový modul CSS3 : Precízte text a dokonca vytvárajte tieňové stíny s CSS.
• CSS3 Farebný modul : teraz s opacitou.
• Zmeny v modeli krabice : Vrátane vlastníctva značky, ktoré funguje ako značka IE.
• Modul používateľského rozhrania CSS3 : Poskytne vám nové kurzorové kurzy, odpovede na akcie, požadované polia a dokonca aj prvky na zmenu veľkosti .
• Mediálne dopyty : Dotazovanie médií umožňuje väčšiu flexibilitu pri definovaní spôsobu používania štýlu. Môžete napríklad definovať štýl štýlu, ktorý je určený iba pre vreckové zariadenia s výrezom väčším ako 20 palcov.
• CSS3 Ruby modul : Poskytuje podporu pre jazyky, ktoré používajú textový rubín na anotáciu dokumentov.
• CSS3 Paged Media module : Pre ešte väčšiu podporu stránkovaných médií (papier, priehľadné fólie atď.).
• Generovaný obsah : L bežiaci hlavičky a päty, poznámky pod čiarou a iný obsah, ktorý sa generuje programovo, najmä pre pagingové médiá.
• Modul reč CSS3 : Zmeny na sluchové CSS.