Osobne style dla przeglądarki Safari

Przeglą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.