מגרש משחקים ל-CSS

איך מגרש המשחקים של CSS עובד

מה הכלי עושה

מגרש המשחקים של CSS נותן לכם שני עורכים — HTML ו-CSS — ותצוגת iframe מבודדת שמתעדכנת בזמן ההקלדה. השתמשו בו כדי ליצור אבטיפוס לרכיבים, לבדוק סלקטורים, לאמת סגנונות fallback, או לבנות רפרודוקציות מינימליות לדיווחי באגים. מתג 'Reset styles' מוסיף איפוס CSS קטן (box-sizing, ברירות מחדל סבירות ל-body) כך שה-CSS שלכם לא נלחם בברירות המחדל של הדפדפן.

מקרי שימוש נפוצים למפתחים

מפתחי פרונטאנד בונים דוגמאות רכיב מבודדות לשיתוף בבקשות משיכה (pull requests) או בתיעוד. מעצבים מתנסים בגרדיאנטים, צללים, תזמוני אנימציה ותכונות מודרניות כמו grid, subgrid ו-container queries. מחנכים מדגימים מושגי CSS לסטודנטים בלי להקים חשבונות CodePen. מהנדסי QA משחזרים באגים של CSS בלבד בצורה נקייה בסביבה מבוקרת.

פורמטי נתונים, טיפוסים או וריאנטים

עורך ה-HTML מקבל כל תוכן עבור body. עורך ה-CSS מקבל כל CSS מודרני — מאפיינים מותאמים אישית, קינון, @container, @layer וכו'. הפלט הוא מסמך HTML מלא ועצמאי עם תג meta viewport (אופציונלי) ובלוק style מוטמע, מוכן להעתקה כקובץ שלם. ה-iframe של התצוגה המקדימה משתמש ב-sandbox='allow-same-origin' כדי לאפשר כתובות URL יחסיות תוך חסימת סקריפטים ושליחת טפסים.

מלכודות נפוצות ומקרי קצה

כתובות URL חיצוניות של @font-face והצהרות @import עשויות להיחסם על ידי ה-sandbox של ה-iframe. הדבקת CSS שתלוי בסגנונות בירושה ממסמך חיצוני לא תתנהג כאן אותו הדבר כי ה-iframe מבודד. אנימציות עם משכים ארוכים מאוד ממשיכות לרוץ ב-iframe של התצוגה המקדימה גם כשהעורך אינו בפוקוס; השהו אותן עם animation-play-state אם אתם מנפים באגים בתזמון.

מתי להשתמש בכלי הזה לעומת קוד

השתמשו בכלי הדפדפן לניסויים חד-פעמיים, רפרודוקציות מינימליות מבודדות, או הדגמות הוראה מהירות. בפרויקט אמיתי, שרת הפיתוח שלכם, hot module replacement וכלי הפיתוח לרכיבים (React Refresh, ‏Vue devtools) נותנים לולאת משוב עשירה בהרבה — השתמשו במגרש המשחקים הזה לסקיצות שלא תרצו להקים עבורן תשתית וכלים.