สนามทดลอง CSS

CSS Playground ทำงานอย่างไร

เครื่องมือนี้ทำอะไร

CSS Playground ให้คุณมีเอดิเตอร์สองตัว — HTML และ CSS — พร้อมพรีวิวใน iframe แบบแซนด์บ็อกซ์ที่อัปเดตตามที่คุณพิมพ์ ใช้เพื่อทำต้นแบบคอมโพเนนต์ ทดสอบเซเลกเตอร์ ตรวจสอบสไตล์สำรอง (fallback) หรือสร้างตัวอย่างขั้นต่ำเพื่อรายงานบั๊ก สวิตช์ 'Reset styles' จะเพิ่ม CSS reset ขนาดเล็ก (box-sizing, ค่าเริ่มต้นของ body ที่เหมาะสม) เพื่อให้ CSS ของคุณไม่ต้องต่อสู้กับค่าเริ่มต้นของเบราว์เซอร์

กรณีการใช้งานทั่วไปของนักพัฒนา

นักพัฒนา Frontend สร้างตัวอย่างคอมโพเนนต์แบบแยกเดี่ยวเพื่อแชร์ใน pull request หรือเอกสารประกอบ นักออกแบบทดลองไล่สี เงา จังหวะแอนิเมชัน และฟีเจอร์สมัยใหม่อย่าง grid, subgrid และ container queries ผู้สอนสาธิตแนวคิด CSS ให้ผู้เรียนโดยไม่ต้องสร้างบัญชี CodePen วิศวกร QA ทำซ้ำบั๊กที่เป็น CSS ล้วนได้อย่างสะอาดในสภาพแวดล้อมที่ควบคุมได้

รูปแบบข้อมูล ชนิด หรือรูปแบบย่อย

เอดิเตอร์ HTML รับเนื้อหาใด ๆ ใน body เอดิเตอร์ CSS รับ CSS สมัยใหม่ได้ทั้งหมด — custom properties, nesting, @container, @layer เป็นต้น เอาต์พุตเป็นเอกสาร HTML แบบสแตนด์อโลนเต็มรูปแบบพร้อมแท็ก meta viewport (ตัวเลือก) และบล็อก style แบบ inline พร้อมคัดลอกเป็นไฟล์สมบูรณ์ได้ทันที iframe พรีวิวใช้ sandbox='allow-same-origin' เพื่ออนุญาต URL แบบ relative ขณะเดียวกันก็ปิดกั้นสคริปต์และการส่งฟอร์ม

ข้อผิดพลาดที่พบบ่อยและกรณีขอบ

URL ภายนอกของ @font-face และคำสั่ง @import อาจถูกบล็อกโดยแซนด์บ็อกซ์ของ iframe การวาง CSS ที่พึ่งพาสไตล์ที่สืบทอดมาจากเอกสารภายนอกจะทำงานไม่เหมือนเดิมที่นี่ เพราะ iframe ถูกแยกออกจากกัน แอนิเมชันที่มีระยะเวลายาวมากจะยังคงรันใน iframe พรีวิวแม้เอดิเตอร์จะไม่ได้โฟกัส; หากกำลังดีบักเรื่องเวลา ให้หยุดด้วย animation-play-state

เมื่อใดควรใช้เครื่องมือนี้แทนการเขียนโค้ด

ใช้เครื่องมือบนเบราว์เซอร์สำหรับการทดลองแบบครั้งเดียว การทำตัวอย่างขั้นต่ำแบบแยกเดี่ยว หรือเดโมสอนแบบรวดเร็ว ในโปรเจกต์จริง dev server, hot module replacement และเครื่องมือพัฒนาคอมโพเนนต์ (React Refresh, Vue devtools) จะให้วงจรฟีดแบ็กที่สมบูรณ์กว่ามาก — ใช้ playground นี้สำหรับสเก็ตช์ที่คุณไม่อยากตั้งค่าเครื่องมือให้ยุ่งยาก