Сделать CSS применимым только для Opera 11?

Question

Есть ли способ заставить некоторые правила CSS применяться только для Opera (11)?

Answer 1

Я люблю испытания!
Это заняло у меня некоторое время, но я наконец нашел его:

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 неправильно оценивают ориентацию без допустимого значения). Так как в Presto 2.7 поддерживается orientation, второй медиа-запрос - FALSE .

Хак с ложной ориентацией 1025 * звучит как доброе имя для меня.

Answer 2

Есть ли веская причина, по которой вы хотите это сделать?

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

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

Для обнаружения браузера - особенно нового браузера, такого как Opera11 - я не могудействительно предложить что-нибудь, что будет надежным.Правильный ответ - взглянуть на строку User Agent, но пользователь может легко изменить ее, чтобы подделать другой браузер (и часто так, особенно пользователями Opera, поскольку они чаще всего пытаются обойти сайты, которые делают это).Обнаружение браузера и попытаться заблокировать их)

Answer 3

Следующий стиль действительно будет отображаться только в 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 ).

Answer 4

Вот, пожалуйста ......

/* 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
}

Answer 5

Я не знаю, как использовать только 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-браузера, вы увидите, что он просто считывает navigator.userAgent и сравнивает его со многими вариантами - просто добавьте свой вариант Opera 11, и вы хорошипойти (или подождать, пока разработчик обновит javascript - или, что еще лучше, обновить скрипт и сообщить об этом автору!).

Answer 6

Вы можете попробовать использовать http://www.headjs.com/

Answer 7

Псевдокласс read-only - это простой фильтр для Opera:

#foo:read-only { overflow: auto; }

Answer 8

проверить SO Community Wiki .