Элемент script, который получил стиль display:block, становится видимым. Почему это возможно и есть ли реальный вариант использования, где это желательно?
td > * {
display: block;
}<table>
<tr>
<td>
<script type="text/javascript">
var test = 1;
</script>von 1
</td>
</tr>
</table>Спецификация 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> - блоки данных не могут быть загружены src.
- person ; 04.08.2019
src не разрешен для элемента script.
- person unor; 04.08.2019
Почему
<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); }
Есть ли какой-либо вариант использования, где это требуется?
Конечно, общих нет, но общие правила не предназначены для всего, к чему вы можете их применить. Они предназначены для обычных случаев.
user agent stylesheet: script {display:none}
- person Niet the Dark Absol; 01.07.2016
<script type="text/plain"> так же, как и <xmp> в прошлом, но при этом быть совместимым с валидатором W3C.
- person Mr Lister; 01.07.2016
script {display: block !important;} не работает, когда нет правила особого случая?
- person wutzebaer; 01.07.2016
script также должен быть в видимом элементе — он покажет вам только script в теле, а не, например. head по умолчанию.
- person Luaan; 01.07.2016
Другой (не распространенный) вариант использования:
Иногда я использую теги <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>text/html и что-то вроде class="codesample" для применения стилей. Просто из педантичных соображений :D
- person Niet the Dark Absol; 01.07.2016
x- для пользовательских типов, то есть сделать его text/x-example.
- person Ilmari Karonen; 01.07.2016
Возможный вариант использования: для целей отладки.
Вы можете применить класс на уровне документа, например. <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);
}
<html class="debugscript">?
- person Bergi; 01.07.2016
<head> скрипты, потому что сам <head> также имеет display:none, поэтому вам нужно будет принудительно раскрыть это, что может привести к дальнейшим осложнениям.
- person Niet the Dark Absol; 01.07.2016
Теги сценария по умолчанию скрыты с помощью 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, https://stackoverflow.com/a/38147398/1026459
<style>с редактируемым содержимым. Хороший способ увидеть эффекты в реальном времени. - person John Dvorak schedule 01.07.2016