6XC

مُصغّر ومنسّق CSS

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

1,242 مشاهدة

كيف يعمل

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

التنسيق (Beautify) هو العملية العكسية، وهو أصعب فعلياً: يأخذ CSS مضغوطاً أو فوضوياً ويعيد ترتيب مسافاته البادئة بحيث يكون كل تصريح في سطره الخاص، وكل قاعدة في كتلتها الخاصة، بتباعد متسق حول النقطتين والأقواس. هذا نوع من الهندسة العكسية، لأن التنسيق الأصلي — وخصوصاً أي تعليقات — يختفي بمجرد تصغير الملف؛ لا يمكن استعادة سوى التنسيق البنيوي (أي محدد يرتبط بأي تصريحات)، وليس فواصل الأسطر أو ملاحظات المؤلف الأصلية. على سبيل المثال، .btn{color:red;padding:8px} يصبح كتلة منسّقة بمسافات بادئة صحيحة مع color: red; وpadding: 8px; كل منهما في سطره الخاص داخل .btn { }.

ما يجب أن تعرفه

  • يحافظ كلا الاتجاهين على السلوك تماماً كما هو. المحددات والخصائص والقيم وترتيب التتالي (cascade) لا تتغيّر — فقط المسافات والتعليقات تتغيّر، لذا تعمل الخصوصية (specificity) والوراثة بالطريقة نفسها قبل وبعد.
  • هذه أداة خفيفة تعتمد على التعابير النمطية (regex)، وليست محلّلاً كاملاً لـ CSS (مثل PostCSS). تتعامل بشكل صحيح مع CSS القياسي، لكن قيم المحتوى التي تحتوي على { أو } أو ; حرفياً داخل علامات اقتباس (نادرة عملياً، وتظهر غالباً في قيم content: المُولَّدة) قد لا تُنسَّق بشكل مثالي.
  • صيغة Sass/Less لا تُعالَج. التداخل والمتغيرات والـ mixins ليست CSS صالحاً بحد ذاتها، لذا تمر دون تغيير يُذكَر بدلاً من أن تُترجَم — ستحتاج إلى Sass أو Less نفسها لتحويلها إلى CSS خالص أولاً.
  • التعليقات هي الشيء الوحيد الذي يُلغيه التصغير نهائياً. إذا كان تعليق ما يوثّق حلاً بديلاً خاصاً بمتصفح معين أو تحذيراً بـ"لا تحذف هذا"، احتفظ بنسخة من المصدر غير المُصغَّر في مكان ما — فلا سبيل لاستعادته من المخرجات المضغوطة.

مقارنة ملموسة: قاعدة منسّقة مثل .card { border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.1); } تُصغَّر إلى .card{border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.1)} — أقصر بشكل ملحوظ، وعبر ورقة أنماط كاملة تحتوي على عشرات القواعد والتعليقات واستعلامات الوسائط (media queries) المتداخلة، يتراوح هذا التوفير عادة بين 20% و40% من حجم الملف الأصلي.

الأسئلة الشائعة

هل التصغير يُفسد الـ CSS الخاص بي؟

لا — فهو يزيل التعليقات فقط ويدمج المسافات حول علامات الترقيم؛ يبقى كل محدد وخاصية وقيمة وقاعدة مطابقاً وظيفياً للأصل. يُظهر المتصفح النسختين المُصغّرة والأصلية بالطريقة نفسها تماماً، بيكسلاً ببيكسل.

لماذا يُسرّع التصغير موقعي؟

يجب على المتصفح تنزيل ملف CSS بالكامل وتحليله قبل أن يتمكن من عرض الصفحة بأمان (لهذا يُوصَف CSS بأنه "يحجب العرض" render-blocking). الملف الأصغر يُنزَّل أسرع، خصوصاً على شبكات الجوّال أو الاتصالات البطيئة، مما يقصّر الوقت قبل أن تصبح الصفحة مرئية — ويحسّن مباشرة مقاييس مثل First Contentful Paint.

هل يمكن للتنسيق استعادة كود المصدر الأصلي بشكل مثالي؟

ليس بالكامل. التصغير عملية باتجاه واحد لكل ما يتجاوز البنية — التعليقات وخيارات المطوّر الأصلية لفواصل الأسطر تُلغى نهائياً بمجرد ضغط الملف. يعيد التنسيق بناء نسخة نظيفة ومتسقة المسافات البادئة استناداً فقط إلى الصياغة البنيوية (المحددات، الأقواس، التصريحات) التي تنجو من التصغير، وهذا عادة كافٍ لجعل ورقة الأنماط قابلة للقراءة والمقارنة (diff) مجدداً، لكن دون أن تكون مطابقة لملف المؤلف الأصلي.

هل تدعم الأداة صيغة SCSS أو LESS؟

الأداة مصممة لـ CSS الخالص. صيغ Sass/Less الخاصة — التداخل، المتغيرات مثل $color، الـ mixins، تعليمات @include — تمر دون معالجة تُذكَر بدلاً من أن تُعالَج، لأن هذه البنى ليست CSS صالحاً بحد ذاتها وتحتاج مترجماتها الخاصة (Sass أو Less) لتحويلها إلى CSS قياسي أولاً.

متى يجب أن أُصغّر مقابل متى أُنسّق؟

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

التعليقات

لا توجد تعليقات بعد — كن أول من يكتب تعليقًا!

أدوات مشابهة

ما هو عنوان IP الخاص بي اعرف عنوان IPv4/IPv6 العام الخاص بك، ومزوّد الخدمة، والموقع التقريبي، وتفاصيل المتصفح فوراً — مع نسخ بنقرة واحدة. استخدم منسّق JSON أداة مجانية عبر الإنترنت للتحقق من صحة JSON وتنسيقه (Pretty Print) وضغطه (Minify). استخدم محوّل الألوان حوّل بين رموز الألوان HEX وRGB وHSL فوريًا. يشمل منتقي ألوان، مجاني. استخدم محوّل القواعد الرقمية حوّل الأرقام بين الثنائي والثماني والعشري والسداسي عشري وأي قاعدة من 2 إلى 36 — بدقة تامة حتى مع القيم الضخمة. استخدم