ضغط CSS وتصغيره
قلّص ملف الأنماط بحذف التعليقات والمسافات دون أن تكسر قاعدة واحدة.
ضغط CSS أونلاين
يجب تنزيل كل بايت من CSS وتحليله قبل أن يتمكن المتصفح من عرض الصفحة، لذا يستحق ملف الأنماط أن يبقى صغيرًا. يزيل الضغط كل ما لا يحتاجه المتصفح: التعليقات والمسافات البادئة والمسافات الاختيارية. هذه الصفحة هي منسّق الأكواد مضبوطًا على CSS مع مثال مضغوط جاهز.
ما الذي يبقى وما الذي يُحذف
| قبل | بعد |
|---|---|
.card { margin : 0 auto ; } | .card{margin:0 auto} |
width: calc(100% - 32px); | width:calc(100% - 32px) |
a > b | a>b |
/* comment */ | يُحذف |
يجب أن تبقى المسافة داخل calc()، لأن 100%-32px كود CSS غير صالح. والأمر نفسه مع المسافة في 0 auto التي تفصل بين قيمتين.
تصغير الكود أم الضغط على الخادم أم كلاهما؟
تصغير الكود والضغط على الخادم يتراكمان. فـ Gzip أو Brotli على الخادم يصغّر ملف CSS عادةً بنسبة 70 إلى 80%، والتصغير المسبق يوفّر قليلًا إضافيًا فوق ذلك. إن كانت أداة البناء لديك تصغّر الكود أصلًا فلن تحتاج هذه الصفحة للإنتاج؛ فهي مخصصة للمقتطفات التي لا تمر بعملية البناء: الأنماط المضمّنة في رسائل البريد، أو CSS الحرج الملصوق في head، أو ملف أنماط في موقع بلا خطوة بناء.
أدوات ذات صلة
لحذف القواعد التي لا تستخدمها الصفحة أبدًا، وهو ما يوفّر أكثر بكثير من الضغط، استخدم مزيل CSS غير المستخدم. وللسكربتات المرافقة لملف الأنماط استخدم ضاغط JavaScript.