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

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

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

Это связано с обработкой ошибок, а также с тем фактом, что НЕ отменяет глобальный результат (браузеры WebKit неправильно оценивают ориентацию без допустимого значения). Поскольку orientation поддерживается в presto 2.7, второй медиа-запрос имеет значение FALSE.

Название фальшивая ориентация мне кажется хорошим.

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

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

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

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

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

Я не знаю способа, основанного только на CSS, поскольку Opera 11 все еще ОЧЕНЬ нова.

Вы можете либо использовать серверные языки, такие как PHP, для определения User Agent браузера, либо использовать бесплатно доступное решение Javascript Выбор браузера CSS.

Приведенное выше решение еще не включает Opera 11, поэтому давайте проверим строку пользовательского агента Opera 11, проверив их ссылки. . (На самом деле у них есть собственная статья о том, как обнаружить Opera)

Opera/9.80 (Windows NT 5.1; U; en) Presto/2.7.39 Версия/11.00

Когда вы теперь посмотрите на Javascript вышеупомянутого селектора браузера CSS, вы увидите, что он просто считывает navigator.userAgent и сравнивает его со многими вариантами — просто добавьте свой вариант Opera 11, и все готово (или подождите, пока разработчик обновит javascript - или еще лучше, обновите скрипт и сообщите об этом автору!).

Ну вот......

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

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