javascript - latest - ¿Cuál es el propósito de la clase HTML "no-js"?
modernizr download (7)
Cuando se ejecuta Modernizr, elimina la clase "no-js" y la reemplaza por "js". Esta es una forma de aplicar diferentes reglas CSS dependiendo de si está habilitado o no el soporte de Javascript.
Me he dado cuenta de que en muchos motores de plantillas, en HTML5 Boilerplate , en varios marcos y en sitios php sin formato, se agrega la clase no-js a la etiqueta <HTML> .
¿Por qué se hace esto? ¿Hay algún tipo de comportamiento predeterminado del navegador que reacciona a esta clase? ¿Por qué incluirlo siempre? ¿Eso no hace que la clase en sí sea obsoleta, si no hay ningún caso "no-js" y el html puede abordarse directamente?
Aquí hay un ejemplo del HTML5 Boilerplate index.html:
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
Como puede ver, el elemento <html> siempre tendrá esta clase. ¿Puede alguien explicar por qué esto se hace tan a menudo?
Esto no solo es aplicable en el modernizador. Veo algunos implementos del sitio como a continuación para verificar si tiene soporte para javascript o no.
<body class="no-js">
<script>document.body.classList.remove(''no-js'');</script>
...
</body>
Si hay soporte para javascript, entonces eliminará la clase no-js . De lo contrario, no-js permanecerá en la etiqueta del cuerpo. Luego controlan los estilos en el css cuando no hay soporte para javascript.
.no-js .some-class-name {
}
La clase no-js es utilizada por la biblioteca de detección de características Modernizr . Cuando se carga Modernizr, reemplaza no-js con js . Si JavaScript está deshabilitado, la clase permanece. Esto le permite escribir CSS que fácilmente apunta a cualquiera de las condiciones.
De la fuente anotada de los modernizadores (ya no se mantiene) :
Elimine la clase "no-js" del elemento, si existe:
docElement.className=docElement.className.replace(//bno-js/b/,'''') + '' js'';
Aquí hay una publicación del blog de Paul Irish que describe este enfoque: http://www.paulirish.com/2009/avoiding-the-fouc-v3/
Me gusta hacer lo mismo, pero sin Modernizr. Pongo el siguiente <script> en el <head> para cambiar la clase a js si JavaScript está habilitado. Prefiero usar .replace("no-js","js") sobre la versión regex porque es un poco menos críptico y se adapta a mis necesidades.
<script>
document.documentElement.className =
document.documentElement.className.replace("no-js","js");
</script>
Antes de esta técnica, generalmente solo aplicaría los estilos dependientes de js directamente con JavaScript. Por ejemplo:
$(''#someSelector'').hide();
$(''.otherStuff'').css({''color'' : ''blue''});
Con el truco no-js , esto se puede hacer ahora con css :
.js #someSelector {display: none;}
.otherStuff { color: blue; }
.no-js .otherStuff { color: green }
Esto es preferible porque:
- Se carga más rápido sin FOUC (flash de contenido sin estilo)
- Separación de inquietudes, etc ...
La clase no-js se elimina mediante una secuencia de comandos javascript, por lo que puede modificar / mostrar / ocultar cosas usando css si js está deshabilitado.
La clase no-js se utiliza para diseñar una página web, dependiendo de si el usuario tiene JS desactivado o activado en el navegador.
Según la documentación de Modernizr :
no-js
Por defecto, Modernizr reescribirá
<html class="no-js"> to <html class="js">. Esto permite ocultar ciertos elementos que solo deben exponerse en entornos que ejecutan JavaScript. Si desea deshabilitar este cambio, puede configurar enableJSClass en falso en su configuración.
Mire el código fuente en Modernizer, esta sección:
// Change `no-js` to `js` (independently of the `enableClasses` option)
// Handle classPrefix on this too
if (Modernizr._config.enableJSClass) {
var reJS = new RegExp(''(^|//s)'' + classPrefix + ''no-js(//s|$)'');
className = className.replace(reJS, ''$1'' + classPrefix + ''js$2'');
}
Básicamente, busque classPrefix + no-js class y reemplácelo con classPrefix + js .
Y el uso de eso, es un estilo diferente si JavaScript no se ejecuta en el navegador.
Modernizr.js eliminará la clase no-js .
Esto le permite hacer que las reglas CSS para .no-js something para aplicarlas solo si Javascript está deshabilitado.