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

Kategoria wpisu Kurs CSS Tagi: , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

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 ChromeSafari, 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:

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:

 

Firefox

  • 1.5/2

  • ≥ 2

 

IE Edge

 

Property/Value Hacks

Chrome, Opera, Safari

IE

Media Query Hacks

Działające na Android

  • Internet Explorer/Edge ≥ 9
  • Safari 4
  • Android ≥ 2.3

Chrome, Safari, Opera

  • Chrome 22-28
  • Safari ≥ 7

  • Chrome ≥ 29
  • Opera ≥ 16

 

Dla przeglądarki Firefox

  •  wersja przeglądarki internetowej ≥ 3.6

  • Mozilla Firefox ≥ 4

  •  ≥ 8

  •  dla wersji ≥ 11

  •  ≥ 29

  •  Internet Explorer/Edge ≤ 8
  • Firefox *

 

IE Edge

  •  Internet Explorer/Edge ≤ 7

  •  Internet Explorer/Edge ≤ 8

  •  Internet Explorer/Edge 8

  •  Internet Explorer/Edge ≥ 9
  •  Safari 4
  •  Android ≥ 2.3

Opera

  • Opera ≥ 12

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 powinny ukazać się za pewien czas. Dlatego chciałam was prosić o cierpliwość.

źródła:

http://browserhacks.com/

https://www.codeproject.com/Tips/1167666/How-to-Apply-CSS-HACKS-for-Different-Browsers-Chro

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *