Sân chơi CSS

CSS Playground hoạt động như thế nào

Công cụ làm gì

CSS Playground cung cấp cho bạn hai trình soạn thảo — HTML và CSS — cùng một bản xem trước iframe dạng sandbox cập nhật theo từng ký tự bạn gõ. Dùng nó để dựng prototype component, thử selector, kiểm tra style dự phòng, hoặc tạo bản tái hiện tối thiểu cho báo cáo lỗi. Công tắc 'Reset styles' thêm một CSS reset nhỏ (box-sizing, các mặc định hợp lý cho body) để CSS của bạn không phải “đấu” với mặc định của trình duyệt.

Các trường hợp sử dụng phổ biến cho lập trình viên

Lập trình viên frontend xây dựng các ví dụ component tách biệt để chia sẻ trong pull request hoặc tài liệu. Nhà thiết kế thử nghiệm gradient, đổ bóng, thời gian animation và các tính năng hiện đại như grid, subgrid và container queries. Giảng viên demo các khái niệm CSS cho học viên mà không cần tạo tài khoản CodePen. Kỹ sư QA tái hiện các lỗi chỉ liên quan đến CSS một cách gọn gàng trong môi trường được kiểm soát.

Định dạng dữ liệu, kiểu hoặc biến thể

Trình soạn thảo HTML chấp nhận bất kỳ nội dung body nào. Trình soạn thảo CSS chấp nhận mọi CSS hiện đại — custom properties, nesting, @container, @layer, v.v. Đầu ra là một tài liệu HTML độc lập hoàn chỉnh với thẻ meta viewport (tùy chọn) và một khối style inline, sẵn sàng để sao chép như một tệp hoàn chỉnh. Iframe xem trước dùng sandbox='allow-same-origin' để cho phép URL tương đối đồng thời chặn script và việc gửi form.

Các lỗi thường gặp và trường hợp biên

Các URL @font-face bên ngoài và các câu lệnh @import có thể bị chặn bởi sandbox của iframe. Dán CSS phụ thuộc vào style kế thừa từ tài liệu bên ngoài sẽ không hoạt động giống ở đây vì iframe bị cô lập. Các animation có thời lượng rất dài vẫn tiếp tục chạy trong iframe xem trước ngay cả khi trình soạn thảo không được focus; hãy tạm dừng chúng bằng animation-play-state nếu bạn đang debug timing.

Khi nào nên dùng công cụ này thay vì viết mã

Dùng công cụ trên trình duyệt cho các thử nghiệm một lần, các bản tái hiện tối thiểu tách biệt, hoặc demo giảng dạy nhanh. Trong một dự án thực, dev server, hot module replacement và devtools cho component (React Refresh, Vue devtools) mang lại vòng phản hồi phong phú hơn nhiều — hãy dùng playground này cho các bản phác thảo mà bạn không muốn thiết lập tooling.