Qual é o objetivo da classe HTML "no-js"?

510

Percebo que em muitos mecanismos de modelo, no HTML5 Boilerplate , em várias estruturas e em sites php simples, há a no-jsclasse adicionada à <HTML>tag.

Por que isso é feito? Existe algum tipo de comportamento padrão do navegador que reage a essa classe? Por que incluí-lo sempre? Isso não torna obsoleta a própria classe, se não houver nenhum caso "não-js" e o html puder ser endereçado diretamente?

Aqui está um exemplo do 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 você pode ver, o <html>elemento sempre terá essa classe. Alguém pode explicar por que isso é feito com tanta frequência?

— Swader
fonte

493

Quando o Modernizr é executado, ele remove a classe "no-js" e a substitui por "js". Essa é uma maneira de aplicar diferentes regras de CSS, dependendo de o suporte a Javascript estar ou não ativado.

Veja o código fonte do Modernizer .

— Gregory Pakosz
fonte

5

Há outro ótimo artigo aqui: alistapart.com/articles/…

— Hannele:

47

Como o Modernizr substitui "no-js" por "js", você pode usar isso como uma maneira de fazer o equivalente a uma instrução if / else no seu código CSS. Por exemplo, .myclass { /* CSS code for all versions of your page goes here */ }, .js .myclass { /* This CSS code will only show up if JS is enabled */ }e .no-js .myclass { /* This CSS code will only show up if JS is disabled. */ }. Espero que isto ajude. -Nick

— skcin7

33

@Ringo: HTML 5 especifica que qualquer elemento pode ter um classatributo. Embora o HTML 4 tecnicamente não funcione, nenhum navegador entra nele; mesmo aqueles que não o suportam simplesmente o ignoram, e eu não vejo um desses navegadores há anos.

— precisa

4

@ZachL Sei que devo estar fumando crack aqui, mas parece-me que .js { padding: ...}está bem, já que você sabe como quem o implementou naquele corpo = .js. Mais diretamente ao seu ponto, parece que você está afirmando que body.jsé pior do que .js bodyo que eu não estou seguindo ...

— wired_in

4

Vale ressaltar que o html5-boilerplate o coloca <html>e nenhum problema foi relatado contra isso. De alguma forma, colocá-lo em <html>prática tornou-se uma prática estabelecida e as pessoas imediatamente sabem o que é e o que faz. No final, desviar-se dessa prática apenas levanta mais questões.

— Gregory Pakosz

109

A no-jsclasse é usada pela biblioteca de detecção de recursos Modernizr . Quando o Modernizr é carregado, ele é substituído no-jspor js. Se o JavaScript estiver desativado, a classe permanecerá. Isso permite que você escreva CSS que tenha como alvo facilmente qualquer uma das condições.

Da fonte anotada da Modernizrs (não mais mantida) :

Remova a classe "no-js" do elemento, se existir: docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js';

Aqui está um post de Paul Irish descrevendo essa abordagem: http://www.paulirish.com/2009/avoiding-the-fouc-v3/

Eu gosto de fazer a mesma coisa, mas sem o Modernizr. Coloquei o seguinte <script>no <head>para alterar a classe para jsse o JavaScript estiver ativado. Eu prefiro usar .replace("no-js","js")a versão regex porque é um pouco menos enigmática e atende às minhas necessidades.

<script>
    document.documentElement.className = 
       document.documentElement.className.replace("no-js","js");
</script>

Antes dessa técnica, geralmente eu aplicava estilos dependentes de js diretamente com JavaScript. Por exemplo:

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

Com o no-jstruque, isso agora pode ser feito com css:

.js #someSelector {display: none;}
.otherStuff { color: blue; }
.no-js .otherStuff { color: green }

Isso é preferível porque:

Carrega mais rápido sem FOUC (flash de conteúdo não estilizado)
Separação de preocupações, etc ...

— Zach Lysobey
fonte

1

A versão Modernizr usando um RegExp é mais segura (e provavelmente mais rápida).

— precisa saber é o seguinte

@ AndrewF - você poderia talvez expandir um pouco isso? Como exatamente é mais seguro?

— Zach Lysobey

12

@ZachL A versão regexp (with \b) não corresponde a algo como anno-jsus, a outra muda para anjsus. no-jsnão é uma substring típica de qualquer nome de classe, mas ainda assim é "mais seguro" com \bs.

— Cucu

40

Modernizr.js irá remover a no-jsclasse.

Isso permite que você crie regras CSS para .no-js somethingaplicá-las somente se o Javascript estiver desativado.

— SLaks
fonte

17

A no-jsclasse é removida por um script javascript, para que você possa modificar / exibir / ocultar itens usando css se js estiver desativado.

— marc
fonte

Você disse "A classe no-js é removida por um script javascript". Então, como o Javascript funciona (capaz de remover a classe 'no-js') se estiver desativado. Você poderia me dar uma clara?

— haind

2

Você está certo e este é realmente o ponto: se o JavaScript estiver desativado, a classe permanecerá e você poderá, por exemplo, mostrar alguma parte de html usando CSS para avisar o usuário sobre isso. .no-js #js-warning {display: block;}

— marc

Esteja ciente, erros JS pode ocorrer após Modernizr fez isso, então não é uma maneira infalível de testar JS está funcionando

— htmlr

11

Isso não é aplicável apenas no Modernizer. Vejo algum site ser implementado como abaixo para verificar se ele possui suporte a javascript ou não.

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

Se houver suporte a javascript, ele removerá a no-jsclasse. Caso contrário no-js, permanecerá na etiqueta do corpo. Eles controlam os estilos no CSS quando não há suporte a javascript.

.no-js .some-class-name {

}

— Fizer Khan
fonte

4

Veja o código fonte no Modernizer, nesta seção:

// 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');
}

Então, basicamente, procure a no-jsclasse classPrefix + e substitua-a por classPrefix + js.

E o uso disso é diferente se o JavaScript não estiver sendo executado no navegador.

— Alireza
fonte

1

A classe no-js é usada para estilizar uma página da Web, dependendo de o usuário ter o JS desativado ou ativado no navegador.

De acordo com os documentos Modernizr :

no-js

Por padrão, o Modernizr será reescrito <html class="no-js"> to <html class="js">. Isso permite ocultar certos elementos que devem ser expostos apenas em ambientes que executam JavaScript. Se você deseja desativar essa alteração, pode definir enableJSClass como false em sua configuração.

— JSON C11
fonte