Najpoważniejsze błędy przeglądarki Internet Explorer i sposoby na ich ominięcie

22 January 2010 | Zbigniew Pieslak | Komentarzy: 3 »

Pomimo iż standard CSS2 został oficjalnie zaprezentowany w 1998 roku, do dzisiaj niektóre przeglądarki (głównie IE) mają problemy z jego poprawną interpretacją. Podczas tworzenia czy budowania stron WWW należy dobrze się zastanowić czy ten lub inny kod HTML/CSS będzie się dobrze wyświetlał we wszystkich przeglądarkach.

Według badań Net Applications z grudnia 2009 ok. 63% użytkowników na świecie korzysta z przeglądarki Internet Explorer (z tego najwięcej, bo prawie 21% z wersji 6 i 16% z wersji 7 – źródło). Gołym okiem widać, że chcąc nie chcąc trzeba zrobić stronę WWW tak, aby działała poprawnie w IE6 i IE7. Wbrew pozorom nie jest to takie straszne, należy tylko pamiętać o najczęstszych błędach jakie generują te dwie przeglądarki (głownie IE6).

Internet Explorer 6

Brak pełnej obsługi półprzeźroczystych PNG

Najpoważniejszym błędem, wydaje się być brak pełnego wsparcia dla półprzeźroczystych obrazków PNG. Jest to problem najtrudniejszy do rozwiązania. Jednym ze sposobów jest stosowanie tzw. „filtrów”, które to IE obsługuje „prawie” tak samo dobrze jak nowoczesne przeglądarki. Z tym że „prawie” robi wielką różnicę…

Przykład błędnego renderowania półprzeźroczystego png (z lewej) i zastosowanie filtra (z prawej).

Kod:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/box.png', sizingMethod = 'crop');

Należy pamiętać żeby wyłączyć oryginalny obrazek:
background: none;

Istnieje kilka wad tego rozwiązania:

• Linki „nakryte” filtrem mogą stać się nieklikalne i nie we wszystkich sytuacjach można temu zaradzić (jednym ze sposobów jest nadanie layoutu na link, czytaj niżej)
• Obrazka nałożonego przez filtr nie można pozycjonować tak, jakby to można zrobić poprzez: background-position. Można go za to skalować, korzystając z metody filtra: sizingmethod = „scale” (korzystając z tego parametru warto pamiętać, że obrazek powinien być możliwie najmniejszy, jest wtedy większa szansa na zniwelowanie efektu nieklikalnych linków, przykrytych filtrem).
• Ścieżka do pliku z grafiką musi być relatywna do strony, a nie do styli, tutaj najpewniejszym rozwiązaniem jest nadanie ścieżki absolutnej. Innym rozwiązaniem (mniej pewnym – może powodować zawieszanie przeglądarki) jest napisanie behaviora:

 behavior: expression(this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.currentStyle.backgroundImage.toString().replace('url("','').replace('")','') + "', sizingMethod='crop')");

Niewątpliwą zaletą filtrów jest to, że nie wymagają one JavaScriptu. Traktowane są one przez przeglądarkę jako właściwość CSS.

Transparent PNGs in Internet Explorer

Właściwość haslayout

Wykonując stronę internetową można zauważyć, że większość błędów IE jest powtarzalna i zazwyczaj powtarzają się one w tych samych sytuacjach. Aby zrozumieć dlaczego tak się dzieje, warto przeanalizować ideę przewodnią jaka towarzyszyła twórcom tej przeglądarki i zrozumieć sposób w jaki IE przetwarza kod HTML/CSS.

IE (Microsoft), wprowadziło koncepcję tzw. layoutu. Determinuje on jak element ma być renderowany, jakie są jego relacje z innymi elementami i jak reaguje on na zdarzenia. Dany element HTML może mieć lub nie mieć layoutu, co określane jest wewnętrzną właściwością hasLayout. Niektóre elementy HTML mają właściwość hasLayout = true włączoną domyślnie (np. html, body, table, img, input, embed, object…).

Większość błędów można skutecznie wyeliminować po prostu zmieniając właściwość elementu hasLayout. Jednak, co ciekawe, nie można tego zrobić bezpośrednio, ale należy nadać elementom określoną właściwość CSS (np. height: 1%, zoom: 1;). Ja polecam skorzystanie z właściwości zoom. I tak jeśli:

zoom: 1; – element uzyska layout (hasLayout = true)

zoom: normal; – element odzyska domyślną wartość hasLayout

Dobrym pomysłem przy projektowaniu strony jest wpisanie do swojego resetu CSS właściwości:

* { zoom: 1; }

Uwaga: Ponieważ wszystkie elementy uzyskają layout, niekoniecznie może to dać pożądany efekt (np. elementy o właściwości: display: inline; zachowują się jakby miały display: inline-block;), wówczas takim elementom należy przywrócić pierwotną wartość hasLayout poprzez: zoom: normal;

On having layout

3 pikselowy margines

Dość popularnym błędem jest także nadawanie przez IE6 3 pikselowego marginesu do elementów, które z nim sąsiadują. Przykład przedstawia obrazek:

Widać na nim wyraźnie, że paragrafy, które sąsiadują z elementem floatowanym zachowują się tak, jakby miały nadany 3 pikselowy margines z lewej. Efekt ten jest widoczny tak długo, jak długo paragraf lub inny element „sąsiadują” z elementem floatowanym.

Aby sobie poradzić z tym problemem, należy nadać layout na element sąsiadujący z floatem, np. poprzez zoom: 1; oraz uciąć margnies z elementu floatującego, np.: margin-left: -3px;

Poniżej wynik tego działania:

The IE6 Three Pixel Text-Jog

Inne błędy

Innym popularnym błędem jest podwajanie marginesu, jeśli element ma właściwość float ustawioną na left lub right i margines na taki sam kierunek (left, right). Aby się go pozbyć wystarczy na floatowany element nadać display: inline;

Po lewej: element float: right; margin-right: 30px;, po prawej dodatkowo z właściwością: display: inline;

Dokuczliwym błędem jest też brak obsługi min-height. Aby sobie z tym poradzić wystarczy zamiast min-height nadać odpowiednią wartość height . Trzeba jednak pamiętać, że dotyczy to tylko stylów dla IE6, ponieważ jeśli w elemencie będzie więcej treści, w IE6 po prostu rozciągnie się, natomiast w innych przeglądarkach niekoniecznie.

Jeśli chodzi o elementy formularza, najsłabszym ogniwem jest <select>. Z popularniejszych właściwości CSS można mu nadać jedynie width i background. Można zapomnieć o border, padding czy height. Dzieje się tak dlatego ponieważ element ten nie jest renderowany przez samą przeglądarkę a przez komponent systemu operacyjnego.

Selektory

Internet Explorer ma także problemy z obsługą bardziej zaawansowanych selektorów. Nie obsługuje np. selektora dwóch klas: .klasa1.klasa2. Aby ominąć to ograniczenie można nadawać id zamiast klasy, ponieważ ten selektor jest obsługiwany: #id.klasa.

Nie obsługiwany jest również selektor :hover na elementach innych niż linki z atrybutem href. Jednym ze sposobów na ominięcie tego może być opakowanie danego elementu w tag <a>, jednak rozwiązanie to ma taką wadę, że kod HTML może się nie walidować. Alternatywnie można napisać kod JavaScript tylko dla IE.

Przykład dla jQuery (należy wcześniej zdefiniować klasę hover):

if ($.browser.msie && $.browser.version < 7) {
 $("div").bind("mouseenter mouseleave", function () {
  $(this).toggleClass('hover');
 });
}

CSS 2.1 selectors

Internet Explorer 6,7,8

Właściwość opacity

Pomimo iż opacity dopiero będzie uwzględnione w standardzie CSS3, jest jedną z niewielu jego części które można zastosować nawet w IE6. Oczywiście jest jedno “ale”, aby to zadziałało trzeba skorzystać z filtrów Microsoftu.

Po lewej obrazek z opacity: 1; Po prawej opacity: 0.4;

Deklaracja opacity dla IE6-IE7

filter: alpha(opacity=40);

Deklaracja dla IE8

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"

Jak widać IE6-IE7 i IE8 potrzebują innego zapisu filtrów, dodatkowo IE7 musi mieć obie deklaracje w odpowiedniej kolejności (jeśli nie zostanie ona zachowana w ”IE8 jako IE7” opacity nie zadziała).

Poniżej kod:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; // pierwsze
filter: alpha(opacity=40); // drugie

Błędy przedstawione w tym artykule są jednymi z popularniejszych na jakie można się „natknąć” robiąc strony WWW. Oczywiście artykuł ten nie wyczerpuje tematu i nie traktuje ich „dogłębnie”. Aby dowiedzieć się więcej zachęcamy do odwiedzenia linków, które zostały umieszczone na końcu paragrafów. Proces tworzenia stron WWW pod IE nie musi być żmudny, wystarczy znać podstawowe błędy tej przeglądarki i sposoby jak sobie z nimi radzić.