Responzivní breakpointy: Realizace v kódu (CSS, Sass i PostCSS)

Celý článek

Text vyšel původně na webu autora.

Možností, jak pracovat s breakpointy, je více:

• Proměnné
• Mixiny
• Knihovna Sass MQ
• Media Queries Level 4
• PostCSS a CSSnext

Jednoduše v proměnných

Následuje příklad ze zdrojáků Vzhůru dolů.

Definice breakpointů:

$vd-screen-sm: 600px;
$vd-screen-md: 768px;
$vd-screen-lg: 1100px;

Definice rozmezí:

$vd-screen-sm-up: "(min-width: #{$vd-screen-sm})";
$vd-screen-md-up: "(min-width: #{$vd-screen-md})";
$vd-screen-lg-up: "(min-width: #{$vd-screen-lg})";

$vd-screen-sm-down: "(max-width: #{$vd-screen-sm - 1})";
$vd-screen-md-down: "(max-width: #{$vd-screen-md - 1})";
$vd-screen-lg-down: "(max-width: #{$vd-screen-lg - 1})";

A ještě použití:

@media #{$vd-screen-sm-up} { }

Jak vidíte, zápis použití je díky specifikům Sassu poněkud krkolomnější a celkově jednoduchá implementace vám u větších projektů nemusí stačit. Pojďme se podívat na další, propracovanější metody.

Pomocí mixinů

Další možnost je vytvořit si mixiny pro práci s rozmezími platnosti mixinů. Pojďme rovnou k použití, tam je to vidět přímočařeji.

/* Breakpoint "sm" a větší šířka viewportu: */
@include media-breakpoint-up(sm) { }

/* Breakpoint "lg" a menší šířka viewportu: */
@include media-breakpoint-down(lg) { }

/* Jen rozmezí následující za breakpointem "sm" */
@include media-breakpoint-only(sm) { }

/* Vše mezi breakpointy "sm" a "lg": */
@include media-breakpoint-between(sm, lg) { }

Definování mixinů si případně nastudujte ve zdrojácích Bootstrapu.

Nevýhoda? Před použitím si musíme naprogramovat celou řadu uvedených mixinů. Nebo použít Bootstrap, což vám jen kvůli správě breakpointů rozhodně nedoporučuji. Je tady ale pár knihoven, které umí spravovat právě jen breakpointy.

Pomocí knihovny: Sass MQ

Knihovna vám zařídí kompletní správu breakpointů a rozmezí. Nejprve si nadefinujeme seznam bodů zlomu, včetně jejich pojmenování. Následuje příklad z dokumentace:

$mq-breakpoints: (
  mobile:  320px,
  tablet:  740px,
  desktop: 980px,
  wide:    1300px
) !default;

Následují možnosti použití, odpovídající předchozímu příkladu. Prostě zavoláte mixin mq():

/* Breakpoint "mobile" a větší šířky viewportu: */
@include mq($from: mobile) { }

/* Breakpoint "tablet" a menší šířky viewportu: */
@include mq($until: tablet) { }

/* Jen rozmezí následující za bodem zlomu "tablet" */
@include mq(tablet) { }

/* Vše mezi breakpointy "mobile" a "desktop": */
@include mq(mobile, desktop) { }

/* Vlastní breakpoint: */
@include mq('only screen and (min-width: 1440px)') { }

Je navíc možné pracovat s vlastními breakpointy, takže způsob volání zůstává konzistentní napříč celým CSS:

@include mq('only screen and (min-width: 1440px)') { }

Funkcí a možností využití je zde ale více. Chcete-li více informací, odkážu vás na web knihovny: github.com/sass-mq/sass-mq

Všechna zmíněná řešení mají jednu poměrně citelnou nevýhodu: Používají preprocesor, takže zavádějí nové jazykové prvky do kódu projektu, což může zhoršovat jeho čitelnost.

Ukažme si tedy ještě dvě možnosti, které jsou blíže k čistému CSS. Ale rovnou říkám, že zatím vám jejich využití nedoporučím.

Pomocí Media Queries Level 4, což bohužel zatím neumí prohlížeče

Tohle uvádím hlavně proto, abychom viděli, kam nás vede vývoj standardů. Konsorcium W3.org ve čtvrté verzi specifikace Media Queries chystá „Range Context“, což je zjednodušený zápis platnosti dotazu:

@media (width > 320px) { }
@media (width <= 320px) { }
@media (400px <= width <= 700px) { }

Pokud je mi známo, v době psaní článku tohle žádný prohlížeč neumí. Pro více informací utíkejte do specifikace na w3.org/TR/mediaqueries-4.

Pomocí PostCSS, což je bohužel jen polovičatý preprocesor

Mnoho vývojářů se nechalo zlákat postprocesorem PostCSS a snaží se jím nahrazovat preprocesory. V mnoha případech to dává smysl, ale zrovna u definice breakpointů bych se touhle cestou nevydával. Zápis definice i použití vypadá nadějně:

@custom-media --small-viewport (max-width: 30em);

@media (--small-viewport) { }

Ovšem pozor – dnešní prohlížeče tomu nerozumí. Potřebujete tedy CSSnext, transpilátor budoucího CSS do stylů, kterým rozumí dnešní prohlížeče. CSSnext v případě uvedeného zápisu ale vychází z draftu (!) specifikace Media Queries 5. To je věc, která se může ještě mnohokrát změnit a do prohlížečů dorazí… až naprší a uschne.

V PostCSS bude ve srovnání s preprocesory navíc dost složité připravit logiku, kterou pro práci s kódem v Media Queries potřebujete. Tuhle cestu tedy zatím nedoporučuji. Pro zájemce je zde ještě můj článek o PostCSS (a CSSnext).

Můj závěr je tedy jasný:

• Pokud můžete, využijte preprocesor a Sass MQ nebo podobnou malou knihovnu.
• Těšte se na Media Queries čtvrté generace.

Máte ještě jiné tipy ke správně breakpointů? Napište mi nebo přidejte komentář.