مصغّر HTML

الفراغ في HTML ليس زينة. فأي تتابع من المسافات والأسطر الجديدة بين قطعتَي نصّ ينطوي إلى مسافة واحدة عند عرض الصفحة — وتلك المسافة الواحدة فجوة كلمات حقيقية مرئية.

ولهذا تكسر مصغّرات HTML العدوانية الصفحات. خذ Roasted <strong>last week</strong> وفيها سطر جديد قبل <strong>. احذف ذلك الفراغ فتُقرأ الصفحة Roastedlast week. ويحدث ذلك بالضبط في الترميز الذي يزيحه الناس بأكبر عناية، وهو غير مرئي في المصدر بعدها.

والافتراضي هنا يطوي كل تتابع فراغ إلى مسافة واحدة — آمن في كل مكان، وهو يزيل رغم ذلك جلّ البايتات — ولا يحذفه كليًا أبدًا. أما الخيار العدواني فيحذفه، لكن حيث يكون الجانبان عنصرين كتليّين فقط. وحيث يكون أي من الجانبين سطريًا، تكون المسافة فجوة كلمات وتبقى.

ومحتويات pre وtextarea وscript وstyle تمرّ بايتًا ببايت. ففي الأولين يُعرض الفراغ كما كُتب. وفي الأخيرين هو شفرة — والمصغّر الذي يعيد تنسيق JavaScript وإدراج الفواصل المنقوطة التلقائي قائم هو مصغّر يُدخل عللًا.

والتعليقات الشرطية — <!--[if IE]> — تبقى حتى حين تُزال التعليقات، لأن الترميز داخلها ليس تعليقًا إطلاقًا.

حمّل العيّنة وصغّرها والخيار العدواني مطفأ. انظر إلى الفقرة: تنجو المسافة قبل <strong>، فتبقى تُقرأ «Roasted last week in Amman». والآن شغّل الخيار العدواني. يختفي الفراغ بين عناصر <li> — وهو صحيح، فهي كتليّة — لكن الفقرة تبقى سليمة، لأن strong وem في القائمة السطرية.

وافحص كتلة pre. إزاحتها كما كانت بالضبط في الوضعين. وذلك هو الاختبار الذي تخفق فيه كثير من المصغّرات على الإنترنت، وهو الذي يحوّل عيّنة شفرة في صفحة توثيق إلى سطر واحد غير مقروء.

والتنسيق هو ما يصل معظم الناس محتاجين إليه. فلديك مخرجات خادم، أو صفحة محفوظة، أو قالب بريد هو سطر واحد ضخم، وتحتاج أن تجد شيئًا فيه. والإزاحة بعمق التداخل تجعل البنية مرئية — والعناصر الفارغة مثل <img> و<br> لا تُعامَل على نحو صحيح كأنها تفتح مستوًى، وهو ما يجعل المزيحات الساذجة تنحرف يمينًا باطّراد.

وكم يساوي ذلك؟ أقلّ ممّا ترجو. فـHTML يُضغط بـgzip ضغطًا ممتازًا، لأنه مليء بأسماء وسوم متكرّرة، فالترميز المصغَّر وغير المصغَّر يختلفان غالبًا اختلافًا ضئيلًا على الشبكة. والمكاسب الحقيقية في صفحة هي الضغط، ومقاسات الصور، وتقليل الطلبات المعطِّلة للعرض. وهذه أداة ترتيب لا استراتيجية أداء.

ولورقة الأنماط، استعمل مصغّر CSS؛ ولتهريب الترميز ليُعرض نصًّا لا يُعرض صفحةً، مرمّز الكيانات.