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

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

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

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

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

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

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

Есть способ отфильтровать 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;
    }
}

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

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

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

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

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

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

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

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

Кстати, для любого из вас, ребята, которым просто нужно настроить таргетинг на 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>

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

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">') 
};

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

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

Шаг 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. Да прибудет с тобой сила.

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

@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;
        }

    }

}

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

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

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

@media \\0 screen {}

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

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

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

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

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

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

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

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

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

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

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

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

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
 ::i-block-chrome, .myClass {
    height: 1070px !important;
  }
}