by: Aurelia SypniewskaPosted on:

Haki CSS dla różnych przeglądarek internetowych (podsumowanie)

Czas czytania: 3 minut

Jakiś czas temu zadano mi pytanie o to czy „można dodać inne style CSS dla rożnych przeglądarek internetowych”. 

Oczywiście odpowiedz brzmi tak. W sumie to już kiedyś na blogu o tym pisałam. Tworzyłam w tedy osobny plik dla Google Chrome,  Safari, Internet Explorer. To chyba była bardziej ciekawostka niż praktyczne zastosowanie. W praktyce głównie osobne style dodawała się do Internet Explorer.

Zabawy z IE – czyli jak to kiedyś było (i chyba nie uległo zmianie)

„Cudowna przeglądarka” jedyne do czego w praktyce się nadawała to do pobrania innej przeglądarki. ? Dużo osób nie do końca było jednak tego świadomych. W systemach Windows XP bardzo długo jako podstawowa wyszukiwarka był dostępny Internet Explorer w wersji 6. Pomimo kilku aktualizacji oraz informowaniu, że przeglądarka to „zabytek klasy 0” wiele osób zrezygnowało z niej dopiero wraz z przeniesieniem się do nowego systemu operacyjnego.?

O IE pisałam we wpisie Osobne style dla Internet Explorer

Do czego przydają się osobne style

W dużym skrócie – to nie każda przeglądarka ta samo interpretuje kod CSS. W przypadku Chrome, Firefox czy Opery interpretacja jest stosunkowo zbliżona. Z pewnym marginesem błędu.

Natomiast całkiem duże różnice w interpretacji kodu występują w Safari i Edge. Jak nie trudno się domyśleć obie przeglądarki są typowe dla określonych systemów operacyjnych. W innych środowiskach są rzadko (np. podstawowa przeglądarka android korzysta z silnika Safari) lub w ogóle nie spotykane. (Współczuje testerom ?)

Przeglądarki takie jak Firefox czy Opera (również Chrome ?) są dostępne na rożne platformy. 2 pierwsze oryginalnie zostały stworzone na systemy typu UNIX (linux) a jak większość twórców wie są to dużo bardziej przyjazne systemy dla programistów niż Windows. Z Chrome było jednak trochę inaczej ponieważ on zaczął od Windows.

Ogólnie to z pewnością bardzo ciekawy temat na nieco dłuższy artykuł.

To oczywiście te przeglądarki to tylko mały fragment rynku. Ile dokładnie jest przeglądarek – tego nie wiem i wątpię by ktoś wiedział.

Haki do przeglądarek internetowych

To jak dana właściwość CSS będzie zinterpretowana możemy ustawiać na kilka sposobów.

  • dodając do właściwości prefiks
  • tworząc klasy widziane jedynie przez daną przeglądarkę
  • dodając osobny plik z stylami widziany jedynie przez konkretną przeglądarkę
Personalizacja styli z pomocą prefiks (przedrostka)

Najpopularniejszymi przeglądarkami obecnie są:

  • Mozilla Firefox – prefiks -moz-
  • Google Chrome – prefiks -webkit-
  • Internet Explorer / Edge – prefiks  -ms-
  • Safari – prefiks -webkit-
  • Opera – prefiks 15.0 -webkit-
    10.5 -o-

Jak widać część prefiksów się powtarza. Jak to wygląda w praktyce? Przetestujmy to z pomocą gradientu:

background: #1e5799; /* Old browsers */ 
background: linear-gradient(to bottom, #d6722a 0%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
background: -webkit-linear-gradient(top, #e02cb3 0%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */ 
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); /* FF3.6-15 */ 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#337517', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
Zmieniamy kolor tła w zależności od przeglądarki

Uwaga: radzę wam zwrócić uwagę na kolejność przedrostków jak i elementów bez nich. Zła kolejność może doprowadzić do nadpisania elementów.

Selector Hacks

Chrome, Opera, Safari, Android:

.selector:not(*:root) {}

Firefox

  • 1.5/2
body:empty .selector {}
  • ≥ 2
body:last-child .selector, x:-moz-any-link {}

IE Edge

@supports (-webkit-appearance:none) {}
Property/Value Hacks

Chrome, Opera, Safari

.selector { (;property: value;); }
.selector { [;property: value;]; }

IE

.selector { _property: value; }
.selector { -property: value; }
Media Query Hacks

Działające na Android

  • Internet Explorer/Edge ≥ 9
  • Safari 4
  • Android ≥ 2.3
@media screen and (min-width:0
@media screen and (min-width:0\0) {}
) {}

Chrome, Safari, Opera

  • Chrome 22-28
  • Safari ≥ 7
@media \
@media \\0 screen {}
 screen {}
  • Chrome ≥ 29
  • Opera ≥ 16
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }

Dla przeglądarki Firefox

  •  wersja przeglądarki internetowej ≥ 3.6
@media screen and (-moz-images-in-menus:0) {}
  • Mozilla Firefox ≥ 4
@media screen and (min--moz-device-pixel-ratio:0) {}
  •  ≥ 8
@media all and (min--moz-device-pixel-ratio:0) and (min-resolution: .001dpcm) {}
@media all and (-moz-images-in-menus:0) and (min-resolution: .001dpcm) {}
  •  dla wersji ≥ 11
@media all and (min--moz-device-pixel-ratio:0) { @media (min-width: 0px) {} }
@media all and (-moz-images-in-menus:0) { @media (min-width: 0px) {} }
  •  ≥ 29
@media all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm) {}
  •  Internet Explorer/Edge ≤ 8
  • Firefox *
_::selection, .selector:not([attr*='']) {}

IE Edge

  •  Internet Explorer/Edge ≤ 7
@media screen {}
  •  Internet Explorer/Edge ≤ 8
@media 
@media \0screen\,screen\9 {}
screen\,screen {}
  •  Internet Explorer/Edge 8
@media 
@media \0screen {}
screen {}
  •  Internet Explorer/Edge ≥ 9
  •  Safari 4
  •  Android ≥ 2.3
@media screen and (min-width:0
@media screen and (min-width:0\0) {}
) {}

Opera

  • Opera ≥ 12
@media (min-resolution: .001dpcm) { _:-o-prefocus, .selector {} }

Jak widać większość z selektorów oddziałuje na więcej niż jedną przeglądarkę. Dlatego też trzeba przy ich użytkowaniu pamiętać o kolejności.

To oczywiście tylko wycinek haków jakie można spotkać. I wydaje mi się, że dla większości może to się wydawać dość skomplikowane.

Inne haki dla przeglądarek

Jak zdążyłam już napisać na moim blogu znajdują się wpisy dotyczące haków konkretnie pod daną przeglądarkę internetową (brakuje dla Firefox i Opery). Aktualnie jestem w trakcie ich aktualizacji.

Brakujące wpisy do pozostałych popularnych przeglądarek postaram się przegotować za jakiś czas. Dlatego chciałam was prosić o cierpliwość.

źródła: