Na obranu IE6

Málo věcí je ve webdesignu tak jednoznačných jako image Microsoft Internet Exploreru verze 6 mezi vývojáři. Lze to považovat za kolorit, asi jako nadávky na politiku před volbami. Dvě obvyklá trvzení vývojářů mě ovšem nutí stavět se do opozice ustáleného názoru:

1. „IE6 je tak málo rozšířený, že jej mohu již nyní směle ignorovat.”
2. „Ladění webů pro IE6 vyžaduje nadlidské množství nepříjemné práce.”

Obávám se totiž, že jsou často produktem lidské liknavosti, která našla obhajobu ve většinově přijímaném názoru. Takže brousím modré „é”, sundávám brýle a vyrážím na pomoc drahému staříkovi…

V článku uvažujeme v intencích HTML/CSS vrstvy prezentačních webů, v případě aplikací a Javascriptu bude situace jiná.

Jak v Internet Exploreru zjistit, zda prvek má hasLayout?

javascript:alert(id_hledaneho_prvku.currentStyle.hasLayout);

Občas se může zdát, že MSIE bug, který právě proklínáte, nemůže ze špatného nastavení vlastnosti hasLayout vycházet, protože ji má určitě nastavenou správně. Ověřte to vždycky raději tímhle způsobem v adresním poli prohlížeč, nejspíš se totiž mýlíte. Vím o čem mluvím. .-)

„Ne, web nemusí vypadat stejně ve všech prohlížečích” a jak to vysvětlit klientovi?

Client: “I saw the design on Sam’s IE7 today and she doesn’t see the rounded corners or shadows. Can IE not ‘do’ those?”
Me: “No. IE uses very old technology. I can hack the site to use lots of images and other things, but that will likely slow the site down for everyone. Plus it means that I will tie the HTML to the visual layout, making the site less flexible (and expensive) to update in the future. It’s your choice, you’re paying. You can either spend my time and your money on hacks for a diminishing return, or we can spend it on making more cool functionality. What’s it to be?”
Client: “Let’s do the cool stuff.”

Obhájce myšlenky “ne, web nemusí vypadat stejně ve všech prohlížečích” Andy Clark ve svém výborném komentáři pod vlastním výborným článkem na 24 ways dodává příkladným interview s klientem odvahu všem kodérům dosud váhajícím před progressive enhancement metodou.

Vertikální centrování víceřádkového obsahu v inline prvku

Je to jeden z častých úkolů v CSS, který vypadá v prohlížeči jednoduše…

…a v HTML taky:

<a href="http://www.example.com">
 <span>Víceřádkový obsah ve &lt;span&gt;u vnořeném v&nbsp;&lt;a&gt;</span>
</a>

Jenže jednoduchý vůbec není. Alespoň ne, pokud uvažujeme o podpoře MSIE ve verzích starších než 8.

K centrování jednořádkového obsahu se ujal hack s nastavením line-height na stejnou hodnotu jako je výška rodičovského prvku.

Jenže sdělení „prvek má jednořádkový obsah” je na webu asi stejně pravdivé jako „náš web se ve všech prohlížečích zobrazuje stejně”. Můžete to tvrdit, ale musíte očekávat, že v nějaké situaci to nebude pravda.

Proto se mi líbí poměrně hezké řešení Rogera Keayse. Ony to jsou rovnou řešení dvě. Pro standardní prohlížeče (včetně IE8 ve standardním módu) …

a {
  display: table;
  text-align: center;
  width: 300px;
  height: 300px;
} 

a span {
  display: table-cell;
  vertical-align: middle;
}

… a pro IE7 a IE6:

a {
  display: block;
  position: relative;
} 

a span {
  display: block;
  position: absolute;
  text-align: center;
  left: 0px;
  width: 100%;
  cursor: pointer;
  top: expression(this.parentElement.clientHeight / 2 - this.clientHeight / 2);
}

Nezapomeňte CSS pro starší Internet Explorery izolovat do zvláštních stylopisů oddělených nalinkovaných v dokumentu pomocí podmíněných komentářů.

Bug pro dnešní den: chybná implementace z-index v IE6

Projevuje se tak, že prvek s nižším z-indexem překrývá prvek s vyšším z-indexem.

Stane se ve chvíli, když prvek s vyšším z-indexem má rodiče s relativní pozicí. (position: relative).

Je kruté, že jediným řešením pravděpodobně je vyhnout se v takovém případě relativnímu pozicování rodičovského prvku.

Podrobně to vysvětlují na blogu Two’s-Complement.

CSS řešení: když v MSIE nefunguje záporný text-indent pro input

Mám CSS kód pro grafické tlačítko, ve kterém nechci zobrazovat text.

input#site-search-submit
{  
  text-indent: -500px;
}

Trik se záporným text-indent funguje ve standardních prohlížečích. Ne však v IE6+7. Tam musíme přidat pár řádků:

input#site-search-submit
{  
  text-indent: -500px;
  display: block;
  font-size: 0px;
  line-height: 0px;  
}

Odpověď na logicky následjící otázku “A proč?” dnes nebude následovat. Nezjistil jsem ji. Lepší popis řešení je na Productive Dreams.