Rozdíl mezi CSS2 a CSS3

Největší rozdíl mezi CSS2 a CSS3 je, že CSS3 byl rozdělen do různých sekcí, tzv moduly. Každý z těchto modulů prochází skrz W3C v různých fázích procesu doporučení. Tento proces výrazně usnadnil přijímání a implementaci různých kusů CSS3 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 odesláno jako jeden dokument se všemi Kaskádové styly informace v něm, začnete vidět výhody rozdělení doporučení na menší jednotlivé kousky. Protože na každém z modulů se pracuje individuálně, vývojáři mají mnohem širší škálu podpory prohlížečů pro moduly CSS3.

Nové selektory CSS3

CSS3 nabízí několik nových způsobů psaní pravidel CSS s novými selektory CSS, novým kombinátorem a několika novými pseudoelementy.

K dispozici jsou tři nové selektory atributů:

• Začátek atributu se přesně shoduje:

  prvek [foo ^ = "bar"]

  Prvek má atribut zvaný foo, který začíná „bar“, např.
• Konec atributu se přesně shoduje:

  prvek [foo $ = "bar"]

  Prvek má atribut zvaný foo, který končí na „bar“, např.
instagram viewer
• Atribut obsahuje shodu:

  prvek [foo * = "bar"]

  Prvek má atribut volala foo obsahující řetězec „bar“.

Bylo zavedeno 16 nových pseudotříd:

• :vykořenit
  • Kořenový prvek dokumentu.
• : n-dítě (n)
  • Použijte k přiřazení přesných podřízených prvků nebo použijte proměnné k získání střídavých shod.
• : n-poslední dítě (n)
  • Porovnejte přesné podřízené prvky počítané od posledního.
• : n-tý typ (n)
  • Přiřaďte ve stromu dokumentů sourozenecké prvky se stejným názvem.
• : nth-last-of-type (n)
  • Spojte sourozenecké prvky se stejným názvem, které se počítají zdola.
• :poslední dítě
  • Porovnejte poslední podřízený prvek rodiče.
• : první typu
  • Porovnejte první sourozenecký prvek tohoto typu.
• : poslední typu
  • Porovnejte poslední prvek sourozence tohoto typu.
• :Jedináček
  • Porovnejte prvek, který je jediným potomkem jeho rodiče.
• : pouze typu
  • Porovnejte prvek, který je jediný svého typu.
• :prázdný
  • Porovnejte prvek, který nemá žádné podřízené prvky (včetně textových uzlů).
• :cílová
  • Porovnejte prvek, který je cílem odkazujícího identifikátoru URI.
• : povoleno
  • Pokud je prvek aktivní, přiřaďte jej k zápasu.
• : deaktivováno
  • Pokud je prvek deaktivován, porovnejte jej.
• :kontrolovány
  • Přiřadit prvek, když je zaškrtnutý (přepínač nebo zaškrtávací políčko).
• : ne
  • Shoda, když prvek neodpovídá jednoduchému selektory.

Existuje jeden nový kombinátor:

• elementA ~ elementB
  • Porovnejte, když elementB následuje někde za elementem A, ne nutně okamžitě.

Nové vlastnosti

CSS3 také představil několik nových vlastností CSS. Mnoho z těchto vlastností vytváří vizuální styly, které by se pravděpodobně více spojovaly s podobným grafickým programem Photoshop. Některé z nich, například poloměr ohraničení nebo stín rámečku, existují již od zavedení CSS3. Jiní, například flexbox nebo dokonce CSS Mřížka, jsou novější styly, které jsou stále často považovány za doplňky CSS3.

V CSS3 se model krabice nezměnil. Existuje ale spousta nových vlastností stylu, které vám mohou pomoci upravovat pozadí a ohraničení vašich polí.

Více obrázků na pozadí

Pomocí stylů pozadí, polohy pozadí a opakování pozadí můžete v poli určit více obrázků pozadí, které mají být vrstveny na sebe. První obrázek je vrstva nejblíže uživateli a následující jsou vymalovány za sebou. Pokud existuje 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 na pozadí oříznut. Výchozí hodnota je rámeček ohraničení, ale lze jej změnit na polstrování nebo pole obsahu.
• původ pozadí
• Tato vlastnost určuje, zda má být pozadí umístěno v rámečku výplně, rámečku ohraničení nebo v poli obsahu.
• velikost pozadí
• Tato vlastnost označuje velikost obrázku na pozadí. Umožňuje vám to roztáhnout menší obrázky tak, aby se vešly na stránku.

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

Existuje také několik změn ve stávajících vlastnostech stylu pozadí:

• opakování pozadí
  • Pro tuto vlastnost existují dvě nové hodnoty - prostor a kolo. Prostor rovnoměrně rozmístí obkladový obrázek v rámečku, aniž by byl oříznut. Zaokrouhlení změní měřítko obrázku na pozadí tak, aby se v rámečku pokládalo několikrát.
• příloha na pozadí
  • Přidá se nová hodnota „místní“, takže pozadí se bude posouvat s obsahem prvku, když má tento prvek posuvník.
• Pozadí
  • Vlastnost zkratky na pozadí přidává vlastnosti velikosti a původu.

Vlastnosti ohraničení CSS3

V CSS3 mohou být ohraničení styly, na které jsme zvyklí (plné, dvojité, přerušované atd.), Nebo to může být obrázek. CSS3 navíc podporuje zaoblené rohy. Border images are interesting because you create a image of all four restrictions and then tell the CSS how to apply that image to your restrictions.

Nové vlastnosti stylu ohraničení

V CSS3 jsou některé nové vlastnosti ohraničení:

• poloměr ohraničení
• poloměr ohraničení vpravo nahoře, poloměr ohraničení vpravo dole, poloměr ohraničení dole dole vlevo, poloměr ohraničení vlevo nahoře
• Tyto vlastnosti vám umožňují vytvářet zaoblené rohy na vašich hranicích.
• border-image-source
• Určuje zdrojový soubor obrázku, který se má použít místo již definovaných stylů ohraničení.
• hraniční obrazový řez
• Představuje vnitřní posunutí od okrajů okrajového obrazu.
• border-image-width
• Definuje hodnotu šířky obrázku ohraničení.
• začátek hraničního obrazu
• Určuje částku, která přesahuje oblast obrázku hranice za rámeček ohraničení.
• border-image-stretch
• Definuje, jak by měly být strany a střední části obrázku ohraničeny dlaždicemi nebo měřítkem.
• hraniční obrázek
• Vlastnost zkratky pro všechny vlastnosti obrázku ohraničení.

Další vlastnosti CSS3 související s okraji a pozadím

Pokud je rámeček rozbit na konci stránky, na konci sloupce nebo na konci řádku (pro vložené prvky), box-dekorace-break vlastnost definuje, jak jsou nová pole zabalena ohraničením a polstrováním. Pomocí této vlastnosti se pozadí dělí na několik rozbitých polí.

Nový stín stínu vlastnost přidává stíny k prvkům pole.

S CSS3 můžete nyní snadno nastavit webovou stránku s několika sloupci bez tabulek nebo složitých div struktury značek. Jednoduše řeknete prohlížeči, kolik sloupců má mít prvek těla a jak široký by měl být. Navíc můžete přidat ohraničení (pravidla) a barvy pozadí, které překračují výšku sloupce, a text bude automaticky procházet všemi sloupci.

Definujte počet a šířku sloupců

Jsou tři nové vlastnosti které vám umožní definovat počet a šířku sloupců:

• šířka sloupce
  • Definuje šířku vašich sloupců. Prohlížeč poté text převede, aby vyplnil prostor sloupci, které jsou široké.
• počet sloupců
  • Definuje počet sloupců na stránce. Prohlížeč poté vytvoří sloupce dostatečně široké, aby se vešly do prostoru, ale pouze zadané číslo.
• sloupce
  • Vlastnost zkratky, kde můžete definovat šířku nebo číslo (nebo obojí, ale to málokdy dává smysl).

CSS3 Mezery ve sloupcích a pravidla

Mezery a pravidla jsou umístěna mezi sloupce ve stejném scénáři s více sloupci. Mezery rozdělí sloupce, ale pravidla nezabírají žádné místo. Pokud je pravidlo sloupce širší než jeho mezera, bude překrývat sousední sloupce. Existuje pět nových vlastností pro pravidla sloupců a mezery:

• sloupová mezera
  • Definuje šířku mezer mezi sloupy.
• color-rule-color
  • Definuje barvu pravidla.
• styl pravidla sloupce
  • Definuje styl pravidla (plné, tečkované, dvojité atd.).
• width-rule-width
  • Definuje šířku pravidla.
• sloupcové pravidlo
  • Vlastnost zkratky definující všechny tři vlastnosti pravidla sloupce najednou.

CSS3 Sloupy se rozbíjejí, překlenují sloupy a plní sloupy

Sloupec přestávky používají stejné možnosti CSS2, které se používají k definování přestávek ve stránkovaném obsahu, ale se třemi novými vlastnostmi: break-before, přestávka, a vloupání.

Stejně jako u tabulek můžete pomocí vlastnosti span-column nastavit prvky na rozpětí sloupců. To vám umožní vytvářet nadpisy, které se rozprostírají více sloupci spíše jako noviny.

Vyplňování sloupců rozhoduje o tom, kolik obsahu bude v každém sloupci. Vyvážené sloupce se pokoušejí vložit do každého sloupce stejné množství obsahu, zatímco auto obsah pouze přenese, dokud není sloupec plný a poté přejde na další.

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

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

• Modul rozvržení šablony CSS a modul umisťování mřížky CSS3: Vytváření mřížek pomocí CSS.
• Textový modul CSS3: Obrysový text a dokonce vytváření stínů pomocí CSS.
• Barevný modul CSS3: Nyní s neprůhledností.
• Změny modelu krabice: Včetně a stan vlastnost, která funguje jako značka IE.
• Modul uživatelského rozhraní CSS3: Dává vám nové kurzory, odpovědi na akce, požadovaná pole a dokonce i prvky pro změnu velikosti.
• Dotazy na média: Dotazy na média vám umožní větší flexibilitu při definování způsobu použití šablony stylů. Můžete například definovat šablonu stylů, která je pouze pro kapesní zařízení, která mají výřez větší než 20EM.
• Modul CSS3 Ruby: Poskytuje podporu pro jazyky, které k anotaci dokumentů používají textový rubín.
• Modul stránkovaných médií CSS3: Pro ještě větší podporu stránkovaných médií (papír, fólie atd.).
• Vygenerovaný obsah: Spouštění záhlaví a zápatí, poznámky pod čarou a další obsah, který je generován programově, zejména pro stránkovaná média.
• Řečový modul CSS3: Změny zvukových CSS.