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í.
Řešení najdete v mém dalším příspěvku.
Linkuje fancy.css přes HTTP hlavičku :-).
OdpovědětVymazatHa, HTTP hlavička Link a fancy.css!
OdpovědětVymazatNebude tam zádrhel v tom svg obrázku ? Nic "neobvyklého" tam jinak nevidím.
OdpovědětVymazatZeby "Link: fancy.css;rel=stylesheet" v HTTP hlavicke? Celkom fajn metoda, doteraz som o nej nevedel :-)
OdpovědětVymazatHeht, pouziva http hlavicku "Link". To som nevedel, ze sa to da.
OdpovědětVymazatlebo http://id.annevankesteren.nl/fancy.css
OdpovědětVymazatZjevně je možné do Response headeru na serveru doplnit hlavičku "Link", která následně aplikuje na dokument stylesheet "fancy.css".
OdpovědětVymazatPosílá to fancy.css v http hlavičce :)
OdpovědětVymazatZajímavé, hlavička "Link". Díky za hádanku a odkaz, doteď jsem o tom neměl ponětí. :o)
OdpovědětVymazatZajímavé. Nevěděl jsem, že jde poslat Link v hlavičce.
OdpovědětVymazatPosílat link na css v odpovědi na http požadavek je vskutku kouzelné.
OdpovědětVymazatTak 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ětVymazathttp://jdem.cz/dghe4
OdpovědětVymazatNejsem webdesigner a nikdy jsem nijak hlouběji "nehatlamatlal", ale tohle je zajímavé. Těším se na rozuzlení :)
OdpovědětVymazatJediný 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ětVymazatLink: ; rel=stylesheet, ;rel=stylesheet
OdpovědětVymazatAť žije firebug ;) Nevím, jak bych to já provedl, ale posílá se zde CSS styl fancy.css jako GET požadavek
OdpovědětVymazatTak 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:
OdpovědětVymazatLink: ; rel=stylesheet, ;rel=stylesheet
BTW: To SVG se mi nezobrazilo ve FF 3.5, nevím proč :(
HTTP hlavičky:)
OdpovědětVymazatLink: ; rel=stylesheet
Link: ;rel=stylesheet
Martin
Protože SVG :)
OdpovědětVymazathttp://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ětVymazatJedný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ětVymazatPř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ětVymazatno, 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ětVymazatTahá to soubor http://id.annevankesteren.nl/fancy.css. Ale proč zrovna tenhle, to nevím. :-)
OdpovědětVymazatA nebude to hlavičkami serveru:
OdpovědětVymazatHTTP/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
Odkazy na CSS jsou uloženy v HTTP hlavičce. Samotné CSS se nachází na http://id.annevankesteren.nl/fancy.css
OdpovědětVymazatPriznam 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ětVymazatHezká 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.
OdpovědětVymazatNicméně nejhezčí na tom je druhý level, když se zobrazí fancy.css ostylované pomocí fancy.css. Něco takového jsem viděl poprvé.
Je tam zajímavá ta HTTP hlavička Link. Ale asi poněkud nestandardní.
OdpovědětVymazatOdkaz 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ětVymazatOdkaz na CSS soubor je v HTTP hlavičce.
OdpovědětVymazatPěkný případ připojování CSS (fancy.css) pomocí HTTP hlaviček.
OdpovědětVymazatKarel
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ětVymazatLinkování CSS přes HTTP hlavičky?
OdpovědětVymazatZa 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ětVymazatLink na fancy.css je uveden jako HTTP hlavička...
OdpovědětVymazatPosílá se HTTP hlavička Link.
OdpovědětVymazatJednoduchý...
OdpovědětVymazatCustom CSS fancy.css
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ětVymazatPosila css nekde v hlavickach, fancy.css, celkem zajimave. Google Chrome si to ale vylozit neumi :(
OdpovědětVymazatNapred 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 :)
Řekl bych, že je to prostě rozbitý :D
OdpovědětVymazatKlíč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ětVymazatNo protože posílá v HTTP hlavičce referenci na CSS styl:
OdpovědětVymazatLink: ; rel=stylesheet
Tak to jsem asi ultragenius :-) Vyřešeno ještě dřív než odkliknuto!
OdpovědětVymazatPá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.
OdpovědětVymazatMiK
Tip: Diky parametru Link v HTTP response dojde k nahrani dodatecneho CSS stylu fancy.css
OdpovědětVymazatPoslíat hlavičky jako HTTP hlavičky, to se dělá. Ale odkazy na CSS, to se nedělá :-) Fuj, nanic.cz
OdpovědětVymazatAni se nedívám na zdroják, ale podobné finty jsem prováděl sám: HTTP Link + CSS generovaný obsah. :)
OdpovědětVymazatnejdele trvalo presvedcit windows 7, aby zapli telnet ; ) Coz se nepovedlo, ale linux me v tom nenechal:
OdpovědětVymazatHTTP/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?
Žeby HTTP hlavička se stylem fancy.css :o)
OdpovědětVymazatLink header, viz http://www.w3.org/TR/html401/present/styles.html#h-14.6 :)
OdpovědětVymazatCSS je schované pomocou HTTP hlavičky: Link: ;rel=stylesheet
OdpovědětVymazatCesta k nemu: http://id.annevankesteren.nl/fancy.css
je tam SVG grafika.
OdpovědětVymazatHTTP hlavička link (rel="stylesheet"). dobrý :]
OdpovědětVymazatHTTP hlavička Link. Ale proč 2x?
OdpovědětVymazatLink: ; rel=stylesheet
Link: ;rel=stylesheet
Jinak to hezky ukazuje, jak moc neznáme to, co denně používáme (platí snad na všechno)
Hezké použití SVG grafického formátu :-)
OdpovědětVymazatA. Sokola
HTTP hlavička Link linkuje CSS súbor fancy.css. A ten formátuje stránku.
OdpovědětVymazatLink: ; rel=stylesheet, ;rel=stylesheet
Moc pěkné, posílat "Link ; rel=stylesheet, ;rel=stylesheet" přímo v hlavičce...
OdpovědětVymazatCo bychom si bez toho FireBuga počali :)))
Používá fancy.css
OdpovědětVymazatfancy.css ;)
OdpovědětVymazat//snouman.net
Styl fancy.css přidává v http hlavičce :o) (Záložka Info v Opeře mě zachránila :-)
OdpovědětVymazatKaž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 :-)
Viz HTTP hlavičky: Link <fancy.css>; ...
OdpovědětVymazatStránka posílá http hlavičku link s obsahem '; rel=stylesheet, ;rel=stylesheet'.
OdpovědětVymazatŘekl bych, že stránka posílá informace o připojených css stylech v http hlavičce
OdpovědětVymazatcss pripojene via http protokol
OdpovědětVymazatProhlížeč dostane odkaz na CSS v HTTP hlavičce od serveru.
OdpovědětVymazatfancy.css
OdpovědětVymazatPo 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!
OdpovědětVymazatHTTP 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...
HTTP hlavička link na fancy.css
OdpovědětVymazatDíky za hádanku, to jsem neznal.
HTML hlavička Link: ; rel=stylesheet, ;rel=stylesheet
OdpovědětVymazatPekne ;-)
Hezké, nějak jsem netušil, že je možné poslat css pomocí hlavičky.
OdpovědětVymazatV HTTP hlavičce je odkaz na fancy.css...
OdpovědětVymazatFirebug :)
Styl vložený HTTP hlavičkou, ještě že to podporuje jen minorita prohlížečů.
OdpovědětVymazatCSS soubor se posila v HTTP hlavicce:)
OdpovědětVymazatServer vrací
OdpovědětVymazatLink: < 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
Zaujimava hadanka, rad som sa priucil :)
OdpovědětVymazatVylucovaci princip trkne:
OdpovědětVymazat=> 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 :-)
apache posila odpovida na get odezvou link ; rel=stylesheet, ;rel=stylesheet
OdpovědětVymazat- cili jde o nastaveni apache, ani ne tak o browseru, ne?! ;)
S.
Dopnuji svuj dnesni vyrok - je to tam, posilá se to v hlavičce jako Link ;o) Header ;o)
OdpovědětVymazatMoc pěkná hádanka. Do té doby, než jsem se mrknul firebugem, co se stahuje, jsem plaval.
OdpovědětVymazatOdpověď leží v http://www.greenbytes.de/tech/webdav/draft-nottingham-http-link-header-00.html
--stej
Cez link a response header to nacitava este tento subor: http://id.annevankesteren.nl/fancy.css
OdpovědětVymazatzvysok je jasny.
TomAnt
wow, taky header som este nevidel:
OdpovědětVymazatLink: ; rel=stylesheet, ;rel=stylesheet
Pekne...
Link na CSS styl je poslán přímo v hlavičce dokumentu. Hezká finta.
OdpovědětVymazatAhá, ten link na CSSko je přímo v hlavičce. Pěkné, musím vyzkoušet...
OdpovědětVymazatWhit
Stránka posílá HTTP hlavičku "Link" s obsahem "; rel=stylesheet, ; rel=stylesheet". Vivat Firebug :-)
OdpovědětVymazatDokumentaci k tomuto se mi ale najít nepodařilo.
Zeby se odpoved skryvala zde? http://www.w3.org/TR/html4/present/styles.html#h-14.6 :)
OdpovědětVymazatNemohlo by to být tím, že je v hlavičce uvedeno "Link: fancy.css;rel=stylesheet"?
OdpovědětVymazatWow, nevěděl jsem že to jde i takhle :)
OdpovědětVymazatResponse 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 :)
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...
OdpovědětVymazatKdo by se chtěl dočíst něco víc:
http://www.w3.org/Protocols/HTTP/Object_Headers.html#link
HTTP header css
OdpovědětVymazathttp://id.annevankesteren.nl/fancy.css
Protoze pozadavek na fancy.css je v response header...
OdpovědětVymazatŘešení jsem zveřejnil. Díky všem za účast, bylo vás víc, než jsem čekal.
OdpovědětVymazat@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.