ipsace i tiskace

Na úvahu o možném desetiprocentním předpokladu se mi ozval Honza Hučín s velmi podrobným vysvětlujícím mejlem. Vyplývá z něj, že můj miniprůzkum nic nepotvrdil ani nevyvrátil, že podíl "zahradníků" může ležet mezi 0 až 22%, Přičemž pravděpodobost se vzrůstajícím podílem klesá.

Protože se Honza chystá o statistice psát na svém blogu seriálek, nebudu zde uvádět podrobný postup, jak se k těm číslům dospělo. Přečteme si snad brzo u něj. Statistika vůbec nemusí být nudná!

A teď o webdesignu

Věčný kverulant Misha mi vmetl do tváře, že na hlavní stránce zahrady (klik!)tohoto stylu je velmi nepohodlné najít odkaz na komentáře. Protože pokud je příspěvek (na indexu!) zobrazen celý, je nutné se vrátit nahoru doprava, kde je ten odkaz nenápadně ukryt.

Na rozdíl od jiných připomínek mě tato velice trápila, protože jsem se za ni moc styděl. Odporuje totiž jedné ze zásad přístupnosti nebo použitelnosti, nevím přesně které, ale to je fuk. Prostě jsem věděl, že s tím musím něco dělat.

Odbočka k nadpisu spotu

Jiný občasný kverulant, Bin. Ládin, měl zase problémy vstoupit do textarey základníhotohoto stylu. Prostě na ni klikl, a cursor se tam nepřesunul.

Přičinou byla ikona "XHTML W3C" vedle vlevo od textarey. Je totiž obalena divem, což je blokový prvek. Tento prvek byl relativně naposicován o 90px výše, aby byl vedle pole pro vkládání textu komentáře, což je hezčí.

Přitom jsem zapomněl, že blokové prvky mají defaultní šířku 100% svého omezujícího bloku. Ačkoliv v bloku nebylo nic, kromě té ikony, ve skutečnosti se táhl nad celou textareou až k pravému okraji stránky. Vidět skrz něj bylo, ale prokliknout se dolů nešlo ani při vynaložení maximální síly, co myš snesla.

Když jsem po mnoha minutách vztekání se a dupání přišel na příčinu, hned se mi vybavil obrázek z Pixyho knížky, kde jsou nakresleny vrstvy dokumentu jako průhledné fólie. Jo, fólie... pěkně pevná skla to jsou! Fólii proklikneš, sklo ani náhodou.
Octranění chyby bylo triviální. Divu obalujícímu ikonu se nastavila šířka ikony: width: 90px;

Tato odbočka může být poučná sama o sobě, je však klíčová pro další zápletku. Neméně důležitou poučkou je to, že absolutně posicované prvky leží vždy ve vyšší vrstvě, než je normální tok dokumentu, a žádný z-index s tím nic nenadělá.

Znásilnění struktury dokumentu

V původní versi zahrady byla celá patička spotu přesunuta do boxu vpravo nahoře. Využil se k tomu plovoucí div s názvem rubriky, který se udělal dostatečně velký, aby se do něj celá patička vešla. Ta se tam potom absolutně napozicovala, takže údaje "autor", "čas" vložení spotu, "tvralý odkaz" i odkaz na "komentáře" byly pohromaďě s názvem rubriky a byly obtékány normálním textem spotu, chovaly se jako plovoucí blok.

Jak však z této už dost znásilněné patičky vyjmout odkaz na komentáře a umístit ho na konec spotu, který má zcela nepředvídatelnou délku i šířku?

Užuž jsem myslel, že kapituluju a zasáhnu do šablony, abych vytvořil ještě jeden odkaz, který nebude v patičce, ale mimo ni, a který prostě sám přirozeně zakončí celý spot. Ale to by byla prohra, to už bych mohl klidně skončit s blogem :-)

Takže jsem se vydal na tenký led, přesněji řečeno na tlusté sklo.

Jezevčík!!!

Co kdybych patičku přetáhl přes celý rodičovský blok a v ní jednotlivé údaje nějak naposicoval? Vždyť stačí zadat:

Tím vznikne nad celým spotem skleněná plocha, souřadný systém, na který můžeme všechny prvky uvnitř celé patičky libovolně umisťovat. Myšlenka krásná, než zjistíme, že pod sklem bude spotu pěkně dusno, nepůjde kliknout nejen na eventuální prvky formuláře, ale ani na odkazy. A bez odkazů není blogu.

Dobře, tak nechám výšku, ale šířku zúžím na šířku toho boxíku vpravo nahoře a naposicuji doprava.

To už použitelné je, stále ale máme poměrně široký pás u pravého okraje, který je pod sklem. Musel by se tam pod tím udělat padding, tím ale úplně přijdeme o efekt obtékání toho horního boxíku.

A co kdybychom to zúžili na nějakou hodnotu, která už nebude vadit? Třeba 30px? Do třiceti pixelů se mi sice nic nevejde umístit, ale proč by mělo? Tak to nechám přečuhovat doleva! Když jsem zjistil, jak je to snadné, musím se o to podělit. Obrázek růžičky, který byl původně pozadím celé patičky, se přemístí do jednoho z těch přesahujících prvků, který se absolutně naposicuje.

Samotné přesahování se u neposicovaných prvků vytvoří záporným levým marginem, u posicovaných přímo souřadnicí right. Pak už stačilo si s tím hodinku hrát, než jsem nalezl správné hodnoty, zkusit všechny velikosti oken mozilly, zmenšit písmo o dva stupně, zvětšit písmo o čtyři stupně a nastavit kompromisy. Drtivá většina rozměrů je odvozena od velikosti písma.

Kdo se nechce hrabat ve stylu, tady má jezevčíka ve vitrínce:

Určitě by se jezevčík dal zúžit třeba na jediný pixel, ale takhle to bohatě stačí a nová optimalisace hodnot by mě asi zabila. Zábavnější je vymýšlet pozadíčka a kytičky.

Zahrádka nyní už funguje docela použitelně. Pokud máte browser, který to přežije, zkuste si to, dost se to zlepšilo.

Závěr

Nejspíš to není "objevení ameriky", možná je tento postup běžný. Nevím, jsem jen lama, ale aspoň jsem tomu dal roztomilý název :-)

Ale spíš si myslím, že každý normální webmistr by prostě přizpůsobil kód požadovanému stylu, proto nebyl nikdy nucen přemýšlet o takovýchto blbinách. Před pár lety by tento postup možná mohl sloužit jako příklad toho, že CSS zvládne všechno. Dneska to nikoho nevzruší. Za pár let to možná zvládnou i všechny browsery. :-)