Vlastnost `hasLayout`

Co je zač CSS vlastnost hasLayout a k čemu ji využít.

4. října 2013

3 minuty

Týká se jen Internet Explorerů, oficiální definice zní: hodnota indikuje, zda má element „layout“. To není nic moc jasného.

Osobně bych to popsal jako takovou magickou vlastnost, kterou má smysl zkusit zapnout jako poslední možnost při vytváření webu, když se v Internet Exploreru na rozdíl od ostatních prohlížečů něco špatně zobrazuje.

Někdy zapnutí hasLayoutu umožní, co by jinak nešlo. Třeba:

nabídne další způsob clearování,
umožní z výchozích blokových elementů udělat inline-block.

HTML značky s layoutem

Ve výchozím stavu mají hasLayout zapnutý značky <html>, <body>, tabulky, obrázky (<img>), <iframe>, formulářové prvky a ještě pár zpravidla obstrarožních elementů.

Běžně používané značky jako odkazy (<a>), <div>y, <span>y nebo odstavce (<p>) hasLayout zapnutý nemají.

CSS vlastnosti zapínající layout

Pro elementy, co mají hasLayout ve výchozím stavu vypnutý, existuje jeho zapnutí přes CSS. Není na to nějaké přepínátko, ale hasLayout zapínají určité vlastnosti.

Může to být výška (height), šířka (width), obtékání (float), display: inline-block, absolutní posicování (position: absolute) nastavené na jinou než výchozí hodnotu nebo svislý (od 90° pootočený) text — writing-mode: tb-rl.

Nakonec zapnout layout umí ještě vlastnost zoom — ta je výhodná v tom, že při nastavení na 1 nic neovlivní (pokud se tedy dříve nepoužívala ke skutečnému zoomování), ale jen zapne hasLayout.

element {
  zoom: 1;
}

Teoreticky by se mohla zapsat jen pro IE podmíněným komentářem (pokud nemá řvát CSS validátor) nebo nějakým jiným hackem (třeba rovnítkovým — =zoom: 1 — to už ale validátor neumlčí). Nicméně neexplorerové ji ignorují, takže nevadí ani v originální podobě.