¿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?

— Swader
fuente

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