im пытается найти css-взломать только сафари NOT chrome, я знаю, что это браузеры webkit, но у меня проблемы с выравниваниями div в хроме и сафари, каждый из которых выглядит по-разному.
Я пытался использовать это, но он также влияет на хром,
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; }
}
Кто-нибудь знает о другом, который будет просто применяться к сафари, пожалуйста?
ПРИМЕЧАНИЕ. Фильтры и компиляторы (такие как движок SASS) ожидают, что стандартный "кросс-браузерный" код - НЕ CSS-хаки, подобные этим, что означает, что они будут переписывать, уничтожать или удалять хаки, поскольку это не то, что делают хаки. Это нестандартный код, который тщательно обрабатывается только для целевых версий одного браузера и не может работать, если они изменены. Если вы хотите использовать его с ними, вы должны загрузить выбранный CSS-взлом ПОСЛЕ любого фильтра или компилятора. Это может показаться настоящим, но среди людей, которые не понимают, что они уничтожают взломы, было много путаницы, запуская его через такое программное обеспечение, которое не предназначалось для этой цели.
Safari изменилась с версии 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/
ТАКЖЕ: Если вы пробовали один или несколько хаков и не можете заставить их работать, отправьте примерный код (еще лучше тестовую страницу) - взлом, который вы пытаетесь, и какой браузер (точную версию!) Вы а также устройство, которое вы используете. Без этой дополнительной информации для меня или кого-либо еще здесь невозможно помочь.
Часто это простое исправление или недостающая точка с запятой. С CSS обычно это или проблема с каким порядком код указан в таблицах стилей, если не только ошибки CSS. Прошу протестировать хаки здесь на тестовом сайте. Если он работает там, это означает, что хак действительно работает для вашей настройки, но это что-то еще, что нужно решить. Люди здесь действительно любят помогать или, по крайней мере, указывают вам в правильном направлении.
Место проведения испытания:
https://browserstrangeness.bitbucket.io/css_hacks.html#webkit
И ЗЕРКАЛО!
https://browserstrangeness.github.io/css_hacks.html#webkit
Firefox для iOS был выпущен осенью 2015 года, и он также реагирует на хаки Safari, но ни один из них не отличается от браузера iOS Chrome.
В этом случае вы можете использовать хаки для более поздних версий Safari.
Сначала вы должны попробовать это, поскольку он охватывает текущие версии Safari и только для чистого Safari:
Этот файл работает правильно с Safari 10.1:
/* 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;
}
}}
Немного измененные работы для 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:
/* Safari 10.0 (not 10.1) */
_::-webkit-:host:not(:root:root), .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 и выше:
/* 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.
Мой старый компилятор медиа-запросов, который я установил в browserhacks, по-прежнему работает только для 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(;
Как и хакеры для форматирования CSS Safari выше, их можно использовать следующим образом:
<div class="chrome_only">This text will be Blue in Chrome</div>
Поэтому вам не нужно искать его в этом посте, вот моя тестовая страница:
https://browserstrangeness.bitbucket.io/css_hacks.html#webkit
[Или зеркало]
https://browserstrangeness.github.io/css_hacks.html#webkit
На тестовой странице также есть много других, в частности, на основе версий, чтобы помочь вам различать Chrome и Safari, а также множество хаков для браузеров Firefox, Microsoft Edge и Internet Explorer.
ПРИМЕЧАНИЕ. Если что-то не работает для вас, сначала проверьте тестовую страницу, но укажите пример кода и WHICH-взломать, что вы пытаетесь помочь кому-либо.
Существует способ фильтрации 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% работает только для сафари. Я только что испытал его с успехом.
@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;]; }
Мне нравится использовать следующий метод:
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">')
};
Замените свой класс в (.myClass)
/* Только сафари */
.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>
Шаг 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. Пусть сила будет с вами.
Вы можете использовать взлом медиа-запросов для выбора Safari 7+ из других браузеров.
@media \\0 screen {}
Отказ от ответственности: этот взлом также нацелен на старые версии Chrome (до июля 2013 года).
hi я ve сделал это, и это сработало для меня
@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;
}
}
}
Он работает на 100% в сафари. Я пробовал
@media screen and (-webkit-min-device-pixel-ratio:0)
{
::i-block-chrome, Class Name {your styles}
}
Это работает:
@media not all and (min-resolution:.001dpcm) {
@media {
/* your code for Safari Desktop & Mobile */
body {
background-color: red;
color: blue;
}
/* end */
}
}
Я проверил, и это сработало для меня
@media only screen and (-webkit-min-device-pixel-ratio: 1) {
::i-block-chrome, .myClass {
height: 1070px !important;
}
}
В конце я использую немного JavaScript для достижения этой цели:
if (navigator.vendor.startsWith('Apple'))
document.documentElement.classList.add('on-apple');
тогда в моем CSS для целевого движка браузера Apple селектор будет:
.on-apple .my-class{
...
}