Šuplík Honzy Hučína

Spolehlivý min-width tabulkou

Internet Explorer štve webdesignery řadou věcí, mimo jiné tím, že nepodporuje dost užitečnou CSS vlastnost min-width. Existuje několik postupů, jak tuto vlastnost v IE simulovat, ale všechny mně známé se hodí jen na určitou situaci (ačkoliv je to, pravda, nejčastější praktické použití min-width).

Obecně funkční náhradu min-width neznám, a tak jsem o tom přemýšlel. Přišel jsem na řešení, které sice postrádá eleganci, zato nepostrádá funkčnost – použití tabulky. Ano, já vím, že je to nesémantické řešení a tabulkový layout je z rozumných důvodů zavrženíhodný. Ale zdá se, že to funguje.

Nejdřív ovšem k dosavadním známým řešením. Nejčastěji se používá náhrada pomocí expression. Silnou stránkou je, že sémanticky neničí kód stránky a lze zároveň simulovat min-width i max-width. Slabiny, když odhlédneme od použití Javascriptu, jsou dvě:

1. Po výpočtu velikosti prvku pomocí expression si tuto velikost prvek již ponechá. Vysvětluje to Martin Snížek na Intervalu. Layout se tedy nebude přizpůsobovat aktuální velikosti okna při případné změně.
2. Expression lze použít tam, kde jsme schopni pomocí Javascriptu zjistit rozměry, typicky šířku viewportu. To je sice nejčastější případ (obvykle se min-width dává celému body), ale ne jediný. U vnořených prvků stránky je výpočet aktuálních rozměrů obtížný, ne-li nemožný.

První slabina se dá odstranit použitím Javascriptu, který neustále hlídá rozměry stránky a dynamicky přepočítává potřebnou šířku. Našel jsem ho na doxdesk.com.

Alternativní řešení absence min-width, které se dá ovšem použít jen v jednodušších situacích, uvádí David Shea na Mezzoblue. IE si v případě potřeby zvětší velikost bloku – tak totiž interpretuje vlastnost overflow, která je defaultně nastavena u všech bloků na visible. Podobný princip používá Martin Dvořák: do stránky umisťuje neviditelný blok o dané šířce; pokud se velikost okna příliš zmenší, blok přinutí stránku, aby se nezmenšovala.

Vodorovná zarážka vložená do bloku je zajímavý nápad. Nedalo by se to použít obecně? Kdyby například měl blok nastavenou width:50% a v sobě měl zarážku o šířce 250px, mohla by zarážka zajistit, že se při zmenšení okna pod 500px v IE už blok nebude zmenšovat.

Jenže chyba lávky. Blok sice opticky zůstane široký 250px, ale textový obsah v něm bude mít pořád šířku 50%. Uvádím to v příkladu, na který odkazuji níže.

Zkoušel jsem s tím různě manipulovat, ale nic. Až jsem ze zvědavosti zkusil tabulku – a fungovalo to. Toto je tedy náhrada min-width:

1. Místo bloku, kterému chci nastavit min-width, použít tabulku o jedné buňce.
2. Na začátek buňky umístit průhledný (prázdný) blok o šířce odpovídající min-width a výšce 1px.
3. Do buňky vložit požadovaný obsah.
4. Tabulce nastavit stejné vlastnosti, jako má mít blok.

Prohlédněte si příklad, kdy má blok mít šířku rovnou polovině stránky, nejméně však 250px.