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