¿Es posible detectar el soporte de CSS utilizando Javascript?Detección de capacidades de CSS con Javascript
Por ejemplo, ¿es posible detectar si el navegador admite selectores de atributos como este?
input[type='text'] { }
document.querySelectorAll("input[type='text']")
Pero eso no funciona para los navegadores antiguos, como es natural.
Aparte de eso, puede utilizar la propiedad style para comprobar si se ha aplicado o no una determinada propiedad de CSS.
input[type='text'] {
background-repeat: no-repeat; /* or any other irrelevant, non-default value */
}
y
if (myInputElem.style.backgroundRepeat == "no-repeat") {
// selector is supported
}
Modernizr está diseñado para detectar características del navegador y bien puede ser capaz de ayudar en este caso. http://www.modernizr.com/
Solo detecta cosas nuevas ... los selectores '[attr]' están en todas partes (excepto IE6) – gnarf
Modernizr es para HTML4 -> 5 codificación transitoria, no es un juego de herramientas genérico para verificar las capacidades del navegador heredado. Mal uso (e imo, incorrecto) para esta biblioteca. Úselo para asegurarse de que puede trabajar con un "lienzo" y otros elementos nuevos independientemente del soporte HTML5, no para verificar que las capacidades heredadas aún existan en un navegador. – Brian
Esto es un poco especulativa, ya que no lo he probado, pero creo que sería posible a través de JS para añadir un elemento style seguido de un elemento que tiene un efecto sobre y, a continuación, comprobar los valores :
código no probado especulativa, puede o no puede trabajar (jQuery utiliza por razones de brevedad):
$('<style type="text/css" id="foo">input[type="text"]{ width: 10px; }</style>').appendTo('head');
$('<input type="text" id="bar">').appendTo('body');
if ($('#bar').width() == 10)
{
//attr selector supported
}
$('#foo, #bar').remove();
¿Cómo podría ser esto útil? Debe ejecutar JavaScript para verificar, por lo que también puede ejecutar JavaScript para [agregar soporte] (http://selectivizr.com/). – thirtydot
@thirtydot, sí sé lo que estás diciendo, pero supongo que cuanto menos trabajo tenga el navegador en Javascript, mejor. Si el motor de CSS puede manejarlo, ¿por qué perder preciosos ciclos? ;) – nickf
Porque el motor de CSS (en IE6-8) * no * puede manejarlo. Selectivizr se cierra de inmediato si el navegador no es IE6-8 (los únicos navegadores comunes que no son compatibles con esto). De lo contrario, se ejecuta y agrega soporte para un grupo de selectores encantadores. – thirtydot