🥇 Detecção simples de JavaScript para seu CSS

É discutível se há um número significativo de usuários navegando na Web com scripts desativados – e, com as principais soluções de análise como o Google Analytics sendo baseadas em JavaScript, não é exatamente fácil acompanhar a contagem exata.

O veículo básico para reagir aos scripts desativados há muito tempo é a <noscript>tag – um vestígio deselegante de dias mais simples, que pouco pode fazer além de carregar um banner exigindo que os usuários habilitem os scripts para prosseguir (não faça isso!) ; ou, um pouco melhor – uma folha de estilo ‘não js’:

<noscript><link rel="stylesheet" href="nojs.css"></noscript>

No entanto, você pode facilmente tornar sua folha de estilo principal compatível com JS, sem falar em salvar uma solicitação, se descartar o <noscript> e começar seu HTML com o seguinte código:

<html class="no-js">
    <head>
        <script>
            var _h = document.getElementsByTagName("html")[0];
            _h.className = _h.className.replace(/bno-jsb/,'has-js');
        </script>

Tudo o que isso faz é substituir o no-jsnome da classe com o has-jsuso de uma expressão regular simples . Se o JavaScript estiver desabilitado, a substituição simplesmente não ocorrerá e a no-jsclasse permanecerá. Na verdade, o HTML5 Boilerplate faz algo bastante semelhante.

Agora você pode usar os seletores e em seus elementos CSS e de estilo de acordo. Como sempre, tenha em mente o aprimoramento progressivo ao criar suas páginas: mesmo que seu aplicativo dependa fortemente de scripts do lado do cliente, há um benefício de desempenho tangível de renderizar o conteúdo inicial de uma página no servidor. Para mais discussão sobre esse assunto, confira a apresentação bastante séria de Nicholas Zakas ..no-js.has-js

Related Posts