Plac zabaw CSS

Jak działa CSS Playground

Co robi narzędzie

CSS Playground daje Ci dwa edytory — HTML i CSS — oraz podgląd w odizolowanym iframe, który aktualizuje się podczas pisania. Użyj go do prototypowania komponentów, testowania selektorów, weryfikowania stylów awaryjnych lub tworzenia minimalnych reprodukcji do zgłoszeń błędów. Przełącznik „Reset styles” dodaje mały reset CSS (box-sizing, sensowne domyślne ustawienia body), dzięki czemu Twoje CSS nie walczy z domyślnymi stylami przeglądarki.

Typowe zastosowania dla programistów

Frontendowcy budują odizolowane przykłady komponentów do udostępniania w pull requestach lub dokumentacji. Projektanci eksperymentują z gradientami, cieniami, timingami animacji oraz nowoczesnymi funkcjami, takimi jak grid, subgrid i container queries. Edukatorzy demonstrują koncepcje CSS studentom bez zakładania kont CodePen. Inżynierowie QA odtwarzają błędy dotyczące wyłącznie CSS w czystym, kontrolowanym środowisku.

Formaty danych, typy lub warianty

Edytor HTML przyjmuje dowolną zawartość body. Edytor CSS przyjmuje dowolny nowoczesny CSS — custom properties, zagnieżdżanie, @container, @layer itd. Wynikiem jest pełny, samodzielny dokument HTML z tagiem meta viewport (opcjonalnie) oraz osadzonym blokiem style, gotowy do skopiowania jako kompletny plik. Podglądowy iframe używa sandbox='allow-same-origin', aby zezwolić na względne URL-e, jednocześnie blokując skrypty i wysyłanie formularzy.

Typowe pułapki i przypadki brzegowe

Zewnętrzne URL-e w @font-face oraz instrukcje @import mogą być blokowane przez sandbox iframe. Wklejenie CSS, które zależy od dziedziczonych stylów z dokumentu nadrzędnego, nie będzie zachowywać się tutaj tak samo, ponieważ iframe jest odizolowany. Animacje o bardzo długich czasach trwania nadal działają w podglądowym iframe nawet wtedy, gdy edytor nie ma fokusu; wstrzymaj je za pomocą animation-play-state, jeśli debugujesz timing.

Kiedy używać tego narzędzia zamiast kodu

Użyj narzędzia w przeglądarce do jednorazowych eksperymentów, odizolowanych minimalnych reprodukcji lub szybkich demonstracji dydaktycznych. W prawdziwym projekcie serwer deweloperski, hot module replacement oraz devtoolsy komponentów (React Refresh, Vue devtools) zapewniają znacznie bogatszą pętlę informacji zwrotnej — używaj tego playgroundu do szkiców, dla których nie chcesz konfigurować narzędzi.