حذف CSS غير المستخدم أونلاين
الصق HTML وCSS، واحتفظ فقط بالقواعد التي تطابق شيئًا في الصفحة.
حذف CSS غير المستخدم أونلاين
جعلت PurgeCSS الفكرة شائعة: قارن ورقة الأنماط بالترميز الذي يستخدمها واحذف كل قاعدة لا تطابق شيئًا. تفعل هذه الصفحة ذلك داخل متصفحك. فهي تفتح مزيل CSS غير المستخدم على تبويب HTML + CSS، حيث تلصق الصفحة وورقة أنماطها، ولا يغادر أي شيء جهازك.
ما الذي يبقى
- القاعدة التي يطابق محدِّد واحد منها على الأقل عنصرًا في HTML.
- المحدِّد الذي فيه حالة أو عنصر زائف، مثل
.btn:hoverأو.icon::before، ما دام العنصر من دون ذلك الجزء موجودًا. - كل ما في احتفظ دائمًا: أسماء الفئات، والمعرّفات مع
#أو بدونها، والأنماط المحصورة بين شرطتين مائلتين. - أي محدِّد لا يستطيع المتصفح تحليله، بدلًا من التخمين.
@font-faceدائمًا، و@keyframesما دامت قاعدة مُبقاة أو نمط مضمَّن لا يزال يذكر اسم الحركة.
الفئات التي لا تراها
HTML الذي تلصقه لقطة ثابتة. فالسكربتات تضيف فئات أثناء عمل الصفحة: قائمة مفتوحة، أو شريحة نشطة، أو ترويسة ثابتة، أو خطأ في التحقق. وتبدو قواعدها غير مستخدمة لأن اللقطة لا تحتوي على عنصر يحمل تلك الفئات. ضعها في احتفظ دائمًا. وكثيرًا ما تشترك فئات أطر العمل وأدوات بناء الصفحات في بادئة واحدة، فيغطي نمط واحد مثل /^is-/ أو /^elementor-/ عائلة كاملة منها. وإن كنت تستطيع تسجيل الصفحة في Chrome بدلًا من ذلك، فإن صفحة تحويل Coverage JSON إلى CSS ترى ما طبّقه المتصفح فعلًا، بما في ذلك فئات وقت التشغيل هذه.
مثال
صفحة هبوط مبنية على Bootstrap تستخدم شبكة (grid) وشريط تنقل (navbar) ونمطين للأزرار، لا تزال تحمّل إطار العمل كله. الصق الصفحة وورقة الأنماط، وأضف إلى احتفظ دائمًا الفئات التي يبدّلها شريط التنقل، مثل show وcollapsing، فيسقط معظم إطار العمل. وتُظهر قائمة المحدِّدات المحذوفة ما حُذف، وهي أسرع مكان لاكتشاف فئة كان ينبغي أن تبقى.
أونلاين أم في خطوة البناء
لصفحة واحدة أو قالب أو رسالة بريد إلكتروني، هذه الصفحة أسرع من تثبيت أي شيء. أما لموقع يتغيّر، فشغّل PurgeCSS في خطوة البناء (build) حتى يُنظَّف CSS من جديد كلما تغيّر الترميز: npx purgecss --css css/style.css --content index.html --output dist/css/. وفي الحالتين، اختبر الصفحة على كل العروض قبل أن تستبدل ورقة الأنماط الأصلية.