Rozcestník k CSS

Základy CSS

• „Problémy“ jazyka
• Kaskáda
• Dědičnost
• Zděděná a vychozí hodnota, vlastnost all
• Selektory
• Pseudotřídy

Nové CSS vlastnosti

Text

• text-decoration: nejen podtržení
• text-overflow: přetečení textu
• text-shadow: stíny u textu
• font-face: webové fonty
• font-display: způsob náhrady textu
• size-adjust: úprava velikosti znaku

Pozadí

• background-clip: ořez pozadí
• background-origin: způsob ořezu
• background-size: velikost pozadí
• Více obrázků pomocí image-set()
• Barevné přechody
• Vícenásobná pozadí

Rámečky

• border-image: obrázky jako rámeček
• border-radius: zaoblení rohů

Box

• box-shadow: stíny u prvku
• box-sizing: počítání velikosti prvku
• aspect-ratio: poměr stran

Transformace a animace

• transform: transformace prvku
• transition: animace přechodem
• animation: animace prvku

Layout

• display: typ zobrazení prvku
• Media Queries
• Container Queries
• Style Queries
• Vícesloupcový layout: vlastnost columns
• Flexbox
• CSS grid: v MSIE, příklady, masonry, subgrid, proč grid?
• CSS Box Alignment a gap
• order: změna pořadí položek
• Logical Properties

Další vlastnosti

• Proměnné a příklady využití
• @supports: feature queries
• Jednotky + CSS3 jednotky
• object-fit a object-position
• calc(): výpočty v CSS
• Funkce min(), max(), clamp()
• RGBa barva
• Box Reflection: odlesk prvku
• contain + content-visibility

CSS triky a řešení

• Poměr stran obrázků
• Poměr stran médií
• Padding trik
• Optimalizace dat CSS
• Velikost okna v CSS
• Patička přilepená ke spodní hraně okna
• Animované zatržítko
• Elastická typografie
• Hlavička s videem na pozadí

Nástroje

• Stylelint
• PostCSS
• Bootstrap Reboot
• CSS Houdini
• CSS preprocesory

Atd.

• Weby bez CSS
• CSS a tisk knih
• Co je „CSS pixel“?
• Co by měl umět webový kodér?