زمین بازی CSS

محیط آزمایشی CSS چگونه کار می‌کند

این ابزار چه کاری انجام می‌دهد

محیط آزمایشی CSS دو ویرایشگر — HTML و CSS — و یک پیش‌نمایش iframe سندباکس‌شده در اختیار شما می‌گذارد که هم‌زمان با تایپ به‌روزرسانی می‌شود. از آن برای نمونه‌سازی کامپوننت‌ها، آزمودن selectorها، اعتبارسنجی سبک‌های fallback، یا ساخت بازتولیدهای حداقلی برای گزارش باگ استفاده کنید. کلید «Reset styles» یک ریست کوچک CSS (box-sizing، پیش‌فرض‌های معقول برای body) اضافه می‌کند تا CSS شما با پیش‌فرض‌های مرورگر درگیر نشود.

موارد استفادهٔ رایج برای توسعه‌دهندگان

توسعه‌دهندگان فرانت‌اند نمونه‌های ایزولهٔ کامپوننت می‌سازند تا در pull requestها یا مستندات به اشتراک بگذارند. طراحان با گرادیان‌ها، سایه‌ها، زمان‌بندی انیمیشن و قابلیت‌های مدرن مانند grid، subgrid و container queryها آزمایش می‌کنند. مدرسان مفاهیم CSS را بدون راه‌اندازی حساب‌های CodePen به دانشجویان نمایش می‌دهند. مهندسان QA باگ‌های صرفاً CSS را در یک محیط کنترل‌شده به‌صورت تمیز بازتولید می‌کنند.

قالب‌ها، نوع‌ها یا گونه‌های داده

ویرایشگر HTML هر محتوای داخل body را می‌پذیرد. ویرایشگر CSS هر CSS مدرن را می‌پذیرد — custom propertyها، nesting، @container، @layer و غیره. خروجی یک سند HTML کامل و مستقل با تگ meta viewport (اختیاری) و یک بلوک style درون‌خطی است که آمادهٔ کپی به‌عنوان یک فایل کامل است. iframe پیش‌نمایش از sandbox='allow-same-origin' استفاده می‌کند تا URLهای نسبی مجاز باشند، در حالی که اسکریپت‌ها و ارسال فرم‌ها مسدود می‌شوند.

دام‌های رایج و حالت‌های لبه‌ای

URLهای خارجیِ @font-face و دستورهای @import ممکن است توسط سندباکس iframe مسدود شوند. چسباندن CSSای که به سبک‌های به‌ارث‌رسیده از سند بیرونی وابسته است، اینجا همان‌طور رفتار نمی‌کند چون iframe ایزوله است. انیمیشن‌هایی با مدت‌زمان‌های بسیار طولانی حتی وقتی ویرایشگر فوکوس ندارد هم در iframe پیش‌نمایش ادامه می‌دهند؛ اگر در حال دیباگ زمان‌بندی هستید، آن‌ها را با animation-play-state متوقف کنید.

چه زمانی از این ابزار استفاده کنیم در برابر کُد

از ابزار مرورگری برای آزمایش‌های یک‌باره، بازتولیدهای حداقلیِ ایزوله، یا دموهای آموزشی سریع استفاده کنید. در یک پروژهٔ واقعی، سرور توسعه، hot module replacement و devtools کامپوننت (React Refresh، Vue devtools) یک چرخهٔ بازخورد بسیار غنی‌تر به شما می‌دهند — از این محیط آزمایشی برای طرح‌هایی استفاده کنید که نمی‌خواهید برایشان ابزارها را راه‌اندازی کنید.