Reboot je další evoluční krok pro resetovací CSS

Bootstrap 4 přichází kromě jiného s náhradou Normalize.css. Vlastním kódem pro sjednocení výchozích nastavení prohlížeče – Reboot.

Od dob dnes už přežitého Reset CSS se mnohé změnilo. Normalize.css přišlo s citlivějším přístupem – namísto nulování všech hodnot prostě jen sjednocuje zobrazování základních stylů v prohlížečích. V navazujícím kódu pak nastavujeme jen hodnoty, se kterými nesouhlasíme.

Reboot navazuje na Normalize a přidává dva koncepty, které velmi vítám

Mám radost, protože oba na projektech nepostavených na Bootstrapu používám:

1. Veškeré typografické míry jsou v jednotkách rem, aby se dalo rozhraní globálně zvětšovat a zmenšovat z jedné výchozí hodnoty.
2. Pro nastavení vertikálního odsazení se používá jen jeden směr vnějších okrajů – margin-bottom. Je pak samozřejmě snadnější na takový typografický rytmus navazovat ve vlastním kódu.

Pokud chcete výsledky Rebootu i Normalize detailně studovat, vyrobil jsem pro ty účely dva „kódpeny“ – Normalize.css a Reboot.

Pár zajímavostí z kódu Rebootu

Co mě v kódu dál zaujalo?

Border Box všude

Počítání rozměrů elementů včetně vnitřního okraje a rámečku. Tady konečně i s deklarací pro pseudoelementy ::before a ::after. (Celý kód)

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

Viewport na Windows Phone

Už víte, že na zápis @-ms-viewport nesmíte zapomenout. Co možná neznáte, je Sass direktiva @at-root, která vynucuje vložení pravidla do nejvyšší úrovně a tedy mimo všechna zanoření. (Celý kód)

@at-root {
  @-ms-viewport { width: device-width; }
}

Nasazením tohoto pravidla se ale začnou v IE11 a Edge trochu divně chovat rolovátka. Cheat pro další úroveň boje s Microsoftem tedy vypadá takhle:

body {
  -ms-overflow-style: scrollbar;
}

Odstranění 300ms prodlevy mezi tapnutím a akcí

a,
area,
button,
[role="button"],
input,
label,
select,
summary,
textarea {
  touch-action: manipulation;
}

Jak už jste si mohli přečíst v newsletteru, vlastnost touch-action konečně podporuje i mobilní Safari, takže brzy nebude potřeba používat knihovnu FastClick. V Reboot je to už připraveno. (Celý kód)

Reset pro min-width: min-content

Možná neznáte jednu z nových hodnot pro vlastnost min-width – min-content. Nastavuje minimální šířku elementu podle jemu vlastní minimální šířky, což je šířka nejdelšího slova nebo šířka tabulky či obrázku. Reboot odstraňuje problémy, které v některých prohlížečích vznikají jeho nastavením pro fieldset.

fieldset {
  /* Chrome a Firefox zde nastavují 
      min-width: min-content */
  min-width: 0;
}

Reboot zatím nejde stáhnout nebo instalovat samostatně, ale v dokumentaci Bootstrapu 4 je pro to nějaká příprava. Každopádně – copy/paste instalace funguje i tady.