úterý 5. ledna 2010

Hádanka pro webdesignery a kodéry. Vyřešíte ji?

Mám pro vás malou hádanku. Znáte to - takovou, kterou génius vyřeší na první pohled, inteligent za pár minut, polointeligent za hodinu a ostatní si nad ní můžou lámat hlavu třeba celý den.

Ukážu vám jednoduchou HTML stránku. Má primitivní kód, asi na deset řádek. Přesto se její podoba v prohlížeči zcela vymyká běžné webdesignerské logice. Vaším úkolem je zjistit proč. Proč stránka vypadá tak, jak vypadá.

Podotýkám, že problém není postaven na žádných tajných novinkách z HTML5 ani CSS3. Klidně ignorujte, že stránka má HTML5 doctype, fungovala by stejně i bez něj. Ona záhada nepoužívá nic, co přišlo později než staré dobré HTML4 z 1999. Nejedná se ani o fintu žádného prohlížeče - stránka skutečně má správně vypadat tak, jak vypadá.

Hádanka

Jedná se o stránku http://id.annevankesteren.nl/ a vaším úkolem je zjistit, proč vypadá jak vypadá, tj. proč má barevné písmo, pozadí, nebo text na dva řádky atd., ačkoliv běžná logika tvrdí opak.

Stránka by měla vypadat asi takhle:


Abyste ji takto viděli, použijte Firefox nebo Operu. Jakmile problém vyřešíte, poznáte proč. Ale znova opakuji, nejedná se o žádnou fintu prohlížeče, nýbrž opravdu jen o standardní chování.

Vaše odpovědi můžete psát do komentářů. Zatím je nechám neviditelné.

Řešení najdete v mém dalším příspěvku.

93 komentářů:

  1. Linkuje fancy.css přes HTTP hlavičku :-).

    OdpovědětVymazat
  2. Ha, HTTP hlavička Link a fancy.css!

    OdpovědětVymazat
  3. Nebude tam zádrhel v tom svg obrázku ? Nic "neobvyklého" tam jinak nevidím.

    OdpovědětVymazat
  4. Zeby "Link: fancy.css;rel=stylesheet" v HTTP hlavicke? Celkom fajn metoda, doteraz som o nej nevedel :-)

    OdpovědětVymazat
  5. Heht, pouziva http hlavicku "Link". To som nevedel, ze sa to da.

    OdpovědětVymazat
  6. lebo http://id.annevankesteren.nl/fancy.css

    OdpovědětVymazat
  7. Zjevně je možné do Response headeru na serveru doplnit hlavičku "Link", která následně aplikuje na dokument stylesheet "fancy.css".

    OdpovědětVymazat
  8. Posílá to fancy.css v http hlavičce :)

    OdpovědětVymazat
  9. Zajímavé, hlavička "Link". Díky za hádanku a odkaz, doteď jsem o tom neměl ponětí. :o)

    OdpovědětVymazat
  10. Zajímavé. Nevěděl jsem, že jde poslat Link v hlavičce.

    OdpovědětVymazat
  11. Posílat link na css v odpovědi na http požadavek je vskutku kouzelné.

    OdpovědětVymazat
  12. Tak jsem se těšil, že na tom nechám aspoň půl hodinu... ale ono to bylo tak jednoduché, že vyšel můj první odhad.. Příště zkus něco těžšího, než posílání css v header ;).

    OdpovědětVymazat
  13. http://jdem.cz/dghe4

    OdpovědětVymazat
  14. Nejsem webdesigner a nikdy jsem nijak hlouběji "nehatlamatlal", ale tohle je zajímavé. Těším se na rozuzlení :)

    OdpovědětVymazat
  15. Jediný co mě napadá je, že ten atribut rel se předává jako proměnná do souboru v href a tudíž se na jeho základě dá vrátit CSS, ale při přímým zadání HTML apod. A nalinkuje se to jako CSS asi díky typu souboru? Jsem zvědavej. :o)

    OdpovědětVymazat
  16. Link: ; rel=stylesheet, ;rel=stylesheet

    OdpovědětVymazat
  17. Ať žije firebug ;) Nevím, jak bych to já provedl, ale posílá se zde CSS styl fancy.css jako GET požadavek

    OdpovědětVymazat
  18. Tak jsem se na to podíval. Podíval jsem se na zdroják a díval jsem se, jestli to není tím SVG nebo OpenID. Vzal jsem Firebug a začal ořezávat. Najednou jsem si všiml, že to má nějaké CSS. Začal sjem po něm pátrat a zjistil, že to není v HTML, protože CSS je podobně zkrášlené. První, co mě napadlo: hlavičky! A bylo to ono:
    Link: ; rel=stylesheet, ;rel=stylesheet

    BTW: To SVG se mi nezobrazilo ve FF 3.5, nevím proč :(

    OdpovědětVymazat
  19. HTTP hlavičky:)

    Link: ; rel=stylesheet
    Link: ;rel=stylesheet

    Martin

    OdpovědětVymazat
  20. http://id.annevankesteren.nl/fancy.css je styl, ktery se pripojuje. Jak to autor dokázal nevím. Sázel jsem na to ze se tam přes 404 pripojí nejaký neexistující soubor, ale ne... Nevím takle na rychlo...

    OdpovědětVymazat
  21. Jedným mrknutím do firebugu vidím, že si stránka ťahá štýl fancy.css, ale je celkom haluz že by toto malo byť štandartné správanie. Kde by som to mohol nájsť v dokumentácií?

    OdpovědětVymazat
  22. Předpokládám, že odpovědí už je celá řada :) ... Každopádně zobrazuje se to díky css stylu fancy.css. Nejsem programátor, ale předpokládám, že to jde poslat v HTTP hlavičce,jiný způsob mě nenapadá.

    OdpovědětVymazat
  23. no, koukal jsem na to jen tak pul minuty, ale prijde mi, ze v tom .svg jsou nejake hodnoty, ktere pravdepodobne znamenaji, co se ma kterou barvou vyplnit. Ale koder nejsem :)

    OdpovědětVymazat
  24. Tahá to soubor http://id.annevankesteren.nl/fancy.css. Ale proč zrovna tenhle, to nevím. :-)

    OdpovědětVymazat
  25. A nebude to hlavičkami serveru:
    HTTP/1.1 200 OK
    Date: Tue, 05 Jan 2010 15:43:21 GMT
    Server: Apache
    X-Powered-By: PHP/5.2.11
    Link: ; rel=stylesheet
    Link: ;rel=stylesheet
    Vary: Accept-Encoding
    Content-Length: 371
    Keep-Alive: timeout=2, max=100
    Connection: Keep-Alive
    Content-Type: text/html; charset=utf-8

    => stáhne se ještě CSS fancy.css, které nastaví vzhled...
    David

    OdpovědětVymazat
  26. Odkazy na CSS jsou uloženy v HTTP hlavičce. Samotné CSS se nachází na http://id.annevankesteren.nl/fancy.css

    OdpovědětVymazat
  27. Priznam se, ze vubec nechapu pointu zadani. Ta stranka vypada tak, jak vypada (stejne jako zdejsim screenshotu), a ja mam uhodnout proc nevypada jinak???

    OdpovědětVymazat
  28. Hezká hádanka, akorát na mě moc lehká - vyřešil jsem ji ještě před prvním pohledem na tu stránku :-) Podle tvého popisu v článku jsem si hned začal říkat, že finta bude v HTTP hlavičkách, a taky že jo.

    Nicméně nejhezčí na tom je druhý level, když se zobrazí fancy.css ostylované pomocí fancy.css. Něco takového jsem viděl poprvé.

    OdpovědětVymazat
  29. Je tam zajímavá ta HTTP hlavička Link. Ale asi poněkud nestandardní.

    OdpovědětVymazat
  30. Odkaz na stylopis se předává v hlavičce HTTP… Myslím že na Webylon.info to tak dříve bývalo taky.

    OdpovědětVymazat
  31. Odkaz na CSS soubor je v HTTP hlavičce.

    OdpovědětVymazat
  32. Pěkný případ připojování CSS (fancy.css) pomocí HTTP hlaviček.

    Karel

    OdpovědětVymazat
  33. Zdá se mi, že v HTTP hlavičkách "přebývá" řádek "Link: <fancy.css>; rel=stylesheet, <fancy.css>;rel=stylesheet". Je to ono nebo WebDeveloper zobrazuje špatné hlavičky?

    OdpovědětVymazat
  34. Linkování CSS přes HTTP hlavičky?

    OdpovědětVymazat
  35. Za všechno může HTTP hlavička Link, která není ve zdrojáku vidět, protože běží jen v HTTP komunikaci mezi serverem a prohlížečem. To je super!

    OdpovědětVymazat
  36. Link na fancy.css je uveden jako HTTP hlavička...

    OdpovědětVymazat
  37. Jednoduchý...
    Custom CSS fancy.css

    OdpovědětVymazat
  38. Pěkná hádanka, díky. Může za to IMHO tato http response hlavička "Link: <fancy.css>; rel=stylesheet". Pak už jen stačí znát specifikaci HTML 4.01, konkrétně sekci 14.6 a každému to musí být jasné.

    OdpovědětVymazat
  39. Posila css nekde v hlavickach, fancy.css, celkem zajimave. Google Chrome si to ale vylozit neumi :(

    Napred jsem myslel ze v hlavickach bude jen info ze je to openID stranka a ze Opera openID proste nejak styluje defaultne. Pak jsem si vsiml tech fancy.css. Zajimave... fakt ze jo, teda doufam ze jsem to dobre pochopil :)

    OdpovědětVymazat
  40. Řekl bych, že je to prostě rozbitý :D

    OdpovědětVymazat
  41. Klíčová slova budou "HTTP Header Linking". Ale je to skutečně součástí standardu HTTP? Tváří se to spíš jako jakési rozšíření ve fázi návrhu.

    OdpovědětVymazat
  42. No protože posílá v HTTP hlavičce referenci na CSS styl:

    Link: ; rel=stylesheet

    OdpovědětVymazat
  43. Tak to jsem asi ultragenius :-) Vyřešeno ještě dřív než odkliknuto!

    OdpovědětVymazat
  44. Pán je estét, má nastylovaný i CSS styly. To se mi vážně líbí. :-) A v jaké hlavičce je připojuje k dokumentu, když ne v hlavičce HTML? Hlavička jako blok už je jen třešnička na dortu.
    MiK

    OdpovědětVymazat
  45. Tip: Diky parametru Link v HTTP response dojde k nahrani dodatecneho CSS stylu fancy.css

    OdpovědětVymazat
  46. Poslíat hlavičky jako HTTP hlavičky, to se dělá. Ale odkazy na CSS, to se nedělá :-) Fuj, nanic.cz

    OdpovědětVymazat
  47. Ani se nedívám na zdroják, ale podobné finty jsem prováděl sám: HTTP Link + CSS generovaný obsah. :)

    OdpovědětVymazat
  48. nejdele trvalo presvedcit windows 7, aby zapli telnet ; ) Coz se nepovedlo, ale linux me v tom nenechal:
    HTTP/1.1 200 OK
    Date: Tue, 05 Jan 2010 17:04:20 GMT
    Server: Apache
    X-Powered-By: PHP/5.2.11
    Link: ; rel=stylesheet
    Link: ;rel=stylesheet
    [...]
    Jen netusi nekdo, proc proc tam maj 2x ten samej styl?

    OdpovědětVymazat
  49. Žeby HTTP hlavička se stylem fancy.css :o)

    OdpovědětVymazat
  50. Link header, viz http://www.w3.org/TR/html401/present/styles.html#h-14.6 :)

    OdpovědětVymazat
  51. CSS je schované pomocou HTTP hlavičky: Link: ;rel=stylesheet

    Cesta k nemu: http://id.annevankesteren.nl/fancy.css

    OdpovědětVymazat
  52. je tam SVG grafika.

    OdpovědětVymazat
  53. HTTP hlavička link (rel="stylesheet"). dobrý :]

    OdpovědětVymazat
  54. HTTP hlavička Link. Ale proč 2x?

    Link: ; rel=stylesheet
    Link: ;rel=stylesheet

    Jinak to hezky ukazuje, jak moc neznáme to, co denně používáme (platí snad na všechno)

    OdpovědětVymazat
  55. Hezké použití SVG grafického formátu :-)
    A. Sokola

    OdpovědětVymazat
  56. HTTP hlavička Link linkuje CSS súbor fancy.css. A ten formátuje stránku.

    Link: ; rel=stylesheet, ;rel=stylesheet

    OdpovědětVymazat
  57. Moc pěkné, posílat "Link ; rel=stylesheet, ;rel=stylesheet" přímo v hlavičce...

    Co bychom si bez toho FireBuga počali :)))

    OdpovědětVymazat
  58. Styl fancy.css přidává v http hlavičce :o) (Záložka Info v Opeře mě zachránila :-)
    Každopádně mě to překvapilo, něco takového vidím u css poprvé. Stejně tak použití display: block; na head a title je cool :-)

    OdpovědětVymazat
  59. Viz HTTP hlavičky: Link <fancy.css>; ...

    OdpovědětVymazat
  60. Stránka posílá http hlavičku link s obsahem '; rel=stylesheet, ;rel=stylesheet'.

    OdpovědětVymazat
  61. Řekl bych, že stránka posílá informace o připojených css stylech v http hlavičce

    OdpovědětVymazat
  62. Prohlížeč dostane odkaz na CSS v HTTP hlavičce od serveru.

    OdpovědětVymazat
  63. Po vysledování stahovaných souborů jsem našel soubor fancy.css a když nebyl ve zdrojáku, už nezbývalo nic jiné, než hlavičky. A to byla trefa!

    HTTP header link: "; rel=stylesheet, ;rel=stylesheet"

    Pěkný trik. Až to bude široce podporované, tak to bude dobré na rozlišení například různých prohlížečů, pro které máme jiný css styl. A to celé bez javascriptu, když to zvládne PHP...

    OdpovědětVymazat
  64. HTTP hlavička link na fancy.css

    Díky za hádanku, to jsem neznal.

    OdpovědětVymazat
  65. HTML hlavička Link: ; rel=stylesheet, ;rel=stylesheet


    Pekne ;-)

    OdpovědětVymazat
  66. Hezké, nějak jsem netušil, že je možné poslat css pomocí hlavičky.

    OdpovědětVymazat
  67. V HTTP hlavičce je odkaz na fancy.css...
    Firebug :)

    OdpovědětVymazat
  68. Michal Chrobok5. ledna 2010 21:53

    Styl vložený HTTP hlavičkou, ještě že to podporuje jen minorita prohlížečů.

    OdpovědětVymazat
  69. CSS soubor se posila v HTTP hlavicce:)

    OdpovědětVymazat
  70. Server vrací

    Link: < fancy.css >; rel=stylesheet, < fancy.css >;rel=stylesheet

    Pěkná fičurka:)

    Btw: FF se tomuhle opravdu oddává, použije to i pro prostý text/css na
    http://id.annevankesteren.nl/fancy.css

    OdpovědětVymazat
  71. Zaujimava hadanka, rad som sa priucil :)

    OdpovědětVymazat
  72. Vylucovaci princip trkne:
    => rel

    Dragonfly nebo Firebug napovi.
    =>
    Neupravovaná odezva
    HTTP/1.1 200 OK
    Date: Tue, 05 Jan 2010 21:31:42 GMT
    Server: Apache
    X-Powered-By: PHP/5.2.11
    Link: ; rel=stylesheet
    Link: ;rel=stylesheet
    Vary: Accept-Encoding
    Content-Encoding: gzip
    Content-Length: 202
    Keep-Alive: timeout=2, max=100
    Connection: Keep-Alive
    Content-Type: text/html; charset=utf-8

    A google potvrdi:
    http://annevankesteren.nl/2008/01/openid

    Diky za post :-)

    OdpovědětVymazat
  73. apache posila odpovida na get odezvou link ; rel=stylesheet, ;rel=stylesheet
    - cili jde o nastaveni apache, ani ne tak o browseru, ne?! ;)

    S.

    OdpovědětVymazat
  74. Dopnuji svuj dnesni vyrok - je to tam, posilá se to v hlavičce jako Link ;o) Header ;o)

    OdpovědětVymazat
  75. Moc pěkná hádanka. Do té doby, než jsem se mrknul firebugem, co se stahuje, jsem plaval.

    Odpověď leží v http://www.greenbytes.de/tech/webdav/draft-nottingham-http-link-header-00.html

    --stej

    OdpovědětVymazat
  76. Cez link a response header to nacitava este tento subor: http://id.annevankesteren.nl/fancy.css
    zvysok je jasny.

    TomAnt

    OdpovědětVymazat
  77. wow, taky header som este nevidel:
    Link: ; rel=stylesheet, ;rel=stylesheet

    Pekne...

    OdpovědětVymazat
  78. Link na CSS styl je poslán přímo v hlavičce dokumentu. Hezká finta.

    OdpovědětVymazat
  79. Ahá, ten link na CSSko je přímo v hlavičce. Pěkné, musím vyzkoušet...

    Whit

    OdpovědětVymazat
  80. Stránka posílá HTTP hlavičku "Link" s obsahem "; rel=stylesheet, ; rel=stylesheet". Vivat Firebug :-)

    Dokumentaci k tomuto se mi ale najít nepodařilo.

    OdpovědětVymazat
  81. Zeby se odpoved skryvala zde? http://www.w3.org/TR/html4/present/styles.html#h-14.6 :)

    OdpovědětVymazat
  82. Nemohlo by to být tím, že je v hlavičce uvedeno "Link: fancy.css;rel=stylesheet"?

    OdpovědětVymazat
  83. Wow, nevěděl jsem že to jde i takhle :)

    Response Headers:
    Link: ; rel=stylesheet, ;rel=stylesheet

    head, title { display:block }
    title { font-size:1.5em; color:#f60 }

    Nice, další trik co se třeba někdy bude hodit :)

    OdpovědětVymazat
  84. Tak jsem se zase něco přiučil, ačkoli nevidím valný užitečný smysl této metody - není kompatibilní, není pohodlná a může zkomplikovat práci nejen autorovi webu, ale hlavně jeho následovníkům...

    Kdo by se chtěl dočíst něco víc:
    http://www.w3.org/Protocols/HTTP/Object_Headers.html#link

    OdpovědětVymazat
  85. HTTP header css
    http://id.annevankesteren.nl/fancy.css

    OdpovědětVymazat
  86. Protoze pozadavek na fancy.css je v response header...

    OdpovědětVymazat
  87. Řešení jsem zveřejnil. Díky všem za účast, bylo vás víc, než jsem čekal.

    @Antonín Daněk To je tak složité řešení, že jsem ho nepochopil ani já 8-) Ale správné není.

    @v6ak Myslím, že Firefox nepodporuje vkládání SVG pomocí značky IMG. Jinak samozřejmě pracovat se SVG umí.

    @David Grudl Já jsem na tom ještě ultralíp. Vyřešil jsem to dokonce dřív, než jsem to všem zadal 8-)

    @VitekJezek Zapnout telnet - to bude stará škola. Ta hlavička je tam dvakrát,ale zápis se liší mezerou. Možná to bude kvůli kompatibilitě s nějakou starší verzí prohlížeče. Dnešní Opera i Firefox rozumí oboum variantám.

    OdpovědětVymazat

Poznámka: Komentáře mohou přidávat pouze členové tohoto blogu.