Обновленная информация из-за изменений в веб-разработке, так как об этом спросили, и HTML5 стал новым стандартом:
html[xmlns*=""] body:last-child #widget { background:#f00; }
html[xmlns*=""]:root #widget { background:#f00; }
Они отлично работали для Safari 2-3, но не для более новых версий Safari, которые появились позже. Они также требовали более описательной спецификации doctype / html. Вот предыдущий стандарт:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
HTML5 удаляет это, однако, с простым и довольно простым:
<!DOCTYPE html>
<html>
Другие способы нацеливания только на Safari, а не на Chrome / Opera, и работают в HTML5:
Этот по-прежнему работает правильно с Safari 10.1:
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Чтобы охватить больше версий, 6.1 и выше, в настоящее время вы должны использовать следующую пару CSS-хаков. Один для 6.1-10.0, чтобы идти с тем, который обрабатывает 10.1 и выше.
Итак, вот один из них, который я разработал для Safari 10.1 +:
Здесь важен двойной медиазапрос, не удаляйте его.
/* Safari 10.1+ (which is the latest version of Safari at this time) */
@media not all and (min-resolution:.001dpcm) { @media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Попробуйте это, если SCSS или другой набор инструментов имеют проблемы с вложенным медиазапросом:
/* Safari 10.1+ (alternate method) */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Следующий работает для 6.1-10.0, но не для 10.1 (обновление в конце марта 2017 г.)
<style type="text/css">
/* Safari 6.1-10.0 [not 10.1+] */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { @media
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
/* Safari 6.1-7.0 */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)
{
.safari_only {(;
color:#0000FF;
background-color:#CCCCCC;
);}
}
</style>
Эти комбинации хаков CSS на самом деле являются новыми на момент публикации, я надеюсь, что люди найдут это полезным. Это означает, что я сам создал их, потратив много часов на тестирование и подготовку, поэтому, хотя вы, возможно, видели их части, которые выглядят знакомыми, это не было скопировано с какого-либо сайта в этой форме, а изменено лично мной для достижения этого результата. На момент написания этой статьи Safari был в версии 8, а Chrome - в версии 37.
Обратите внимание, что если вы используете устройство iOS (протестировано на платформах iOS 7 и 8), Chrome будет отображаться как Safari, поскольку он использует встроенный движок Safari. Насколько я вижу, это не Chrome, а Safari с другим внешним видом. Хак-хаки не влияют на это, только сафари. Подробнее об этом здесь: http://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/
И чтобы увидеть, как это работает:
<div class="safari_only">
Only Safari shows up in blue on gray here.
</div>
Живая тестовая страница для этого и многих других CSS-браузерных хаков, над которыми я работал:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari ИЛИ https://browserstrangeness.github.io/css_hacks.html#safari