Сделать 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 */ 
} 

браузеры испытываться:

• красный: Opera 11
• зеленый: Opera 10 и 10,5 + WebKit браузеры
• ни: Opera 9.26 + Firefox 3.6 + IE9

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

фальшивая ориентация hack звучит как хорошее имя для меня.

Answer 2

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

Answer 3

Я не знаю, о CSS-только, как Opera 11 по-прежнему очень новый.

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

Вышеупомянутое решение еще не включило Opera 11, поэтому давайте проверим строку User Agent из Opera 11, проверив их references. (На самом деле они имеют свою собственную статью о how to detect opera)

Opera/9.80 (Windows NT 5.1; U; ен) Presto/2.7.39 Version/11,00

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

Answer 4

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

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

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

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

Answer 5

Здесь вы идете ......

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

следующий стиль будет действительно только получить вынесенное в 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 7

этот SO Community Wiki.

Answer 8

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

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