Včera jsem vám dal hádanku, dnes předvedu řešení. Ať víte, zda můžete skákat radostí nebo ne. BTW přišlo mi cca 100 odpovědí, to je hezké.Připomenu zadání. Stránku http://id.annevankesteren.nl/ tvoří jednoduchý kód (viz obrázek níže), ale přesto výsledná podoba stránky odporuje zdravému webdesignerskému rozumu, např. je má černé pozadí, a barevné písmo, ačkoliv zdrojový kód žádné definice barev neobsahuje. Vaším úkolem bylo určit, čím to je.
Napřed tu špatnou odpověď: Stránka obsahuje SVG, které je zodpovědné za ony grafické změny.
Pokud jste takhle odpověděli, nechali jste se pěkně nachytat. Stránka sice obsahuje SVG obrázek, ten ovšem obsahuje pouze logo OpenID:
Mohli jste si to ověřit buď dešifrováním onoho SVG souboru, který obsahuje dvě vyplněné cesty (s dešifrováním pomůže tutorial), nebo i jeho pouhým zobrazením v prohlížeči. Jak prosté milý Watsone!A jaká je správná odpověď? V hlavičce HTTP se vyskytuje položka Link: <fancy.css>; rel=stylesheet a za design stránky je zodpovědný stylopis fancy.css.
Položka Link v hlavičce HTTP je alternativním způsobem pro přidružení stylopisu ke stránce a funguje analogicky jako značka LINK v hlavičce HTML.
Tento mechanismus se běžně nepoužívá (nepodporují jej všechny prohlížeče). Je zmiňován ve specifikaci HTML4.01, v minulosti tu byla několikerá snaha jej začlenit i do specifikace HTTP, ale neúspěšně (podrobně celý proces najdete zdokumentovaný na wiki W3C).
BTW před rokem jsem o tomto mechanismu psal na Zdrojáku, když jsem jej ještě vedl.
Pozn.: Někdo z vás si všiml, že Firefox použije stylopis i pro zobrazení jeho samého (taková kuriozita: styl stylující sám sebe). Vypadá to sice moc hezky, ale jedná se evidentně o chybu prohlížeče.
Zhodnocení řešitelů
Výsledek hádanky dopadl dobře a moc mě potěšil. Řada z váš našla bez dlouhého zaváhání správnou odpověď.
Je zároveň vidět, jak dobré nástroje dokáží posílit generační zdatnost. Kdybychom stejnou hádanku zadali takové 4 roky nazpět, výsledné skóre by pravděpodobně tolik povzbudivé nebylo.
Nástroje jako jsou Firebug, Web Inspector a další nám pomáhají hravě vyřešit i problémy, se kterými jsme se dosud nesetkali. Odpovězte si sami, zda byste problém vyřešili (resp. rychle vyřešili, nebo zda vůbec vyřešili) v případě, že byste podobné nástroje neznali. A tím nemyslím jen to, že byste je neměli právě po ruce, ale kdybyste je neviděli nikdy v životě.
Tak na viděnou u nějaké další hádanky. Ostatně pokud víte o nějaké další, třeba i lepší, tak se určitě pochlubte.
To s tím nastylováním fancy.css samo sebou mě připadá jako klasický školní úkol: "Napište program, který vypíše svůj zdrojový kód." :)
OdpovědětVymazatNebo hitovka z Facebooku http://www.youtube.com/watch?v=Z86V_ICUCD4
OdpovědětVymazatŽe ten styl styluje sám sebe, není chyba prohlížeče. Když server požádám o ten styl, v hlavičce mi taky pošle, že ho mám ostylovat tímto stylem.
OdpovědětVymazat@Anonymní Omyl, to platí pro dokumenty, u kterých je práce se styly definována, typicky X(HTML). Jiné dokumenty (PDF, Word, čistě textové dokumenty) nejenže nic takového nemají, ony ani nemají žádné značky HTML, BODY apod., na které by se stylovací pravidla mohla aplikovat a aplikace stylopisu na ně nemá smysl.
OdpovědětVymazatVysvětlím podstatu této chyby podrobněji. Firefox obsahuje zobrazovací jádro Gecko, které je určeno pro zobrazování XML/HTML, ale obecně umí zobrazit různé typy dokumentů. Čistě textové dokumentu zobrazuje pomocí jejich převedení na HTML. Jakýkoliv textový dokument, např. http://www.google.com/robots.txt Firefox obalí HTML značkami html, body a pre a teprve výsledek zobrazí. Je to trik. To je v pořádku - uživateli je jedno, jaký trik Firefox pro zobrazení používá, hlavně že to funguje.
V tomto případě ovšem se ovšem vyskytl problém. Původní dokument je sice textový, ale Firefox si jej pro své vlastní účely převedl na HTML dokument. Následně si všimne, že tu je nějaká HTTP hlavička se stylopisem, tak ji hned pečlivě aplikuje. Což by samozřejmě neměl, protože ten HTML dokument si vytvořil jen pro sebe jako dočasný dokument, aby si ušetřil práci.
Škoda, že mi Chrome nezobrazil, to co měl zobrazit. Ztratil sem zájem a šel dělat něco jiného. Ale tento trik si pamatuji, někdo ho už na českém webu zmiňoval.
OdpovědětVymazat"V hlavičce HTTP se vyskytuje položka Link: ; rel=stylesheet a za design stránky je zodpovědný stylopis fancy.css"
OdpovědětVymazatJooo? tak tu hlavičku vypiště celou, děkuji předem.
V hlavičce HTTP se vyskytuje položka Link: ; rel=stylesheet a za design stránky je zodpovědný stylopis fancy.css.
OdpovědětVymazatTak vypiš tu hlavičku zde na stránkách, díky
@Anonym Získání celé hlavičky by měl zájemce o takovou hádanku zvládnout sám. Ti, co to přesto nezvládnou, ji naleznou v komentářích pod původní hádankou. Není zač 8-)
OdpovědětVymazat