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

Question

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

Answer 1

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

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

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

Answer 2

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

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

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

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

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

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

Answer 3

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

Answer 4

@ мультимедийный экран и (-webkit-min-device-pixel-ratio: 0) {}

Похоже, что он предназначен для веб-набора (включая Chrome) ... или это действительно только Safari?

Answer 5

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

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

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

Если вы хотите сделать что-то особенное в сафари, посмотрите this .

Answer 6

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