¿Cómo aplicar CSS solo para Opera 11?

Question

¿Hay alguna manera de hacer que algunas reglas CSS se apliquen solo para Opera (11)?

Answer 1

¡Me encantan los desafíos!
Me tomó algún tiempo, pero finalmente lo encontré:

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

navegadores probados:

• roja: Opera 11
• verde: Opera 10 y 10.5 + WebKit navegadores
• ninguno: Opera 9.26 + Firefox 3.6 + IE9

Está relacionado con error-handling y también el hecho de que NO niega el resultado global (los navegadores WebKit no evalúan la orientación correctamente sin un valor válido). Como el orientation es compatible con la versión 2.7, la segunda consulta de medios es FALSE.

El truco de orientación falsa me suena como un buen nombre.

Answer 2

Usted podría tratar de usar http://www.headjs.com/

Answer 3

No sé de una manera CSS-sólo como Opera 11 es todavía muy nueva.

Puede utilizar lenguajes del lado del servidor como PHP para detectar la User Agent del navegador o puede utilizar la solución Javascript libremente disponibles CSS Browser Selector.

La solución anterior aún no incluye Opera 11, así que vamos a consultar la cadena del agente de usuario de Opera 11 marcando references. (En realidad tienen su propio artículo sobre how to detect opera)

Opera/9.80 (Windows NT 5.1; U; en) Presto/7.2.39 Version/11,00

Cuando Ahora mira el Javascript de el selector de navegador CSS mencionado anteriormente puede ver que acaba de leer el navigator.userAgent y compararlo con muchas variaciones: simplemente agregue su variación de Opera 11 y ya está listo (o espere hasta que el desarrollador actualice el javascript o, mejor aún, actualice el guion y cuéntaselo al autor!).

Answer 4

¿Hay una buena razón por la que desea hacer esto?

Siempre recomendaría no hacer la detección del navegador. En casi todos los casos donde la gente quiere usarlo, es una mejor idea usar la detección de características en su lugar. Si descubres si la característica que deseas es compatible, entonces comenzarás a admitir automáticamente nuevas versiones de otros navegadores cuando se pongan al día, sin tener que trabajar constantemente para mantener tu sitio actualizado como lo harías con las secuencias de comandos de detección del navegador.

Para la detección de características, una de las mejores herramientas que puedo sugerir es usar Modernizr.

Para la detección del navegador, especialmente marca un nuevo navegador como Opera11, no puedo sugerir nada que sea infalible. La respuesta correcta es mirar la cadena del agente de usuario, pero el usuario puede cambiarla fácilmente para hacer una parodia de otro navegador (y a menudo lo es, especialmente por los usuarios de Opera, ya que son los que más frecuentemente intentan evitar los sitios que lo hacen). la detección del navegador y tratar de bloquearlos)

Answer 5

Aquí tienes ......

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

El siguiente estilo serían solamente de hecho consiguen dictada en Opera. Ver Webmonkeys entrada de blog para más detalles:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { 
    #myid { background-color: #F00; } 
} 

Pero hay que tener en cuenta, que todo tipo de hacks CSS podría no trabajar más en el futuro. Así que le recomiendo que agregue los estilos dinámicos solo para Opera con jQuery (jQuery.browser).

Answer 7

mira esto SO Community Wiki.

Answer 8

La pseudo-clase read-only es un filtro simple para Opera:

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