Какова причина добавления простого статического тега <style> с помощью document.write()?

Я просто посмотрел на источник страницы случайную страницу приложения на apptivate.ms и заметил этот JavaScript в <head>:

<script type="text/javascript">
        document.write("<style type=\"text/css\">.app-description { max-height: 600px }</style>");
</script>

Очевидно, что он полностью статичен на стороне клиента, поэтому я задаюсь вопросом, что такое прецедент. Поскольку разработчики Stack Exchange (которые находятся за apptivate.ms) довольно умны, я уверен, что есть некоторые причины для этого, но я не могу понять, что. Я предполагаю, что это связано с задержкой включения правила, пока весь документ не будет загружен, но я бы ожидал, что правило будет применяться, как только браузер "увидит" новый тег...

Ответ 1

Это потому, что часть содержимого элемента .app-description скрыта и может быть показана нажатием кнопки "Показать больше".

Если JavaScript отключен, кнопка не будет работать, поэтому, если рассматриваемый стиль находится непосредственно в таблице стилей, вы никогда не сможете увидеть остальную часть содержимого. Добавив этот стиль в <head>, с JavaScript, он гарантирует, что пользователи с включенной поддержкой JS не будут видеть сразу все содержимое, но вместо этого получат "расширенный" опыт, а те, у кого нет JS-функции, все равно смогут использовать сайт.

Здесь снимок экрана, когда включена функция JS. Кнопка "показать больше" использует JavaScript для расширения элемента до полной высоты:

Это хороший подход к прогрессивному усовершенствованию - с помощью document.write, чтобы вставить новый элемент style внутри head, вы избегаете любой возможной вспышки неидентифицированного контента (в этом случае разработчики могли дождаться DOM готовый, а затем используемый JavaScript, чтобы добавить свойство maxHeight динамически, но это привело бы к тому, что пользователи увидели бы всю высоту ненадолго до того, как JavaScript, выполненный в DOM, готов).

Ответ 2

Это называется прогрессивным улучшением. По сути, понятие прост; не предполагайте, что у всех будет включен JavaScript, даже если 98% из них будут... но если они это сделают, сделайте с ним приятные вещи.

Идея состоит в том, чтобы иметь DOM (HTML) и работать без явного NEED, чтобы JS разрешил его использовать.

Затем, если JS загружается (что в этом случае должно было бы добавить этот стиль), вы можете настроить таргетинг на элемент с определенным именем класса. В этом случае это .app-description. Если у вас нет JS, данный предмет остается незатронутым.

Надеюсь, что это имеет смысл:)

EDIT: теперь вы можете загрузить JS файл, который выполняет некоторые CSS-вещи, но причина, по которой он помещен в тег script на странице, заключается в том, что тогда вы можете избежать HTTP-запрос все вместе, если он не нужен.