Quebra-cabeça de visibilidade CSS e noscript

StackOverflow https://stackoverflow.com/questions/9027981

  •  14-11-2019
  •  | 
  •  

Pergunta

Trabalho em um site 100% Javascript que utiliza uma classe CSS no body para ocultar tudo explicitamente (display:none), então ativa os blocos conforme necessário (incomum, sim, mas não posso alterar a arquitetura).

Eu gostaria de exibir um noscript mensagem para usuários sem js habilitado, mas nos deparamos com um quebra-cabeça CSS. noscript deve existir dentro do body.Ao contrário de outros blocos na página, o noscript O elemento não pode ser forçado a se tornar visível, até onde eu sei.O estranho é que quando eu seleciono o noscript elemento com o Webkit Inspector, ele "afirma" que o elemento noscript está visível.Mas não importa o que aconteça, nada aparece na tela com o js desabilitado.

Fiz dois casos de teste - um com noscript padrão e outro com uma div oculta.De qualquer forma, o elemento oculto permanece oculto, não importa o que aconteça.Minha teoria é que simplesmente não é possível exibir seletivamente um elemento aninhado dentro de um elemento pai oculto (ou seja, noscript dentro de body).

Aqui está meu caso de teste simples. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <style type="text/css" media="screen">
        body{
            display:none;
        }

        body noscript  {
          display:block;
          visibility:visible;
          color:black;
        }  
    </style>
</head>

<body>
    <p>Normal text</p>

    <noscript>
        <p>This is is noscript</p>
    </noscript>
</body>
</html>

[Mais tarde:Exemplo simplificado para maior clareza]

Isso pode ser resolvido?Obrigado.

Foi útil?

Solução

Em vez de ocultar o corpo:

body { display: none; }

Você pode fazer tudo em o corpo escondido?

body * { display: none; }

Em seguida, substitua isso pelo noscript - ou por um div dentro do noscript, por exemplo.

body noscript #requirements { display: block; }

Editar

Revisitando isso após o comentário do shacker e olhando minha página de teste com o Firebug, ficou óbvio qual era o problema.

body * { display: none; } aplica-se a tudo dentro do corpo em qualquer profundidade, então mesmo se eu fizer corretamente o <noscript> exibido corretamente, o conteúdo dentro ainda não é exibido.

A solução é direcionar mais especificamente, usando um criança seletor em vez de um descendente seletor.

Dado este html, não vejo nada quando o javascript está habilitado, mas vejo o conteúdo do <noscript> bloco, que lista os requisitos do meu site, quando o javascript está desabilitado.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css" media="screen">
            body > * {
                display: none;
            }
            body > noscript {
                display: block;
            }
        </style>
    </head>

    <body>

        <p>A normal text block, within a &lt;p&gt;</p>

        <div>A standard &lt;div&gt; with only this text in it</div>

        <noscript>
            <div id="requirements">
                <p>
                This is my noscript div, that is, a &lt;div&gt;
                within the &lt;noscript&gt; tag.
                </p>
                <p>
                This site requires that javascript and cookies are enabled.
                </p>
            </div>
        </noscript>

    </body>
</html>

A regra para body > * esconde todos os filhos imediatos do corpo e, portanto, deles descendentes também, enquanto o body > noscript A regra revela o conteúdo do bloco noscript e, claro, esse bloco só é exibido se o javascript estiver desabilitado.

Outras dicas

Você está correto, já que ocultou o elemento pai, não importa o estilo adicionado aos filhos, você não poderá vê-lo até exibir o corpo.Sua melhor aposta seria alterá-lo para não ocultar o corpo por padrão, mas em vez disso, dentro de sua primeira tag de script no exemplo, adicione um simples

document.body.className='specialbody';

Isto irá adicionar o specialbody class antes de qualquer coisa ser renderizada, mas somente se o javascript estiver funcionando.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top