Сделать CSS применимым только для Opera 11?
Есть ли способ заставить некоторые правила CSS применяться только для Opera (11)?
8 ответов
Я люблю проблемы!
Это заняло у меня некоторое время, но я наконец нашел это:
body {background:0} /* default */
@media not screen and (1) {
body {background:red} /* OP 11 */
}
@media not screen and (orientation) {
body {background:green} /* for the earlier versions of Opera that pick the first media query's rule + chrome/safari */
}
проверенные браузеры:
- красный: Опера 11
- зеленый: браузеры Opera 10 и 10.5 + WebKit
- нет: Opera 9.26 + Firefox 3.6 + IE9
Это связано с обработкой ошибок, а также с тем фактом, что NOT отрицает глобальный результат (браузеры WebKit неправильно оценивают ориентацию без допустимого значения). поскольку orientation поддерживается в presto 2.7, второй медиа-запрос - FALSE.
Хак с ложной ориентацией звучит как доброе имя для меня.
Есть ли веская причина, по которой вы хотите это сделать?
Я всегда рекомендовал бы не делать обнаружение браузера. Практически в каждом случае, когда люди хотят его использовать, лучше использовать функцию обнаружения функций. Если вы выясните, поддерживается ли требуемая функция, вы автоматически начнете поддерживать новые версии других браузеров, когда они начнут работать, без необходимости постоянно работать над обновлением своего сайта, как это было бы с помощью сценариев обнаружения браузера.
Для обнаружения функций одним из лучших инструментов, которые я могу предложить, является использование Modernizr.
Для определения браузера - особенно нового браузера, такого как Opera11 - я не могу предложить ничего, что было бы надежным. Правильный ответ - взглянуть на строку User Agent, но пользователь может легко изменить ее, чтобы подделать другой браузер (и часто так, особенно пользователями Opera, поскольку они чаще всего пытаются обойти сайты, которые делают это). Обнаружение браузера и попробуйте заблокировать их)
Ну вот......
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
here you can display anything you want just for opera
}
Я не знаю способа только для CSS, так как Opera 11 все еще ОЧЕНЬ нова.
Вы можете использовать серверные языки, такие как PHP, чтобы обнаружить User Agent браузера или вы можете использовать свободно доступное решение Javascript CSS Browser Selector.
Приведенное выше решение еще не включает Opera 11, поэтому давайте проверим строку User Agent в Opera 11, проверив их ссылки. (На самом деле у них есть своя статья о том, как определить оперу)
Opera / 9.80 (Windows NT 5.1; U; ru) Presto/2.7.39 Версия /11.00
Теперь, когда вы посмотрите на Javascript вышеупомянутого селектора CSS Browser, вы увидите, что он просто читает navigator.userAgent и сравнивая его со многими вариантами - просто добавьте свой вариант Opera 11, и все готово (или подождите, пока разработчик обновит javascript - или, что еще лучше, обновите сценарий и сообщите об этом автору!).
Следующий стиль действительно будет отображаться только в Opera. См. Сообщение в блоге Webmonkeys для деталей:
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
#myid { background-color: #F00; }
}
Но имейте в виду, что все виды хаков CSS могут больше не работать в будущем. Поэтому я настоятельно рекомендую вам добавлять динамические стили только для Opera с jQuery ( jQuery.browser).
read-only псевдокласс - это простой фильтр для Opera:
#foo:read-only { overflow: auto; }