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

142

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

td > * {
  display: block;
}
<table>
  <tr>
    <td>
      <script type="text/javascript">
        var test = 1;
      </script>von 1
    </td>
  </tr>
</table>
Развернуть фрагмент

html css script-tag Wutzebaer
источник
55
Я видел видимый CSS <style>с редактируемым содержимым. Хороший способ увидеть эффекты в реальном времени.
John Dvorak
19
Для следующей задачи придумайте способ сделать комментарии видимыми.
Мистер Листер
11
Пришел сюда, чтобы упомянуть то же самое, @JanDvorak. Снес мою мин в первый раз, когда увидел. У меня есть демонстрация этого на кодовом поле
Шмидт
6
Напоминает мне «Путешествие Покорителя Зари», когда Люси читает заклинание, которое делает Аслана видимым, и она удивлена, что магия подействует на него , и он в основном говорит: «Вы думали, я не подчинюсь своим собственным правилам?»
Дэвид Конрад
4
Я пришел сюда, думая, что это основной вопрос, и ушел, узнав что-то новое. I <3 соф.
Jacksonkr 05

Ответы:

106

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

unor
источник
Данные должны быть уже закодированы в <script>- блоки данных не могут быть загружены src.
@PauliSudarshanTerho: Да, если он используется в качестве блока данных, srcатрибут не разрешен для scriptэлемента.
ОООНР
71

Почему <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, где он нужен?

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

Квентин
источник
9
Фактически, если вы посмотрите на тег скрипта в инспекторе Chrome, вы увидитеuser agent stylesheet: script {display:none}
Niet the Dark Absol 01
8
Я бы сделал эти «элементы DOM такими же, как и любые другие». На самом деле это особые HTML-теги со своими правилами синтаксического анализа.
Берги
2
Интересный факт: поскольку содержимое скрипта анализируется как CDATA, вы можете использовать его так же, <script type="text/plain">как <xmp>и раньше, но при этом быть совместимым с валидатором W3C.
Мистер Листер
2
почему script {display: block !important;}не работает, когда нет особого правила?
wutzebaer 01
3
@wutzebaer У меня отлично работает. Вы уверены, что все делаете правильно? Обратите внимание, что scriptтег также должен быть в видимом элементе - он покажет вам только scriptв теле, а не, например, headпо умолчанию.
Luaan 01
36

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

Иногда я использую <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>
Развернуть фрагмент

jfrej
источник
2
Неплохо, хотя я бы посоветовал использовать действительный MIME-тип: text/htmlи использовать что-то вроде class="codesample"применения стилей. Просто из педантичных соображений: D
Niet the Dark Absol 01
5
@NiettheDarkAbsol: Вероятно, безопаснее не использовать «настоящий» тип MIME (или что-нибудь, что может стать таковым в будущем), на случай, если какой-нибудь браузер когда-нибудь решит каким-то образом проанализировать и выполнить элементы скрипта этого типа. Тем не менее, я бы предпочел использовать стандартный x-префикс для нестандартных типов, т.е. сделать его text/x-example.
Ilmari Karonen
14

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

Вы можете применить класс на уровне документа, например. <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);
}
Ниет Темный Абсол
источник
1
А почему бы и нет <html class="debugscript">?
Берги
@Bergi Это тоже вариант, хотя он, вероятно, не покажет <head>скрипты, потому что <head>сам он также имеет, display:noneпоэтому вам нужно будет принудительно раскрыть это, что может привести к дальнейшим осложнениям.
Niet the Dark Absol 01
10
Вы имеете в виду «дальнейшее развлечение» или «дальнейший потенциал отладки» :-)
Берги
1

Теги скрипта по умолчанию скрыты с помощью display:none;. Unor 1 объясняет базовую спецификацию языка. Однако они по-прежнему являются частью модели 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, 7 июля 2016 г., wutzebaer, «Когда теги должны быть видимыми и почему они могут?», 1 июля в 10:53, https://stackoverflow.com/a/38147398/1026459

Трэвис Дж.
источник