- ОБНОВЛЕНО ДЛЯ CATALINA & SAFARI 13 (обновление в начале 2020 г.) *
ПРИМЕЧАНИЕ. Фильтры и компиляторы (такие как движок SASS) ожидают стандартного кросс-браузерного кода - НЕ ХАКС-хаки, подобные этим, что означает, что они будут перезаписывать, уничтожать или удалять хаки, поскольку это не то, что делают хаки. Во многом это нестандартный код, который был тщательно разработан для использования только в отдельных версиях браузера и не может работать, если они изменены. Если вы хотите использовать его вместе с ними, вы должны загрузить выбранный вами CSS-хак ПОСЛЕ любого фильтра или компилятора . Это может показаться само собой разумеющимся, но люди, которые не понимают, что они отменяют взлом, запускают его с помощью такого программного обеспечения, которое не было разработано для этой цели.
Safari изменился с версии 6.1, как многие заметили.
Обратите внимание: если вы используете Chrome [и теперь также Firefox] на iOS (по крайней мере, в iOS версии 6.1 и новее) и вам интересно, почему ни один из хаков не отделяет Chrome от Safari, это потому, что Chrome для iOS версии iOS использует движок Safari. Он использует взломы Safari, а не Chrome. Подробнее об этом здесь: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ Firefox для iOS был выпущен осенью 2015 года. Он также отвечает на Safari Hacks, но не Firefox, как iOS Chrome.
ТАКЖЕ: Если вы попробовали один или несколько хаков и не можете заставить их работать, пожалуйста, опубликуйте пример кода (еще лучше тестовую страницу) - какой хак вы пытаетесь и какой браузер (ы) (точная версия!) Вы используете, а также устройство, которое вы используете. Без этой дополнительной информации я или кто-либо еще здесь не можем вам помочь.
Часто это простое исправление или пропущенная точка с запятой. В CSS это обычно проблема или проблема того, какой код указан в таблицах стилей, если не только ошибки CSS. Пожалуйста, проверьте взломы здесь на тестовом сайте. Если это работает там, это означает, что взлом действительно работает для вашей установки, но это что-то еще, что должно быть решено. Люди здесь действительно любят помогать или, по крайней мере, указывают вам правильное направление.
Тестовый сайт:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
И ЗЕРКАЛО!
https://browserstrangeness.github.io/css_hacks.html#safari
Это исключает возможность использования более поздних версий Safari.
Вам следует сначала попробовать этот вариант, так как он охватывает текущие версии Safari и предназначен только для чисто Safari:
Этот по-прежнему работает правильно с Safari 13 (начало 2020 года):
/* 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+ */
@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 г.)
Этот хак я создал за много месяцев тестирования и экспериментов, объединив несколько других хаков.
ЗАМЕЧАНИЯ: как и выше, двойной медиазапрос НЕ является случайностью - он исключает многие старые браузеры, которые не могут обрабатывать вложение медиазапроса. - Недостаток места после одного из 'и' также важен. В конце концов, это хак ... и единственный, который работает для 6.1 и всех более новых версий Safari в настоящее время. Также учтите, что, как указано в комментариях ниже, взлом является нестандартным CSS и должен применяться после фильтра. Фильтры, такие как двигатели SASS, будут перезаписывать / отменять или полностью удалять его.
Как упоминалось выше, пожалуйста, проверьте мою тестовую страницу, чтобы увидеть, как она работает как есть (без изменений!)
И вот код:
/* 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 CSS, пожалуйста, продолжайте читать ниже.
/* Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Один для Safari 11.0:
/* Safari 11.0 (not 11.1) */
html >> * .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Один для Safari 10.0:
/* Safari 10.0 (not 10.1) */
_::-webkit-:host:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Слегка измененные работы для 10.1 (только):
/* Safari 10.1 */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Safari 10.0 (не-iOS-устройства):
/* Safari 10.0 (not 10.1) but not on iOS */
_::-webkit-:-webkit-full-screen:host:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Safari 9 CSS Hacks:
Простая поддержка функции взлома запросов для Safari 9.0 и выше:
@supports (-webkit-hyphens:none)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Простой взлом подчеркивания для Safari 9.0 и выше:
_:not(a,b), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Еще один для Safari 9.0 и выше:
/* Safari 9+ */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
и еще один запрос поддержки функций:
/* Safari 9+ */
@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Один для Safari 9.0-10.0:
/* Safari 9.0-10.0 (not 10.1) */
_::-webkit-:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Safari 9 теперь включает функцию обнаружения функций, поэтому мы можем использовать ее сейчас ...
/* Safari 9 */
@supports (overflow:-webkit-marquee) and (justify-content:inherit)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Теперь только для устройств iOS. Как упомянуто выше, поскольку Chrome на iOS внедряется в Safari, он, конечно же, попадает и в него.
/* Safari 9.0 (iOS Only) */
@supports (-webkit-text-size-adjust:none) and (not (-ms-ime-align:auto))
and (not (-moz-appearance:none))
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
один для Safari 9.0+, но не для устройств iOS:
/* Safari 9+ (non-iOS) */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
И один для Safari 9.0-10.0, но не для устройств iOS:
/* Safari 9.0-10.0 (not 10.1) (non-iOS) */
_:-webkit-full-screen:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Ниже приведены хаки, которые разделяют 6.1-7.0 и 7.1+. Они также требуют комбинации нескольких хаков, чтобы получить правильный результат:
/* 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;
);}
}
Поскольку я указал способ блокирования устройств iOS, вот модифицированная версия взлома Safari 6.1+, предназначенная для устройств, не поддерживающих iOS:
/* Safari 6.1-10.0 (not 10.1) (non-iOS) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
_:-webkit-full-screen, .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Чтобы использовать их:
<div class="safari_only">This text will be Blue in Safari</div>
Обычно [как в этом вопросе] причина, по которой люди спрашивают о взломах Safari, связана главным образом с тем, чтобы отделить его от Google Chrome (опять же НЕ с iOS!). Может быть важно опубликовать альтернативу: как настроить таргетинг Chrome отдельно от Safari, поэтому Я предоставляю это здесь для вас, если это необходимо.
Вот основы, еще раз проверьте мою тестовую страницу для множества конкретных версий Chrome, но они охватывают Chrome в целом. Chrome версии 45, Dev и Canary версии до версии 47 в настоящее время.
Моя старая комбо медиа-запроса, которую я установил на браузерные взломы, все еще работает только для Chrome 29+:
/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
.chrome_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Запрос функции @supports также хорошо работает для Chrome 29+ ... модифицированная версия той, которую мы использовали для Chrome 28+ ниже. Safari 9, ближайшие браузеры Firefox и браузер Microsoft Edge не поддерживаются этим:
/* Chrome 29+ */
@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none))
{
.chrome_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Раньше Chrome 28 и новее были легко ориентированы. Это тот, который я отправил в browserhacks после того, как увидел, что он включен в блок другого кода CSS (изначально не предназначался для взлома CSS), и понял, что он делает, поэтому я извлек соответствующую часть для наших целей:
[ПРИМЕЧАНИЕ:] Этот старый метод, приведенный ниже, теперь показывает Safari 9 и браузер Microsoft Edge без вышеуказанного обновления. В следующих версиях Firefox и Microsoft Edge добавлена поддержка нескольких кодов -webkit- CSS в их программировании, а в Edge и Safari 9 добавлена поддержка обнаружения функции @supports. Chrome и Firefox ранее включали @supports.
/* Chrome 28+, Now Also Safari 9+, Firefox, and Microsoft Edge */
@supports (-webkit-appearance:none)
{
.chrome_and_safari {
color:#0000FF;
background-color:#CCCCCC;
}
}
Блок версий Chrome 22-28 (если необходимо для поддержки более старых версий) также можно целенаправленно использовать для комбо-взломов Safari, которые я опубликовал выше:
/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0)
{
.chrome_only {-chrome-:only(;
color:#0000FF;
background-color:#CCCCCC;
);}
}
NOTE: If you are new, change class name but leave this the same-> {-chrome-:only(;
Как и вышеописанные способы форматирования Safari CSS, их можно использовать следующим образом:
<div class="chrome_only">This text will be Blue in Chrome</div>
Так что вам не нужно искать его в этом посте, вот моя живая тестовая страница снова:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
[Или зеркало]
https://browserstrangeness.github.io/css_hacks.html#safari
На тестовой странице также есть много других, в частности, основанных на версиях, которые помогут вам отличить Chrome от Safari, а также множество хаков для браузеров Firefox, Microsoft Edge и Internet Explorer.
ПРИМЕЧАНИЕ. Если что-то не работает для вас, сначала проверьте тестовую страницу, но предоставьте пример кода и КАКОЙ хакер, который вы пытаетесь сделать, чтобы кто-нибудь помог вам.