Есть ли способ применить стили только к Safari?
Я пытаюсь найти способ применить CSS только к Safari, но все, что я нахожу, применимо и к Chrome. Я знаю, что в настоящее время это оба браузера WebKit, но у меня проблемы с выравниванием div в Chrome и Safari; каждый отображается по-разному. Я пытался использовать это, но это также влияет на Chrome:
@media screen and (-webkit-min-device-pixel-ratio:0) < #safari < display: block; >> Меня больше интересует реальная проблема, чем хрупкое и хакерское решение. Это (все еще) доступно где-то? — Matijs
Для тех, кто пишет, что «не работает» — пожалуйста, поймите, что вам нужно знать версию Safari, которую вы тестируете. Не существует универсального решения Safari для каждой версии. Вы должны предоставить эту информацию вместе с публикацией, иначе никто не сможет помочь вам найти решение. — Jeff Clayton
NB В вопросе говорится: «Я знаю, что эти [Safari и Chrome] являются браузерами webkit» Но в апреле 2013 года, как раз перед тем, как был задан этот вопрос, браузер Google Chrome переключился с WebKit на Мигать, форк WebKit. — Rounin — Standing with Ukraine
18 ответы
ПОЖАЛУЙСТА — Если у вас возникли проблемы и вы действительно хотите получить помощь или помочь другим, опубликовав комментарий об этом, опубликуйте свой браузер и устройство (MacBook/iPad/и т. д. с номерами версии браузера и ОС!)
Утверждение, что ни одна из этих работ не является точной (и на самом деле даже невозможно.) Многие из них на самом деле не «хаки», а код, встроенный в версии Safari от Apple. Требуется дополнительная информация. Мне нравится, что ты пришел сюда, и я действительно хочу, чтобы у тебя все получилось.
Если у вас есть проблемы с тем, чтобы что-то отсюда работало на вашем сайте, пожалуйста, проверьте тестовый сайт по ссылкам ниже — Если взлом работает там, но не на вашем сайте, проблема не в взломе — с вашим сайтом происходит что-то еще, часто просто конфликт CSS, как указано ниже, или, возможно, ничего не работает, но вы можете этого не знать. что вы на самом деле вообще не используете Safari. Помните, что эта информация здесь, чтобы помочь людям с (надеюсь) краткосрочными проблемами.
ПРИМЕЧАНИЕ. Фильтры и компиляторы (такие как движок SASS) ожидают стандартного «кросс-браузерного» кода, а НЕ CSS-хаков, подобных этим. что означает, что они перепишут, уничтожят или удалят хаки, так как это не то, что хаки делают. Большая часть этого кода представляет собой нестандартный код, который был тщательно разработан для работы только с отдельными версиями браузера и не может работать, если они изменены. Если вы хотите использовать его с теми, вы должны загрузить выбранный вами CSS-хак ПОСЛЕ любого фильтра или компилятора. Это может показаться само собой разумеющимся, но среди людей, которые не осознают, что они отменяют взлом, запустив его через такое программное обеспечение, которое не предназначено для этой цели, возникло много путаницы.
Safari изменился с версии 6.1, как многие заметили.
Обратите внимание: если вы используете Chrome [а теперь и Firefox] на iOS (по крайней мере, в версиях iOS 6.1 и новее) и вам интересно, почему ни один из хаков не отделяет Chrome от Safari, это потому, что версия Chrome для iOS использует движок Safari. Он использует хаки Safari, а не Chrome. Подробнее об этом здесь: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ Firefox для iOS был выпущен осенью 2015 года. Он также реагирует на хаки Safari, но не на Firefox, как и на iOS Chrome.
ТАКЖЕ: Если вы попробовали один или несколько хаков и у вас возникли проблемы с их работой, опубликуйте пример кода (а еще лучше тестовую страницу) — хак, который вы пытаетесь, и какой браузер (ы) (точная версия!) у вас которые вы используете, а также устройство, которое вы используете. Без этой дополнительной информации ни я, ни кто-либо еще здесь не сможет вам помочь.
Часто это простое исправление или отсутствие точки с запятой. С CSS это обычно проблема того, в каком порядке код указан в таблицах стилей, если не просто ошибки CSS. Пожалуйста, протестируйте хаки здесь, на тестовом сайте. Если это работает там, это означает, что взлом действительно работает для вашей установки, но это что-то еще, что нужно решить. Люди здесь действительно любят помогать или, по крайней мере, указывать вам правильное направление.
Здесь вы найдете хаки, которые вы можете использовать для более поздних версий Safari.
Вы должны сначала попробовать это, поскольку оно охватывает текущие версии Safari и предназначено только для чистого Safari:
Этот по-прежнему правильно работает с Safari 13 (начало 2020 г.):
/* Safari 7.1+ */ _::-webkit-full-page-media, _:future, :root .safari_only
Чтобы охватить больше версий, 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; >>> Для получения более подробной информации о CSS для Safari, пожалуйста, продолжайте читать ниже.
/* 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 (not 11.1) */ html >> * .safari_only
/* Safari 10.0 (not 10.1) */ _::-webkit-:host:not(:root:root), .safari_only
Слегка измененные работы для 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
Простой хакерский запрос функции поддержки для Safari 9.0 и выше:
@supports (-webkit-hyphens:none) < .safari_only < color:#0000FF; background-color:#CCCCCC; >> Простой хак с подчеркиванием для Safari 9.0 и выше:
Еще один для Safari 9.0 и выше:
/* Safari 9+ */ _:default:not(:root:root), .safari_only
и еще один запрос функций поддержки:
/* Safari 9.0-10.0 (not 10.1) */ _::-webkit-:not(:root:root), .safari_only
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
И один для Safari 9.0-10.0, но не для устройств iOS:
/* Safari 9.0-10.0 (not 10.1) (non-iOS) */ _:-webkit-full-screen:not(:root:root), .safari_only
Ниже приведены хаки, которые разделяют 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; >>> This text will be Blue in Safari Обычно [как в этом вопросе] причина, по которой люди спрашивают о взломах 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 добавлена поддержка нескольких кодов CSS -webkit- в их программировании, а в 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(; Как и описанные выше приемы форматирования CSS для Safari, их можно использовать следующим образом:
This text will be Blue in Chrome Так что вам не нужно искать это в этом посте, вот моя тестовая страница снова:
На тестовой странице также есть много других, в частности, основанных на версиях, чтобы помочь вам различать Chrome и Safari, а также множество хаков для веб-браузеров Firefox, Microsoft Edge и Internet Explorer.
ПРИМЕЧАНИЕ. Если что-то не работает для вас, сначала проверьте тестовую страницу, но предоставьте пример кода и КАКОЙ взлом вы пытаетесь, чтобы кто-нибудь помог вам.
css-стили только для устройств apple
Появилась необходимость задать отдельные правила css для iOS (скрыть элемент, который в этой ОС не работает). Возможно ли это сделать? Как назвать файл стилей для устройств apple? Или как прописать медиа запросы конкретно для iOS, если задача решается с их помощью? Спасибо!
2 ответа 2
Мне кажется устройства не виноваты. Вам нужно отслеживать не устройства, а браузер с которого заходят. В вашем случае это safari. На js приблизительно так:
function get_name_browser() < // получаем данные userAgent var ua = navigator.userAgent; // с помощью регулярного выражения // ищем упоминание названия браузера if (ua.search(/Safari/) >0) return true; // Возвращем false если не нашли safari return false; > // Если функция вернула true // То подключаем css if (get_name_browser()) < document.write(''); > Пример для разных брауpеров
function get_name_browser() < // получаем данные userAgent var ua = navigator.userAgent; // с помощью регулярного выражения // ищем упоминание названия браузера if (ua.search(/Chrome/) >0) return 'Chrome'; if (ua.search(/Firefox/) > 0) return 'Firefox'; if (ua.search(/Opera/) > 0) return 'Opera'; if (ua.search(/Safari/) > 0) return 'Safari'; if (ua.search(/MSIE/) > 0) return 'IE'; return false; > // сравниваем название и подключаем нужный css if (get_name_browser() == "Chrome") < document.write(''); > if (get_name_browser() == "Firefox") < document.write(''); > if (get_name_browser() == "Opera") < document.write(''); > if (get_name_browser() == "Safari") < document.write(''); > if (get_name_browser() == "IE") < document.write(''); >