المصغر والمنسق CSS
قم بتصغير CSS عن طريق تجريد التعليقات وطي المسافات البيضاء، أو تجميل CSS المضغوط مرة أخرى إلى قواعد قابلة للقراءة ومسافات بادئة. يتم تشغيل كلا الاتجاهين في المتصفح على النص الذي تلصقه، لذا فهو يعمل مع المقتطف الذي ورثته بقدر ما يعمل مع المقتطف الذي تقوم بشحنه.
كيف يعمل
- 1
الصق ورقة الأنماط أو كتلة القاعدة التي تريد تغييرها.
- 2
اختر تصغير لإزالة التعليقات والمسافات البيضاء، أو تجميل لإعادة مسافة بادئة لـ CSS المضغوطة.
- 3
قارن الأحجام لمعرفة تكلفة التنسيق.
- 4
انسخ النتيجة إلى ورقة الأنماط أو المكون أو القالب.
المزايا والفوائد الرئيسية
كلا الاتجاهين
تصغير للتسليم، أو تجميل ملف مضغوط تحتاج إلى قراءته وتحريره.
أكثر أمانا من تصغير التعليمات البرمجية
تحتوي CSS على قواعد نحوية أبسط من JavaScript، لذا فإن إزالة التعليقات والمسافات البيضاء نادرًا ما تؤدي إلى تغيير السلوك.
لا خطوة البناء
مفيد لكتلة النمط المضمنة أو قالب البريد الإلكتروني أو حقل CMS حيث لا يتضمن المجمع.
يعمل محليا
تتم معالجة ورقة الأنماط الخاصة بك في علامة التبويب ولا يتم تحميلها مطلقًا.
فيما يستخدمه الناس
- ضغط قالب النمط قبل تضمينه في رأس الصفحة أو البريد الإلكتروني.
- إعادة تنسيق ورقة أنماط مصغرة تحتاج إلى قراءتها أو تصحيح أخطائها.
- تنظيف CSS المنسوخ من المولد أو تصدير أداة التصميم.
- التحقق من اختلاف الحجم قبل تحديد ما إذا كنت تريد إضافة خطوة بناء أم لا.
التنسيقات والخيارات المدعومة
| الإدخال | قواعد CSS أو أوراق الأنماط الكاملة أو الأجزاء التي تم لصقها كنص |
|---|---|
| تصغير الإزالة | التعليقات وفواصل الأسطر والمسافات البيضاء الزائدة بين المحددات والخصائص والقيم |
| يضيف تجميل | فواصل الأسطر والمسافات البادئة لكل قاعدة وإعلان |
الخصوصية ومعالجة البيانات
تتم معالجة CSS الخاص بك بالكامل في علامة تبويب المتصفح ولا يتم إرساله أبدًا إلى خادمنا.
الحدود والأشياء التي يجب معرفتها
- لا تقوم هذه الأداة بدمج المحددات المكررة، أو تقصير قيم الألوان، أو إعادة ترتيب الإعلانات، أو إزالة القواعد غير المستخدمة - فهذه تحسينات يقوم بها مُحسِّن CSS مخصص.
- تعد المسافة البيضاء مهمة داخل قيم المحتوى والخصائص المخصصة وبعض الرموز الوظيفية؛ تحقق من أي قاعدة تحتوي على محتوى أو إعلان var() بعد تصغيرها.
- يعمل برنامج Beautify على استعادة البنية، وليس التنسيق الأصلي. لا يمكن استرداد التعليقات التي تمت إزالتها بواسطة التصغير السابق.
استكشاف الأخطاء وإصلاحها
توقف النمط عن التطبيق بعد التصغير
ابحث عن قيم المحتوى أو الخصائص المخصصة أو سلاسل استعلام الوسائط حيث تكون المساحة المحذوفة مهمة. قم باستعادة المساحة في هذا الإعلان الواحد.
لا يزال الملف كبيرًا بعد تصغيره
تأتي معظم مدخرات CSS الحقيقية من إزالة القواعد غير المستخدمة ومن ضغط الخادم. قم بتمكين gzip أو Brotli، وقم بالتدقيق بحثًا عن المحددات الميتة، قبل تحسين بناء الجملة بشكل أكبر.
CSS Minifier & Beautifier — Compress Stylesheets Online Free
Minify CSS online to cut stylesheet weight before deployment, or beautify compressed CSS back into readable, indented rules. This free CSS compressor removes comments, line breaks and redundant whitespace without ever altering how a single declaration renders.
- Minify CSS to reduce file size — typical hand-written stylesheets shrink noticeably, which directly improves Largest Contentful Paint because CSS is a render-blocking resource.
- CSS beautifier built in — paste a minified production stylesheet from a live site and re-indent it into structured, readable CSS for debugging or auditing.
- Safe by design — the compressor only removes comments and insignificant whitespace — selectors, specificity, cascade order and media queries come through equivalent.
- Better Core Web Vitals — smaller CSS means fewer bytes on the critical path, fewer render-blocking milliseconds and a measurably faster first paint on mobile connections.
- Runs entirely in your browser — proprietary design-system CSS and unreleased styles are processed locally with no upload, no account and no rate limit.
Use it alongside the JavaScript Minifier to compress your full front-end bundle, and the JSON Formatter for the config files that ship with it.
الأسئلة المتداولة
Will minifying break my stylesheet?
Rarely. CSS has a simple grammar, so removing comments and whitespace is usually safe. The exceptions are declarations where a space is meaningful — content values, custom properties and some functional notations — so check those specific rules after minifying.
How much smaller will my CSS get?
Typically 10-30 percent, depending on how much of the file is indentation and comments. That is worth having, but enabling gzip or Brotli on your server saves considerably more, and the two stack.
Can it remove unused CSS?
No. Finding unused rules requires analysing your HTML and JavaScript, which a text-level minifier cannot do. Use a purge tool wired into your build for that.
هل يؤدي التصغير إلى تغيير تنفيذ CSS؟
لا! يؤدي التصغير إلى إزالة التعليقات الآمنة والمسافات البيضاء فقط دون تغيير قواعد التصميم.
هل سيؤدي التصغير إلى كسر ورقة الأنماط الخاصة بي؟
نادرًا. يحتوي CSS على قواعد نحوية بسيطة، لذا فإن إزالة التعليقات والمسافات البيضاء عادة ما تكون آمنة. الاستثناءات هي إعلانات حيث تكون المسافة ذات معنى - قيم المحتوى والخصائص المخصصة وبعض الرموز الوظيفية - لذا تحقق من هذه القواعد المحددة بعد التصغير.
ما هو الحجم الأصغر الذي سيحصل عليه CSS الخاص بي؟
عادةً ما تكون 10-30 بالمائة، اعتمادًا على مقدار المسافة البادئة والتعليقات في الملف. هذا أمر يستحق الحصول عليه، ولكن تمكين gzip أو Brotli على الخادم الخاص بك يوفر الكثير، بالإضافة إلى المجموعتين.
هل يمكنه إزالة CSS غير المستخدمة؟
لا. يتطلب البحث عن القواعد غير المستخدمة تحليل HTML وJavaScript، وهو ما لا تستطيع أداة التصغير على مستوى النص القيام به. استخدم أداة تطهير متصلة بالبنية الخاصة بك لذلك.
الأدوات ذات الصلة
تنسيق JSON
قم بتنسيق JSON والتحقق من صحته وتصغيره على الفور
التشفير وفك التشفير Base64
قم بتشفير النص أو الصور إلى Base64 وفك التشفير مرة أخرى
HTML كيان التشفير ووحدة فك الترميز
تشفير الأحرف الخاصة لكيانات HTML والعودة
جافا سكريبت JS المصغر
ضغط وتصغير كود JavaScript للتحميل السريع