Přejít k navigační liště

Zdroják » Webdesign » Reboot je další evoluční krok pro resetovací CSS

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

Články Webdesign

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.

Nálepky:

Článek původně vyšel na autorově webu Vzhůru dolů.

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;
}

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

Subscribe
Upozornit na
guest
0 Komentářů
Inline Feedbacks
View all comments

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.