CSS
3 أدوات
تتيح لك أدوات CSS المجانية عبر الإنترنت على ToolDeck تنسيق أوراق الأنماط وضغطها وتحويل وحداتها مباشرةً في متصفحك — دون تثبيت أو تسجيل أو رفع أي بيانات. يعيد CSS Formatter هيكلة أوراق الأنماط الفوضوية إلى كود مقروء ذي مسافات بادئة صحيحة؛ استخدمه أثناء مراجعة الكود أو عند تصحيح ملف إنتاجي مضغوط. يزيل CSS Minifier المسافات البيضاء والتعليقات للحصول على أصغر مخرجات ممكنة؛ استخدمه كخطوة نهائية قبل النشر. يُحوّل CSS Unit Converter بين px وrem وem وvw وvh وقيم النسبة المئوية مع إمكانية تخصيص حجم الخط الأساسي؛ وهو مفيد بشكل خاص أثناء عمليات الترحيل نحو التصميم المتجاوب عندما تحتاج إلى حسابات وحدات متسقة عبر قاعدة الكود بأكملها. تعمل كل أداة على جانب العميل، ولا تغادر أوراق الأنماط الخاصة بك جهازك أبداً.
ما هي أدوات CSS؟
تتحكم CSS (Cascading Style Sheets) في كيفية ظهور عناصر HTML على الشاشة. يتراكم في المشاريع النموذجية آلاف قواعد CSS عبر عشرات الملفات، وتنمو أوراق الأنماط في العالم الحقيقي من خلال التعاون: يضيف المصمم قسماً، وتحقن مكتبة طرف ثالث أنماط المكونات، وتُضخّ الأطر فئات الأدوات المساعدة. والنتيجة مزيج من اتفاقيات المسافات البادئة المتضاربة وأساليب التعليقات غير المتسقة. تُشغّل أدوات CSS العمل الميكانيكي في قراءة قواعد الأنماط وتحريرها وتحسينها، حتى تتفرغ لقرارات التصميم بدلاً من المسافات البيضاء. من الناحية العملية، هذا يعني إعادة تنسيق ملف إنتاجي مضغوط لتحديد محدد معطوب، وضغط ورقة أنماط نهائية قبل النشر، أو تحويل عمود من قيم البكسل من مواصفات Figma إلى وحدات rem مطابقة لمقياس الحجم الأساسي لنظام التصميم — مهام تستغرق ثوانٍ بالأداة المناسبة وتسبب أخطاء دقيقة يصعب تتبعها عند إجرائها يدوياً.
تُطبّق أدوات التنسيق مسافات بادئة متسقة وموضع الأقواس وترتيب الخصائص لجعل أوراق الأنماط قابلة للمسح البصري أثناء مراجعة الكود. أما أدوات الضغط فتفعل العكس: تطوي القواعد في سطر واحد وتزيل التعليقات وتختصر القيم لتقليل حجم الملف قبل النشر. وتتولى أدوات تحويل الوحدات الحسابات التي يصعب إجراؤها يدوياً بدقة، كتحويل حجم خط 14px إلى rem عندما يكون الجذر 16px (أي 0.875rem)، أو حساب العروض النسبية بالنسبة إلى إطار العرض.
تظهر هذه المهام أثناء تصحيح الأخطاء (إعادة تنسيق ورقة أنماط إنتاجية مضغوطة للعثور على قاعدة معطوبة)، وأثناء عمليات البناء (ضغط CSS قبل الشحن)، وأثناء العمل على التصميم المتجاوب (التبديل بين الوحدات المطلقة والنسبية). تكون أدوات CSS المستندة إلى المتصفح مفيدة عندما تحتاج إلى إجابة سريعة دون الحاجة إلى تشغيل سلسلة بناء كاملة أو تثبيت حزمة.
نما CSS بشكل ملحوظ منذ أيامه الأولى. الميزات الحديثة كـ CSS Grid والخصائص المخصصة (المتغيرات) واستعلامات الحاوية والتداخل الأصلي تُضيف قدرة تعبيرية لكنها تزيد أيضاً من تعقيد أوراق الأنماط. تساعد الأدوات القادرة على تحليل هذا النحو الأحدث وإعادة تنسيقه المطورين على اعتماد هذه الميزات دون القلق من أخطاء التنسيق اليدوي. تواصل مجموعة عمل W3C CSS إصدار وحدات جديدة، وقد وصل دعم المتصفحات للإضافات الحديثة مثل @layer و:has() وsubgrid إلى جميع المحركات الرئيسية. توفّر أدوات التنسيق والضغط التي تتعامل مع هذه التراكيب الأحدث بشكل صحيح على المطورين صيانة قواعد تنسيق يدوية لنحو لم يكن موجوداً قبل سنوات قليلة. كما تُلغي خطر ارتكاب خطأ يدوي يُفسد تسلسل يعتمد على ترتيب @layer أو دقة :has().
لماذا تستخدم أدوات CSS على ToolDeck؟
تعالج أدوات CSS في ToolDeck كل شيء في متصفحك باستخدام JavaScript. لا يُرفع أي CSS إلى خادم، ولا حاجة إلى حساب، وتعمل الأدوات بدون اتصال بعد تحميل الصفحة الأول.
حالات استخدام أدوات CSS
تنسيق CSS وضغطه وتحويل وحداته يظهر في كل مرحلة من مراحل مشروع الويب وعبر جميع الأدوار في الفريق. أثناء التطوير النشط، يُبقي التنسيق أوراق الأنماط مقروءة مع تعدد المساهمين في إدخال التغييرات. قبل إصدار إنتاجي، يقلل الضغط من حجم CSS ويُسرّع تحميل الصفحة. أثناء العمل على التصميم المتجاوب أو ترحيل نظام تصميم إلى وحدات نسبية، يُلغي تحويل الوحدات الأخطاء الحسابية التي تتراكم عندما تحتاج عشرات قيم البكسل إلى التحويل إلى rem أو وحدات إطار العرض. تكون الأدوات السريعة المستندة إلى المتصفح مفيدة بشكل خاص عندما تنشأ مهمة خارج بيئة التطوير المعتادة — على جهاز مستعار، أثناء جلسة مراجعة كود مباشرة، أو عند تصحيح مشكلة مباشرةً على خادم اختبار.
مرجع وحدات CSS
تُعرّف CSS عدة وحدات طول. يغطي الجدول أدناه أكثرها شيوعاً. الوحدات المطلقة (مثل px) تُنتج الحجم ذاته بغض النظر عن السياق. الوحدات النسبية تتناسب مع عنصر أصل أو حجم الخط الجذري أو أبعاد إطار العرض.
| الوحدة | النوع | نسبة إلى | متجاوب | الاستخدام الشائع |
|---|---|---|---|---|
| px | مطلق | 1/96 من البوصة (ثابت) | — | الحدود والظلال والأيقونات ذات الحجم الثابت |
| rem | نسبي | حجم خط العنصر الجذري | ✓ | أحجام الخطوط والتباعد واستعلامات الوسائط |
| em | نسبي | حجم خط العنصر الأصل | ✓ | التباعد المحدد بنطاق المكوّن |
| % | نسبي | أبعاد العنصر الأصل | ✓ | العروض السائلة وأعمدة الشبكة |
| vw | إطار العرض | 1% من عرض إطار العرض | ✓ | الأقسام الممتدة للعرض الكامل والطباعة السائلة |
| vh | إطار العرض | 1% من ارتفاع إطار العرض | ✓ | أقسام البطل والتخطيطات بملء الشاشة |
| ch | نسبي | عرض حرف '0' | ✓ | عروض أعمدة الخط الأحادي المسافة وتحديد حجم حقول الإدخال |
| vmin | إطار العرض | 1% من المحور الأصغر لإطار العرض | ✓ | الحاويات المربعة والتحديد الآمن للحجم بحسب الاتجاه |
| vmax | إطار العرض | 1% من المحور الأكبر لإطار العرض | ✓ | تحديد حجم الخلفية وتخطيطات الأبعاد القصوى |
تُعرّف وحدة CSS Values and Units Level 4 (W3C) وحدات إضافية كـ dvh وsvh وlvh لأحجام إطار العرض الديناميكية/الصغيرة/الكبيرة، وهي مدعومة في جميع المتصفحات الحديثة منذ 2023.
كيف تختار أداة CSS المناسبة
تتعامل كل أداة CSS في ToolDeck مع جزء مختلف من سير عمل أوراق الأنماط. اختر الأداة التي تُناسب مهمتك الحالية.
- 1إذا كنت بحاجة إلى جعل ورقة أنماط فوضوية أو مضغوطة مقروءة مع مسافات بادئة وفواصل أسطر صحيحة → CSS Formatter
- 2إذا كنت بحاجة إلى تقليل حجم ملف CSS للإنتاج بإزالة المسافات البيضاء والتعليقات والأحرف غير الضرورية → CSS Minifier
- 3
في معظم العمل اليومي، يغطي CSS Formatter وCSS Minifier احتياجات التنسيق والتحسين. عند العمل على تخطيطات متجاوبة أو ترحيل نظام تصميم إلى وحدات نسبية، يوفّر CSS Unit Converter الوقت في الحسابات — خاصةً عندما تستخدم ملفات التصميم قيم بكسل وتعتمد قاعدة الكود على rem. إذا لم تكن متأكداً من أين تبدأ، فإن CSS Formatter هو الخيار الافتراضي الجيد؛ كما يجعل CSS المُولّد بالذكاء الاصطناعي أو CSS الطرف الثالث مقروءاً قبل دمجه في المشروع. المطورون المعنيون بالأداء يستخدمون CSS Minifier كخطوة نهائية، ثم يقارنون حجم الملف قبل وبعد للتحقق من التخفيض.