Moderní tvorba webových aplikací

O webu

CSS Elements Queries

Jak zajistit různý vzhled elementů v závislosti na jejich rozměru.

4 minuty

Základním prvkem responsivního CSS je pravidlo @media, které umožňuje aplikovat různé styly v závislosti na velikosti dostupné plochy v okně prohlížeče.

@media (max-width: 40em) {
  /* kód pro šířku do 40 em */
}

Pro tuto techniku se používá název Media Queries.

Element Queries je zatím teoretický koncept, jak zvláštní styly připojit v závislosti na velikosti konkrétního elementu.

Příklad problému

Pro zjednodušení jde uvažovat dvousloupcový layout, který se při šířce pod 40 em přeskládá pod sebe. Ukázka.

.sloupec {
  width: 50%;
  float: left;
}
@media (max-width: 40em) {
  .sloupec {
    width: 100%;
  }
}

Na toto přeskládání typicky budou navázány další úpravy elementů uvnitř sloupců.

Co ale v případě, že bude nutné přidat sloupec třetí?

Všechna @media pravidla pro vnitřní obsah budou mimo a bude je nutné předělat.

Ještě horší situace nastane v případě, že nějaký další sloupec bude volitelný (např. reklamní bannery pro nepřihlášené uživatele), najednou se musí vytvořit pro celý web dvě sady @media pravidel.

Řešení s element query

Mnohem elegantnější a universálnější by tak bylo psát něco jako:

.obal-dvou-sloupcu:media(max-width: 40em) .sloupec {
  width: 100%;
}

Element .sloupec by měl potom 100% šířku v případě že .obal-dvou-sloupcu je menší než 40 em.

Problém implementace

Implementovat Element Queries do prohlížečů je trošku oříšek, protože vnitřní elementy mohou měnit rozměry svých rodičů a obráceně, čímž vzniká problém, zda bylo dřív vejce nebo slepice.

Řešení v JavaScriptu

Zjistit aktuální rozměry jde snadno JavaScriptem. Například šířka je v element.offsetWidth.

Na základě toho jde v CSS přiřadit nějakou třídu, která zajistí požadovaný styl.

Problém řešení využívající JS je v tom, že zjišťování rozměrů a aplikace stylů způsobí překreslení stránky.

Hotové řešení

Právě JS využívá hotové řešení CSS Element Queries (ukázka):

Tento skript přidává elementům, které mají reagovat na změnu své velikosti, atributy min/max-width/height, které jde potom používat v CSS jako selektory:

.element {
  …
}

.element[min-width~="480px"] {
  …
}

.element[min-width~="480px"] .vnitrek {
  …
}

Řešení se snaží být relativně šetrné na výkon a funguje již od IE 10.

Nevýhoda je jeho závislost na JS, takže obsah využívající element queries po načtení a provedení skriptu poskočí, pokud tedy náhodou rozměry neodpovídají výchozí variantě (bez atributového selektoru).

Flexboxy

Od IE 10 jde v některých případech – jako je třeba responsivní mřížka – vyřešit problém použitím flexboxů.

Elementům se nastaví flex-grow: 1 a pevná šířka (ne v procentech). Počet elementů se potom automaticky přizpůsobuje, aby vyplnil dostupný prostor, s tím, že se přibližně drží nastavená šířka.

Odkazy jinam

Související články

Znázornění možnosti scrollování

Jak dát uživateli informaci, že je možné někam scrollovat.

10 minut

Plynulé scrollování na obsah

Jak vytvořit plynulé odrolování na určitou část stránky.

6 minut

Různá šířka <input type=number> s min/max

Proč má <input type=number> různou výchozí šířku v závislosti na min/max atributech.

3 minuty

Poskakování stránky kvůli posuvníku

Jak zabránit, aby obsah stránky poskakoval v závislosti na posuvníku.

8 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025