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?

javascript html modernizr html5boilerplate Swader
fonte

Respostas:

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