CSS Oyun Alanı
HTML
CSS
Önizleme
Teknik ayrıntılar
CSS Playground Nasıl Çalışır
Araç Ne Yapar
CSS Playground size iki düzenleyici — HTML ve CSS — ve yazdıkça güncellenen, sandbox’lanmış bir iframe önizlemesi sunar. Bunu bileşen prototiplemek, seçicileri test etmek, yedek stilleri doğrulamak veya hata raporları için minimal yeniden üretimler oluşturmak için kullanın. 'Reset styles' anahtarı küçük bir CSS reset’i (box-sizing, makul body varsayılanları) ekler; böylece CSS’iniz tarayıcı varsayılanlarıyla savaşmaz.
Yaygın Geliştirici Kullanım Senaryoları
Frontend geliştiriciler, pull request’lerde veya dokümantasyonda paylaşmak için izole bileşen örnekleri oluşturur. Tasarımcılar degradeler, gölgeler, animasyon zamanlamaları ve grid, subgrid ve container queries gibi modern özelliklerle denemeler yapar. Eğitmenler, CodePen hesabı açmadan öğrencilere CSS kavramlarını gösterir. QA mühendisleri, kontrollü bir ortamda yalnızca CSS kaynaklı hataları temiz biçimde yeniden üretir.
Veri Biçimleri, Türleri veya Varyantlar
HTML düzenleyici herhangi bir body içeriğini kabul eder. CSS düzenleyici modern CSS’in tamamını kabul eder — özel özellikler, nesting, @container, @layer vb. Çıktı, meta viewport etiketi (isteğe bağlı) ve satır içi bir style bloğu içeren, tam bağımsız bir HTML belgesidir; eksiksiz bir dosya olarak kopyalamaya hazırdır. Önizleme iframe’i, göreli URL’lere izin verirken script’leri ve form gönderimlerini engellemek için sandbox='allow-same-origin' kullanır.
Yaygın Hatalar ve Sınır Durumları
Harici @font-face URL’leri ve @import ifadeleri iframe sandbox tarafından engellenebilir. Dış belgeden devralınan stillere bağlı CSS yapıştırmak burada aynı şekilde davranmaz çünkü iframe izoledir. Çok uzun süreli animasyonlar, düzenleyici odakta olmasa bile önizleme iframe’inde çalışmaya devam eder; zamanlamayı hata ayıklıyorsanız animation-play-state ile duraklatın.
Bu Aracı Ne Zaman Kullanmalı, Ne Zaman Kod Yazmalı
Tek seferlik denemeler, izole minimal yeniden üretimler veya hızlı eğitim demoları için tarayıcı aracını kullanın. Gerçek bir projede geliştirme sunucunuz, hot module replacement ve bileşen geliştirme araçları (React Refresh, Vue devtools) çok daha zengin bir geri bildirim döngüsü sağlar — bu playground’u, kurulum yapmak istemediğiniz eskizler için kullanın.