Skip to content

منسّق CSS ومُجمِّله وضاغطه

نسّق CSS وجمّله واضغطه فوراً في متصفحك. رتّب أوراق الأنماط أو اضغطها للنشر — مجاني وخاص ولا يغادر CSS جهازك أبداً.

بدون تتبّع يعمل في المتصفّح مجاني
المسافة البادئة
<bdi>CSS</bdi> المُنسَّق

🔒 100% داخل المتصفح — لا يغادر <bdi>CSS</bdi> جهازك أبداً.

Reviewed for render-safe formatting and lossless minification — Go Tools Engineering Team · Jun 5, 2026

ما هو تنسيق CSS؟

تنسيق CSS (ويُسمى أيضاً التجميل أو الطباعة المنسّقة) يُعيد كتابة ورقة الأنماط بمسافات بادئة متسقة وفواصل أسطر ومسافات بيضاء بحيث تكون بنيتها سهلة القراءة والمراجعة. تُطبَّق الأنماط بشكل متطابق قبل التنسيق وبعده — تتغير المسافات البيضاء فحسب. أما الضغط فيفعل العكس: يحذف التعليقات ويُقلّص CSS إلى أصغر حجم ممكن لتحميل الصفحات بشكل أسرع. تقوم هذه الأداة بكلا الأمرين، كلياً في متصفحك.

الميزات الرئيسية

تنسيق وضغط

جمّل CSS الفوضوي لتسهيل القراءة أو اضغطه إلى أصغر حجم قابل للنشر — في أداة واحدة.

قراءة توفير البايتات

اعرف بالضبط كم بايتاً وفّره الضغط لتعرف أثره على حجم الحمولة.

خصوصية 100%

تتم كل المعالجة في متصفحك. لا يُرسَل CSS الخاص بك إلى أي خادم أبداً.

خيارات الأسلوب

اختر مسافة بادئة بمسافتين أو 4 مسافات أو علامة جدولة لتطابق اتفاقيات فريقك.

أمثلة

مجموعة قواعد مضغوطة

body{margin:0;padding:0;font-family:system-ui}.card{display:flex;gap:1rem;padding:16px;border-radius:12px;background:#fff}.card:hover{box-shadow:0 4px 12px rgba(0,0,0,.1)}

حوّل ورقة أنماط في سطر واحد إلى قواعد منسّقة بمسافات بادئة مقروءة.

استعلام وسائط

@media(max-width:640px){.nav{flex-direction:column}.nav a{padding:8px 0}}

أضف مسافات بادئة إلى القواعد at-rules المتداخلة حتى تسهل مراجعة نقاط الكسر.

خصائص مخصصة

:root{--primary:#6366f1;--gap:8px}.btn{color:var(--primary);margin:var(--gap)}

نسّق متغيرات CSS واستخدام var() بصورة أنيقة.

إطارات رئيسية

@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

رتّب إطارات الحركة keyframes سطراً بسطر.

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

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

تفاصيل تقنية

تجميل باستخدام js-beautify
يستخدم المحرك المجرَّب نفسه الذي تعتمد عليه أدوات التجميل الشائعة لإنتاج نتيجة يمكن التنبؤ بها وإعدادها.
ضغط باستخدام CSSO
يضغط بأمان — يدمج المسافات البيضاء ويحذف التعليقات دون تغيير طريقة تطبيق الأنماط.
يعمل في المتصفح
يعمل كلياً على جانب العميل؛ لا يغادر CSS جهازك أبداً ولا يصل إلى أي خادم.

أفضل الممارسات

نسّق المصدر واضغط للإنتاج
احتفظ بـ CSS مقروء في مستودعك واضغطه فقط كخطوة بناء أو نشر.
اختر أسلوب مسافة بادئة واحداً
اتفق مع الفريق على مسافتين أو 4 مسافات أو علامات جدولة للحصول على فروق نظيفة.
اضغط في النهاية
شغّل الضغط بعد كل التعديلات — CSS المضغوط صعب الصيانة يدوياً.

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

كيف أُنسّق CSS أونلاين؟
الصق CSS في مربع الإدخال وانقر على «تنسيق». تُعيد الأداة ضبط المسافات البادئة لورقة الأنماط مع فواصل أسطر ومسافات متسقة، ثم تتيح لك نسخها. كل شيء يعمل محلياً في متصفحك — لا يُرفَع أي شيء.
كيف أضغط CSS؟
الصق CSS وانقر على «ضغط». تحذف الأداة التعليقات وتُقلّص المسافات البيضاء لإنتاج أصغر ورقة أنماط مكافئة، وتُظهر عدد البايتات التي وفّرتها. يُطبَّق CSS المضغوط بشكل مطابق تماماً للأصل.
ما الفرق بين تنسيق CSS وضغطه؟
التنسيق (التجميل) يضيف مسافات بادئة وفواصل أسطر لجعل CSS مقروءاً. أما الضغط فيفعل العكس: يحذف التعليقات والمسافات البيضاء لتصغير الملف من أجل تحميل أسرع. كلاهما يُنتج أنماطاً تُطبَّق بشكل مطابق للأصل.
هل يؤثر التنسيق على مظهر صفحتي؟
لا. التنسيق والضغط يُغيّران المسافات البيضاء والتعليقات فقط — لا تتغير المحددات أو الخصائص أو القيم أبداً. تُطبَّق الأنماط بشكل مطابق قبل المعالجة وبعدها.
هل CSS الخاص بي آمن مع هذه الأداة؟
نعم. يتم التنسيق والضغط كله محلياً في متصفحك باستخدام JavaScript — لا يُرسَل CSS الخاص بك أبداً إلى أي خادم ولا يُسجَّل ولا يُخزَّن. هذا يجعلها آمنة للأنماط الملكية أو غير المطروحة، على خلاف أدوات التنسيق الخادمية التي تتلقى نسخة من كل ما تلصقه.
هل يمكنها تنسيق SCSS أو Less؟
تنسّق وتضغط CSS القياسي. SCSS/Less العادي الذي هو أيضاً CSS صالح عادةً ما يُنسَّق بشكل صحيح، لكن الصياغة الخاصة بالمعالج المسبق (التداخل، الأدوات المساعدة، المتغيرات بـ $ أو @) يُعالَج على أفضل وجه بمنسّق المعالج المسبق نفسه.
ما المسافة البادئة التي ينبغي استخدامها لـ CSS؟
مسافتان هما الافتراضي الأكثر شيوعاً وتُبقيان الفروق مضغوطة؛ و4 مسافات تُحسّن القراءة للقواعد المتداخلة بعمق؛ وعلامات الجدولة تتيح لكل مطوّر اختيار العرض المفضّل. اختر واحداً وطبّقه باتساق — هذه الأداة تدعم الثلاثة جميعاً.

أدوات ذات صلة

عرض جميع الأدوات →

منسّق HTML ومُجمِّله وضاغطه

البرمجة

نسّق HTML وجمّله واضغطه فوراً في متصفحك. رتّب الترميز الفوضوي أو اضغطه للنشر — مجاني وخاص ولا يغادر HTML جهازك أبداً.

منسّق JavaScript وضاغطه

البرمجة

نسّق JavaScript وجمّله واضغطه بـ Terser فوراً في متصفحك. رتّب الكود الفوضوي أو اضغطه للنشر — مجاني وخاص ولا يغادر كودك جهازك أبداً.

منسّق SQL ومُجمِّله

البرمجة

نسّق استعلامات SQL وجمّلها واضغطها فوراً في متصفحك. يدعم PostgreSQL وMySQL وSQL Server وBigQuery وSnowflake وOracle وSQLite. مجاني وخاص — لا يغادر SQL جهازك أبداً.

محوّل الأنظمة العددية — ثنائي وست عشري وعشري وثماني

أدوات التحويل

حوّل بين الأنظمة الثنائية والست عشرية والعشرية والثمانية وأي أساس من 2 إلى 36 فوراً — أداة مجانية أونلاين تعمل في متصفّحك. جرّبها الآن.

محوّل Base64 — ترميز وفك ترميز أونلاين

الترميز والتنسيق

رمّز وفك ترميز Base64 مجاناً أونلاين — محوّل فوري مع دعم UTF-8 والرموز التعبيرية. خصوصية 100% — يعمل في متصفّحك. جرّبه الآن.

محوّل Base64 إلى صورة أونلاين

الترميز والتنسيق

فك ترميز سلسلة Base64 أو عنوان URI للبيانات إلى صورة داخل متصفّحك. عاين واقرأ الأبعاد ونوع MIME ثم نزّل كـ PNG أو JPG أو GIF أو SVG. بلا رفع.