attribute - Cómo hacer que CSS sea visible solo para Opera
title html css (13)
¿Hay alguna manera de hacer que algunas reglas de CSS sean visibles solo para Opera (9.5 +)?
<link href = "opera.css" rel = "stylesheet" type = "text / opera" media = "todos" />
@certainlyakey funciona genial para mí:
@media all y (-webkit-min-device-pixel-ratio: 10000), no todos y (-webkit-min-device-pixel-ratio: 0) {#id {css rule}}
Tengo una página con un botón y el texto no se mostraría correctamente en Opera. El botón aparece muchas veces (agregar al carrito). Después de aplicar esta solución, funcionó perfectamente.
Con el pirateo CSS puro es posible que no puedas limitar de forma segura la versión superior que estás pirateando (por ejemplo, -o-prefocus puede ser soportado mucho después de que tu hack deje de arreglar cosas y comience a romperlas ).
// remember to limit maximum version, because hacking all future versions
// will eventually break the page
if (window.opera && window.opera.version() < 10)
{
document.documentElement.className += '' opera9'';
}
y en CSS:
.opera9 .element-to-hack { /*declarations for opera <= 9 only*/ }
Pero comprueba primero las especificaciones de CSS para asegurarte de que lo que estás pirateando es realmente un error. Opera 10 tiene soporte completo para CSS2.1 y pasa todas las pruebas de ácido, por lo que si algo no parece correcto, puede deberse a otros motivos (error en algún otro lugar del código, detalle o caso de esquina en el que no debe confiar, etc. .)
Escribí una extensión jQuery $ .support para detectar el soporte de propiedad css.
Además, escribí un pequeño fragmento para hacer realmente pequeños hacks de proveedores:
// Sets browser infos as html.className
var params = [];
$.each($.browser, function(k, v) {
var pat = /^[a-z].*/i;
if(pat.test(k)) { params.push(k); }
});
params = params.join('' '');
$(''html'').addClass(params);
Esto resulta, por ejemplo, en:
<html lang="de" class="webkit version safari">
or
<html lang="de" class="opera version">
En tus hojas de estilo, utilízalo de esta manera:
html.opera #content_lock {
background:rgba(0,0,0,0.33);
}
Este truco funciona para la última Opera:
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
#id {css rule}
}
No toca ningún otro navegador por lo que he probado, pero esto puede ser real durante varios meses, con el auge de las tecnologías web, etc.
La única forma en que puedo pensar es verificar el agente de usuario y solo hacer referencia a la hoja de estilos cuando se trata de un navegador de opera. Dado que el agente de usuario puede tener problemas con esto, puede que no sea 100% confiable.
No de ninguna manera lo recomendaría.
Compruebe si hay rastreadores de navegador Javascript o PHP en Google. Sin embargo, es posible que algunos estén tan desactualizados que necesite agregar detección para Opera 9.5+.
Los rastreadores de navegador (para el diseño) generalmente son malas prácticas.
Además, tenga en cuenta que Opera 9.5+ brinda a los usuarios la opción de enmascarar su navegador como IE, lo que inutiliza cualquier tipo de oler.
Editar: Como puede ver en otra respuesta, hay window.opera.version() . No sabía que el objeto window.opera contenía esta información. SIN EMBARGO, probablemente deba ver si este objeto aún está disponible cuando alguien ha configurado a Opera para que lo vea como IE u otro navegador.
No pienses "detectar Opera".
Piense en "detectar navegadores que no admiten la función x". Por ejemplo, esta declaración de JavaScript le permite detectar navegadores que admiten moz-border-radius:
typeof (getComputedStyle(document.body, '''').MozBorderRadius)==''string''
y este es el equivalente para los navegadores basados en WebKit (Safari, Chrome):
typeof (getComputedStyle(document.body, '''').WebKitBorderRadius)==''string''
Juntando eso, podemos llegar a algo como
function detectBorderRadiusSupport(){
var styleObj;
if( window.getComputedStyle ){
styleObj=window.getComputedStyle(document.body, '''');
}else{
styleObj=document.body.currentStyle;
}
return typeof styleObj.BorderRadius != ''undefined'' || typeof styleObj.MozBorderRadius != ''undefined'' || typeof styleObj.WebKitBorderRadius != ''undefined'';
}
// the below must be inside code that runs when document.body exists, for example from onload/document.ready/DOMContentLoaded event or inline in body
if(!detectBorderRadiusSupport())document.body.className+='' fakeBorderRadius'';
CSS:
body.fakeBorderRadius .roundMyCorners{
/* CSS for Opera and others to emulate rounded corners goes here,
typically various background-image and background-position properties */
}
Advertencia: no probado :-p
Puede usar Modernizr ( http://www.modernizr.com/ ) para detectar las características de CSS que quiere usar: aplica los nombres de las clases al elemento del cuerpo para que pueda construir su CSS en consecuencia.
Puede usar javascript para escribir un <link> para incluir un archivo CSS específico.
if (navigator.userAgent.indexOf(’Opera’) != -1) {
document.write(””);
}
else {
document.write(””);
}
Para Opera 7 puedes usar esto:
/*Visible to only Opera*/
@media all and (min-width: 0) {
/* css rules here */
}
Sin embargo, generalmente es una mala práctica hacer un estilo basado en el rastreo del navegador.
funciona muy bien para Opera 10.63
noindex:-o-prefocus, .class {
color:#fff;
}
<link href="opera.css" rel="stylesheet" type="text/opera" media="all" />
Aunque esta solución es más bien un hack de CSS y no hay garantía de que sea compatible con versiones futuras de Opera. También podría considerar usar la siguiente solución:
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) {
.element{/*style for opera only*/}
}
http://bookmarks-online.net/link/1308/css-including-style-for-opera-only
Opera12
@media (min-resolution: .001dpcm) {
_:-o-prefocus, .class {
background: red;
};
}