The Zero

Internet Explorer nepodporuje spoustu skvělých věcí, jak všichni moc dobře víme. Jedna z nich, max-width, je opravdu nepostradatelná pro plovoucí layouty. Osobně u každého plovoucího layoutu dávám max-width: 1000px; a myslím, že to bohatě stačí.

Jak ale dosáhnout stejného efektu v IE? Řešení pomocí expressions už dávno popsal Jirka Chomát, ale má to jednu nevýhodu, jestli se nepletu, zápis width: expression(něco); CSS validátor nepřekousne.

Protože aktuálně připravuji redesign blogu (já se změním!), řekl jsem si, že jednou výjimečně vyjdu vstříc i uživatelům modrého zla a něco vymyslím. První řešení, které mě napadlo, je jednoduché, ale není zrovna nejšťastnější a jak to tak teď píšu, vlastně za nic nestojí, ale když už jsem si dal tu práci, uvedu ho.

Celý obsah stránky je obalen v blokovém elementu, dejme tomu <div id="body">. Na konec stránky vložíme podmíněný komentář:

<!--[if IE]>
<script src="inc/js/ie.js" type="text/javascript"></script>
<![endif]-->

Samotný JS soubor je pak jednoduchý:

var body=document.getElementById("body");
if(body && body.offsetWidth>1000)
	body.style.width="1000px";

A je to. Hlavní nevýhoda této metody spočívá v tom, že stránka při vykreslování problikne, pokud se má obsah zužovat. Nevadí, můžeme zkombinovat to nejlepší z obou triků: Expressions a podmíněné komentáře. Do hlavičky stránky tak přidáme kód

<!--[if IE]>
<style type="text/css">
/* <![CDATA[ */
#body	{
	width: expression(do­cument.body.cli­entWidth>1000 ? "1000px":"auto");
}
/* ]]> */
</style>
<![endif]-->

Máme validní XHTML (dokonce i CDATA to má ) a IE použije maximálně 1000px.

Tři poznámky: Za prvé, nejde nastylovat tělo samotné, musí to být nějaký potomek, za druhé, funguje to asi jen v IE se zapnutým JavaScriptem (99% minimálně, troufám si tvrdit) a za třetí, ta podmínka by měla být spíš <!--[if IE lt 7]>, protože IE 7 už myslím max-width zvládá, ale momentálně to nemám jak otestovat.