• TwitterRSS
  • Domů na Webylon
  • Kritika W3C
  • Historie, CSS
  • Vypočítavý pokrok

    20. února 2009

    Kaskádové stylopisy jsou nepochybně mocným doplňkem HTML stránek, ale jak již víme [K.21], nejsou všemocné.

    Citelně chybí možnost ovlivňovat vzhled v závislosti na (proměnlivém) okolí. Nemůžete vypočítávat rozměry, pozice a podobné veličiny v závislosti na prostředí. Tato vymoženost chybí, protože konsorcium odmítlo ve správný čas kývnout a protože výrobci prohlížečů navzájem opovrhují svými experimenty.

    Čas plyne a kolem nás proplouvají docela dobré nápady, kterým osud navzdory potřebám nikdy nedopřeje prosazení. Připlouvají jako spásná medicína a odplouvají jako radioaktivní odpad. Zaslouží si opovržení? Proč? Protože nejsou dokonalé?

    Cesta Netscapu

    Ve čtvrté verzi svého průkopníka vykročili autoři Netscapu směle vstříc mnoha slepým uličkám. Fatálně podcenili význam CSS, zaměřili se především na prezentační atributy v HTML. Napadlo je tenkrát, že by mohli všem atributům vdechnout trochu života (do toho umírání).

    Netscape Navigator 4.0 zkusil zavést „skriptová makra“:

    <h1> <img src="&{'hrob-' + screen.width + '.jpg'};" alt="Asociace hrobařů"> <h1> <multicol cols="&{Math.round(screen.width / 100)};"> <p>Vítáme vás v naší virtuální márnici. […] <p>Brzy na shledanou. </multicol>

    Inspirace syntaxí entit je asi zřejmá. Popisovat dlouze jazyk, ve kterém se makro psalo, jistě nemá u „kolébky JavaScriptu“ smysl. Makro se vyhodnocovalo jen jednou, při načtení stránky.

    Klientské skriptování se tenkrát nepyšnilo košatým objektovým modelem dokumentu, takže stvořit pomocí maker něco skutečně zajímavého, co by prokázalo jejich užitečnost, dost dobře nešlo. V éře tabulkových layoutů ani nikdo neměl motivaci pro dynamické vypočítávání rozměrů, protože každá záludnost šla vystavět zanořenými tabulkami a čistota kódu nikoho moc nevzrušovala.

    Netscape umřel, zrodila se Mozilla a ta už pro makra neprojevila dostatečné nadšení. Na památku nám zůstala jen kapitolka ve W3C doporučení HTML 4.01 slibující skriptovým makrům příznivou budoucnost. (Paradoxně šlo o jediný vynález Netscapu 4, který se dostal do specifikace.)

    Cesta Exploreru

    Microsoft oslavil blížící se smrt svého soka s makry tím, že kodérům přinesl v páté verzi svého prohlížeče v podstatě na chlup stejný aparát v modernějším kabátě. Na obohacování HTML se tenkrát vývojáři vykašlali a soustředili se jen na CSS a JS/DOM.

    Internet Explorer označoval své udělátko jako „dynamické vlastnosti“, známé jsou též jako „expression“:

    <style> #tělo { position: absolute; top: expression(hlavička.offsetHeight + "px"); } </style> <div id="tělo"> Obsah. Povídy povídy povídy. Takhle se staví <h1>dobrý web</h1> :-) </div> <div id="hlavička"> Hlavička s textem, který si uživatel může zvětšit. </div>

    Jakákoliv CSS vlastnost mohla mít přiřazený jakkoliv složitý výraz napsaný v JavaScriptu (či VBScriptu), který se při změně podmínek pravidelně přehodnocoval.

    S tím už se dají dělat zajímavější kouzla. Explorer 5 poskytoval tvůrcům stránek vcelku bohatý DOM, takže mohli docílit jakéhokoliv výpočtu a jakékoliv interakce. Kdyby uměli JavaScript. A kdyby se JavaScriptu nebáli. Zvláštní ironie osudu: I když si Explorer ukousnul až na pár drobků celý koláč tržního podílu, expression se nikdy příliš neujal — především kvůli latentní javascriptofóbii.

    Nutno podotknout, že jediná implementace expressionů trochu skřípala. Neuměla správně rozpoznat okamžik, kdy se změnily relevantní podmínky, takže se každá dynamická vlastnost přepočítávala i při pohybu myšího kurzoru. Tuto krutou mouchu žádná následující verze Exploreru neodstranila, neb jde o programátorský oříšek hodný hlubší než hluboké analýzy. To už by rovnou mohl Microsoft zabránit i nekonečným smyčkám zasekávajícím prohlížeč, bez nichž by ladění expressionů nikdy nebylo tak veselé.

    Během posledních let se dynamické vlastnosti proslavily hlavně díky všelijakým záplatám chyb a nedostatků Exploreru 6. Existují expressiony na min-width, na max-width, na :before, na :after, na :hover… a s jejich pomocí vytváříme shodný výsledek napříč prohlížeči. To se máme.

    Internet Explorer sice neumřel, ale ve své osmé inkarnaci projevil dostatečné nadšení pro odebrání podpory dynamických vlastností.

    Cesta konsorcia

    Tvůrčí mozky v konsorciu počátkem tisíciletí mlčky usnuli. Zrovna při rituálním tanci na tehdejší šlágr „ó, blahoslavené CSS, jak jsi úchvatně jednoduché“. Srozumitelnost a pochopitelnost jsou veledůležité pro prosazení inovativních postupů ve zkonstnatělém systému. Jakmile jsou ovšem staré pořádky nadobro zapomenuty, měl by následovat další evoluční krok. Protože bez něj se ty jednoduché postupy začínají využívat složitě, nesrozumitelně a nepřirozeně.

    W3C se v červenci 2005 probralo a nadhodilo odvážnou ideu:

    Měli bychom zavést matematické výrazy na počítání hodnot?

    návrh CSS 3 Hodnoty a jednotky

    O rok později sepsalo důkladnější popis. Rádo by prosadilo funkci „calc“:

    <style> menu li { position: absolute; width: 3em; height: 3em; border: 5px solid royalblue; } #K { left: calc(50% + 2.5em - 5px); top: calc(50% - 5em - 5px); } #B { right: calc(50% - 2.5em + 5px); top: calc(50% + 2em - 5px); } /* atd. */ </style> <menu> <li id="K"><a href="K">Kritika W3C</a> <li id="B"><a href="B">Weblog</a> <!-- atd. --> <menu>

    Sčítání různých délkových jednotek vypadá lákavě. Přesně tohle neuměla ani skriptová makra, ani dynamické vlastnosti, protože JavaScript a DOM nemají pro převody jednotek potřebné vybavení.

    Ve všem ostatním však calc zaostává za expressionem. Nemůžete v něm zařídit, aby styl jednoho elementu byl závislý na stylu druhého, nemůžete zohlednit konstelaci elementů.

    Na začátku roku 2009 se žádný prohlížeč do podpory calcu nehrne.

    Doplněno koncem roku 2014: Letos už je situace lepší.

    Jiná cesta

    Každý, kdo se pokoušel slabinu odstranit, využíval již hotových nástrojů. Netscape secvaknul HTML parser s bezmocným interpretem JavaScriptu, Microsoft secvaknul CSS parser se všemocným interpretem JavaScriptu a konsorcium pečlivě rozšiřuje gramatiku CSS o nepříliš silnou aritmetiku prvního stupně základní školy.

    Když fantazírují ostatní, zkusím to i já.

    .čtverec { /* čtverec s velikostí závislou na šířce stránky */ width: 50%; height: &(width); } .levý-sloupec, .střed, .pravý-sloupec { /* tři stejně vysoké sloupce */ height: &(height, 'sloupce'/max); group: 'sloupce'; } html { group: 'root'; } .inverzní { color: &(background-color, 'root'); background-color: &(color, 'root'); }

    Kdo jako první uhodne, jak mé hypotetické udělátko funguje, dostane hypotetickou medaili.

    Vymyslet mocnou hračku, která bude intuitivní, obejde se bez JavaScriptu a obloukem se vyhne i výkonnostním problémům, dokáže kdekdo. Ale o to asi nejde.

    Spásná idea nestačí

    Ani její implementace zjevně nestačí. Pravděpodobně chybí nadšení.