منسق CSS

رائج 🔥

تنسيق وتصغير كود CSS

أدوات المطوّرين

كيفية استخدام منسق CSS

  1. 1الصق كود CSS في منطقة الإدخال
  2. 2اختر التنسيق أو الضغط
  3. 3راجع CSS المعالَج

حول منسق CSS

منسّق CSS هو أداة تُنسّق وتضغط وتُجمّل كود CSS. يُرتّب الخصائص وينسّق القواعد ويُحسّن قراءة الأنماط. يدعم CSS3 والمتغيرات والعلامات والصياغات الحديثة.

المميزات الرئيسية لـ منسق CSS

  • تنسيق CSS بمسافات بادئة
  • ضغط CSS لتقليل الحجم
  • دعم CSS3 والمتغيرات
  • الحفاظ على التعليقات
  • معالجة الاستعلامات الإعلامية
  • Works entirely in-browser — no server uploads
  • One-click copy for formatted or minified output
  • Shows character count reduction achieved by minification

أمثلة

تنسيق أساسي

تنسيق CSS مضغوط

المدخلات

.btn{color:red;padding:10px;margin:0}

النتيجة

.btn {
  color: red;
  padding: 10px;
  margin: 0;
}

Minify a stylesheet for production deployment

Strip whitespace and comments from a development CSS file before deploying.

المدخلات

Formatted CSS file with comments, ~80 lines

النتيجة

Single-line minified CSS — ~40% size reduction before Gzip

حالات الاستخدام الشائعة

  • تنسيق CSS المُنشأ آليًا
  • تقليل حجم أوراق الأنماط
  • مراجعة الكود
  • تعلم بنية CSS
  • توحيد تنسيق الكود
  • Comparing formatted and minified CSS to identify whitespace-only differences

استكشاف الأخطاء

فاصلة منقوطة مفقودة

الحل

تأكد من وجود فاصلة منقوطة بعد كل خاصية CSS

أقواس غير متطابقة

الحل

تأكد من توازن الأقواس المتعرجة في جميع القواعد

SCSS or Less variables cause formatting errors

الحل

The tool handles standard CSS. SCSS variables ($var), Less variables (@var), and mixins may not format correctly. Compile your preprocessor styles to CSS first, then format.

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

هل يدعم SCSS أو LESS؟

الأداة تدعم CSS القياسي فقط — SCSS وLESS يتطلبان معالجة مسبقة.

هل يُرتّب الخصائص أبجديًا؟

التنسيق الافتراضي يحافظ على الترتيب الأصلي.

Does it support CSS custom properties (variables)?

Yes. CSS custom properties like --primary-color: #007bff and var(--primary-color) are treated as standard CSS and formatted or minified without modification.

Can I format a single CSS rule instead of a whole file?

Yes. Paste any CSS snippet — a single ruleset, a media query block, or an entire stylesheet — and the formatter will handle it correctly.

How much does CSS minification reduce file size?

Whitespace removal typically reduces CSS files by 20–40%. Combined with Gzip or Brotli compression at the server level, the total reduction is often 60–80% compared to the uncompressed formatted source.

Are CSS comments removed during minification?

Yes. Standard CSS comments (/* ... */) are removed during minification. If you have license comments that must be preserved, add them back manually or use a build tool that supports comment preservation.

Is my code sent to a server?

No. All formatting and minification is performed locally in your browser. Your CSS code never leaves your device.

Does it validate CSS syntax?

The formatter will produce incorrect output for syntactically invalid CSS but does not report specific errors. For CSS validation, use the W3C CSS Validation Service which provides detailed diagnostic messages.