ú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ětSmazat
  2. Ha, HTTP hlavička Link a fancy.css!

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

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

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

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

    OdpovědětSmazat
  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ětSmazat
  8. Posílá to fancy.css v http hlavičce :)

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

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

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

    OdpovědětSmazat
  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ětSmazat
  13. http://jdem.cz/dghe4

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

    OdpovědětSmazat
  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ětSmazat
  16. Link: ; rel=stylesheet, ;rel=stylesheet

    OdpovědětSmazat
  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ětSmazat
  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ětSmazat
  19. HTTP hlavičky:)

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

    Martin

    OdpovědětSmazat
  20. Protože SVG :)

    OdpovědětSmazat
  21. 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ětSmazat
  22. 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ětSmazat
  23. 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ětSmazat
  24. 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ětSmazat
  25. Tahá to soubor http://id.annevankesteren.nl/fancy.css. Ale proč zrovna tenhle, to nevím. :-)

    OdpovědětSmazat
  26. 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ětSmazat
  27. Odkazy na CSS jsou uloženy v HTTP hlavičce. Samotné CSS se nachází na http://id.annevankesteren.nl/fancy.css

    OdpovědětSmazat
  28. 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ětSmazat
  29. 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ětSmazat
  30. Je tam zajímavá ta HTTP hlavička Link. Ale asi poněkud nestandardní.

    OdpovědětSmazat
  31. 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ětSmazat
  32. Odkaz na CSS soubor je v HTTP hlavičce.

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

    Karel

    OdpovědětSmazat
  34. 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ětSmazat
  35. Linkování CSS přes HTTP hlavičky?

    OdpovědětSmazat
  36. 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ětSmazat
  37. Link na fancy.css je uveden jako HTTP hlavička...

    OdpovědětSmazat
  38. Posílá se HTTP hlavička Link.

    OdpovědětSmazat
  39. Jednoduchý...
    Custom CSS fancy.css

    OdpovědětSmazat
  40. 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ětSmazat
  41. 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ětSmazat
  42. Řekl bych, že je to prostě rozbitý :D

    OdpovědětSmazat
  43. 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ětSmazat
  44. No protože posílá v HTTP hlavičce referenci na CSS styl:

    Link: ; rel=stylesheet

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

    OdpovědětSmazat
  46. 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ětSmazat
  47. Tip: Diky parametru Link v HTTP response dojde k nahrani dodatecneho CSS stylu fancy.css

    OdpovědětSmazat
  48. 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ětSmazat
  49. Ani se nedívám na zdroják, ale podobné finty jsem prováděl sám: HTTP Link + CSS generovaný obsah. :)

    OdpovědětSmazat
  50. 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ětSmazat
  51. Žeby HTTP hlavička se stylem fancy.css :o)

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

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

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

    OdpovědětSmazat
  54. je tam SVG grafika.

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

    OdpovědětSmazat
  56. 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ětSmazat
  57. Hezké použití SVG grafického formátu :-)
    A. Sokola

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

    Link: ; rel=stylesheet, ;rel=stylesheet

    OdpovědětSmazat
  59. 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ětSmazat
  60. 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ětSmazat
  61. Viz HTTP hlavičky: Link <fancy.css>; ...

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

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

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

    OdpovědětSmazat
  65. 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ětSmazat
  66. HTTP hlavička link na fancy.css

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

    OdpovědětSmazat
  67. HTML hlavička Link: ; rel=stylesheet, ;rel=stylesheet


    Pekne ;-)

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

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

    OdpovědětSmazat
  70. Michal Chrobok5. ledna 2010 21:53

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

    OdpovědětSmazat
  71. CSS soubor se posila v HTTP hlavicce:)

    OdpovědětSmazat
  72. 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ětSmazat
  73. Zaujimava hadanka, rad som sa priucil :)

    OdpovědětSmazat
  74. 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ětSmazat
  75. 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ětSmazat
  76. Dopnuji svuj dnesni vyrok - je to tam, posilá se to v hlavičce jako Link ;o) Header ;o)

    OdpovědětSmazat
  77. 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ětSmazat
  78. Cez link a response header to nacitava este tento subor: http://id.annevankesteren.nl/fancy.css
    zvysok je jasny.

    TomAnt

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

    Pekne...

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

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

    Whit

    OdpovědětSmazat
  82. 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ětSmazat
  83. Zeby se odpoved skryvala zde? http://www.w3.org/TR/html4/present/styles.html#h-14.6 :)

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

    OdpovědětSmazat
  85. 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ětSmazat
  86. 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ětSmazat
  87. HTTP header css
    http://id.annevankesteren.nl/fancy.css

    OdpovědětSmazat
  88. Protoze pozadavek na fancy.css je v response header...

    OdpovědětSmazat
  89. Ř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ětSmazat

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