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.

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-widthmin-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.

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategoriích CSS, Frontend frameworky.

Detailně: layout v Bootstrapu 4

28. 3. 2017 v příručce

Nový systém pro tvorbu rozvržení stránky v chystané verzi Bootstrapu. Pořádně do hloubky.

PostCSS jako jednoduchá náhrada preprocesoru

16. 2. 2017 v příručce

Jak PostCSS využít jako jednoduchý a rychlý preprocesor, který vám na spoustu projektů výborně poslouží. A proč ne CSSnext?

Veřejná školení

Bootstrap pro pokročilé

Bootstrap pro pokročilé

Využijte naplno nejpopulárnější framework pro tvorbu uživatelských rozhraní bez hlubokých znalostí CSS. Příští termín: 20. dubna.

11. května Principy Javascriptu
26. září Dnešní webová kodéřina
5. října Optimalizace rychlosti načítání
19. října SVG

Cena kurzů je 4 490 Kč bez DPH. Dřívější zákazníci mají 10 % slevu.
Všechny se konají v KC Greenpoint Praha.
Můžete si je také objednat do firmy.

Ebook „Vzhůru do CSS3“

Ebook „Vzhůru do CSS3“

Pořiďte si můj ebook „Vzhůru do CSS3“.
o nových CSS vlastnostech a moderní kodéřině.

Koupit za 249 Kč