onlinetools.dev

Formater i minifikator HTML

Uporządkuj zabałaganiony HTML albo zminifikuj go na produkcję

Działa lokalnie
loading…
O tym narzędziu

Uporządkuj HTML, który wyszedł z bundlera, scrapera albo edytora WYSIWYG: elementy dostają wcięcia o wybranej szerokości, atrybuty zostają w swoim wierszu, a zawartość pre i textarea pozostaje nietknięta bajt w bajt. Tryb minifikacji usuwa komentarze i zwija odstępy między znacznikami — na ręcznie pisanych stronach to zwykle 10–25% mniej wagi.

Minifikacja jest tu celowo zachowawcza: skrypty i style inline są chronione, komentarze warunkowe przeżywają, a pojedyncze spacje między elementami liniowymi zostają zachowane, żeby „kliknij <a>tutaj</a> teraz” nie zlało się w jedno słowo. Dostajesz minifikację bezpieczną, a nie maksymalnie agresywną.

Obie operacje działają lokalnie w Twojej przeglądarce — nieopublikowane strony i markup wewnętrznych paneli administracyjnych nigdy nie opuszczają Twojej maszyny.

Często zadawane pytania

Czy minifikacja zepsuje mój wbudowany JavaScript albo CSS?
Nie — bloki <script>, <style>, <pre> i <textarea> są całkowicie wyłączone ze zwijania białych znaków. Ruszany jest wyłącznie markup pomiędzy znacznikami. Żeby skompresować same skrypty, przepuść je osobno przez minifikator JavaScriptu.
Dlaczego usuwanie odstępów między znacznikami jest bezpieczne?
Przeważnie jest: odstęp między elementami blokowymi nie ma efektu wizualnego. Między elementami liniowymi już ma — dlatego minifikator zwija ciągi do pojedynczej spacji, zamiast je kasować. Układy oparte na sztuczkach z odstępami przy inline-block to rzadki wyjątek wart obejrzenia.
Czy formater naprawia niepoprawny HTML?
Formatuje to, co dostanie, bez walidacji względem specyfikacji HTML — niedomknięte znaczniki zostają niedomknięte. Przeglądarki wybaczają zupę znaczników, więc formatowanie i tak pomoże Ci zobaczyć strukturę na tyle dobrze, by wypatrzyć problem.
Jakiej szerokości wcięcia używać?
2 spacje to dominująca konwencja w webowych bazach kodu i domyślne ustawienie większości przewodników stylu we frameworkach. Wybierz 4, jeśli Twój zespół tak się umówił — to kwestia czysto kosmetyczna.
Powiązane narzędzia