HTML: форматирование и минификация
Приводите запутанный HTML в читаемый вид или минифицируйте его для продакшена
Об этом инструменте
Приведите в порядок HTML, вышедший из бандлера, скрапера или WYSIWYG-редактора: элементы получают отступ выбранной ширины, атрибуты остаются на своей строке, а содержимое pre и textarea сохраняется байт в байт. Режим минификации убирает комментарии и сворачивает пробелы между тегами — обычно это сокращение размера на 10–25% для написанных вручную страниц.
Минификация здесь сознательно консервативна: инлайновые скрипты и стили защищены, условные комментарии выживают, а одиночные пробелы между строчными элементами сохраняются, чтобы «нажмите <a>сюда</a> сейчас» не слиплось в «нажмитесюдасейчас». Вы получаете безопасную минификацию, а не максимально агрессивную.
Обе операции выполняются локально в вашем браузере — неопубликованные страницы и внутренняя админская разметка не покидают вашу машину.
Частые вопросы
- Сломает ли минификация мой инлайновый JavaScript или CSS?
- Нет — блоки <script>, <style>, <pre> и <textarea> полностью исключены из сворачивания пробелов. Затрагивается только разметка между тегами. Чтобы сжать сами скрипты, прогоните их отдельно через минификатор JavaScript.
- Почему пробелы между тегами безопасно удалять?
- В основном это так: пробелы между блочными элементами не имеют визуального эффекта. Между строчными элементами имеют — поэтому минификатор сворачивает их до одного пробела, а не удаляет. Редкое исключение, которое стоит проверить глазами, — вёрстка, зависящая от пробельных хаков с inline-block.
- Исправляет ли форматтер некорректный HTML?
- Он форматирует то, что вы дали, не проверяя по спецификации HTML — незакрытые теги остаются незакрытыми. Браузеры снисходительны к «супу из тегов», так что форматирование всё равно помогает увидеть структуру достаточно хорошо, чтобы заметить проблему.
- Какую ширину отступа выбрать?
- 2 пробела — преобладающее соглашение в веб-кодовых базах и умолчание большинства стайлгайдов фреймворков. Возьмите 4, если ваша команда стандартизировала именно их, — выбор чисто косметический.