Есть ли взлом CSS только для сафари, а не хром?


183

Я пытаюсь найти CSS-взлом только для сафари, а не для Chrome, я знаю, что это оба браузера webkit, но у меня возникают проблемы с выравниванием div в chrome и safari, каждый из которых отображается по-своему.

Я пытался использовать это, но это влияет и на хром,

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  #safari { display: block; } 
} 

Кто-нибудь знает другой, который будет применяться только к сафари, пожалуйста?


Не используя CSS, вам нужно будет использовать JavaScript. stackoverflow.com/questions/5899783/detect-safari-using-jquery
Кристиан

Меня больше интересует актуальная проблема, чем хрупкое и хакерское решение. Это (все еще) доступно где-нибудь?
Матейс

Для тех, кто публикует сообщение «не работает», имейте в виду, что вам необходимо знать версию Safari, которую вы тестируете. Для каждой версии не существует универсального Safari-решения. Вы должны предоставить эту информацию в своем сообщении, или никто не может помочь вам в поиске решения.
Джефф Клейтон

Различные версии Safari имеют разные потребности - посмотрите здесь живые примеры: browserstrangeness.bitbucket.io/css_hacks.html#safari [Or the Mirror] browserstrangeness.github.io/css_hacks.html#safari
Джефф Клэйтон

Ответы:


357
  • ОБНОВЛЕНО ДЛЯ 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.

ПРИМЕЧАНИЕ. Если что-то не работает для вас, сначала проверьте тестовую страницу, но предоставьте пример кода и КАКОЙ хакер, который вы пытаетесь сделать, чтобы кто-нибудь помог вам.


9
Сразу хочу сказать, что тестовая страница потрясающая. Теперь я могу перейти на этот сайт с любого устройства и посмотреть, какие правила CSS применимы!
duyn9uyen

1
Будет ли это применяться к Safari на iPhone или iPad?
Грег Розмарович

1
на самом деле, я просто решил свой собственный вопрос, используя комбинацию из приведенного выше примера И (; свойство: значение;); ниже и все работало отлично!
mydoglixu

1
Взлом Safari 6.1+ в начале этого ответа приводит к ошибке в компиляторе Sass. Есть ли способ решить это?
Дрозд

2
@ Blackbird Извините, но вы не можете скомпилировать или отфильтровать хаки, это разрушает их. Они должны быть использованы как есть. (Добавьте их в готовый файл css после компиляции.) Тот факт, что они нестандартны, является причиной их работы.
Джефф Клэйтон,

89

Есть способ отфильтровать Safari 5+ из Chrome:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome */
    .myClass {
     color:red;
    }

    /* Safari only override */
    ::i-block-chrome,.myClass {
     color:blue;
    }
}

3
jeffclayton.wordpress.com/2014/07/22/… - я работал над многими (я тестирую и создаю css-хаки для browserhacks.com) и тестирую страницу здесь: browserstrangeness.bitbucket.org/css_hacks.html#webkit
Jeff Клейтон

Примечание: в iOS [протестировано в iOS 7] версия Chrome на самом деле работает с движком Safari, поэтому на ipads или iphone вы используете хаки Safari. Для других устройств они разные.
Джефф Клэйтон

Итак, в основном код в ответе работает для Safari 5.0 и 6.0, а не 6.1+?
Ник Коттрелл

Чтобы быть абсолютно точным, конструкция :: i-block-chrome, .myClass {} допускает только Safari 5.1-6.0, но также и Chrome 10-24 (старая версия Chrome больше не используется, поэтому не стоит упоминать), но ничего более нового Хаки Safari, как правило, работают так: один пакет обрабатывает 5.1-6.0, другой обрабатывает 6.1-7.0, а более новые обрабатывают 7.1-8.0. Кажется, они много чего обновляют, пока не решат перейти к следующей числовой версии, которая очень близка к предыдущей версии .1.
Джефф Клэйтон

На момент получения этого ответа в 2013 году Safari 6.1 только что был выпущен, поэтому мало кто видел, что браузер изменился, поэтому он был самым точным на тот момент. Если вам нужны новые, проверьте мой ответ ниже. Это был отличный ответ, когда он был предоставлен. Однако время меняется, поэтому я разместил свою работу в качестве обновления к этой. Мне потребовались месяцы, чтобы создать версии 6.1-7.0 и 7.1-8.0. Надеюсь, вам понравятся результаты. Скорее всего, когда выйдет версия 8.1, если она следует шаблону, это также потребует другого взлома. Снова только время покажет.
Джефф Клэйтон

21

Только Сарари

.yourClass:not(:root:root){ 
    /* ^_^ */ 
}

8
Хотите добавить какое-нибудь объяснение? Я буквально набираю root: root?
Nubtacular

1
Это точно для Safari 3.x (и только для Chrome версии 1.0, хотя никто не использует Chrome 1.0, поскольку он уже в 30-х годах ...)
Джефф Клейтон,

Теперь он также нацелен на Safari 9.0, поэтому обновлена ​​полная статистика: / * Chrome 1.0, Safari 3.X, Safari 9.0+ * /
Джефф Клейтон,

4
:not(:root:root)Селектор является недействительным в соответствии с CSS Селекторы 3 спецификации (в которой :not()может содержать только простой селектор, то есть один селектор типа или один идентификатор или один класс или один псевдо-класс), но полностью действуют в соответствии с CSS Селекторы 4 (где :not()принимает список селекторы). Это правда, что в настоящее время только Safari понимает синтаксис CSS Selectors 4, но это решение не ориентировано на будущее.
Илья Стрельцын

2
Очень немногие взломы не являются (и большая часть действующего стандартного кода не связана с изменениями версии) в будущем. Лучший план - если вы собираетесь использовать css-хак, используйте его только как временное исправление, чтобы выиграть время для более официального кросс-браузерного обновления.
Джефф Клэйтон

14

Этот хак на 100% работает только для сафари 5.1-6.0. Я только что проверил это с успехом.

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
     ::i-block-chrome, .yourcssrule {
        your css property
    }
}

3
Этот хак на самом деле для Chrome и Safari в разных версиях. Это позволяет Chrome 10-24 (который больше никто не использует, поэтому люди указали, что он заблокировал Chrome) и только Safari 5.1-6.0. Однако он не работает для Safari 6.1 и новее. В то время не было лучшего взлома в своем роде.
Джефф Клэйтон

1
@ veronica-lotti, это сработало и для меня. Ты избавился от моей головной боли. Спасибо
Andhi Irawan

Люди - пожалуйста, будьте осторожны. Эти комментарии описывают метод, который не работает для версий Safari в последние несколько лет и работает только для старых версий. На самом деле это означает, что большинство людей в Интернете не будут иметь результат, который вы ищете, а только люди со старыми компьютерами. Это не работает для текущих операционных систем. В настоящее время большинство людей имеют версию 12 и выше (не 6.0 и ниже, которые были актуальны только в эпоху Windows XP.)
Джефф Клэйтон

8

Для тех, кто хочет реализовать взлом для Safari 7.0 и ниже, но не 7.1 и выше - используйте:

.myclass { (;property: value;); }
.myclass { [;property: value;]; }

Я попробовал Safari 7 и не смог заставить его работать. Можете ли вы привести какой-нибудь рабочий пример случайно?
Сочные

@Juicy: на сайте browserhacks.com есть живые тесты - они работают на Safari 7 и ниже, а также Chrome 28 и ниже. (Как упоминалось в другой публикации iOS 7 и 8, возможно, другие также используют движок Safari для Chrome, поэтому Chrome и Safari на iPad действительно являются Safari)
Джефф Клейтон,

Возможно, вы пробовали это в Safari 7.1, а не в Safari 7.0. Он действителен для 7.0 и более ранних версий, а не для 7.1 и более новых. Когда этот ответ был опубликован, 7.0 была последней версией Safari, поэтому в то время это было так.
Джефф Клэйтон

работает для Safari для Windows (версия 5.1.7 (7534.57.2))
jave.web

работает для Safari для Mac (версия 6.0.2 (7536.26.17))
Merlin

6

Замените свой класс в (.myClass)

/ * Только Safari * / .myClass: not (: root: root) { enter code here }


Это хороший вариант для Safari - единственный другой браузер, на который он нацелен, это Chrome 1 (никто больше не использует Chome 1)
Джефф Клэйтон

Точные спецификации для людей, которые не используют новейшие Mac: Chrome 1, Safari 3.X, Safari 9.0+ (не Safari 4-8)
Джефф Клэйтон

Это работает с последней версией Safari 7+ и, насколько я могу судить, должен быть принятым ответом.
Джейсон Engage

Ух, спасибо, это наконец-то сработало для меня после того, как я попробовал столько взломов браузеров для Safari !!!
FairyQueen

4

Кстати, для любого из вас, ребята, которым просто нужно настроить таргетинг на Safari на мобильных устройствах, просто добавьте медиа-запрос к этому хаку:

@media screen and (max-width: 767px) {
    _::-webkit-full-page-media, _:future, :root .safari_only {
        padding: 10px; //or any property you need
    }
}

И не забудьте добавить класс .safari_only к элементу, на который вы хотите нацелиться, например:

<div class='safari_only'> This div will have a padding:10px in a mobile with Safari  </div>

4

Мне нравится использовать следующий метод:

var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (isSafari) { 
  $('head').append('<link rel="stylesheet" type="text/css" href="path/to/safari.css">') 
};

Этот метод взлома JavaScript требует установки пакета JQuery.
Джефф Клейтон,

Это считается крайне плохой практикой, перехват браузера очень подвержен ошибкам и приводит к множеству ложных срабатываний. Не делайте этого, даже прослушивание медиа-запросов очень грязно, но может быть приемлемо для очень небольших изменений.
Wannes

3

При использовании этого фильтра только для Safari я мог ориентироваться на Safari (iOS и Mac), но исключить Chrome (и другие браузеры):

@supports (-webkit-backdrop-filter: blur(1px)) {
  .safari-only {
    background-color: rgb(76,80,84);
  }
}

2

Шаг 1: используйте https://modernizr.com/

Шаг 2: используйте HTML-класс .regions, чтобы выбрать только Safari

a { color: blue; }
html.regions a { color: green; }

Modernizr добавит HTML-классы в DOM на основе того, что поддерживает текущий браузер. Safari поддерживает регионы http://caniuse.com/#feat=css-regions, в то время как другие браузеры - нет (пока, в любом случае). Этот метод также очень эффективен при выборе разных версий IE. Да прибудет с тобой сила.


1
modernizr - отличное дополнение к веб-сайтам для определения браузеров, отличный инструмент! - этот хак будет работать (как и другие), пока другие браузеры не решат поддерживать функцию регионов
Джефф Клэйтон

1
CSS-регионы больше не поддерживаются.
1

2
Regions позволяет мне настраивать Safari с 6.1 по 11 и с 7.1 по 11.2 на iOS, и это уже хорошо.
lowtechsun

@lowtechsun - отличная публикация вашей статистики, хаки хороши только как знание того, на какие браузеры они ориентированы.
Джефф Клейтон

2

привет, я сделал это, и это сработало для меня

@media(max-width: 1920px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 5.5% !important;
        }
    }
}

@media(max-width: 1680px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 15% !important;
        }

    }
}

@media(max-width: 1600px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 18% !important;
        }

    }
}


@media (max-width: 1440px) {
@media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 24.5% !important;
        }

    }

}


@media (max-width: 1024px) {
@media not all and (min-resolution:.001dpcm) {
    @media {
        .photo_row2 {
            margin-left: -11% !important;
        }

    }

}

Это хороший набор, хорошее использование взломать с несколькими настройками устройства для веб-сайтов, использующих адаптивные представления.
Джефф Клейтон,

2

Примечание: если достаточно только iOS (если вы готовы пожертвовать рабочим столом Safari), то это работает:

    @supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */ 
    }

1

Вы можете использовать взлом медиа-запроса, чтобы выбрать Safari 6.1-7.0 из других браузеров.

@media \\0 screen {}

Отказ от ответственности: этот хак также предназначен для старых версий Chrome (до июля 2013 года).


Это не работает на более новом Safari, статистика для этого является хирургической однако: Safari 6.1-7.0, Chrome 22-28, так что все еще удобно.
Джефф Клэйтон

0

Это работает:

@media not all and (min-resolution:.001dpcm) { 
  @media {
    /* your code for Safari Desktop & Mobile */
    body {
      background-color: red;
      color: blue;
    }
    /* end */
  }
}

0

В конце я использую немного JavaScript для достижения этой цели:

if (navigator.vendor.startsWith('Apple'))
    document.documentElement.classList.add('on-apple');

тогда в моем CSS для целевого движка браузера Apple селектор будет:

.on-apple .my-class{
    ...
}

0

https://stackoverflow.com/a/17637937/3174065 здесь дан ответ, хотя этот метод использует некоторые JS. если используется, обязательно поместите js в нижний колонтитул, тело должно быть полностью загружено для правильной стрельбы, при размещении в голове возникает ошибка, потому что оно срабатывает до загрузки тела.

затем он добавляет класс .safari к телу, но только в сафари, что упрощает нацеливание на css.


-1

Это работает 100% в сафари .. я пробовал

@media screen and (-webkit-min-device-pixel-ratio:0) 
{
::i-block-chrome, Class Name {your styles}
}

Это работает на старых версиях Safari, а не на текущих - 6.1 и новее.
Джефф Клейтон,

-1

Я проверил, и это сработало для меня

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
 ::i-block-chrome, .myClass {
    height: 1070px !important;
  }
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.