Responzivní Mobile First s pomocí body tříd 6. 5. 2013
Jak tady často zmiňuji, bývá výhodné vrstvit preprocesorem zpracovávaný CSS kód od mobilních (nebo křápovitých) zařízení směrem vzhůru k desktopovým. Problémová děcka, Internet Explorer verze 8 a starší, ovšem nerozumí Media Queries, pomocí kterých vrstvy stavíme. Dá se to naštěstí řešit pomocí preprocesorů.
Na hezkou alternativu řešení mě na nedávném školení pro eSportsMedia přivedl Petr Kysela. Několikrát jsem ji vyzkoušel a nyní prohlašuji, že ji celým svým kóderským srdcem miluji.
Body třída, cože?
Body třída neboli body class. Zkušenější vědí. Ostatním pomůže kus HTML kódu:
<!DOCTYPE html> <!--[if lt IE 9]><html class="old-ie"><![endif]--> <!--[if gt IE 8]><!--><html><!--<![endif]-->
↳ Díky přítomnosti třídy .old-ie pak v CSS kódu můžeme všechny osmičkové a starší Explorery zacílit krásným selektorem typu .old-ie .selektor. Nepostradatelná technika.
Body třídy a responzivní Mobile First
Pomocí preprocesoru a selektoru z body třídy teď můžeme krásně zacílit starší Explorer a například mu pošeptat: „Brachu, vykašli se na fluidní layout. Vím, že se u něj zadýcháváš. Chci po tobě jen fixní rozměry.” —
.container-fluid {
max-width: 940px; // Fluidni layout
.old-ie & {
width: 940px; // Fixni layout
}
}
Výhodné to je například na webech, kde používáme nějaké to Background Size, které osmičkový Explorer nepodporuje.
Teď už víme dost, abychom porozuměli následujícímu LESS kódu a podstatě tohoto článku:
.nav {
.nav-small-screen;
// Verze pro velke displeje
@media (min-width: @largeScreenStart) {
.nav-large-screen;
}
// Verze pro IE8-
.old-ie & {
.nav-large-screen;
}
}
↳ Stejný kus kódu, který věnujeme zařízením s určitou minimální šířkou velikosti okna (velké displeje), tedy předložíme i Exploreru ve verzi 8 a starších.
Kód by samozřejmě mohl být elegantnější, kdyby LESS uměl spojit media query (@media (min-width: @bigScreenStart)) se selektorem body třídy (.old-ie &) do jednoho selektory. Jenže to by pak bylo moc jednoduché. Není důvod nevěřit, že tuhle drobnost vývojáři LESSu dříve či později vyřeší.
Využíváme síly LESSu a mixin .nav-big-screen si nadefinujeme někde bokem. Jeden kus kódu využijeme na více místech. Už jsem vám říkal, jak úžasné jsou mixiny a že preprocesory prostě musíte používat?
