تنسيق وتجميل CSS و SCSS و media queries عبر الإنترنت

مُنسِّق CSS أداة عبر الإنترنت لتجميل أوراق أنماط CSS وتصغيرها. توسِّع CSS المضغوطة إلى صيغة قابلة للقراءة، ويمكنها أيضاً ضغط CSS كامل إلى صيغة مضغوطة لتحسين أداء تحميل الصفحة. تدعم ميزات CSS 3 الكاملة بما في ذلك المحدِّدات والخصائص واستعلامات الوسائط ورسوم الحركة عبر keyframes.

الخطوة 1 — الصق CSS الذي تريد العمل عليه في اللوحة اليسرى، أو انقر "Sample" لتحميل مثال. الخطوة 2 — تُنسِّق الأداة الكود مباشرةً مع الإزاحة حسب عمق المحدِّد. الخطوة 3 — انقر "Format" لتشغيل جولة تنسيق كاملة صراحةً. الخطوة 4 — انقر "Minify" لإزالة المسافات وفواصل الأسطر والتعليقات والحصول على نتيجة مضغوطة في سطر واحد. الخطوة 5 — تدعم اللوحة اليمنى النسخ بنقرة واحدة أو التنزيل كملف .css.

يقوم مطورو الواجهة الأمامية بتنسيق CSS المنسوخ من DevTools في المتصفح لأغراض التصحيح؛ تصغير أوراق الأنماط قبل النشر لتقليل النطاق الترددي وزمن التحميل؛ تنسيق مخرج بناء Tailwind CSS للتحليل؛ توسيع مكتبات خارجية مثل Bootstrap أو Font Awesome لدراسة بنيتها؛ استخراج وتحسين أجزاء CSS من مخرج تصريف Less / SCSS.

يستخدم التنسيق قواعد خفيفة الوزن بدلاً من تحليل CSSOM كامل. تُوحَّد المسافات بين المحدِّدات والخصائص والقيم. تُعالَج قواعد مثل @import و @media و @keyframes و @font-face بمسافات بادئة صحيحة. يزيل وضع التصغير التعليقات والأسطر الفارغة بين المحدِّدات، لكنه يحافظ على ترتيب الخصائص والقيم المختصرة كما هي. لا تُدعَم تعبيرات CSS (expression()) ولا الامتدادات غير القياسية.

تجري كل معالجة CSS محلياً في متصفحك. لا تُرفع أوراق الأنماط التي تُدخلها أبداً، فتستطيع بأمان التعامل مع ملفات تحتوي على أسماء أصناف خاصة بالمشروع أو أنماط مضمَّنة أو ألوان علامة تجارية.