Какие существуют чистые CSS-хаки для Safari, специфичные для Safari?

StackOverflow https://stackoverflow.com/questions/69440

  •  09-06-2019
  •  | 
  •  

Вопрос

Мне интересно, есть ли какой-нибудь способ написать CSS специально для Safari, используя только CSS.Я знаю, что там должно что-то быть, но я пока этого не нашел.

Это было полезно?

Решение

Я думаю, что этот вопрос справедлив.Я согласен с другими ответами, но это не значит, что это ужасный вопрос.Мне только один раз приходилось использовать CSS-хак Safari в качестве временного решения, а позже я от него избавился.Я согласен, что вам не обязательно ориентироваться только на Safari, но нет ничего плохого в том, чтобы знать, как это сделать.

К вашему сведению, этот взлом нацелен только на Safari 3, а также на Opera 9.

@media screen and (-webkit-min-device-pixel-ratio:0) {
   /* Safari 3.0 and Opera 9 rules here */
}

Другие советы

Есть несколько хаков, которые вы можете использовать в CSS для таргетинга только на Safari, например, поставить хэш / фунт (#) после точки с запятой, что заставляет Safari игнорировать его.Например

.blah { color: #fff; }
.blah { color: #000;# }

В Safari цвет будет белым, во всем остальном - черным.

Однако вам не следует использовать хаки, так как это может вызвать проблемы с браузерами в будущем и может иметь нежелательные последствия в старых браузерах.Самый безопасный способ - либо использовать серверный язык (например, PHP), который определяет браузер и затем выдает другой CSS-файл в зависимости от используемого пользователем браузера, либо вы можете использовать JavaScript для выполнения того же самого и переключиться на другой CSS-файл.

Серверный язык здесь является лучшим вариантом, поскольку не у всех в браузере включен JavaScript, а это значит, что они не увидят правильный стиль.Кроме того, JavaScript увеличивает накладные расходы на объем информации, который необходимо загрузить, прежде чем страница будет правильно отображена.

Safari использует WebKit, который очень хорош при рендеринге CSS.Я никогда не сталкивался с чем-либо, что не работает в Safari, но работает в других современных браузерах (не считая IE, у которого есть свои собственные проблемы).Я бы посоветовал убедиться, что ваш CSS соответствует соответствие стандартам, так как проблема может заключаться в CSS, а не в Safari.

Итак, подождите, вы хотите написать CSS для Safari, используя только CSS?Я думаю, вы сами ответили на свой вопрос.Webkit обладает действительно хорошей поддержкой CSS.Если вы ищете стили только для webkit, попробуйте здесь.

Вам пришлось бы использовать JavaScript или ваш сервер для отслеживания пользовательского агента, чтобы отправить CSS специально в Safari / WebKit.

@экран мультимедиа и (-webkit-минимальное соотношение пикселей устройства:0) {}

Похоже, это нацелено на webkit (включая Chrome)...или это действительно только для сафари?

Это действительно зависит от того, что вы пытаетесь сделать.Вы пытаетесь сделать что-то особенное только в safari, используя некоторые из включенных функций CSS3, или вы пытаетесь сделать сайт кроссбраузерным?

Если вы пытаетесь сделать сайт совместимым с другими браузерами, я бы рекомендовал написать сайт так, чтобы он хорошо выглядел в safari / firefox / opera, используя правильный CSS, а затем внести изменения для IE, используя условные включения CSS в IE.Это должно (надеюсь) обеспечить вам совместимость для будущих браузеров, которые все лучше следуют правилам CSS, и обеспечить кроссбраузерную совместимость. Это всего лишь пример.

Используя условные таблицы стилей, вы можете избежать всех этих взломов и настроить таргетинг на браузеры.

Если вы хотите сделать что-то особенное в safari, ознакомьтесь это.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top