HTML Biçimlendirici & Sıkıştırıcı

HTML açısı parantezlerle aldatıcı şekilde basit görünür ve şablon motoru tarafından girintilenmemiş 50KB markup okumak zorunda kaldığınız ana kadar öyle kalır. Otomatik üretilmiş HTML — özellikle CMS, sunucu tarafı şablon render, sayfa builder ve e-posta istemcilerinden gelenler — genellikle tek yoğun blok halindedir: tag'ler tek satırda sıkıştırılmış, attribute'lar wrap'lanmamış. Markup doğrudur — tarayıcılar parse eder — ama okunamaz, grep'lenemez ve incelemesi imkansızdır. Biçimlendiricinin işi bu bloğu insanların tarayabileceği şeye dönüştürmek: girintilenmiş çocuklar, yapısal tag'ler için satır başına bir element, uzun attribute'ların makul wrap'i ve korumalı blokların (<pre>, <textarea>, <script>, <style>) yazıldığı gibi bırakılması (iç boşlukları anlamlıdır).

Buradaki biçimlendirici, çoğu modern editörün 'beautify' komutunu güçlendiren js-beautify'ı kullanır. Markup ağacında yürür, hangi tag'lerin kendi satırını hak ettiğine ve hangi inline tag'lerin ebeveyniyle aynı satırda kalması gerektiğine karar verir. Yapılandırma: girinti boyutu (2/4 boşluk veya tab), wrap genişliği (40/80/120/yok) ve korumalı tag'ler. Varsayılanlar (2 boşluk, 80 sütun) en yaygın style guide'larla eşleşir.

Sıkıştırma ters işlemdir ve doğada eşit yaygındır. Production HTML pipeline'ları markup'ı sunmadan önce sıkıştırır: kaydedilen her KB indirilen, parse edilen, cache'lenen byte'tan biridir. Tasarruflar mutlak rakam olarak büyük değildir — HTML sıkıştırma tipik %10-20 azaltır — ama günde milyonlarca render eden yüksek trafikli sayfalarda birikir ve transport katmanındaki gzip/brotli ile çarpımsal olarak çalışır.

Korumalı bloklar, naif uygulamaları gafil avlayan kısımdır. <pre>, <textarea>, <script>, <style> içeriği boşluk-anlamlıdır: <pre> bloğu kodun doğru girintilenmesi için iç boşluğunu kullanır, <textarea>'nın varsayılan değeri tag'leri arasındaki literal metindir. Korumayan bir biçimlendirici onların içindeki boşluğu sıkıştırır ve sayfayı kırar. Buradaki uygulama girişi her korumalı tag'in açılış/kapanışını eşleyen regex'le böler, korumasız parçaları işler ve korumalı içeriği aynen geri ekler.

Biçimlendiricinin hayat kurtardığı yaygın durumlar: Render bug'ı debug — production'dan minify edilmiş HTML'i adım adım gezmek imkansızdır, ama biçimlendirilmişe yapıştırılınca gezilebilir hale gelir. İki versiyonu karşılaştırma — biçimlendirip diff'leyin. Erişilebilirlik veya yapısal sorunları inceleme — girinti başlık hiyerarşisini, liste iç içeliğini ve ARIA yapısını bir bakışta gösterir.

Sıkıştırıcının hayat kurtardığı durumlar: Hand-built statik site deployment'ı, e-posta render (envelope boyut limitleri için kazandırır), CMS export normalize, embedded inline style. Sıkıştırılmış çıktı semantik olarak byte-eşdeğerdir — aynı DOM ağacı, aynı render — sadece daha küçüktür.

Bilmeniz gereken edge case'ler: Embed JavaScript'inin içindeki HTML string'leri korunur (script bloğu korumalıdır). Conditional comment'ler (<!--[if IE]>) biçimlendirici tarafından korunur, sıkıştırıcı tarafından silinir. Inline SVG yapısal-farkındalık girintisiyle biçimlendirilir; SVG-spesifik optimizasyon için SVGO ayrı bir araçtır.

Gizlilik aynı: yükleme yok, log yok, tamamen tarayıcıda. HTML'iniz dahili şirket URL'leri, müşteri verisi veya ön sürüm içerik içerebilir; bunlar üçüncü taraf sunucusuna gitmez. Network sekmesi açıkken biçimlendirme sırasında dış istek görmezsiniz.

Bu araç komşu utiliti'lerle eşleşir. Markdown ↔ HTML biçimlendirilmiş HTML'den dokümantasyon Markdown'ı üretir. JSON Viewer HTML'in içine gömülü JSON-LD'yi inceler. Schema.org JSON-LD Builder JSON-LD üretir. Regex Tester toplu düzenleme akışı için faydalıdır.