є css-хак для сафарі тільки НЕ хром?


182

Я намагаюся знайти хакес css для просто сафарі НЕ хром, я знаю, що це обидва веб-браузери, але у них виникають проблеми з вирівнюванням div у хромі та сафарі, кожен відображається по-різному.

я намагався використовувати це, але це також впливає на хром,

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

хтось знає про ще одне, яке стосуватиметься сафарі, будь ласка?


Не використовуючи CSS, вам потрібно буде використовувати javascript. stackoverflow.com/questions/5899783/detect-safari-using-jquery
Крістіан

Мене більше цікавить актуальна проблема, ніж тендітне і хитре рішення. Чи є (все ще) десь доступний?
Matijs

Для людей, які публікують повідомлення "не працює", будь ласка, усвідомте, що вам потрібно знати версію Safari, яку ви тестуєте. Немає рішення Safari для кожної версії. Вам потрібно надати цю інформацію разом із публікацією, або ніхто не може допомогти вам знайти рішення.
Джефф Клейтон

У різних версіях Safari є різні потреби - ознайомтеся з прикладами наживо: browserstrangeness.bitbucket.io/css_hacks.html#safari [Або дзеркало] browserstrangeness.github.io/css_hacks.html#safari
Джефф Клейтон

Відповіді:


356
  • ОНОВЛЕНО ДЛЯ CATALINA & SAFARI 13 (оновлення на початку 2020 року) *

ПРИМІТКА. Фільтри та компілятори (такі як двигун SASS) очікують стандартного коду "крос-браузер" - НЕ CSS-хаків, таких як, це означає, що вони перепишуть, знищують або видалять хаки, оскільки це не те, що роблять хаки. Значна частина цього є нестандартним кодом, який ретельно розроблений для націлювання лише на одні версії браузера і не може працювати, якщо вони змінені. Якщо ви хочете використовувати його з цими, ви повинні завантажити вибраний CSS-хак ПІСЛЯ будь-якого фільтра чи компілятора . Це може здатися даним, але було багато плутанини серед людей, які не розуміють, що вони скасовують злом, запускаючи його через таке програмне забезпечення, яке не було призначене для цієї мети.

Сафарі змінився з версії 6.1, як багато хто помітив.

Зверніть увагу: якщо ви використовуєте Chrome [і тепер також Firefox] на iOS (принаймні, в iOS версії 6.1 і новіших), і вам цікаво, чому жоден з хаків не відокремлює Chrome від Safari, це тому, що версія iOS Chrome використовує двигун 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 Хаки:

Простий хакерський запит на підтримку функцій для 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 і новіші були легко орієнтуватися. Це я надіслав до браузерних блоків після того, як побачив, що він включений до блоку іншого коду 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
насправді я просто вирішив власне питання, використовуючи комбінацію наведеного вище прикладу AND (; властивість: значення;); внизу, і це працювало чудово!
mydoglixu

1
Злом для Safari 6.1+ у верхній частині цієї відповіді приводить до помилки у компіляторі Sass. Чи є спосіб її вирішити?
Blackbird

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] хромована версія насправді працює двигуном сафарі, тому в ipads або iphone ви використовуєте хакі сафарі. Для інших пристроїв вони різні.
Джефф Клейтон

Отже, в основному код у відповіді працює для 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+ * /
Jeff Clayton

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)
Jeff Clayton,

Можливо, ви пробували це в 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))
Мерлін

6

Замініть свій клас у (.myClass)

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


Це хороший варіант для Safari - єдиний інший браузер, на який він націлений, - це Chrome 1 (вже ніхто не використовує Chome 1)
Джефф Клейтон

Точні характеристики для людей, які не використовують останні версії Macs: Chrome 1, Safari 3.X, Safari 9.0+ (не Safari 4-8)
Jeff Clayton,

Це працює з останньою версією Safari 7+ і, наскільки я можу сказати, це має бути прийнята відповідь.
Джейсон

Ого, дякую, що це нарешті спрацювало для мене після того, як спробував так багато хакерів браузера для 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 (iOS та Mac), але виключити Chrome (та інші веб-переглядачі):

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

2

Крок 1: використовуйте https://modernizr.com/

Крок 2: використовуйте html-регіони класу html, щоб вибрати лише Safari

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

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


1
modernizr - чудовий додаток javascript до веб-сайтів для виявлення браузерів, відмінний інструмент! - цей хак працюватиме (як і інші), поки інші браузери не вирішать підтримати функцію регіонів
Jeff Clayton

1
Регіони CSS вже не підтримуються.
Томас

2
Регіони дають мені змогу націлити на 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.