Drupal → Выносим определение поддержки javascript в head
Для пользователей с включённым javascript друпал добавляет тегу <html> класс js, что позволяет писать более "доступные" стили. Например если на форме включена автоотправка, то можно не просто скрыть кнопку сабмита для всех, а скрыть только для пользователей с js:
.js .example-form .form-submit { display: none; }
Проблема только в одном — скрипт, добавляющий класс js подключается в подвале и поэтому пока страница загружается пользователь будет видеть кнопку, потому что соответствующего класса у <html> ещё нет.
Решение достаточно простое — добавить небольшой кусок js кода прямо в html.html.twig:
<!DOCTYPE html>
<html{{ html_attributes }}>
<head>
<head-placeholder token="{{ placeholder_token }}">
<title>{{ head_title|safe_join(' | ') }}</title>
<css-placeholder token="{{ placeholder_token }}">
<js-placeholder token="{{ placeholder_token }}">
<script>document.documentElement.className += ' js';</script> <-----------
</head>
<body{{ attributes }}>
{{ page_top }}
{{ page }}
{{ page_bottom }}
<js-bottom-placeholder token="{{ placeholder_token }}">
</body>
</html>
Комментарии
Как по мне, лучше в таком случае использовать соответствующий хук:
/** * Implements hook_page_attachments(). */ function example_page_attachments(array &$attachments) { $attachments['#attached']['html_head'][] = [ [ '#tag' => 'script', '#value' => "document.documentElement.classList.add('js')", ], 'example_has_js', ]; }Да. Я как-то забыл, что так можно.
Оставить комментарий