Quando as tags <script> devem estar visíveis e por que podem?

142

Um scriptelemento que foi estilizado como display:blockparece visível. Por que é possível e existe algum caso de uso real onde é desejado?

td > * {
  display: block;
}
<table>
  <tr>
    <td>
      <script type="text/javascript">
        var test = 1;
      </script>von 1
    </td>
  </tr>
</table>
Expandir snippet

html css script-tag wutzebaer
fonte
55
Eu vi um CSS visível <style>com conteúdo editável. Ótima maneira de ver os efeitos em tempo real.
John Dvorak
19
Para o seu próximo desafio, crie uma maneira de tornar os comentários visíveis.
Sr. Lister
11
Vim aqui para mencionar a mesma coisa, @JanDvorak. Explodi meu min na primeira vez que o vi. Eu tenho uma demonstração deste em codepen
Kjeld Schmidt
6
Lembra-me de A Viagem do Peregrino da Alvorada quando Lucy lê um feitiço que faz Aslan visível, e ela está surpreso que a magia afetaria dele , e ele basicamente diz, você acha que eu iria desobedecer minhas próprias regras?
David Conrad
4
Eu vim aqui pensando que essa era uma pergunta básica e saí de ter aprendido algo novo. Eu <3 sof.
21964 JacksonJackson

Respostas:

104

A especificação HTML5 define uma folha de estilos que os agentes do usuário (como navegadores) devem usar. A Seção 10.3.1 lista os estilos de "Elementos ocultos":

@namespace url(http://www.w3.org/1999/xhtml);

[hidden], area, base, basefont, datalist, head, link,
meta, noembed, noframes, param, rp, script, source, style, template, track, title {
  display: none;
}

embed[hidden] { display: inline; height: 0; width: 0; }

Como você pode ver, isso se aplica display: none;a script.

Essa é a única "barreira" entre seus usuários e scriptelementos ocultos . É perfeitamente adequado e pretende sobrescrever estilos das folhas de estilo do agente do usuário nas folhas de estilo do autor (e, é claro, também nas folhas de estilo do usuário).

Por que alguém pode querer usá-lo? Um caso de uso está exibindo conteúdo sem ter que escapar de caracteres como </> , semelhantes ao xmpelemento antigo . O scriptelemento pode ser usado não apenas para scripts, mas também para blocos de dados (ou seja, para qualquer coisa com um tipo MIME).

unor
fonte
Os dados já devem estar codificados nos <script>- blocos de dados não podem ser carregados src.
@PauliSudarshanTerho: Sim, se usado como bloco de dados, o srcatributo não será permitido no scriptelemento.
unor 4/08/19
71

Por que as <script>tags podem ser visíveis?

Porque eles são elementos HTML como qualquer outro e não há razão para escrever regras de caso especiais na especificação HTML (o que adicionaria complexidade) para impedir que o CSS se aplique a eles.

Qualquer elemento pode ser estilizado. Considere por exemplo:

head { display: block; }
title { display: block; }
meta { display: block; }
meta[charset]:after { display: block; content: attr(charset); }
meta[content]:after { display: block; content: attr(content); }

Existe algum caso de uso onde é procurado?

Certamente não são comuns, mas as regras gerais não são projetadas para fazer sentido para tudo o que você pode aplicá-las. Eles são projetados para os casos comuns.

Quentin
fonte
9
De fato, se você olhar para uma tag de script no inspetor do Chrome, veráuser agent stylesheet: script {display:none}
Niet the Dark Absol
8
Eu faria esses "elementos DOM como qualquer outro". Na verdade, eles são tags HTML bastante especiais com suas regras de análise.
Bergi
2
Curiosidade: como o conteúdo do script é analisado como CDATA, você pode usar <script type="text/plain">como <xmp>antes, mas ainda assim ser compatível com o validador W3C.
Sr. Lister
2
por que script {display: block !important;}não funciona quando não existe uma regra de caso especial?
Wutzebaer 01/07/19
3
@wutzebaer Funciona bem para mim. Tem certeza de que está fazendo tudo certo? Observe que a scripttag também deve estar em um elemento visível - ela mostrará apenas você scriptno corpo, não headpor exemplo, por padrão.
Luaan 01/07/16
36

Outro caso de uso (não comum):

Às vezes, uso <script>tags para exemplos breves de código HTML em guias de estilo. Dessa forma, não preciso escapar de tags HTML e caracteres especiais. E a tag do editor de texto continua com o preenchimento automático e o destaque da sintaxe. Mas não há uma maneira fácil de adicionar realce de sintaxe no navegador.

script[type="text/example"] {
    background-color: #33373c;
    border: 1px solid #ccc;
    color: #aed9ef;
    display: block;
    font-family: monospace;
    overflow: auto;
    padding: 2px 10px 16px;
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
}
<p>Here comes a code example:</p>
<script type="text/example">
  <div class="cool-component">
     Some code example
  </div>
</script>
Expandir snippet

jfrej
fonte
2
Nada mal, embora eu sugira usar um tipo MIME válido: text/htmle usar algo como class="codesample"para aplicar estilos. Apenas por razões pedantes: D
Niet the Dark Absol
5
@NiettheDarkAbsol: Provavelmente é mais seguro não usar um tipo MIME "real" (ou qualquer coisa que possa se tornar um no futuro), caso algum navegador algum dia decida analisar e executar os elementos de script desse tipo de alguma maneira. Dito isto, prefiro usar o x-prefixo padrão para tipos personalizados, ou seja, fazê-lo text/x-example.
Ilmari Karonen
14

Possível caso de uso: para fins de depuração.

Você pode aplicar uma classe no nível do documento, por exemplo. <body class="debugscript">, então use algum CSS:

body.debugscript script {
    display: block;
    background: #fcc;
    border: 1px solid red;
    padding: 2px;
}
body.debugscript script:before {
    content: 'Script:';
    display: block;
    font-weight: bold;
}
body.debugscript script[src]:before {
    content: 'Script: ' attr(src);
}
Niet, o Escuro Absol
fonte
1
Por que não <html class="debugscript">?
Bergi
@ Bergi Essa também é uma opção, embora provavelmente não revele <head>scripts porque o <head>próprio site também possui, display:noneentão você precisará forçar a revelar isso, o que pode levar a complicações adicionais.
Niet the Dark Absol
10
Você quer dizer "mais divertido" ou "ainda mais o potencial de depuração" :-)
Bergi
1

As tags de script são ocultadas por padrão usando display:none;. O Unor 1 explica a especificação do idioma subjacente. No entanto, eles ainda fazem parte do DOM e podem ser estilizados de acordo.

Dito isto, é importante ter em mente exatamente o que uma tag de script está fazendo. Embora fosse acompanhado por tipos e idiomas, isso não é mais necessário. Agora, pressupõe-se que o JavaScript esteja lá e, como resultado, os navegadores interpretarão e executarão o script à medida que for encontrado (ou carregado) a partir dessas tags.

Depois que o script é executado, o conteúdo da tag é apenas texto (geralmente oculto) na página. Este texto pode ser revelado, mas também pode ser removido porque é apenas texto.

Na parte inferior da página, logo antes da </html>tag de fechamento , você pode removê-las facilmente com o texto e não haverá alterações na página.

Por exemplo:

(function(){
    var scripts = document.querySelectorAll("script");
    for(var i = 0; i < scripts.length; i++){
        scripts[i].parentNode.removeChild(scripts[i]);
    }
})()

Isso não removerá nenhuma funcionalidade, pois o estado da página já foi alterado e é refletido no atual contexto global de execução. Por exemplo, se a página carregou uma biblioteca como o jQuery, a remoção das tags não significa que o jQuery não está mais exposto porque já foi adicionado ao ambiente de tempo de execução da página. Essencialmente, é apenas fazer com que a ferramenta de inspeção DOM não mostre elementos de script, mas destaca que os elementos de script, uma vez executados, realmente são apenas texto.

1. unor, qui 07/07/2016, wutzebaer, "Quando as tags devem estar visíveis e por que podem?", 1 de julho às 10:53, https://stackoverflow.com/a/38147398/1026459

Travis J
fonte