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

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

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

Источник

5 ответов

Решение

Спецификация 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).

Источник

Почему может <script> Теги будут видны?

Потому что они являются элементами HTML, как и любые другие, и нет никаких оснований для написания специальных правил случая в спецификации 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, где он нужен?

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

Источник

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

Я иногда использую <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>

Источник

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

Вы можете применить класс на уровне документа, например. <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);
}
Источник

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

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

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

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

Например:

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

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

1. unor, чт 07 июля 2016, wutzebaer, "Когда должны быть видны метки и почему они могут быть?", 1 июля в 10:53, /questions/18917724/kogda-tegi-script-dolzhnyi-byit-vidnyi-i-pochemu-oni-mogut/18917741#18917741

Источник
Другие вопросы по тегам