تصغير CSS
احذف التعليقات والمسافات واختصر القيم. وإذا لم تستطع أداة التصغير معالجة شيء في ملفك، فستخبرك بذلك — بدلًا من أن تعيد إليك بهدوء ملف أنماط تنقصه قواعد.
- لا يُخزَّن أبدًا
- لا طابور ولا انتظار
- دون تسجيل ودون علامة مائية
يظهر CSS المصغّر هنا.
كيف تعمل الأداة
الصق كود CSS
أو أفلِت الملف هنا. لا يُخزَّن أي شيء.
اقرأ النتيجة
تحصل على ملف الأنماط المصغّر ومقدار ما صغر — أو على شرح لما تعذّرت معالجته.
انسخ النتيجة أو نزّلها
جاهز لإضافته إلى عملية البناء.
أين تذهب البايتات فعلًا
معظم التوفير يأتي من المسافات والتعليقات، وهي كثيرة في ملف أنماط مكتوب يدويًا — فالمسافات البادئة والأسطر الفارغة بين القواعد وعناوين الأقسام التي تسهّل التنقل في ملف كبير كلها عبء خالص بمجرد تقديم الملف. وإلى جانب ذلك تُختصر القيم بطرق لا يمكن أن تغيّر معناها: اللون المكتوب #ffffff يصبح #fff، و0px تصبح 0 لأن الصفر لا يحتاج إلى وحدة، ويُحذف الصفر البادئ في 0.5em، وتُختصر margin: 10px 10px 10px 10px إلى margin: 10px.
أما ما لا يُفعل عن قصد فهو الفئة المحفوفة بالمخاطر. دمج القواعد ذات التصريحات المتطابقة، أو إعادة ترتيبها، يغيّر التتالي (cascade) — والتتالي هو الجزء من CSS الذي تُحسم فيه قاعدتان متساويتان في الأولوية بحسب أيهما جاءت أخيرًا. أداة التصغير التي تعيد الترتيب بجرأة ستعطيك ملفًا أصغر، وفي ملف أنماط كبير صفحة مختلفة بشكل دقيق. كما أن التصريحات المكررة كثيرًا ما تكون مقصودة، تُترك كبدائل للمتصفحات القديمة التي تتجاهل الثاني منها.
تُرفض القواعد المتداخلة وصياغة نطاقات الوسائط الحديثة بدلًا من تصغيرها، والسبب يستحق الذكر لأنه عكس ما تفعله معظم الأدوات. المحلّل الذي تعتمد عليه الأداة أقدم من الميزتين، وحين يصادف شيئًا لا يفهمه لا يُظهر خطأ — بل يحذفه بصمت، فتختفي الكتلة المتداخلة ببساطة من النتيجة وتفقد الصفحة أنماطًا دون أن يُبلغ عن ذلك شيء. رفض الملف هو الإجابة الصادقة. إذا كان ملف الأنماط لديك يستخدم التداخل الأصلي أو @media (400px <= width <= 700px)، فاستخدم إحدى الأدوات أدناه.
وكما مع الترميز، احكم على النتيجة بعد الضغط. تُقدَّم ملفات الأنماط مضغوطة بـ gzip أو brotli، وهاتان الخوارزميتان تتعاملان أصلًا مع المسافات المتكررة ببراعة كبيرة — لذا فالملف الذي يصغر بنسبة 30 بالمئة قد لا يصغر عند النقل إلا بنسبة 5 بالمئة. التوفير حقيقي، لكنه أصغر من الرقم اللافت.
عندما تحتاج إلى شيء آخر
Lightning CSS هي الأداة المناسبة لملفات الأنماط الحديثة: فهي تفهم التداخل ونطاقات الوسائط ودوال الألوان وكل ما أُضيف في السنوات الأخيرة، وتصغّر بقوة أكبر من أي أداة أقدم، كما تحوّل الصياغة الجديدة إلى صياغة تفهمها المتصفحات القديمة في الوقت نفسه. والأمر esbuild --minify style.css يكاد يكون بالجودة نفسها وسريع للغاية. ومكان كليهما هو خطوة البناء لا تبويب في المتصفح.
المكسب الأكبر بكثير عادةً هو حذف القواعد التي لا تستخدمها. الموقع المبني على إطار عمل قائم على الفئات المساعدة (utility) أو على مكتبة مكوّنات كثيرًا ما يرسل ملفات أنماط لا يطابق معظمُها أي شيء في الصفحة — وPurgeCSS، أو عملية البناء في إطار العمل نفسه، ستقلّصها بمقدار عشرة أضعاف. تصغير CSS غير المستخدم يجعل CSS غير المستخدم أصغر؛ أما حذفه فهو الحل الفعلي.
الأسئلة الشائعة
هل يُخزَّن كود CSS الخاص بي في أي مكان؟
لا، وهذا بالضبط المقصود مع الكود المصدري. لا يُخزَّن أي شيء ولا يراه أي خادم. لصق كود مصدري مملوك لشركتك في أداة تصغير أونلاين ترسله إلى مكان ما هو إفشاء له، أيًّا كان ما يقوله الموقع عن مدة الاحتفاظ — وهو بالضبط من الأمور التي تُفعل على عجل ودون تفكير.
لماذا رفضت الأداة ملفي؟
لأن تصغيره كان سيُفقده قواعد. أداة التصغير التي تعتمد عليها هذه الصفحة تعود إلى عام 2022، ولا تعرف أمرين أصبحا اليوم جزءًا عاديًا من CSS. إذا أعطيتها تداخلًا أصليًا — قاعدة مكتوبة داخل قاعدة أخرى، مع «&» أو بدونها — فإنها تعيد القاعدة الخارجية و«تُسقط القاعدة المتداخلة بصمت». وإذا أعطيتها استعلام نطاق وسائط حديثًا مثل @media (width >= 400px) فإنها تعيد ملف أنماط فارغًا. ولا تُظهر أي من الحالتين خطأ. قسنا الحالتين على النسخة نفسها التي نستخدمها، وقررنا أن إعطاء أحدهم ملف أنماط تنقصه أنماط أسوأ من الرفض، لذا تُكتشف هاتان الحالتان وتُرفضان. كما تُعد القواعد قبل التصغير وبعده كفحص عام، تحسبًا لحالة ثالثة لم يكتشفها أحد بعد.
كيف أصغّر CSS المتداخل إذن؟
حوّل التداخل إلى قواعد مسطّحة أولًا. كل أداة بناء تدعم التداخل — Sass أو PostCSS أو Lightning CSS أو أداة التجميع (bundler) لديك — تسطّحه أثناء البناء، والنتيجة المسطّحة تُصغَّر هنا دون أي اعتراض. وإذا كنت تكتب التداخل يدويًا وتقدّمه مباشرة، فأنت تعتمد على ميزة تدعمها المتصفحات الحالية لكن منظومة أدوات التصغير لم تلحق بها بالكامل بعد.
ماذا تفعل الأداة فعلًا؟
تحذف التعليقات والمسافات، وتختصر الألوان (#ffffff تصبح #fff، و#ff0000 تصبح red)، وتحذف الوحدات والفواصل المنقوطة غير الضرورية، وتدمج ما يمكن دمجه بأمان. ولا تحذف القواعد التي تظن أنها غير مستخدمة — فذلك يتطلب معرفة HTML لديك، والتخمين الخاطئ يحذف أنماطًا تحتاجها.
بكم سيصغر الملف؟
لكود CSS مكتوب يدويًا، عادةً بنسبة 15–30%. أما الناتج المُجمَّع مسبقًا بأداة بناء فكثيرًا ما يكون شبه مصغّر أصلًا ولن يتغير إلا قليلًا. ويفعل gzip على خادمك أكثر مما يفعله التصغير؛ وأثرهما يتراكم.
هل من الآمن تصغير ملف أنماط الإنتاج هنا؟
نعم. لا يُخزَّن أي شيء، والحالتان اللتان لا تستطيع الأداة معالجتهما تُرفضان بدلًا من أن تُفسدا بصمت، فما يعود إليك إما صحيح أو شرح لسبب الرفض.
معلومة مفيدة: تُرفض القواعد المتداخلة وصياغة نطاقات الوسائط الحديثة بدلًا من تصغيرها. أداة التصغير مبنية على محلّل أقدم من كلتيهما، وبدلًا من إظهار خطأ يحذف بصمت ما لا يفهمه — فتختفي الكتلة المتداخلة ببساطة من النتيجة. رفض الملف هو الإجابة الصادقة إلى أن يلحق ذلك المحلّل بالركب.
أضِف هذه الأداة إلى موقعك
مجانية لأي مدونة أو صفحة فصل دراسي أو مقالة مساعدة. الصق مقتطفًا واحدًا وسيتمكن زوارك من استخدامها مباشرةً على صفحتك.