← Wszystkie wpisy

Okna na froncie

CSS pane: live edytor CSS na każdej stronie, bez DevTools

15 maja 2026 · autor JustZix Team

Standardowy workflow eksperymentowania z CSS-em: otwórz DevTools, kliknij Elements, znajdź element, edytuj inline style, reload strony — wszystko znika. JustZix od v2.13.40 ma CSS pane — floating textarea wstrzykiwany na stronę z live <style> injection. Piszesz CSS, widzisz zmianę po 200 ms, treść persystuje w karcie. Bez DevTools, bez wciskania F5.

Co to dokładnie jest

CSS pane to małe, draggable okienko na stronie (fixed, z-index 2147483640) z headerem (kolorowa kropka + nazwa) i textareą w środku. Wszystko, co wpiszesz, leci po debounce 200 ms do <style id="jz-pane-style-{id}"> w head dokumentu — od razu widzisz efekt. Treść zapisuje się w sessionStorage tej karty — odświeżysz tab, treść zostaje. Zamkniesz kartę — znika (celowo: pane to scratch pad, nie persistent storage).

Pierwszy pane w 30 sekund

1. Otwórz options JustZix → wybierz folder, grupę lub regułę z dopasowaniem URL.
2. Klik „Okna CSS (0)" → modal z listą. Klik „+ Dodaj nowe okno CSS".
3. Wpisz nazwę („Test"), wybierz kolor kropki — save automatyczny.
4. Wejdź na stronę pasującą do scope-a. W prawym górnym rogu (anchor domyślny) pojawia się pane.
5. Wpisz body { background: red; } — strona zmienia tło po 200 ms.

Live preview — debounce i kasowanie

Debounce 200 ms istnieje, żeby przy szybkim pisaniu nie spamować reflow. W praktyce niezauważalne — po 0,2 s zmiana widoczna. Wycofanie wszystkich stylów = wyczyść textareę. Pane wewnętrznie pisze pusty string do <style>, więc kasowanie też jest natychmiastowe.

Selektory robocze: pisz tak samo jak w prawdziwej regule. !important często potrzebny, bo strony mają swoje style. Pane'a używasz głównie do testowania — gdy wynik jest dobry, kopiujesz CSS do prawdziwej reguły (zakładka CSS w karcie zestawu) na stałe.

Perystencja per karta (sessionStorage)

Wszystko, co wpiszesz, ląduje w sessionStorage['jz_pane_{id}_content'] tej karty. Konsekwencje:

• F5 / nawigacja w obrębie karty — treść pozostaje. Pane wstawia się ponownie, textarea wczytuje content ze storage.
• Nowa karta z tym samym scope — pane pojawia się pusty. Każda karta to oddzielny scratch pad.
• Zamknięcie karty — treść znika. Nie ma „przypadkiem skasowałem pół godziny pracy" — zamknięcie = świadome rzucenie scratchpada.

Gdy zrobisz coś, co chcesz zachować — przenieś do regularnej reguły CSS w options. Pane nie jest do trzymania kodu na stałe.

Multi-pane — 3 okna na jednej stronie

Możesz mieć dowolnie dużo CSS pane'ów w tym samym scope. Każdy jest osobnym <style> w head, każdy ma własny content w sessionStorage. Praktyka:

• Pane 1: „Header overrides" — eksperymenty z górnym paskiem.
• Pane 2: „Hide ads" — różne wersje selektorów blokujących reklamy.
• Pane 3: „Form fixes" — width input-ów, font-size labels.

Każdy w innym kolorze kropki (zielony, czerwony, niebieski). Wyłącznie wizualnie czytelne, że masz 3 niezależne zestawy zmian.

Hierarchia scope (folder → grupa → reguła)

Pane może być przypięty do folderu, grupy albo reguły:

Inheritance: na widoku grupy widzisz panes own + odziedziczone z folderu. Na widoku reguły — własne + z grupy + z folderu. To samo co reguły CSS/JS — pełna hierarchia.

Share z koleżanką

Pane'y idą przez ten sam mechanizm sync co reguły. Generujesz link share → odbiorca dostaje też pane'y. Use case:

1. Konsultant frontendowy łączy się ze sklepem klienta, eksperymentuje w pane'ie „Header redesign".
2. Klika „Udostępnij link" — link ma TTL 24h.
3. Klient w swoim Chrome otwiera link → importuje → pane „Header redesign" pojawia się u niego.
4. Klient na swojej karcie widzi rezultat na stronie. Akceptuje? Konsultant kopiuje treść z pane'a do trwałej reguły CSS.

Pułapki

• sessionStorage może być zablokowane (sandbox iframe, prywatny tryb itp.) — wtedy treść nie persystuje, ale live injection nadal działa.
• CSS pane to nie CodeMirror — plain textarea, brak syntax highlighting w MVP. Upgrade na CodeMirror w planach, ale dla scratchpada wystarcza.
• Pane może zasłaniać ważny element strony — przeciągnij za header w inny róg. Pozycja persystuje per okno przeglądarki (chrome.storage), więc kolejne karty pamiętają.
• 3+ pane'y na malym viewporcie — mogą się nakładać. Snap connections (drag jednego pane'a na drugi) tworzy „grupę" — przesuwasz jedno, leci grupa.

Co dalej

CSS pane to pierwsze z 4 typów „okien na froncie" w JustZix. Kolejne to JS pane (Run-on-demand JavaScript) i JS Console (REPL z historią ↑↓). Pisaliśmy o nich w osobnych wpisach.

Zainstaluj JustZix i przestań trzymać DevTools otwarte tylko po to, żeby od czasu do czasu rzucić jeden selektor.