Responzivní design, formátování textu

Responzivní design

Responzivní design je dnes základním prvkem moderních webových stránek. Aby se obsah správně zobrazoval na různých zařízeních (od mobilních zařízení přes tablety až po velké monitor), můžeme využít pro rozložení stránky CSS Grid a Flexbox. Tyto specifikace nám umožňují flexibilně rozvrhnout prvky na stránce, přizpůsobovat jejich velikost i zarovnání a reagovat na dostupný prostor. Ve většině případů si s nimi vystačíme, protože dokážou dynamicky měnit layout bez nutnosti složitějších zásahů.

Media queries

Někdy ale samotný grid nebo flex nestačí. Například když chceme zásadně změnit strukturu stránky, jako třeba skrýt nebo zobrazit určité prvky, upravit typografii nebo úplně přeuspořádat obsah pro menší obrazovky. V takových situacích přichází na řadu media queries, tedy podmíněná CSS pravidla, která se aplikují jen při splnění určitých podmínek.

Media queries fungují na principu podmínky pro konkrétní typ média (all, print nebo screen) a jeho vlastnosti. Jinými slovy říkáme, aby se aplikovaly tyto styly pouze pokud platí dané podmínky pro dané médium. Nejčastěji definujeme podmínku pomocí vlastností jako min-width, max-width nebo orientation, a k ní přiřadíme konkrétní stylování (podmínky lze samozřejmě kombinovat pomocí and). Typický příklad může vypadat tak, že pro obrazovky širší než 768px použijeme vícesloupcové rozložení, zatímco na menších zařízeních přepneme na jednosloupcové. Kromě šířky lze reagovat i na výšku, orientaci zařízení nebo jeho třeba jeho rozlišení.

.container {
  display: flex;
  flex-direction: column;
}

/* Pouze pro obrazovky širší než 768px */
@media screen and (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

Container queries

Alternativou k media queries jsou container queries, které umožňují aplikovat styly na základě šířky rodičovského elementu. Na rozdíl od media queries, které reagují na velikost celé obrazovky (viewportu), container queries pracují s šířkou elementu, ve kterém je prvek umístěn. To může být užitečné třeba v moderním komponentovém designu, kde se stejný prvek může objevovat na různých místech stránky v odlišných šířkách, ale přitom by se měl chovat konzistentně podle svého okolí, ne podle celé stránky.

.card-container {
  container-type: inline-size;
  container-name: my-container;
}

.card {
  display: block;
  padding: 12px;
  background: #f2f2f2;
}

@container my-container (min-width: 400px) {
  .card {
    display: flex;
    gap: 16px;
    align-items: center;
  }
}

S nyní získanými znalostmi se pojďme podívat na návrh zápočtového projektu. Kde by se daly použít media queries?

Formátování textu

Na každé smysluplné webové stránce je potřeba pracovat s textem – ať už jde o import vhodného fontu, nastavení správné velikosti, řádkování nebo textových dekorací. Práci s textem se ostatně nevyhneme ani při řešení zápočtového projektu.

Vhodné tagy

Na stránce se často objevují i specifické typy textu, jako jsou adresy, zdrojový kód nebo zkratky, které je vhodné od ostatního obsahu odlišit. Toho bychom ale neměli dosahovat pouze pomocí CSS, nýbrž i správným použitím HTML značek, které nesou význam. Těchto značek existuje celá řada. Mezi nejdůležitější značky patří například <strong> pro důležitý text, <em> pro zdůraznění, <small> pro doplňující informace nebo poznámky a <i>, typicky používaný pro pojmy v jiném jazyce, nebo <b> pro zvýraznění bez sémantiky. Pro citace se používají <cite>, <blockquote> pro delší úseky a <q> pro kratší citace. Pokud pracujeme s odbornými pojmy, hodí se <dfn>, pro zápis kódu slouží <code> a pro zkratky <abbr>. Důelžitými tagy jsou <time> pro datum a čas a <address> pro kontaktní údaje.

Podívejme se také nyní na zápočtový projekt a zkusme si nějaké adepty na použití těchto tagů najít.

Práce s písmem a textem

Na každé webové stránce je velmi důležité zvolit vhodné písmo. Písmo do stránky nejčastěji vložíme pomocí webové služby (např. Google Fonts), kdy do HTML přidáme odkaz pomocí <link> do hlavičky dokumentu. Takto importované písmo pak v CSS použijeme pomocí vlastnosti font-family, kde uvedeme jeho název.

<head>
    .....
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,400;1,900&display=swap" rel="stylesheet">
</head>

/* CSS kód */
* {
    font-family: 'Roboto', sans-serif;
}

Kromě samotného typu písma můžeme nastavit také jeho velikost pomocí font-size (v různých jednotkách, ve výchozím stavu je velikost 16px), tloušťku pomocí font-weight (např. 400 nebo 700) a šířku pomocí font-stretch. Díky těmto vlastnostem můžeme snadno ovlivnit základní vzhled textu na celé stránce.

Další důležité vlastnosti se týkají samotného zobrazení textu. Pomocí text-align můžeme zarovnat text. S line-height nastavujeme výšku řádku, což výrazně ovlivňuje čitelnost. Vlastnost text-decoration slouží například pro podtržení nebo přeškrtnutí textu. letter-spacing slouží k úpravě mezery mezi jednotlivými písmeny v textu, word-spacing naopak nastavuje velikost mezer mezi jednotlivými slovy. A nakonec white-space určuje, jak se bude zacházet s mezerami a zalomením řádků (např. zda se mají zachovat, nebo automaticky upravovat). Tyto vlastnosti nám umožňují doladit typografii a zajistit, aby byl text nejen hezký, ale i dobře čitelný.

Kontrolní otázka - jaké základní poučky bychom u písma měli dodržovat?

Napadnou Vás elementy na stránce, kde by se přímo hodilo použití těchto vlastností?

Podívejme se nyní na zápočtový projekt - mohli bychom někde nastavit výše zmíněné vlastnosti?