IE hasLayout

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:

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ý) textwriting-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ě.

Odkazy

  • Vlastnost hasLayout na MSDN

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS @supports

CSS pravidlo @supports

Pravidlem @supports lze v CSS testovat dostupnost CSS vlastností.

CSS pro IE

Zvláštní CSS pro IE

Jak odlišit Internet Explorer od ostatních prohlížečů a vytvořit zvláštní CSS jen pro IE.

Selektory :first-child a :last-child

Selektory :first-child a :last-child

Pro zaměření první/poslední položky v CSS lze místo přidávání tříd použít :first/last-child.

CSS mapa s popisky

Body s popisky na mapě

Statická obrázková mapa s vlastními body a :hover popisky.

Zvýraznění aktivní kotvy

Zvýraznění aktivované kotvy (:target)

Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.

Komentáře