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).
srcатрибут не разрешен для scriptэлемента.
Почему
<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, где он нужен?
Конечно, нет общих правил, но общие правила не предназначены для того, чтобы иметь смысл для всего , к чему вы можете их применить. Они предназначены для обычных случаев.
user agent stylesheet: script {display:none}
<script type="text/plain">как <xmp>и раньше, но при этом быть совместимым с валидатором W3C.
script {display: block !important;}не работает, когда нет особого правила?
scriptтег также должен быть в видимом элементе - он покажет вам только scriptв теле, а не, например, headпо умолчанию.
Другой (не распространенный) вариант использования:
Иногда я использую <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
x-префикс для нестандартных типов, т.е. сделать его text/x-example.
Возможный вариант использования: для отладки.
Вы можете применить класс на уровне документа, например. <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">?
<head>скрипты, потому что <head>сам он также имеет, display:noneпоэтому вам нужно будет принудительно раскрыть это, что может привести к дальнейшим осложнениям.
Теги скрипта по умолчанию скрыты с помощью 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
<style>с редактируемым содержимым. Хороший способ увидеть эффекты в реальном времени.