Osobne style CSS dla Internet Explorer / Edge

Czas czytania: 2 minut

Częstym problemem z jakim borykają się twórcy stron internetowych jest to w jaki sposób zinterpretuje ją przeglądarka. Niestety każda robi to w nieco inny sposób. Powodów jest kilka najczęstsze to jednak:

  • inny sposób interpretacji danej właściwości
  • nie interpretowanie konkretnej właściwości

W efekcie na naszych stronach mogą pojawiać się „błędy”. Jednym ze sposobów na pozbycie się ich, jest utworzenie innych styli pod różne przeglądarki. Jak zapewne już wiecie IE lub Edge są właściwie chyba najgorszymi przeglądarkami. W obu przypadkach można mówić nawet że mają własne standardy CSS. A tak prościej – nie obsługują wielu właściwości CSS.

IE i Edge – czy warto brać je pod uwagę?

Tak, tak i jeszcze raz tak. Przeglądarki te są podstawowymi aplikacjami wgranymi w Windows. W efekcie część użytkowników tych systemów nawet nie pomyśli o takiej przeglądarce jak Firefox.

Maja już IE lub Edge (najnowsze wersje Windows) i dlatego nie widzą potrzeby zmiany. Dla nich to nie przeglądarka jest mało „użyteczna” tylko ty nie umiesz tworzyć stron. Warto tu wspomnieć, że część osób korzysta w dalszym ciągu z Windows XP a tam domyślna przeglądarką jest IE 6.

Osobne style pod starsze wersje IE

W przypadku IE style CSS bardzo często umieszczamy w osobnym pliku. Wykorzystujemy do tego specjalne znaczniki (zmodyfikowane komentarze HTML), umieszczone pomiędzy <head> a </head>.

<!--[if IE]>
Komentarz widoczny w Internet Explorer
<![endif]-->
<!--[if IE 7]>
Komentarz widoczny w Internet Explorer 7
<![endif]-->
<!--[if lt IE 7]>
Komentarz widoczny w wersji Internet Explorer starszej niż 7
<![endif]-->
<!--[if gt IE 7]>
Komentarz widoczny w wersji Internet Explorer nowszej niż 7
<![endif]-->
<!--[if lte IE 6]>
Komentarz widoczny w wersji Internet Explorer starszej niż 6
<![endif]-->
<!--[if gte IE 7]>
Komentarz widoczny w wersji Internet Explorer 7 lub nowszej
<![endif]-->

Analogiczne można stworzyć style do IE9 i IE10

Komentarze warunkowe a wersja przeglądarki – czyli trochę objaśnień:
  • gt (ang. greater than) – nowsza od wersji np. [if gt IE 7] -> komentarz widoczny w nowszej niż 7 czyli 8
  • gte (ang. greater than / equal to) – nowsza od, lub równa wersji np. [if gt IE 7] -> komentarz widoczny w wersji 7 i kolejnych
  • lt (ang. less than) – starsza od np. [if gt IE 7] -> komentarz widoczny w wersji w starszych wersjach niż 7
  • lte (ang. less than / equal to) – starsza od, lub równa wersji np. [if gt IE 7] -> komentarz widoczny w wersji 7 i starszych

 

Czasem pojawia się problem z odczytywaniem niektórych styli warto wtedy zastosować następujące zmiany:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

a następnie  upewnić się czy mamy prawidłowo wpisany kod np.:

<!--[if IE 7]>
<link type="text/css" rel="stylesheet" media="all" href="twoj_css_pod_ie7.css" />
<![endif]-->

Nowsze wersje IE (od 9) oraz Edge

Podobnie jak w starszych wersjach dodając style tylko do IE i Edge możemy użyć komentarzy. Tym wypadku będzie on jednak wyglądał następująco:

<!--[if IE]> Internet Explorer 9- <![endif]-->

 

 

 

Warto zobaczyć jeszcze
https://www.aurainweb.pl/2012/12/specyficzne-style-dla-internet-explorer/