Коли повинні бути видні теги <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>із вмістом для редагування. Хороший спосіб побачити ефекти в режимі реального часу.

— Джон Дворак

19

Для наступного завдання винайдіть спосіб зробити коментарі видимими.

— Містер Лістер

11

Сюди прийшов згадати те саме, @JanDvorak. Перший раз, коли я його побачив, підірвав мін. Я продемонстрував це на кодені

— К'єльд Шмідт

6

Нагадує мені про "Подорож Світанка", коли Люсі читає заклинання, яке робить Аслана видимим, і вона дивується, що магія вплине на нього , і він, по суті, каже, ти думав, що я не буду дотримуватися моїх правил?

— Девід Конрад

4

Я зайшов сюди, думаючи, що це основне питання, і пішов, дізнавшись щось нове. Я <3 софт.

— Джексонкр

104

Специфікація 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елементі.

— unor

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

8

Я зробив би такі "елементи DOM, як будь-які інші". Насправді це цілком спеціальні теги HTML зі своїми правилами розбору.

— Бергі

2

Забавний факт: оскільки вміст скрипту аналізується як CDATA, ви можете використовувати так, <script type="text/plain">як <xmp>раніше, але все ще сумісні з валідатором W3C.

— Містер Лістер

2

чому script {display: block !important;}не працює, коли немає спеціального правила справи?

— wutzebaer

3

@wutzebaer Для мене це прекрасно працює. Ви впевнені, що все робите правильно? Зверніть увагу, що scriptтег повинен бути і у видимому елементі - він показуватиме лише scriptтіло, а не headза замовчуванням.

— Луань

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

5

@NiettheDarkAbsol: Напевно, безпечніше не використовувати "справжній" тип MIME (або що-небудь, що може стати ним у майбутньому), на всякий випадок, якщо якийсь браузер якийсь день може вирішити якось проаналізувати та виконати елементи сценарію цього типу. Втім, я вважаю за краще використовувати стандартний x-префікс для спеціальних типів, тобто зробити його text/x-example.

— Ільмарі Каронен

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

10

Ви маєте на увазі "подальше задоволення" або "подальший потенціал налагодження" :-)

— Бергі

1

Теги скриптів за замовчуванням приховані за допомогою display:none;. Unor ¹ пояснює основну специфікацію мови. Однак вони все ще є частиною 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}

— Тревіс Дж
джерело