Bootstrap 5: první dojmy

Tak jsem se konečně dočkal. Vyšel Bootstrap 5. Pravda, zatím jen v beta verzi, ale ta už by měla být použitelná i na vážněji míněných projektech. Že máme BS5 brát vážně, dokládá i to, že na webu getbootstrap.com na titulní stránce naleznete dokumentaci k pětce, přičemž aktuální čtyřka se skrývá až v rozbalovacím menu.

Taktéž na GitHubu je v hlavní větvi Bootstrap 5 a pokud vás zajímá Bootstrap 4, musíte se přepnout do větve v4-dev. Dobrou zprávou je, že celou řadu novinek zapracovali vývojáři zpětně i do verze 4. Navíc autoři slibují už jen vychytávání chyb a vylepšování, ale žádné přelomové změny. Ovšem minimálně ve dvou ohledech je Bootstrap 5 přelomový už nyní:

• Skončila podpora protoprohlížečů, jakými bývaly Internet Explorer nebo MS Edge. Kdo je podporovat musí, nechť setrvá u BS4.
• Odstranila se závislost na jQuery, vše vývojáři přepsali do čistého JS.

Komu je to málo, z výše uvedeného vyplývají tyto změny:

• Konečně se proměnné vlastnosti začaly (byť zatím nesměle) používat jako vlastnosti a nikoli jako (s)prosté „CSS proměnné“.
• Javascriptové pluginy lze použít jako ES moduly.

Bonbónek navíc:

• CSS grid vstoupil na scénu (zatím jen zadními vrátky, ale přece).

Pojďme se podívat na výše uvedené změny podrobněji.

Podpora prohlížečů

Nejvýmluvnější bude browserslist, přičemž pozornost věnujte zejména komentáři a poslednímu řádku: Bootstrap 5 kromě Internet Exploreru nepodporuje ani Edge s původním vykreslovacím jádrem EdgeHTML.

# https://github.com/browserslist/browserslist#readme

>= 0.5%
last 2 major versions
not dead
Chrome >= 60
Firefox >= 60
# needed since Legacy Edge still has usage; 
# 79 was the first Chromium Edge version
# should be removed in the future when its usage drops 
# or when it's moved to dead browsers
not Edge < 79
Firefox ESR
iOS >= 10
Safari >= 10
Android >= 6
not Explorer <= 11

Kromě toho Bootstrap neřeší žádné proxy prohlížeče, jakým je na příklad Opera Mini. To ale neznamená, že je netestuje. Kromě automatických testů na BrowserStacku testují Bootstrap dnes a denně tisíce vývojářů a miliony uživatelů.

To je dle mého soudu největší a často opomíjená síla a kvalita tohoto projektu. Můžete si být jisti, že každý řádek (S)CSS má své opodstatnění. K pročtení v tomto směru doporučuji _reboot.scss, jehož komentáře nahradily zavrženou prohlížečovou zeď nářků (Wall of browser bugs), tu totiž v nové dokumentaci nenajdete.

Vanilkové javascriptové pluginy

Je to tak, závislosti na jQuery se javascriptová část Bootstrapu zbavila. Přesto zůstává zpětně kompatibilní a pokud Bootstrap detekuje jQuery v objektu window, přidá všechny komponenty i ve verzi pro jQuery.

// Bootstrap 4: jQuery
$('#myModal').modal({
  keyboard: false
})

// Bootstrap 5: vanilla JS
const myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

Nově také půjde Bootstrap použít jako modul (konkrétně ES modul, ESM).

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

Novým, nebo lépe staronovým pluginem je accordion. Ten se objevil již ve verzi 2, pak pokračoval jako součást/rozšíření pluginu collapse a nyní se osamostatnil. Jako u všech komponent, i zde dbají autoři na přístupnost, kterou v případě rozbalovacích prvků zlepšíme správným použitím aria- atributů.

Při inicializaci přes data- atributy (doporučovaný postup) je třeba si dát pozor na nově zavedený jmenný prostor -bs-, např. data-bs-toggle="modal".

(Dart) Sass

Stylopis je napsán v Sassu, přesněji v syntaxi SCSS. Z jeho nástrojů se asi nejvíce používají mapy, které generují všemožné varianty komponent a jejich stavů. Samotná struktura SCSS souborů se tolik nezměnila, je jen o něco více rozčleněna od podadresářů: své vlastní dostaly formuláře a podpůrné třídy (helpers).

Jakmile se oznámilo, že Dart Sass zůstává jedinou oficiálně podporovanou kompilační knihovnou, vývojáři na něj přešli během pouhých tří dnů. Jaké možnosti se jim tím otevřely, popisuje Adam Kudrna.

Proměnné vlastnosti

V kódu se pak stále více pracuje s proměnnými vlastnostmi (CSS custom properties), i když pořád nejsou vytěženy na maximum – dvou třetin (ze zhruba tří desítek) se využívá k nastavování barev. Ovšem s proměnnými vlastnostmi mají autoři velké plány. Jednak to slibují v dokumentaci, jednak lze v kódu nalézt jejich další (přibývající) výskyty. Nastavuje se tak například oddělovač v drobečkové navigaci nebo odsazování pomocí utilit pro tvorbu layoutu (třídy .g-*). Proměnnými vlastnostmi chtějí autoři mimo jiné zjednodušit prototypování, ke kterému se Bootstrap báječně hodí již nyní. Co teprve, až bude proměnnými protkán skrznaskrz…

Zajímavě jsou v tomto ohledu použity u barevných variant tabulek, kde se elegantně kombinuje barevnost s tmavým/světlým motivem. Zaujala mne tu i tvorba pozadí pomocí vlastnosti box-shadow. Stín se umisťuje dovnitř prvku (hodnota inset), přičemž má nastaven vysoký rozptyl a vynulovány zbylé hodnoty (kromě barvy). Pro srovnání úryvek kódu z předchozí verze Bootstrapu stylující tytéž prvky.

/* Bootstrap 5 */

.table {
  --bs-table-bg: transparent;
  --bs-table-striped-color: #212529;
  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
  --bs-table-active-color: #212529;
  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
  --bs-table-hover-color: #212529;
  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  vertical-align: top;
  border-color: #dee2e6;
}

.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  background-color: var(--bs-table-bg);
  border-bottom-width: 1px;
  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.table-primary {
  --bs-table-bg: #cfe2ff;
  --bs-table-striped-bg: #c5d7f2;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #bacbe6;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #bfd1ec;
  --bs-table-hover-color: #000;
  color: #000;
  border-color: #bacbe6;
}


/* Bootstrap 4*/

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
}

.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

.table-primary,
.table-primary > th,
.table-primary > td {
  background-color: #b8daff;
}

.table-primary th,
.table-primary td,
.table-primary thead th,
.table-primary tbody + tbody {
  border-color: #7abaff;
}

.table-hover .table-primary:hover {
  background-color: #9fcdff;
}

.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
  background-color: #9fcdff;
}

Plné znění: Bootstrap 5, Bootstrap 4.

Rozdíl v přístupu je patrný, nová verze je tvárnější i přehlednější.

Použití proměnných pro jiné hodnoty než barvy pak nalézáme u komponenty .ratio  (někdejší .embed), primárně určené k zresponzivnění prvků třetích stran (videa, mapy atp.).

.ratio::before {
    display: block;
    padding-top: var(--aspect-ratio);
    content: "";
}

.ratio-4x3 {
    --aspect-ratio: calc(3 / 4 * 100%);
}

K vytvoření variant nad rámec toho, co nabízí Bootstrap v základu, lze buď použít Utility API, nebo danému prvku nastavit proměnnou vlastnost --aspect-ratio v atributu style:

<div class="ratio" style="--aspect-ratio: 25%;">
    <iframe></iframe><!-- poměr stran 4:1 -->
</div>

Změny v komponentách

Barvy

Barevné schéma je bohatší s tím, že důraz se klade na dostatečný kontrast. Ten se v průběhu vývoje zvýšil z 3:1 na 4,5:1. Díky sassovským mapám si schéma můžeme plně přetvořit k obrazu svému.

Drobnost, která potěší: tlačítko .close už křížek nevykresluje znakem ×, ale SVG ikonou (jako obrázek na pozadí pseudoelementu ::after). Kdo jste to někdy zarovnával, dáte mi za pravdu, že to může být pěkná otrava.

Ikony

Když už je řeč o ikonách. Ty má konečně Bootstrap vlastní, ale pozor, nejsou součástí frameworku, nýbrž jeho rozšířením. Autoři na nich pracovali souběžně s pracemi na verzi 5, přičemž jejich verze 1.0.0 vyšla koncem srpna (poslední update 1.2.0 čtyři dny po betě BS5). K mání je bezmála 1200 SVG ikon, které navíc všechny lze přeložit do ikonofontu. Ty já mám sice za překonané, ale možná to některým projektům přijde vhod. K převodu SVG ikon na font (ve formátech .woff a .woff2) slouží nástroj Fantasticon. Pro jistotu připomínám, že knihovnu ikon lze použít zcela samostatně a nezávisle na Bootstrapu (a rovněž zdarma).

Jumbotron

Některé komponenty z frameworku zmizely ve prospěch utilit. Konkrétně se to týká komponent .media a .jumbotron. Schematicky by se to dalo vyjádřit takto:

.jumbotron ~= .px-3 .py-4 .px-sm-4 .py-sm-5 .bg-light .rounded-3 .mb-3

CSS grid

Třídou .d-grid do Bootstrapu vstoupil CSS grid. Vstoupil potichu a postává zatím stranou. Větší využití plánují autoři do dalších verzí frameworku. Zatím slouží k tomu, aby (ještě spolu s utilitou .gap) nahradil třídu .btn-block.

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Knoflík</button>
  <button class="btn btn-primary" type="button">Čudlíček</button>
</div>

Jedná se o čerstvý přírůstek do stylopisu, nechme se překvapit, zda se dočká dalšího využití. Větší plány s ním autoři mají až do Bootstrapu 6…

Dark mode

Autoři se sice nikde o kompletním tmavém režimu nezmiňují, ale tmavé varianty jednotlivých komponent v tichosti přibývají. Ztmavly například dropdown, navbar nebo carousel (ano, tuhle komponentu vaši klienti přeci chtějí). K vytvoření plnohodnotného tmavého tématu pak bude nutné sáhnout po utilitách.

Formuláře

Milou novinkou jsou plovoucí label.

Utility (API)

Utility dostaly API (v rámci Sassu), čímž jsme získali plnou kontrolou nad tím, které utility třídy se ve výsledném CSS objeví. Současně si můžeme vytvářet utility třídy vlastní. Podrobněji jsem je popsal ve starším článku.

RTL mode

Záměr plně podporovat jazyky psané zprava doleva přinesl řadu změn, které se dotknou všech, kdo Bootstrap používají. Podpora je zatím ve stádiu experimentu, ale v dokumentaci už nalezneme příklady použití RTL na různých komponentách. Autoři žádají vývojáře, kteří staví své weby v arabštině, hebrejštině a jiných obdobně psaných jazycích, o pomoc a zpětnou vazbu.

Nicméně to, co ovlivní všechny, je související zavedení logických vlastností box modelu. To znamená, že místo margin-left se nyní píše margin-inline-start, což by nám sice mohlo být jedno, kdyby se nezměnily i názvy příslušných utilit. Nově si je tedy třeba zvyknout na to, že místo .ml-4 je třeba psát .ms-4 (~ margin-start) a místo .pr-3 se píše .pe-3 (~ padding-end). Snadnějšímu přechodu na nové názvosloví slouží i migrační příručka.

Podrobněji se na RTL, postavené na knihovně RTLCSS, podíváme někdy v budoucnu, až se více usadí.

Závěry

Posledně zmíněná novinka (podpora RTL) dokládá, že Bootstrap je skutečně celosvětovým fenoménem. To mu přináší obrovskou oporu v podobě zpětné vazby od statisíců vývojářů. Díky ní se můžete spolehnout, že každý řádek v košatém kódu má své opodstatnění.

Jak se nový Bootstrap ujme v konkurenci mladších knihoven, ze kterých mu na paty šlape zejména Tailwind CSS, ukáže až čas. Co je však patrné již nyní, Bootstrap je skutečně moderním frameworkem. Odhozením přebytečné zátěže v podobě podpory IE11 a závislosti na jQuery si autoři uvolnili ruce k psaní skutečně moderního CSS a JS.

Navíc v případě CSS zdaleka nevyčerpali všechny nové vychytávky, které v současnosti prohlížeče podporují. (Přiznám se, že javascriptovou část frameworku takto posoudit nedokážu, budu rád za případné doplnění v komentářích.) Změnil se i nástroj pro generování dokumentace, Jekyll byl nahrazen Hugem. Duch doby je také znát i v takových detailech, jako je přejmenování proměnné whiteList na allowList. Stejně tak v Gitu nehledejte master, nýbrž main.

Přechod z verze 4 není úplně bezbolestný, ale díky promyšlenému zpětnému zavádění vybraných novinek je poměrně přímočarý. Poslední várku novinek takto dostane verze 4.6.0 a kdo bude chtít více, bude muset migrovat.

Oproti předchozí verzi framework nepatrně zhubnul:

Ze změn oproti předchozí verzi mám také dojem, že se autoři stále více snaží zjednodušit úpravy vzhledu. To je často Bootstrapu vyčítáno, že všecky weby na něm postavené vypadají jako přes kopírák. Otázkou však je, zda je na vině jen Bootstrap, nebo i jeho uživatelé.

K čemu bych se Bootstrap rozhodně nebál doporučit, je prototypování. Zmíněné zavádění proměnných vlastností zjednoduší rychlé úpravy přímo v nástrojích pro vývojáře.

A kdyby nic jiného, studium dokumentace a kódu rozhodně obohatí váš rozhled v oblasti frontendového kódování. Ať už s kódováním začínáte, nebo se jím živíte.