Scukařina, žádná dřina – díl čtvrtý: jiná práce s CSS

V posledním díle našeho Scuk seriálu se od Djanga přesuneme blíž k prohlížeči — do CSS kódu. Ale kódu moc nečekejte. Pokusím se vám na technickém řešení jednoduché části uživatelského rozhraní ukázat dva principy vztahující se ke kodérské práci, které jsem na Scuku aplikoval nebo díky ní získal.

Seriál: Scukařina, žádná dřina (5 dílů)

  1. Scukařina, žádná dřina – díl první: agilně! 18.8.2010
  2. Scukařina, žádná dřina – díl druhý: Django je naše máma 25.8.2010
  3. Scukařina, žádná dřina – díl třetí: Djangová je náš táta 1.9.2010
  4. Scukařina, žádná dřina – díl čtvrtý: jiná práce s CSS 8.9.2010
  5. Scukařina, žádná dřina – appendix 15.9.2010

Rozhodnutí přijímaná až na úrovni konkrétních prvků webu

Rozhodujete se o podpoře konkrétních prohlížečů, technologií a způsobech řešení na úrovni celého projektu, nebo jste dokonce ta rozhodnutí jednou přijali pro všechny projekty, na kterých děláte, a ze zásady je neměníte? Ukážeme si, že pro uživatele je výhodnější, když se rozhodujete o několik úrovní níže — před implementací konkrétního prvku webu nebo aplikace.

Podívejte se na Scuk v IE6, v IE8 a pak třeba ve Firefoxu. Vypadá stejně? Jen zdánlivě. Pečlivý pozorovatel by našel řadu drobných rozdílů, které mají společný důvod — chceme, aby každá skupina návštěvníků dostala své velikosti přiměřenou, ale hlavně co největší porci radosti z používání. 

Víte, že celkový uživatelský prožitek tvoří mnoho elementů — vzhled stránky, rychlost jejího načítání, způsob interakce, navigace, design, architektura informací, celkový vizuální styl a další. Pokud například vzhled dostane přednost proto, abychom zachovali jednotnost napříč prohlížeči, může to být na úkor rychlosti nebo nakonec efektivitě kodérovy vynaložené energie.

Vezměme triviální, ale všem blízký příklad — kulaté rohy. Zcela pochopitelně oblíbený prvek grafiků. Kdysi ruční kodérova práce. Dnes jí docílíme lusknutím prstů pomocí CSS3 konstrukce:

-moz-border-radius: 10px;
border-radius: 10px;

Nebýt vendor prefixu pro Firefox, vypadá docela jednoduše, že ano? Jenže — i tak by svět byl příliš dokonalé místo. Vlastnost border-radius bude Internet Explorer podporovat až v připravované verzi 9.

Co s tím? Někoho napadne border-radius vůbec nepoužívat („Nemůžu ho použít všude. Je to hudba budoucnosti.”), jiného vykašlat se na Internet Explorer („Vždyť to není problém můj, ale Microsoftu a jeho bláznivých fanoušků.”), třetí bude hledat javascriptové řešení, které v prohlížečích nepodporujících border-radius kulaté rohy vykreslí (a najde CurvyCorners).

Rovnou tři možná řešení. Hurá? Řeknu vám, proč jsme se nerozhodli pro žádné z nich.

V moderních prohlížečích využíváme border-radius. Prostě proto, že nechceme hledat způsoby, jak si zkomplikovat práci. Prohlížeče velké části návštěvníků tedy hezky a hlavně rychle kulaté rohy vykreslí. 

Víme, že javascriptové řešení typu CurvyCorners může na menším projektu usnadnit spousty práce, pokud je nasazeno univerzálně na celém webu. Jenže Scuk je aplikace velmi hojně javascript využívající a náročná na výkon. A my prostě kvůli kulatým rohům nechceme prohlížeč uživatele zatěžovat další vrstvou výpočtů v javascriptu.

Co tedy dál, když Internet Explorer ignorovat nehodláme? Jsem toho přesvědčení, že tak jako nelze webdesignérské postupy aplikovat jednotně napříč všemi typy webů, nelze je aplikovat ani napříč stránkami jednoho webu. O přítomnosti kulatých rohů se tedy rozmýšlíme nikoliv v rámci celého webu, ale jeho jednotlivých prvků.

Podívejte se na hlavičku Scuku:

Nepletete se, vypadá v obou prohlížečích stejně. Je to místo, kam zamíří oči návštěvníka nejdříve. Tady je důležité předat „zakulacený” vizuální styl Scuku všem bez rozdílu.

Border-radius už umíme, a tak v prohlížečích, které si s ním vědí rady, bude CSS kód položky navigace vypadat poměrně elegantně:

nav#categories li a {
 display: inline-block;
 padding: 10px 6px;
 -moz-border-radius: 7px 7px 0 0;
 border-radius: 7px 7px 0 0;
}

V prohlížečích, které border-radius nezvládají (jako Internet Explorer), pak namísto nastylovaných odkazů použijeme obrázek na pozadí:

.no-borderradius nav#categories .cat-vse a  {
 background-image: url(../img/layout/nav-cat-vse.gif);
 width: 46px;
}

Všimněte si třídy .no-borderradius. Tu nám k <html> elementu dokumentu přidala užitečná knihovna Modernizr. Díky ní můžeme v CSS kódu detekovat přítomnost nebo nepřítomnost většiny vlastností HTML5 a CSS3.

Vaše otázka by mohla znít: Proč si tedy neusnadníme práci a nezvolíme jedno řešení a nepošleme obrázky i prohlížečům, které border-radius zvládají? Pro odpověď se vrátíme na začátek článku: Protože se snažíme maximalizovat uživatelský prožitek. Proč bychom měli zpomalovat načítání Scuku obrázky v navigaci i majitelům prohlížečů, kde to nutné není?

A pak — vidíte-li cíl kodérské práce ve stejném místě jako já, tedy ve zlepšení uživatelského prožitku technickými prostředky, nemůžete navrhnout řešení navigace Scuku jen s ohledem na objem času stráveného kodérem.

Vypadá tedy Scuk v každém prohlížeči jinak, nebo ne?

Vypadá. Na jiných místech uživatelského rozhraní Scuku už tak na kulatých rozích (a dalších CSS3 novinkách jako gradienty, border-image) nelpíme, a tak je nabídneme jen uživatelům moderních prohlížečů.

Zamířit svá rozhodnutí o podpoře prohlížečů, technologií a způsobech řešení na úroveň jednotlivých prvků stránky nám umožnilo lépe nalézat rovnováhu mezi vlastní vynaloženou energií a efektem výsledku na uživatelský prožitek.

Organizace CSS kódu pomocí „vypíchnutí zastarávajících”

Na závěr metoda organizace CSS kódu, kterou jsem poprvé aplikoval právě při vývoji rozhraní Scuku, a docela by mě zajímal váš názor na ni.

Podpora různých CSS3 vlastností napříč prohlížeči je velice různorodá, jejich implementace pomocí vendor prefixů z pohledu budoucnosti nejistá a v CSS kódu nám pak spolu sousedí pravidla, která budou mít dlouhého trvání, s těmi, jež mohou poměrně brzy zastarat nebo dokonce zaniknout.

A proto na ty potenciálně zastarávající myslíme už při psaní kódu a oddělujeme je od těch stabilních. Třeba v případě zmiňované položky navigace takto:

/* Polozka navigace */
nav#categories li a {
 display: inline-block;
 padding: 10px 6px;
 border-radius: 7px 7px 0 0;
}

/* [OBSOLETE?] Vendor prefixy */
nav#categories li a {
  -moz-border-radius: 7px 7px 0 0;
}

/* [OBSOLETE?] Polozka s Cufonem, ktery ma trochu jine proporce */
.cufon-active nav#categories li a {
  padding: 9px 9px 7px 9px;
  line-height: 12px;
}

Tady si držíme pevnou část pravidel a předpokládáme, že jednou přestaneme potřebovat vendor prefixy pro nastavení kulatých rohů ve Firefoxu a že namísto Cufónu pro náhradu fontů začneme používat @font-face nebo řešení některého z poskytovatelů webových fontů jako Typekit.

V jiných pravidlech s pomocí Modernizru a jeho “no-” tříd zase očekáváme zastarávání těch prohlížečů, které nepodporují některé z CSS3 vlasností (.no-borderradius).

Od tohoto experimentu v organizaci kódu si slibujeme oddělení dlouhodobě méně stárnoucího jádra od „nejisté” a rychle zastarávající části kódu. Jádro zůstává jednoduché a nejistý kód pak mám během dalšího vývoje na očích tak, abychom jej mohli postupně upravovat ruku v ruce s vývojem technologií.

Komentáře: 35

Přehled komentářů

Lukas Mnoho povyku pro nic
mikiqex Re: Mnoho povyku pro nic
Karel Minařík Re: Mnoho povyku pro nic
Pepa Re: Mnoho povyku pro nic
Ladislav Toral Re: Mnoho povyku pro nic
Petr Staníček Re: Mnoho povyku pro nic
Ondřej Válka Kupuju! Vyborna case-study
Petr Staníček Re: Kupuju! Vyborna case-study
Jan Sládek Článek skvěle demonstruje, že se nad kódem musí přemýšlet
tiso Re: Článek skvěle demonstruje, že se nad kódem musí přemýšlet
Martin Michálek Re: Článek skvěle demonstruje, že se nad kódem musí přemýšlet
Jan Sládek Re: Článek skvěle demonstruje, že se nad kódem musí přemýšlet
Martin Michálek Re: Článek skvěle demonstruje, že se nad kódem musí přemýšlet
pk další vrstva JavaScriptu?
Martin Michálek Re: další vrstva JavaScriptu?
keff Re: další vrstva JavaScriptu?
pk Re: další vrstva JavaScriptu?
ujc Re: další vrstva JavaScriptu?
Hellish Vendor prefixy
Ladislav Thon Re: Vendor prefixy
Martin Michálek Re: Vendor prefixy
Hellish Re: Vendor prefixy
David Grudl Stejná myšlenka ale jiné řešení
David Grudl Re: Stejná myšlenka ale jiné řešení
David Grudl Re: Stejná myšlenka ale jiné řešení
Martin Malý Re: Stejná myšlenka ale jiné řešení
Jakub Vrána Re: Stejná myšlenka ale jiné řešení
Borek Bernard Re: Stejná myšlenka ale jiné řešení
Martin Malý Re: Stejná myšlenka ale jiné řešení
Borek Bernard Re: Stejná myšlenka ale jiné řešení
patrik.sima Re: Stejná myšlenka ale jiné řešení
Martin Michálek Re: Stejná myšlenka ale jiné řešení
Martin Michálek Re: Stejná myšlenka ale jiné řešení
Nemarr hezky clanek
Martin Michálek Re: hezky clanek
Zdroj: https://www.zdrojak.cz/?p=3305