¿Cuál es el propósito de la clase HTML "no-js"?

510

Noté que en muchos motores de plantillas, en HTML5 Boilerplate , en varios marcos y en sitios PHP simples, se no-jsagrega la clase a la <HTML>etiqueta.

¿Por qué se hace esto? ¿Hay algún tipo de comportamiento predeterminado del navegador que reaccione a esta clase? ¿Por qué incluirlo siempre? ¿Eso no hace que la clase en sí misma sea obsoleta, si no hay un caso "no-js" y html se puede abordar 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 <html>elemento siempre tendrá esta clase. ¿Alguien puede explicar por qué esto se hace tan a menudo?

javascript html modernizr html5boilerplate Swader
fuente

Respuestas:

493

Cuando se ejecuta Modernizr, elimina la clase "no-js" y la reemplaza con "js". Esta es una forma de aplicar diferentes reglas CSS dependiendo de si el soporte Javascript está habilitado o no.

Ver el código fuente del modernizador .

Gregory Pakosz
fuente
55
Aquí hay otra gran reseña
Hannele
47
Como Modernizr reemplaza "no-js" por "js", puede usar esto como una forma de hacer el equivalente de una instrucción if / else en su código CSS. Por ejemplo .myclass { /* CSS code for all versions of your page goes here */ }, .js .myclass { /* This CSS code will only show up if JS is enabled */ }y .no-js .myclass { /* This CSS code will only show up if JS is disabled. */ }. Espero que esto ayude. -Nick
skcin7
33
@Ringo: HTML 5 especifica que cualquier elemento puede tener un classatributo. Aunque HTML 4 técnicamente no lo hace, ningún navegador se atraganta; incluso los que no lo admiten lo ignoran, y no he visto uno de esos navegadores en años.
cHao el
44
@ZachL Me doy cuenta de que debo estar fumando crack aquí, pero me parece que .js { padding: ...}está bien, ya que tú sabes como quien lo implementó ese cuerpo = .js. Más directamente a su punto, parece que está afirmando que body.jses peor de lo .js bodyque no estoy siguiendo ...
wired_in
44
Vale la pena mencionar que html5-boilerplate lo pone <html>y nunca se ha informado de ningún problema al respecto. Ponerlo de alguna manera se <html>ha convertido en una práctica establecida y la gente sabe de inmediato qué es y qué hace. Al final, desviarse de esa práctica solo genera más preguntas.
Gregory Pakosz
109

La no-jsclase es utilizada por la biblioteca de detección de características Modernizr . Cuando se carga Modernizr, se reemplaza no-jscon js. Si JavaScript está deshabilitado, la clase permanece. Esto le permite escribir CSS que se dirige fácilmente a cualquier condición.

De la Fuente Anotada de 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 de 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. Puse lo siguiente <script>en <head>para cambiar la clase a jssi 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 aplicaba estilos dependientes de js directamente con JavaScript. Por ejemplo:

$('#someSelector').hide();
$('.otherStuff').css({'color' : 'blue'});

Con el no-jstruco, esto ahora se puede hacer 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.
Zach Lysobey
fuente
1
Sin embargo, la versión Modernizr que usa un RegExp es más segura (y probablemente más rápida).
AndrewF
@AndrewF: ¿podrías ampliar un poco eso? ¿Cómo es exactamente más seguro?
Zach Lysobey
12
@ZachL La versión regexp (con \b) no coincide con algo como anno-jsus, el otro lo cambia a anjsus. no-jsno es una subcadena típica de ningún nombre de clase, pero aún así es "más seguro" con \bs.
Cucu
40

Modernizr.js eliminará la no-jsclase.

Esto le permite crear reglas CSS para .no-js somethingaplicarlas solo si Javascript está deshabilitado.

SLaks
fuente
17

La no-jsclase se elimina mediante un script javascript, por lo que puede modificar / mostrar / ocultar cosas usando css si js está deshabilitado.

bagazo
fuente
Dijiste "La clase no-js se elimina mediante un script javascript". Entonces, cómo funciona Javascript (capaz de eliminar la clase 'no-js') si está deshabilitado. ¿Podrías darme un claro?
Haind
2
Tiene razón y este es realmente el punto: si JavaScript está deshabilitado, la clase se mantendrá y, por ejemplo, puede mostrar alguna parte html usando CSS para advertir al usuario al respecto. .no-js #js-warning {display: block;}
marc
Tenga en cuenta que pueden producirse errores de JS después de que Modernizr haya hecho esto, por lo que no es una forma infalible de probar que JS funciona
htmlr
11

Esto no solo es aplicable en Modernizer. Veo algunos sitios implementados como a continuación para verificar si tiene soporte JavaScript o no.

<body class="no-js">
    <script>document.body.classList.remove('no-js');</script>
    ...
</body>

Si hay compatibilidad con JavaScript, eliminará la no-jsclase. De no-jslo contrario , permanecerá en la etiqueta del cuerpo. Luego controlan los estilos en el CSS cuando no hay soporte para JavaScript.

.no-js .some-class-name {

}
Fizer Khan
fuente
4

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, busca classPrefix + no-jsclass y lo reemplaza con classPrefix + js.

Y el uso de eso, tiene un estilo diferente si JavaScript no se ejecuta en el navegador.

Alireza
fuente
1

La clase no-js se usa para diseñar una página web, dependiendo de si el usuario tiene JS deshabilitado o habilitado en el navegador.

Según los documentos de Modernizr :

no-js

Por defecto, Modernizr reescribirá <html class="no-js"> to <html class="js">. Esto permite ocultar ciertos elementos que solo deberían exponerse en entornos que ejecutan JavaScript. Si desea deshabilitar este cambio, puede establecer enableJSClass en falso en su configuración.

JSON C11
fuente