Как задать css градиент в браузере Safari?

5240

Общеизвестно, что браузер Safari от компании Apple, функционирующий на движке Webkit, немного по-другому отображает контент веб - страницы в сравнении с браузерами Opera, Mozilla Firefox и Google Chrome.

Но если с Firefox всё понятно - он разработан на движке собственного производства Gecko, то почему в браузере Safari сайт выглядит несколько иначе, чем в Opera и Chrome, так же работающих на движке Webkit?

Причина здесь кроется в небольших различиях механизмов рендеринга браузеров, отвечающих за вывод веб - страницы на экран монитора. Т. к. эта статья не о различиях в движках браузеров, то подробно на этом останавливаться не будем.

Кому интересно, можно почитать здесь.

Итак, чтобы задать css - градиент для элемента в браузерах Opera, Chrome и Firefox, необходимо воспользоваться следующим кодом:

background-image: linear-gradient ( to left, #d87373, #ff003b)

где to left - направление градиента (слева - направо),

#d87373, #ff003b - необходимые цвета.

Чтобы задать тот же самый градиент в Safari, придётся воспользоваться такой конструкцией:

background-image:-webkit-gradient( linear, left top, left top, from(#d87373), to(#ff003b))

CSS градиент в Сафари снизу вверх:

background-image:-webkit-gradient( linear, left bottom, left top, from(#d87373), to(#ff003b))

Сверху вниз:

background-image:-webkit-gradient( linear, left top, left bottom, from(#d87373), to(#ff003b))

В заключении хотелось бы сказать, что Safari часто не распознаёт цвета в формате hex: (#ff003b), поэтому предпочтительней транспонировать их в формат rgba: (rgba(203, 35, 74, 0.78)) .

На этом всё, задавайте свои вопросы в комментариях!