Osobne style dla przeglądarki Safari

Czas czytania: 2 minut

safariPrzeglądarka stron internetowych Safari nie jest wspierana już od kilku lat pod systemem Windows jednak nie oznacza to, że nie stanowi ona istotnego gracza na rynku. Przeglądarka jest popularna w śród użytkowników systemu IOS a jej silnik WebKit wykorzystywany jest w dalszym ciągu. Instalowany jest m.in. jako standardowa przeglądarka na telefonach komórkowych oraz innych uradzeniach mobilnych.

Czy jest coś co trzeba o niej wiedzieć?

O to delikatnie powiedziane. Przeglądarka nie obsługuje więc wielu rożnych często nowych rozwiązań, które działają w innych przeglądarkach takich jak chociaż Chrome. Dodatkowo Safari błędnie interpretuje pogrubione czcionki, które bardzo często wydają się na niej rozmazane i nieczytelne. Kolejnym problemem jest interpretacja kodu responsywnej strony. Jeżeli w pliku CSS (stylach) umieścimy informację o zmianie względem szerokości w innej zostanie ona pominięta (zagnieżdżenie kodu). W efekcie obsłuży tylko nadrzędną podczas gdy inne przeglądarki doskonale sobie z tym radzą. Safari nie obsługuje też lub inaczej wyświetla wiele innych funkcji sprawiając, że praca na niej jest dość kłopotliwa.

Jak uniknąć problemów?

Istnieje kilka sposobów by poradzić sobie w takiej sytuacji. Pierwszym jest rezygnacja z niektórych opcji źle wyświetlających się elementów. Drugim jest nadpisanie stylów konkretnie dla tej przeglądarki.

Do nadpisania stylii można użyć haka

::i-block-chrome

Spowoduje on, że zmiana zostanie zauważona jedynie w Safari.

W celu jego zastosowania wystarczy go umieścić przed nazwą klasy lub id np.

::i-block-chrome, .clasa{}

::i-block-chrome, #id{}

 

// Safari 10.1+
@media not all and (min-resolution:.001dpcm) { @media { .selector { property:value; } } }

@media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) { .selector { property:value; } } }

// Safari 9+

@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) { .selector { property:value; } }

We wnętrzu wpisujemy zmienioną wartość zmiennej, która źle się wyświetla. Hak powinien występować pod zadeklarowaną klasą lub id.