Přeskočit k obsahu

Novinky v CSS: Skvělé! Až na to, že nefungují všude…

25.02.2025
Jan Pulpan

Nové funkce v CSS a HTML přibývají světelnou rychlostí. Ač vypadají lákavě, při vývoji webu mě často napadá otázka: Použít, nebo nepoužít?

Pryč jsou doby, kdy HTML a CSS bylo více méně stagnující a kdy se nová verze oznamovala s pompézností nového roku.

Moderní vývojář musí sledovat novinky a hlavně správně rozhodnout, kdy s jejich použitím počkat, použít je s malou berličkou anebo pustit do uživatelů na plno!

Bylo nebylo (aneb krátká historie HTML/CSS)...

Když jsem začal vytvářet jednoduché webové stránky používal jsem prostě HTML a CSS - konkrétně HTML 4.01 a CSS 2.1.
Dlouhá léta bylo vše stejné a věci se dělaly prostě jedním způsobem.

V roce 2011 přišlo CSS3 a vše naprosto změnilo. Najednou se layouty dělaly s flexboxem (ano pamatuji si i weby dělané zcela v HTML tabulkách), později s pomocí grid. Mohli jsme web animovat a stránky obecně rozhýbat.

V roce 2014 jsme k tomu dostali HTML5 s novými tagy pro audio/video, canvas, nová API, atd.

Aktualizace obou systémů ale přinesly ještě jednou velkou změnu. HTML a CSS přestaly vydávat ve velkých verzích, na které se několik let čekalo. Specifikace se rozdělily na jednotlivé moduly, které jsou průběžně vyvíjeny a implementovány do prohlížečů.

A každý prohlížeč implementuje nové funkce postupně a často v různých fázích.

Jeden web může na různých prohlížečích vypadat jinak a kolikrát být naprosto nepoužitelný.

Je pravda, že moderní prohlížeče se snaží a podpora nových funkcí se stále zrychluje. Jenže spousta uživatelů nepoužívá nejnovější verzi, což přináší další level komplikací.

Proto je důležité při vývoji webu sledovat podporu experimentálních funkcí a vědět, kdy a jak je začít používat.

Jak zjistíš, jaké HTML a CSS můžeš používat

Pro ujištění podpory funkce, o které si nejsem jistý, používám caniuse.com.

Na webové stránce zadáš název funkce (např. grid, :has, popover, ...) a dáš vyhledat.

Já si v settings/nastavení ještě rád upravuji toto nastavení, abych viděl data, podle kterých se rozhodu (toto je ale naprosto na tobě):

  • v záložce Usage data (údaje o používání) si naimportuju země, pro které primárně web vytvářím
  • v záložce Browser shown (zobrazené prohlížeče) přepnu Browser order (pořadí prohlížečů) na By usage (dle použití) - toto ti prohlížeče seřadí dle procenta používání uživateli

Stránka vygeneruje následující tabulku s nejpoužívanějšími prohlížeči v jejich aktuální verzi (zvýrazněné), nadcházející verzi (pod aktuální) a standardně 2 předchozí verze (nad aktuální).

Screenshot z webu caniuse.com ukazující podporu funkce CSS subgrid

Barevné kódy označují stupeň podpory dotazované funkce:

  • 🟢 Zelená: Funkce je podporována.
  • 🟡 Žlutá: Částečná podpora nebo nutnost povolit experimentální funkci.
  • 🔴 Červená: Funkce není podporována.

U některých verzí/prohlížečů je také ikonka s poznámkou, která často obsahuje důležitou informaci o omezení (např. potřebné použití prefixu -webkit-), polyfillech nebo experimentálních verzích prohlížečů.

Nejdůležitější je ale hodnota vlevo nahoře ukazující skutečnou podporu dané funkce, v tomhle příkladu 91,59% na celém světe a 92,8% v České republice.

Při jakém procentu podpory funkci používat

Obecně se řídím podle tohoto:

  • nízká podpora (<80 %) - funkci vůbec nepoužívám, najdu jiné řešení
  • střední podpora (80-90 %) - funkci používám pouze se zálohovým řešením (fallback)
  • vysoká podpora (>90 %) - lze používat

V praktickém použití, ale zvažuji ještě specifické okolnosti pro daný web.

Pokud plánuji, že web budou navštěvovat uživatelé hlavně přes firemní počítače (např. B2B web, web pro firemní konzultanty, apod), přikládám větší pozornost podpoře v prohlížeči Edge, protože jej nejčastěji používají.
Také přísněji zvažuji hodnotu podpory (místo 90% počítám s 93, 95% nebo i více), protože tito uživatelé často nepoužívají nejnovější verze prohlížeče a chci si být jistější, že se web zobrazí správně.

Stejně vyhodnocuji i weby, které často navštěvují starší lidé, protože u nich platí podobné - používají Edge a často ne aktuální verzi.

Naopak u webů zaměřených pro mladé publikum více zvažuji podporu mobilních prohlížečů.

Důležité je ale také pro co funkci chceš použít.
Je to pouze lehká úprava vzhledu konkrétního prvku? Pak podporu nezvažuji tak přísně.
Pokud jde ale o něco, co když nebude fungovat, celý web rozhodí a uživatel to rozhodně pozná, podpora musí být daleko vyšší.

Co je zálohové (fallback) řešení

Když už víš, že funkce nebude na všech zařízeních dostupná, doplníš i zálohové (fallback) řešení, u kterého víš, že má vyšší podporu.
Některé funkce ale ani někdy nemají jiné řešení s čistým CSS, pak jedině zbývá upravit HTML anebo pracovat s Javascriptem.

Automaticky nasazené zálohové řešení je v praxi dostupné pro CSS. Pokud bys chtěl použít nějakou experimentální HTML funkci, nezbývá ti nic jiného než nasadit Javascript.

Pokud funkce nepodporuje přímé fallback rešení, ještě jednou bych zvážil jestli je opravdu nutná a případně našel úplně jiné řešení.

Zda prohlížeč CSS funkci podporuje, můžeš v kódu zjistit velmi jednoduše a připravit zálohové řešení.
V praxi to vypada takto:

@supports (text-wrap: balance) {
    h1 {
        text-wrap: balance;
    }
}
@supports not (text-wrap: balance) {
    h1 {
        hyphens: auto;
    }
}

@supports (s funkcí v závorce) použiješ pro kontrolu zda je daná funkce dostupná a pak ji uvnitř bloku použiješ.
Zálohové řešení naopak definuješ blokem @supports not (s funkcí v závorce) a dovnitř vložíš fallback kód.

Pár příkladů zajímavých funkcí a jaké zálohové řešení používám (nebo jsem používal):

CSS :has() – rodič vybírá potomka

Pseudo-třída :has() umožňuje stylovat rodiče na základě jeho potomků (např. zvýraznit div, pokud obsahuje obrázek).

Fallback (zálohové) řešení: V čistém CSS neexistuje přímý fallback. Lze použít JavaScript, který elementu s určeným potomkem přidá třídu, kterou pak můžeš stylovat. Já (a většina vývojářů) radši rodičovi s potomkem ručně přidám CSS třídu sám, např. .has-img, a styluji ten.

CSS @container (Container Queries)

Toto ti umožnuje stylovat prvky podle jeho rodiče a ne celé obrazovky jako jsi zvyklí s @media.

Fallback (zálohové) řešení: Zde se nabízí vrátit se zpět ke stylování dle velikosti celé obrazovky pomocí @media

CSS text-wrap: balance – lepší zalamování textu

Text wrap nastavené na balance zalomí víceřádkový nadpis, tak aby vypadal vyváženěji. Výsledek je, že jednotlivé řádky budou mít přibližně stejnou délku a celý nadpis je tak lépe čitelnější.

Fallback (zálohové) řešení: Viz. uvedený příklad kódu zálohového řešení, zde nasazuji hypens: auto. To automaticky rozdělí slova na dva řádky, aby řádky celkého nadpisu pusobili harmonicky.
S pomocí entity &shy; můžeš definovat, kde chceš, aby se slovo rozdělilo, a pomocí &nbsp; zase která slova se nemají řádkou oddělovat - oboje ale vyžaduje zásah do HTML kódu.

HTML popover – vestavěná podpora pro vyskakovací prvky

A abych uvedl příklad i pro HTML, popover umožňuje vytvořit jednoduché vyskakovací okno (popover) bez použití JavaScriptu.

Fallback (zálohové) řešení: Jak už jsem psal, u HTML se u zálohového řešení nevyhneme JavaScriptu.
V tomto případě můžeš použít např. tento kód, který nejdřív zkontroluje, zda prohlížeč nepodporuje HTML popover, a zobrazí ho napřímo:

if (!HTMLDialogElement.prototype.showPopover) {
    document.getElementById('menu').style.display = 'block';
}
crossmenu