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

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 ¹ 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