مصغّر CSS

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

والفخّ أن الفراغ في CSS يحمل معنًى أحيانًا. ففي calc(100% - 2rem) تشترط المواصفة المسافات حول علامة الطرح. أزلها فتحصل على calc(100%-2rem)، وهي غير صالحة — وCSS يخفق في صمت، فيُسقط المتصفّح ذلك التصريح ويتغيّر تخطيطك بلا خطأ في أي مكان.

وهذا المصغّر يتتبّع عمق الأقواس. فخارج الأقواس تكون + و~ رابطات منتقيات وتذهب المسافات حولها. وداخلها تكونان حسابًا وتبقى المسافات.

والسلاسل والتعليقات متعامَل معها بمشي النص لا بتعبير نمطي. فرابط يحوي /*، أو خاصّية محتوى تحمل علامة اقتباس، تهزم مسلك التعابير النمطية — والإخفاق ورقة أنماط مقطوعة من تلك النقطة فصاعدًا.

والتعليقات التي تبدأ بـ/*! تبقى. فذلك عرف ترويسات الرخص، ونزعها من مكتبة انتهاكُ رخصة لا تحسينٌ.

اضغط «حمّل عيّنة» وصغّرها. فالعيّنة مكتوبة لتحوي الفخاخ: calc() بمسافات، وتعليق، ومنتقٍ مجمَّع، وصنف زائف a:hover، واستعلام وسائط. افحص المخرجات — calc(100% - 2rem) تنجو سليمة، والتعليق ذهب، و@media (min-width:560px) تحتفظ ببنيتها.

والتنسيق هو الحاجة الأشيع عمليًا. فأنت تنظر إلى ورقة أنماط مصغَّرة من موقع، أو إلى مخرجات بناء تحتاج تتبّع خطأ فيها، وهي سطر واحد بطول 40000 محرف. وتوسيعها يجعلها مقروءة — ورحلة الذهاب والعودة عبر التصغير والعودة بلا فقد إلا في التعليقات، وقد ذهبت أصلًا.

وملاحظة صادقة عن موضع هذا. إن كانت لديك خطوة بناء فاستعملها — فسلسلة أدوات حقيقية تدمج أيضًا القواعد المكرّرة، وتقصّر الألوان، وتزيل التصريحات المتجاوَزة لاحقًا. وهذه الأداة للحالات التي لا تملك فيها واحدة: مقتطف لقالب بريد، وورقة أنماط سُلِّمت إليك، وملف سمة في صندوق نصّ بنظام إدارة محتوى، وكتلة مضمَّنة في صفحة هبوط.

والضغط يهمّ أكثر من التصغير. فـgzip وBrotli يطويان الفراغ المتكرّر بفعّالية شديدة أصلًا، فالملف المصغَّر يُضغط غالبًا إلى أقلّ قليلًا من الأصل. صغّر رغم ذلك — فهو مجّاني — لكن إن كان الملف يُقدَّم بلا ضغط، فإصلاح ذلك يساوي عشرة أضعاف.

وللترميز لا للأنماط، مصغّر HTML يتولّى قواعد الفراغ التي تنطبق هناك.