منسّخ ومصغّر CSS

ما هو منسِّق CSS؟#

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

تتعامل هذه الصفحة مع كلا الاتجاهين بمحرّكات حقيقية. تنسيق يستخدم css_beautify من js-beautify، الذي يُعيد إزاحة المُحدِّدات والإعلانات بشكل متوقَّع. أمّا ضغط فيستخدم CSSO، وهو مُحسِّن بنيوي حقيقي لا مُجرِّد مسافات: يدمج القواعد المتجاورة ذات الإعلانات المتطابقة، ويطوي الخصائص المفصَّلة إلى مختصرات، ويزيل الإعلانات المُستبدَلة، ثمّ يطوي المسافات المتبقّية. والنتيجة أصغر عادةً ممّا يُنتجه مُضغِّط ساذج، ومتكافئة دلاليًّا مع المدخل. وهذا الفرق يهمّ حين تهتمّ بكلّ بايت على السلك.

كيفية الاستخدام#

1. الصق CSS في لوحة CSS على اليسار. ومثال يحمّل ورقة أنماط قصيرة إن أردت تجربة السلوق أوّلًا.
2. اختر المسافة البادئة من شريط الأدوات: 2، أو 4، أو علامة جدولة. المسافتان هو الاتفاق الحديث الشائع؛ والأربع أصدق لقراءة الملفّات الكثيفة.
3. انقر فعلًا:
   • تنسيق — إعادة إزاحة وفواصل أسطر عبر js-beautify. تذهب المُحدِّدات إلى سطورها الخاصة، وتتصفّف الإعلانات داخل الأقواس.
   • ضغط — تشغيل تحسين CSSO البنيوي، ثمّ إصدار مخرج مُحكم. تُسقَط التعليقات، وتُدمَج القواعد المكرَّرة، وتُطوى المفصَّلات إلى مختصرات حيثما كان آمنًا.
4. اقرأ النتيجة في لوحة الإخراج واستخدم نسخ لأخذها. ومسح تُعيد اللوحتين.

إن كان في مدخلك قاعدة غير منتهية أو إعلان مكسور، يُبلِّغ شريط الحالة عن الخطأ بدلًا من التخمين.

الميزات الرئيسية#

• تنسيق وضغط بمحرّكين مختلفين. التجميل js-beautify؛ والتصغير CSSO. كلّ يفعل الوظيفة الواحدة التي يحسنها، بدلًا من روتين واحد مُتنازَع عليه يحاول فعل الاثنين.
• تحسين حقيقي عند التصغير. يُعيد CSSO هيكلة ورقة الأنماط — يدمج .a { color: red } .b { color: red } في قاعدة مشتركة، ويطوي margin: 0 0 0 0 إلى margin: 0، ويزيل إعلانًا تتجاوزه قاعدة لاحقة. وإزالة المسافات هي الخطوة الأخيرة لا الوحيدة.
• ثلاثة أنماط إزاحة. مسافتان، أو 4 مسافات، أو علامات جدولة، تُبدَّل بقائمة واحدة.
• جنباً إلى جنب، جاهز للنسخ. الإدخال قابل للتحرير، والمخرج للقراءة فقط مع زرّ نسخ بنقرة واحدة.
• من جهة العميل صارمة. CSSO وjs-beautify مُدمَجان في الصفحة ويُحمَّلان فقط حين تفتح هذه الأداة. وتُعالَج ورقة أنماطك في المتصفح ولا تُرفع أبدًا.

مثال عملي#

ورقة أنماط صغيرة فيها قاعدتان تكرّران عملًا ومفصَّلة يمكن أن تكون أقصر:

المدخل:

.card{padding:10px 10px 10px 10px;margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px}
.card .title{color:#ff0000}
.card .body{color:#ff0000}

انقر تنسيق بـ 2 مسافة:

.card {
  padding: 10px 10px 10px 10px;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.card .title {
  color: #ff0000;
}

.card .body {
  color: #ff0000;
}

التكرار صار بيّنًا الآن — وهذا بالضبط ما يُوجَد من أجله المنسِّق. والآن انقر ضغط على المدخل نفسه فيُعيد CSSO كتابته بنيويًّا:

.card{padding:10px;margin:10px}.card .body,.card .title{color:red}

ثلاثة أمور حدثت دفعةً واحدة. انهار padding رباعي القيم إلى قيمة واحدة لأنّ الجوانب الأربعة كانت متساوية؛ وانطوت margin-* المفصَّلة الأربع إلى مختصر margin؛ ودمجت قاعدتا color: #ff0000 في قاعدة واحدة بمُحدِّد مجمَّع (وصار الست عشري red الأقصر). مُجرِّد مساحات أبقى سيحتفظ بكلّ بايت من التكرار — فقط مُحسِّن مُعيد للهيكلة يجد هذه المكاسب.

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

هل سيغيّر التصغير شكل صفحتي؟#

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

هل يحتفظ التصغير بتعليقاتي؟#

لا. تُزال التعليقات أثناء التصغير، بما في ذلك اللافتات بنمط /* !important */. إن احتجت ترويسة ترخيص أو علامة بناء لتبقى، فاحتفظ بمصدرك المُعلَّق وأعد إدراج اللافتة في خط أنابيب البناء بعد التصغير.

لماذا يكون المخرج المُصغَّر أحيانًا أكبر من مدخلي؟#

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

هل CSS خاصّتي مُرسَلة إلى خادم؟#

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