- ОНОВЛЕНО ДЛЯ 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.
ПРИМІТКА. Якщо щось не працює для вас, спочатку перевірте тестову сторінку, але вкажіть приклад коду та КОГО зламаєте ви намагаєтесь хтось допомогти вам.