Rozdiel medzi CSS2 a CSS3

Najväčší rozdiel medzi CSS2 a CSS3 je, že CSS3 bol rozdelený do rôznych sekcií, tzv modulov. Každý z týchto modulov si razí cestu cez W3C v rôznych fázach procesu odporúčaní. Tento proces výrazne uľahčil prijímanie 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 jeden dokument so všetkými Kaskádové štýly informácie v ňom, začnete vidieť výhody rozdelenia odporúčania na menšie, jednotlivé časti. Pretože na každom z modulov sa pracuje individuálne, vývojári majú k dispozícii oveľa širšiu škálu podpory prehľadávačov pre moduly CSS3.

Nové selektory CSS3

CSS3 ponúka niekoľko nových spôsobov písania pravidiel CSS s novými selektormi CSS, ako aj novým kombinátorom a niekoľkými novými pseudoelementmi.

Existujú tri nové selektory atribútov:

• Začiatok atribútu sa presne zhoduje:

  prvok [foo ^ = "bar"]

  Element má atribút s názvom foo, ktorý začína na „bar“, napr.
• Koniec atribútu sa presne zhoduje:

  prvok [foo $ = "bar"]

  Element má atribút s názvom foo, ktorý končí na „bar“, napr.
instagram viewer
• Atribút obsahuje zhodu:

  prvok [foo * = "bar"]

  Prvok má atribút zavolal foo ktorý obsahuje reťazec „bar“.

Bolo zavedených 16 nových pseudotried:

• : koreň
  • Koreňový prvok dokumentu.
• : n-te dieťa (n)
  • Toto použite na priradenie presných podradených prvkov alebo na získanie premenných zhôd pomocou premenných.
• : n-posledné dieťa (n)
  • Priraďte presné podradené prvky počítané od posledného.
• : n-tý typ (n)
  • Priraďte k súrodencom rovnaké prvky v strome dokumentov.
• : posledný posledný typ (n)
  • Priraďte súrodenecké prvky s rovnakým názvom, ktoré sa počítajú od dolnej časti.
• :posledné dieťa
  • Porovnajte posledné detský prvok rodiča.
• : prvý typ
  • Priraďte k prvému súrodeneckému prvku tohto typu.
• : posledný typ
  • Zhoda s posledným súrodeneckým prvkom tohto typu.
• :len dieťa
  • Priraďte k prvku, ktorý je jediným dieťaťom jeho rodiča.
• : iba typu
  • Priraďte k prvku, ktorý je jediný svojho typu.
• : prázdny
  • Priraďte k prvku, ktorý nemá žiadne podradené prvky (vrátane textových uzlov).
• : cieľ
  • Priraďte prvok, ktorý je cieľom sprostredkujúceho URI.
• : povolené
  • Ak je prvok povolený, porovnajte ho.
• : zdravotne postihnutý
  • Ak je prvok deaktivovaný, porovnajte ho.
• : začiarknuté
  • Priraďte prvok, keď je začiarknutý (prepínač alebo začiarkavacie políčko).
• : nie
  • Zhoda, keď sa prvok nezhoduje s jednoduchým selektory.

Je tu jeden nový kombinátor:

• prvokA ~ prvokB
  • Zhoda, keď elementB nasleduje niekde za elementom A, nie nevyhnutne okamžite.

Nové vlastnosti

CSS3 tiež predstavil niekoľko nových vlastností CSS. Mnohé z týchto vlastností vytvárajú vizuálne štýly, ktoré by sa pravdepodobne viac spájali s podobným grafickým programom Photoshop. Niektoré z nich, napríklad polomer okraja alebo tieň rámčeka, existujú už od zavedenia CSS3. Ostatné, napríklad flexbox alebo dokonca CSS Mriežka sú novšie štýly, ktoré sa stále často považujú za doplnky CSS3.

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

Viac obrázkov na pozadí

Pomocou štýlov obrázok pozadia, poloha pozadia a opakovanie pozadia môžete v poli určiť viac obrázkov pozadia, ktoré sa majú vrstviť jeden na druhý. Prvý obrázok je vrstva najbližšie k používateľovi a nasledujúce sú zafarbené zozadu. Ak existuje farba pozadia, vymaľuje sa to pod všetky vrstvy obrazu.

Nové vlastnosti štýlu pozadia

V CSS3 sú tiež niektoré nové vlastnosti pozadia:

• klip na pozadie
• Táto vlastnosť definuje, ako sa má orezať obrázok na pozadí. Predvolená hodnota je orámovanie, ale je možné ho zmeniť na polstrovanie alebo na obsah.
• pôvod pozadia
• Táto vlastnosť určuje, či má byť pozadie umiestnené v rámčeku výplne, rámčeku ohraničenia alebo rámčeku obsahu.
• veľkosť pozadia
• Táto vlastnosť označuje veľkosť obrázka na pozadí. Umožňuje vám to roztiahnite menšie obrázky tak, aby sa zmestili na stránku.

Zmeny existujúcich vlastností štýlu pozadia

Existuje aj niekoľko zmien v existujúcich vlastnostiach štýlu pozadia:

• opakovanie pozadia
  • Pre túto vlastnosť existujú dve nové hodnoty - priestor a okrúhly. Medzera rozloží kachľový obrázok rovnomerne do poľa bez orezania. Zaokrúhlenie zmení mierku obrázka na pozadí tak, aby sa v krabici zobrazil celý počet dlaždíc.
• príloha na pozadí
  • Pridáva sa nová hodnota „local“, takže pozadie sa bude posúvať s obsahom prvku, keď má tento prvok posúvač.
• pozadie
  • Vlastnosť skratky na pozadí pridáva vlastnosti veľkosti a pôvodu.

Vlastnosti hranice CSS3

V CSS3 môžu byť ohraničenia štýly, na ktoré sme zvyknutí (plné, dvojité, prerušované atď.), Alebo to môže byť obrázok. CSS3 navyše podporuje zaoblené rohy. Obrázky orámovania sú zaujímavé, pretože vytvoríte obraz všetkých štyroch ohraničení a potom poviete CSS, ako tento obrázok použiť na svoje ohraničenia.

Nové vlastnosti štýlu hraníc

V CSS3 sú niektoré nové vlastnosti ohraničenia:

• polomer hranice
• polomer vpravo hore, polomer border-bottom-right-radius, polomer border-bottom-left-radius, polomer horný-ľavý-horný
• Tieto vlastnosti vám umožňujú vytvárať zaoblené rohy na vašich hraniciach.
• border-image-source
• Určuje zdrojový súbor obrázka, ktorý sa má použiť namiesto už definovaných štýlov ohraničenia.
• hranicny-obrazovy-rez
• Predstavuje vnútorné posunutie od okrajov obrázka okraja.
• border-image-width
• Definuje hodnotu šírky vášho obrázku s okrajom.
• hranica-obraz-zaciatok
• Určuje veľkosť, ktorú oblasť s obrázkom hranice presahuje za rámček s ohraničením.
• border-image-stretch
• Definuje, ako by mali byť bočné a stredné časti obrázka ohraničené dlaždicami alebo zmenšené.
• hraničný obrázok
• Vlastnosť skratky pre všetky vlastnosti obrázka hranice.

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

Keď je rám zlomený na konci stránky, stĺpca alebo riadku (pre vložené prvky), znak box-dekorácia-prestávka Vlastnosť definuje, ako sú nové škatule zabalené s orámovaním a výplňou. Pozadia sa pomocou tejto vlastnosti delia na niekoľko zlomených políčok.

Nový tieňový box vlastnosť pridáva tiene k prvkom poľa.

S CSS3 môžete teraz ľahko nastaviť webovú stránku s niekoľkými stĺpcami bez tabuliek alebo zložito div Štruktúry značiek. Jednoducho prehliadaču poviete, koľko stĺpcov by mal mať prvok tela a aké široké by mali byť. Navyše môžete pridať orámovanie (pravidlá) a farby pozadia, ktoré sa rozprestierajú nad výškou stĺpca a váš text bude automaticky prechádzať cez všetky stĺpce.

Definujte počet a šírku stĺpcov

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

• šírka stĺpca
  • Definuje šírku, ktorú majú mať vaše stĺpce. Prehliadač potom napíše text tak, aby vyplnil priestor stĺpcami, ktoré sú široké.
• počet stĺpcov
  • Definuje počet stĺpcov na stránke. Prehliadač potom vytvorí stĺpce dostatočne široké, aby sa zmestili do medzery, ale iba počet, ktorý určíte.
• stĺpce
  • Vlastnosť skratky, kde môžete definovať šírku alebo počet (alebo oboje, ale málokedy to dáva zmysel).

Medzery a pravidlá pre stĺpce CSS3

Medzery a pravidlá sa umiestňujú medzi stĺpce v rovnakom scenári s viacerými stĺpcami. Medzery budú stĺpce od seba oddeľovať, ale pravidlá nezaberajú žiadny priestor. Ak je pravidlo stĺpca širšie ako jeho medzera, bude sa prekrývať so susednými stĺpcami. Existuje päť nových vlastností pre pravidlá stĺpcov a medzery:

• medzera v stĺpci
  • Definuje šírku medzier medzi stĺpcami.
• stĺpec-pravidlo-farba
  • Definuje farbu pravidla.
• štýl stĺpcového pravidla
  • Definuje štýl pravidla (plné, bodkované, dvojité atď.).
• šírka pravidla pravidla
  • Definuje šírku pravidla.
• stĺpcové pravidlo
  • Vlastnosť skratky definujúca všetky tri vlastnosti pravidla stĺpca naraz.

CSS3 Rozdeľuje sa, rozdeľuje sa a vyplňuje sa

Stĺpec zlomy používajú rovnaké možnosti CSS2, ktoré sa používajú na definovanie zlomov stránkovaného obsahu, ale s tromi novými vlastnosťami: break-before, zlom-poa vlámanie do vnútra.

Rovnako ako v prípade tabuliek, aj pomocou vlastnosti span-span môžete nastaviť prvky na rozpätie stĺpcov. Vďaka tomu môžete vytvárať nadpisy, ktoré sa rozprestierajú vo viacerých stĺpcoch viac ako noviny.

Vyplnenie stĺpcov rozhoduje o tom, koľko obsahu bude v jednotlivých stĺpcoch. Vyvážené stĺpce sa snažia vložiť do každého stĺpca rovnaké množstvo obsahu, zatiaľ čo auto iba vloží obsah dovtedy, kým nie je stĺpec plný a potom prejde na ďalší.

Ďalšie funkcie v CSS3, ktoré nie sú zahrnuté v CSS2

V CSS3 existuje veľa ďalších funkcií, ktoré v CSS2 neexistovali, vrátane:

• Modul rozloženia šablón CSS a modul umiestnenia mriežky CSS3: Vytváranie mriežok pomocou CSS.
• Textový modul CSS3: Obrysový text a dokonca vytváranie tieňov pomocou CSS.
• Farebný modul CSS3: Teraz s nepriehľadnosťou.
• Zmeny modelu krabice: Vrátane a výrez vlastnosť, ktorá funguje ako značka IE.
• Modul užívateľského rozhrania CSS3: Dáva vám nové kurzory, odpovede na akcie, povinné polia a dokonca aj prvky na zmenu veľkosti.
• Mediálne dotazy: Dotazy na médiá vám umožní väčšiu flexibilitu pri definovaní spôsobu použitia šablóny štýlov. Môžete napríklad definovať šablónu štýlov, ktorá je určená iba pre vreckové zariadenia, ktoré majú zobrazenú oblasť väčšiu ako 20EM.
• Modul CSS3 Ruby: Poskytuje podporu jazykom, ktoré používajú na anotáciu dokumentov textový rubín.
• Modul stránkovaných médií CSS3: Pre ešte väčšiu podporu pre stránkované médiá (papier, priehľadné fólie atď.).
• Vytvorený obsah: Bežiace hlavičky a päty, poznámky pod čiarou a ďalší obsah, ktorý sa generuje programovo, najmä pre stránkované médiá.
• Rečový modul CSS3: Zmeny sluchových CSS.