Tools App بواسطة

كيفية تصغير CSS بأمان

قم بإزالة التعليقات والمسافات البيضاء غير الضرورية من CSS وشاهد عدد البايتات التي قمت بحفظها. يعمل بالكامل في علامة التبويب.

كيف يعمل

يقوم المصغر بإزالة /* التعليقات */، وتقليص المسافات البيضاء إلى مسافة واحدة، وإزالة المسافات حول علامات الترقيم الهيكلية مثل { } : ; ، >، وإسقاط الفاصلة المنقوطة الأخيرة قبل قوس الإغلاق. ولا يقوم بإعادة تسمية المحددات أو دمج القواعد أو إعادة ترتيب السلسلة.

  • المصغر المحافظ: لا يزيل القواعد غير المستخدمة أو يعيد كتابة القيم. قم دائمًا بإعادة اختبار ورقة الأنماط بعد ذلك.

لماذا يهم

كل كيلو بايت من CSS الذي يحظر العرض يؤخر الطلاء الأول. يعد التصغير أرخص ربح متاح بعد إزالة القواعد غير المستخدمة، ويمكن الوثوق بالأداة التي تلامس فقط الأحرف الزائدة عن الحاجة في خطوة البناء دون إعادة تعريف ورقة الأنماط الخاصة بك.

مثال عملي

قاعدة مكتوبة كـ .card { اللون: أحمر؛ الحشو: 10 بكسل 20 بكسل؛ } يصبح .card{color:red;padding:10px 20px}، مما يوفر بضع عشرات من البايتات لكل قاعدة وأكثر بكثير عبر ورقة أنماط حقيقية.

الأخطاء الشائعة

  • إزالة المسافات حول + و- داخل calc()، وهو ما تتطلبه المواصفات.
  • تصغير SCSS أو LESS بدلاً من CSS المترجمة.
  • تخطي الفحص البصري بعد التصغير.

نصائح عملية

احتفظ بالمصدر غير المصغر في التحكم في الإصدار وقم بتصغيره كمخرج بناء. إذا كنت تستخدم خصائص مخصصة مع عناصر احتياطية، فقارن الأنماط المحسوبة في DevTools قبل وبعد - يتم الاحتفاظ بالتسلسل، ولكن يمكن لمسافة واحدة مفقودة تغيير كيفية تحليل القيمة.

كيفية استخدامه

  1. افتح الأداة. كل شيء يعمل في علامة تبويب المتصفح الخاص بك.
  2. الصق إدخالك أو اكتبه، ثم اختر الإجراء الذي تحتاجه.
  3. التحقق من النتيجة ونسخها بنقرة واحدة.

افتح الأداة

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

هل يزيل قواعد CSS غير المستخدمة؟

لا، فهو يزيل التعليقات والمسافات البيضاء الزائدة عن الحاجة. يحتاج اكتشاف القاعدة غير المستخدمة إلى تدقيق كامل للصفحة.

لماذا توقف calc() عن العمل بعد التصغير؟

المسافات حول + و- داخل calc() مطلوبة بواسطة مواصفات CSS. أعد اختبار ورقة الأنماط بعد تصغيرها.

هل يمكن تصغير SCSS أو أقل؟

لا، فهي تتوقع CSS عاديًا؛ المعالجات المسبقة لها خطوات البناء الخاصة بها.

هل هذه الأداة مجانية حقا؟

نعم. لا يوجد حساب ولا يوجد نظام حظر الاشتراك غير المدفوع ولا يوجد حد للاستخدام. يتم تمويل تطبيق Tools بواسطة aumenso، الاستوديو الذي يقف وراءه.

هل تم تحميل أي شيء أقوم بإدخاله؟

لا، تعمل الأداة في علامة تبويب المتصفح الخاص بك؛ ما تدخله لا يتم إرساله إلينا ولا يتم تخزينه أبدًا.

← جميع المشاركات