Когда должны быть видимы теги <script> и почему они могут?

Элемент

A script, который получил стиль display:block, выглядит видимым. Почему это возможно и существует ли какой-либо реальный прецедент, где это желательно?

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

ОТВЕТЫ

Ответ 1

Спецификация HTML5 определяет таблицу стилей, в которой пользовательские агенты (например, браузеры) как ожидается, будут использоваться. В разделе 10.3.1 перечислены стили для "Скрытых элементов":

@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; }

Как вы можете видеть, он применяет display: none; к script.

Это единственный "барьер" между вашими пользователями и скрытыми элементами script.. Он отлично подходит и предназначен для того, чтобы перезаписывать стили из таблиц стилей пользовательского агента в стилях стилей автора (и конечно, также в пользовательских таблицах стилей).

Почему кто-то может захотеть его использовать? Одним из вариантов использования является отображение содержимого без необходимости пропускать символы типа </>, аналогично старому элементу xmp. Элемент script может использоваться не только для скриптов, но и также для блоков данных (т.е. Для чего-либо с типом MIME).

Ответ 2

Почему может отображаться <script> теги?

Поскольку они являются HTML-элементами, как и любые другие, и нет причин писать специальные правила case в спецификации HTML (что бы добавить сложность), чтобы CSS не применялся к ним.

Любой элемент можно стилизовать. Возьмем, например:

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); }

Есть ли какой-либо Usecase, где он нужен?

Конечно, нет общих, но общие правила не предназначены для того, чтобы иметь смысл для всего, к чему вы можете применить их. Они предназначены для обычных случаев.

Ответ 3

Другой (не общий) вариант использования:

Я иногда использую теги <script> для кратких примеров кода HTML в руководствах по стилям. Таким образом, мне не нужно избегать HTML-тегов и специальных символов. И текст автотекста текстового редактора и подсветка синтаксиса все еще работают. Но нет простого способа добавить подсветку синтаксиса в браузере.

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>

Ответ 4

Возможный вариант использования: для целей отладки.

Вы можете применить класс на уровне документа, например. <body class="debugscript">, затем используйте некоторый 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);
}

Ответ 5

Теги

Script скрыты по умолчанию с помощью display:none;. Unor 1 объясняет базовую спецификацию языка. Тем не менее, они все еще являются частью DOM и могут быть соответствующим образом оформлены.

Тем не менее, важно помнить, что делает тег script. Хотя раньше он сопровождался типами и языками, это больше не требуется. В настоящее время предполагается, что там находится JavaScript, и в результате браузеры будут интерпретировать и выполнять script, поскольку он встречается (или загружается) из этих тегов.

После выполнения script содержимое тега является только текстом (часто скрытым) на странице. Этот текст может быть раскрыт, но его также можно удалить, поскольку он просто текст.

В нижней части страницы, прямо перед закрывающим тегом </html>, вы можете легко удалить эти теги вместе со своим текстом и не будет никаких изменений на странице.

Например:

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

Это не приведет к удалению каких-либо функциональных возможностей, так как состояние страницы уже изменено и отражено в текущем глобальном контексте выполнения. Например, если страница загрузила библиотеку, такую ​​как jQuery, удаление тегов не означает, что jQuery больше не отображается, поскольку он уже добавлен в среду выполнения страницы. По сути, это означает, что инструмент проверки DOM не показывает элементы script, но он подчеркивает, что элементы script, которые когда-то выполнялись, действительно являются только текстом.

<суб > 1. unor, Thu Jul 07 2016, wutzebaer, "Когда метки должны быть видны и почему они могут?", 1 июля в 10:53, fooobar.com/info/42960/...