Detectando cuando los estilos están deshabilitados

¿Cuál es la mejor forma de detectar, con JS, si el usuario ha desactivado las hojas de estilo? ¿Hay una manera confiable incluso?Detectando cuando los estilos están deshabilitados

Fuente

2011-01-21 wheresrhys

se puede comprobar el estilo calculado para ciertos elementos y ver si ellos no coinciden con lo que declarar en tu hoja de estilo. – BoltClock

, compruebe si se aplican los estilos que estableció en su archivo. – Hannes

Algo fácil sería comprobar el color de fondo del cuerpo, por ejemplo.

Sin embargo, ¿qué probabilidades hay de que alguien desactive CSS y no Javascript? (no sé para qué lo usas obviamente)

Fuente

2011-01-21 12:44:54 plebksig

No sé qué tan probable sea. Sin embargo, el sitio en el que estoy trabajando tiene requisitos de accesibilidad muy elevados, y para ciertos elementos (por ejemplo, un carrusel) tener js sin CSS termina con una interfaz confusa que parece no hacer nada (ya que el carrusel usa muchos estilos de CSS) – wheresrhys

A pesar de que hay estándares claros para la accesibilidad, es un poco difícil saber qué cosas se van por un presupuesto. Por lo general, tengo un enfoque que va con el uso de títulos de enlaces, la estructura adecuada en el sitio para que se pueda tabular fácilmente, un buen contraste, botones claros, dividir contenido y estilo, etc. Prueba con el teclado navegándote a ti mismo. Un sitio realmente bien hecho será accesible por sí mismo si el autor hace el seguimiento del contenido. Solo 2-3% desactivan JS, menos desactivan CSS, y los lectores de pantalla más nuevos no son tan malos como solían hacerlo. – plebksig

¿Qué te parece preguntar?

<div style="display:none">This site relies on CSS, please go to our <a href="noncss.html">CSS free version of this site</a></div>

Fuente

2011-01-21 14:26:46 mplungjan

Pet peeve aquí en SO. Las personas que votan sin comentar por qué. – mplungjan

Ciertamente no fui yo quien votó negativamente. Parece una solución válida. Sin embargo, el 99% del tiempo que un usuario tendría CSS deshabilitado y JS habilitado es para un lector de pantalla u otro tipo de herramienta de accesibilidad. Tal vez usar 'versión desafiada CSS 'no sea la mejor opción o palabras. – dennmat

Observado, pero todavía molesto – mplungjan

Tendría un pequeño div vacío en la pantalla. Cuando se carga la página, use JS para verificar la propiedad 'mostrar' de ese div. Si es 'ninguno', entonces su css ha sido cargada con éxito. Si no, pueden tener que apagar/cambiar sus estilos.

Fuente

2011-01-21 14:29:08

Si tiene el control de la hoja de estilos, puede tener un estilo de "calibración". Tiene un nombre de clase que aplica alguna propiedad de CSS a un elemento. Una buena propiedad segura entre navegadores puede ser de fondo.

Al cargar su JS trate de crear dinamicamente un elemento y apliquele el nombre de clase. Verifique si las propiedades coinciden (la del elemento con la que está esperando).

El comentario de BoltClock se acerca. Puede usar window.getComputedStyles(calibrationElement, null) pero eso fallará en las versiones anteriores del navegador IE.

Véase la documentación para getComputedStyles

Siéntase libre de eliminar el nodo de "calibración", después de que se haya registrado la misma.

Fuente

2011-01-21 14:34:59

Al menos en Safari, parte de la dificultad es que con CSS fuera de los elementos todavía se informan los atributos de CSS. Pero si prueba la representación real de una propiedad, entonces puede saber. El ancho es probablemente la propiedad más simple (y más común) que puede probar.

A continuación se muestra un script de ejemplo (utiliza jQuery, pero podría ser fácilmente un-jQueryfied) que probará CSS. Solo cargamos un div vacío en la página, le damos un ancho de 3px usando CSS, y luego probamos el ancho de ese div. Si el ancho no es 3, CSS está deshabilitado. Obviamente, debes asegurarte de que esto no colide con otros estilos que puedas tener que puedan hacer que el ancho sea distinto de 3. Pero da la idea general.

<html> 
    <head> 
     <title>Test</title> 
     <style type="text/css">  
      #testCSS {width: 3px;} 
     </style> 
    </head> 
    <body> 
     <div id="testCSS"></div> 
     <div id="message"></div> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script type="text/javascript"> 
      jQuery(document).ready(function(){ 
       if (jQuery("#testCSS").width() != 3) jQuery("#message").html("CSS Disabled"); 
      }); 
     </script> 
    </body> 
</html>

Edición: disculpa el ejemplo del código desordenado. Parece que no me gustan mis etiquetas de código. Aquí hay un JSfiddle con el código. Es obvio que no será capaz de desactivar CSS y probar allí, pero se puede tirar el código de él: http://jsfiddle.net/3FvdL/1/

Fuente

2013-03-27 15:51:40

Asumiendo que su hoja de estilo externa o en línea primaria se carga antes de la secuencia de comandos, puede utilizar esto:

if (document.styleSheets.length){} // stylesheets are disabled

https://developer.mozilla.org/en-US/docs/DOM/document.styleSheets

es IE5 + compatibles también según: http://www.jr.pl/www.quirksmode.org/dom/w3c_css.html

la advertencia es que, si estilos se apagan después de la ventana se haya cargado (que sólo provoca un representante del navegador aint), el objeto document.styleSheets no cambiará sobre la marcha.Además, como se señala en los comentarios a continuación, esto no funcionará para Firefox cuando se usa la función Ver -> Estilo de página -> Sin estilo, para la cual los estilos todavía se cargan, simplemente no se aplica a la vista.

para detectar el estado inicial en todos los navegadores, o cambios en window.onresize, se puede hacer con un style reset en el cuerpo, con el siguiente código colocado después<body> o en un evento DOMContentLoaded:

if (document.body.clientWidth !== document.documentElement.clientWidth) { 
    // Styles are disabled or not applied 
}

Esto funciona si usa body { margin: 0; } en sus hojas de estilo (sin un ancho personalizado particular), porque hace que el elemento body tenga el mismo ancho que documentElement (también conocido como el elemento <hmtl>) mientras los estilos están activos.

Cuando estilos se desconecten o desactivado, el body.clientWidth volverá al ancho del cuerpo por defecto del navegador, que siempre tiene un margen (8px by default in CSS 2.1 major browsers) y por lo tanto diferente de documentElement.clientWidth.

En caso de diseño de su sitio usar un margen específica con excepción de 8 píxeles para el cuerpo, aquí es una opción alternativa:

if (document.body.clientWidth === document.documentElement.clientWidth-16) { 
    // user styles are disabled or not applied (IE8+ default browser style applies) 
}

Fuente

2013-04-03 05:43:32 hexalys

Apagué los estilos en Firefox 28.0 a través de Ver-> Estilo de página-> Sin estilo, e intenté ambos enfoques que proporcionó, no funcionan. document.styleSheets.length siempre es mayor que 0, y document.body.clientWidth! == document.width siempre devuelve verdadero. – Stack0verflow

@ Stack0verflow Gracias por el informe. Parece que la opción 'No Style' de Firefox no implica que los Estilos estén de hecho deshabilitados (en eso, es diferente de la opción 'Desactivar Estilos' de Webkit). Los estilos simplemente se quitan de la vista, pero siempre están cargados. Lo buscaré para una solución revisada. – hexalys

Gracias y ese parece ser el caso. – Stack0verflow

Detectando cuando los estilos están deshabilitados

Respuesta

Cuestiones relacionadas