Osobne style CSS dla Internet Explorer / Edge

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://aurainweb.pl/specyficzne-style-dla-internet-explorer/

Osobne style CSS dla Internet Explorer / Edge
aurelia

Recent Posts

Mity o marce osobistej, które warto znać

Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…

1 tydzień ago

Jakie zawody zastąpi AI? Czy mamy się czego bać?

Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…

2 tygodnie ago

Widmo Brockenu – co to jest?

Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…

2 miesiące ago

Relikwie: jak zdobywano, sprzedawano i podrabiano święte przedmioty

Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…

2 miesiące ago

Poznaj 6 powodów, dla których warto posiadać logo

Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…

2 miesiące ago

Dlaczego firmy mylą markę osobistą z firmową

Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…

2 miesiące ago