CSS Elements Queries

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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Skloňování v CSS

„Programování“ v HTML a CSS

I bez úprav logiky serverového skriptu lze lecčeho dosáhnout samotným CSS.

Doctype

HTML značka <!doctype>

Jaký (a jestli vůbec) psát <!doctype> do stránky?

Stylování atributu title

Vlastní styl bubliny title

Jaké jsou možnosti pro vlastní vzhled nápovědy, která se objevuje při vyplnění atributu title.

Značka <body> jako obal stránky

Obal <body>, nebo <div id=container>?

Ve standardním režimu lze značku <body> stylovat jako normální <div>. Má to cenu?

Centrování v CSS

Centrování na webových stránkách

Ucelený popis různých způsobů vertikálního i horizontálního centrování. Se známou i neznámou šířkou nebo výškou.

Komentáře