ساحة CSS

كيف يعمل ملعب CSS

ما الذي تفعله الأداة

يوفّر ملعب CSS محررين — HTML وCSS — ومعاينة داخل iframe معزول تتحدّث أثناء الكتابة. استخدمه لنمذجة المكوّنات، واختبار المحددات، والتحقق من أنماط الاحتياط، أو بناء أمثلة دنيا لإعادة إنتاج الأخطاء. يضيف مفتاح التبديل 'Reset styles' إعادة ضبط CSS صغيرة (box-sizing وافتراضات معقولة لـ body) حتى لا تتعارض CSS الخاصة بك مع افتراضات المتصفح.

حالات استخدام شائعة للمطورين

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

تنسيقات البيانات أو أنواعها أو متغيراتها

يقبل محرر HTML أي محتوى داخل body. ويقبل محرر CSS أي CSS حديث — الخصائص المخصّصة، والتعشيش، و@container، و@layer، إلخ. المخرج هو مستند HTML مستقل كامل مع وسم meta viewport (اختياري) وكتلة style مضمنة، جاهز للنسخ كملف كامل. تستخدم معاينة iframe قيمة sandbox='allow-same-origin' للسماح بعناوين URL النسبية مع حظر السكربتات وإرسال النماذج.

المزالق الشائعة والحالات الطرفية

قد تُحظر عناوين URL الخارجية لـ @font-face وعبارات @import بواسطة صندوق حماية iframe. لن يتصرف CSS الذي يعتمد على أنماط موروثة من مستند خارجي بالطريقة نفسها هنا لأن iframe معزول. تستمر الحركات ذات المدد الطويلة جدًا في التشغيل داخل iframe للمعاينة حتى عندما لا يكون المحرر في وضع التركيز؛ أوقفها باستخدام animation-play-state إذا كنت تصحح التوقيت.

متى تستخدم هذه الأداة بدلًا من الكود

استخدم أداة المتصفح للتجارب لمرة واحدة، أو لإعادات إنتاج دنيا معزولة، أو لعروض تعليمية سريعة. في مشروع حقيقي، يمنحك خادم التطوير، والاستبدال الساخن للوحدات، وأدوات تطوير المكوّنات (React Refresh وVue devtools) حلقة تغذية راجعة أغنى بكثير — استخدم هذا الملعب للرسومات الأولية التي لا تريد إعداد أدوات لها.