Rozdíl mezi CSS2 a CSS3

Pochopení zásadních změn v CSS3

Největším rozdílem mezi CSS2 a CSS3 je to, že CSS3 byl rozdělen na různé oddíly nazývané moduly. Každý z těchto modulů prochází W3C v různých fázích doporučení. Tento proces udělal mnohem jednodušší, aby různé součásti CSS3 byly přijaty a implementovány v prohlížeči různými výrobci.

Pokud porovnáte tento proces s tím, co se stalo s CSS2, kde bylo vše předloženo jako jediný dokument se všemi informacemi o kaskádním stylu v něm, začnete vidět výhody porušení doporučení do menších jednotlivých kusů. Protože každý modul je zpracováván individuálně, máme mnohem širší nabídku prohlížeče pro moduly CSS3.

Stejně jako u všech nových a měnících se specifikací, nezapomeňte si důkladně otestovat své stránky CSS3 v co nejvíce prohlížečích a operačních systémech. Nezapomeňte, že cílem není vytvářet webové stránky, které vypadají přesně stejně jako v každém prohlížeči, ale zajistit, aby všechny styly, které používají, včetně stylů CSS3, vypadaly skvěle v prohlížečích, které je podporují, a že se starší prohlížeče ne.

Nové výběry CSS3

CSS3 nabízí spoustu nových způsobů, jak psát pravidla CSS pomocí nových voličů CSS, nového kombinátoru a některých nových pseudoelementů.

Tři nové voliče atributů:

• Začátek atributu odpovídá přesně prvku [foo ^ = "bar"] Prvek má atribut nazvaný foo, který začíná "bar" např.
• Atribut končící odpovídá přesně elementu [foo $ = "bar"] Prvek má atribut nazvaný foo, který končí "bar", např.
• Atribut obsahuje element shody [foo * = "bar"] Prvek má atribut nazvaný foo, který obsahuje řetězec "bar", např.

16 nových pseudotříd:

• :vykořenit
  • Kořenový prvek dokumentu. V HTML je to vždycky.
• : nth-dítě (n)
  • Tuto funkci použijte, chcete-li odpovídat přesným podřízeným prvkům nebo použít proměnné pro získání střídajících se shody.
• : nth-last-child (n)
  • Shodte přesné podřízené elementy počínaje od posledního.
• : nth-typu (n)
  • Shoda sourozenců se stejným jménem před tím ve stromu dokumentů.
• : nth-of-type (n)
  • Shoda sourozenců se stejným jménem počítá od dolní části.
• :poslední dítě
  • Porovnejte poslední podřízený prvek nadřazené položky.
• : prvotřídní
  • Přizpůsobte první sourozenci tohoto typu.
• : posledního typu
  • Přizpůsobte poslední sourozenci tohoto typu.
• :Jedináček
  • Přizpůsobte prvek, který je jediným dítětem svého rodiče.
• : pouze typu
  • Přizpůsobte prvek, který je jediný svého typu.
• :prázdný
  • Přizpůsobte prvek, který nemá děti (včetně textových uzlů).
• :cílová
  • Porovnejte prvek, který je cílem referenčního identifikátoru URI.
• : povoleno
  • Přizpůsobte prvek při jeho zapnutí.
• : zakázáno
  • Přizpůsobte prvek, pokud je vypnut.
• :kontrolovány
  • Prvek porovnejte, když je zaškrtnuto (přepínač nebo zaškrtávací políčko).

• : ne (s)
  • Shoda, pokud se element neodpovídá jednoduchému voličům s.

Jeden nový kombinátor:

• elementA ~ elementB
  • Shoda, když elementB následuje po elementu A, ne nutně okamžitě.

Nové vlastnosti

CSS3 také představil řadu nových vlastností CSS. Mnoho z těchto vlastností mělo vytvořit vizuální styly, které by se pravděpodobně více spoutaly s grafickým programem, jako je Photoshop. Některé z nich, jako hraniční poloměr nebo box-stín, byly od počátku zaváděny, pokud se jedná o CSS3. Jiní, jako například flexbox nebo dokonce CSS Grid, jsou novější styly, které jsou stále považovány za doplňky CSS3.

V modelu CSS3 se model schránky nezměnil. Existuje však spousta vlastností nového stylu, které vám pomohou stylovat pozadí a ohraničení vašich krabic.

Vícenásobné pozadí

Pomocí stylů pozadí, obrysů pozadí a pozadím můžete zadat více obrázků na pozadí, které mají být navrženy jeden nad druhým v poli. První obraz je vrstva nejblíže k uživateli, přičemž následující jsou namalovány za sebou. Pokud je barva pozadí, je namalována pod všemi vrstvami obrazu.

Nové vlastnosti stylu pozadí

V CSS3 jsou také některé nové vlastnosti pozadí.

• klip na pozadí
  • Tato vlastnost definuje, jak by měl být obrázek pozadí zastaven. Výchozím nastavením je rámeček s rámečkem, ale lze jej změnit na políčko pro vycpávky nebo obsah.
• pozadí původu
  • Tato vlastnost určuje, zda by pozadí mělo být umístěno v políčku výplně, okraji rámečku nebo v poli obsahu.
• velikost pozadí
  • Tato vlastnost umožňuje určit velikost obrázku na pozadí. Umožňuje roztahovat menší obrázky tak, aby se vešly na stránku.

Změny vlastností stávajícího stylu pozadí

Existuje také několik změn stávajících vlastností pozadí:

• opakování pozadí
  • Pro tuto vlastnost existují dvě nové hodnoty: prostor a kruh. Prostorové prostory rovnoměrně skryté v krabici, aniž by byly oříznuté. Kruh změní obrázek pozadí tak, aby se v krabici celé číslo opakoval.
• background-attachment
  • Je přidána nová hodnota "local", takže pozadí se bude pohybovat s obsahem prvku, pokud má prvek posuvník.
• Pozadí
  • Vlastnost zkráceného pozadí přidává vlastnosti velikosti a původu.

Vlastnosti hranice CSS3

V okrajích CSS3 mohou být styly, na které jsme zvyklí (pevný, dvojitý, přerušovaný atd.), Nebo mohou být obrazem. Navíc CSS3 přináší schopnost vytvářet zaoblené rohy. Obrázky na hranicích jsou zajímavé, protože vytvoříte obraz všech čtyř hranic a pak řekněte CSS, jak tento obrázek aplikovat na vaše hranice.

Nové vlastnosti stylu hranice

V CSS3 jsou některé nové vlastnosti okrajů:

• okraj poloměru
  • poloměr nahoře-vpravo-vpravo , okraj-pravý-pravý okraj , okraj-dolní-levý-poloměr , okraj-horní-levá-poloměr
  • Tyto vlastnosti umožňují vytvořit zaoblené rohy na vašich hranicích.
• border-image-source
  • Určuje soubor zdrojového obrázku, který má být použit, namísto již definovaných stylů hranic.
• hranice-obraz-řezu
  • Představuje vnitřní odsazení okrajů okrajů obrazu
• hranice šířky obrazu
  • Definuje hodnotu šířky rámečku.
• hranice obrazu-počátek
  • Určuje množství, které přesahuje okraj rámečku za okraj.
• hranice obrazu-roztažení
  • Určuje, jak by měly být boky a střední části hraničního obrazu dlaždicovány nebo zmenšeny.
• hranice obrazu
  • Vlastnost zkrácené vazby pro všechny vlastnosti okrajového obrázku.

Další vlastnosti CSS3 vztahující se k hranicím a pozadí

Když je políčko přerušeno při přerušení stránky, sloupcová zlomka pro přerušení čáry (pro vložené prvky), vlastnost box-decoration-break definuje, jak jsou nové rámečky zabaleny s okrajem a polstrováním. Pozadí lze rozdělit mezi více rozbitých polí pomocí této vlastnosti.

K dispozici je také vlastnost shadow-box, kterou lze použít k přidávání stínů do prvků pole.

S CSS3 můžete nyní snadno nastavit webovou stránku s více sloupci bez tabulek nebo složitými strukturami značek div. Jednoduše řeknete prohlížeči, kolik sloupců má tělesný prvek a jak má být. Navíc můžete přidat hranice (pravidla), barvy pozadí, které překlenují výšku sloupce, a váš text bude procházet všemi sloupci automaticky.

Sloupce CSS3 - Definujte počet a šířku sloupců

Existují tři nové vlastnosti, které umožňují definovat počet a šířku sloupců:

• šířka sloupce
  • Definuje šířku sloupců. Prohlížeč pak tekoucí text vyplní místo se širokými sloupci.
• počet sloupců
  • Definuje počet sloupců na stránce. Prohlížeč potom vytvoří sloupce dostatečně široké, aby se vešly do mezery, ale pouze zadané číslo.
• sloupců
  • Vlastnost shorthand, kde můžete definovat šířku nebo číslo (nebo obojí, ale to zřídkakdy dává smysl).

CSS3 sloupce mezery a pravidla

Mezery a pravidla jsou umístěny mezi sloupce ve stejném vícebarevném scénáři. Mezerami se sloupce oddělují, ale pravidla nezachytávají žádný prostor. Pokud je pravidlo sloupce širší než jeho mezera, překryje sousední sloupce. existuje pět nových vlastností pro pravidla a mezery sloupců:

• mezera mezi sloupci
  • Definuje šířku mezer mezi sloupci.
• sloupec-pravidlo-barva
  • Definuje barvu pravidla.
• styl sloupcového pravidla
  • Definuje styl pravidla (pevný, tečkovaný, dvojitý atd.).
• sloupec-šířka pravidla
  • Definuje šířku pravidla.
• pravidlo sloupce
  • Sterilní vlastnost, která definuje všechny tři vlastnosti pravidel sloupců najednou.

CSS3 sloupce přestávky, rozložení sloupců a plnicí sloupce

Sloupce sloupců používají stejné možnosti CSS2, které se používají k definování přestávek v stránkovaném obsahu, ale se třemi novými vlastnostmi: přetržením , zlomením a zlomením .

Stejně jako u tabulek můžete nastavit prvky, které se mají rozložit sloupce se vlastností span sloupce. To vám umožní vytvářet nadpisy, které překlenují více sloupců spíše jako noviny.

Filling columns rozhoduje, kolik obsahu bude v každém sloupci. Balancované sloupce se pokoušejí v každém sloupci umístit stejné množství obsahu, zatímco auto automaticky přetáhne obsah, dokud není sloupec plný a poté přechází na další.

Další funkce v CSS3, které nejsou zahrnuty v CSS2

Existuje spousta dalších funkcí v CSS3, které v CSS2 neexistovaly, včetně:

• Modul rozložení šablon CSS a modul CSS3 Grid positioning : Vytváření mřížky pomocí CSS.
• CSS3 Textový modul : Vytváří text a dokonce vytváří stíny s CSS.
• CSS3 Barevný modul : Nyní s opacitou.
• Změny modelu krabice : Zahrnuje vlastnost výběru, která funguje jako značka IE.
• Modul CSS3 uživatelského rozhraní : Dává vám nové kurzory, reakce na akce, požadovaná pole a dokonce i prvky změny velikosti .
• Media Queries : Dotazy médií umožňují větší flexibilitu při definování způsobu použití stylu. Mohli byste například definovat stylový list pouze pro ruční zařízení, která mají výhled větší než 20m.
• Modul CSS3 Ruby : Poskytuje podporu pro jazyky, které používají textové ruby ​​pro anotaci dokumentů.
• Modul CSS3 Paged Media : Pro ještě větší podporu stránkovaných médií (papír, průhledné fólie apod.).
• Generovaný obsah : L běží záhlaví a zápatí, poznámky pod čarou a další obsah, který je generován programově, zvláště pro stránkovaná média.
• Modul řeči CSS3 : Změny sluchového CSS.