CSS pane: un editor CSS in tempo reale su qualsiasi pagina, senza DevTools
Workflow standard di sperimentazione CSS: apri i DevTools, clicchi Elements, trovi il nodo, modifichi lo stile inline, ricarichi — e tutto è sparito. JustZix v2.13.40+ ha il CSS pane — una textarea flottante iniettata nella pagina con injection <style> in tempo reale. Digiti CSS, vedi la modifica in 200 ms, il contenuto persiste tra i ricaricamenti nella scheda. Niente DevTools, niente F5.
Cos'è in concreto
Un CSS pane è una piccola finestra trascinabile sulla pagina (fixed, z-index 2147483640) con un header (punto colorato + nome) e una textarea dentro. Ciò che digiti passa attraverso un debounce di 200 ms in <style id="jz-pane-style-{id}"> nel <head> — vedi subito l'effetto. Il contenuto vive nel sessionStorage di quella scheda — ricarica la pagina, il contenuto resta; chiudi la scheda, sparito (intenzionale: un pane è un blocco per appunti, non un archivio permanente).
Il tuo primo pane in 30 secondi
- Apri le opzioni di JustZix → scegli una cartella, un gruppo o una regola con corrispondenza URL.
- Clicca «CSS panes (0)» → modale con l'elenco. Clicca «+ Aggiungi nuovo CSS pane».
- Inserisci un nome («Test»), scegli un colore per il punto — salvato automaticamente.
- Visita una pagina che corrisponde allo scope. Nell'angolo in alto a destra (ancora predefinita) appare il pane.
- Digita
body { background: red; }— lo sfondo della pagina diventa rosso dopo 200 ms.
Anteprima in tempo reale — debounce e svuotamento
Il debounce di 200 ms esiste perché la digitazione veloce non spammi i reflow. In pratica è impercettibile — dopo 0,2 s la modifica è visibile. Per cancellare tutti gli stili: svuota la textarea. Il pane internamente scrive una stringa vuota nel <style>, quindi anche lo svuotamento è istantaneo.
Selettori: scrivili come faresti in una regola vera. !important serve spesso perché il sito ospite ha i propri stili. Usi il pane soprattutto per testare — quando il risultato ti piace, copia il CSS in una regola vera (scheda CSS su una card di regola) per l'uso permanente.
Persistenza per scheda (sessionStorage)
Tutto ciò che digiti finisce in sessionStorage['jz_pane_{id}_content'] della scheda corrente. Conseguenze:
- F5 / navigazione nella scheda — il contenuto persiste. Il pane si rimonta, la textarea rilegge dallo storage.
- Nuova scheda sullo stesso scope — il pane appare vuoto. Ogni scheda è un blocco per appunti separato.
- Chiudere la scheda — il contenuto è perso. Niente «ho perso accidentalmente mezz'ora di lavoro» — chiudere = scartare consapevolmente il blocco per appunti.
Quando hai fatto qualcosa che vuoi tenere — spostalo in una regola CSS normale nelle opzioni. Il pane non è un posto dove tenere codice a lungo termine.
Multi-pane — 3 finestre su una pagina
Puoi avere un numero qualsiasi di CSS pane nello stesso scope. Ognuno è un <style> separato nell'head, ognuno possiede il suo contenuto nel sessionStorage. In pratica:
- Pane 1: «Override dell'header» — esperimenti sulla barra superiore.
- Pane 2: «Nascondi pubblicità» — diverse varianti di selettori anti-pubblicità.
- Pane 3: «Fix dei moduli» — larghezze degli input, dimensioni del font delle label.
Ognuno in un colore di punto diverso (verde, rosso, blu). Visivamente chiaro a colpo d'occhio che hai 3 set di stili indipendenti.
Gerarchia di scope (cartella → gruppo → regola)
Un pane può essere collegato a una cartella, un gruppo o una regola:
| Scope | Quando appare il pane | Caso d'uso |
|---|---|---|
| Cartella | L'URL corrisponde a folder.urlPatterns | Esperimenti CSS su tutto il negozio |
| Gruppo | Corrispondenza cartella + filtro URL del gruppo | Esperimenti per sezione (es. checkout) |
| Regola | Cartella + gruppo + filtro URL della regola | Esperimenti su una pagina specifica |
Ereditarietà: in una vista di gruppo vedi i pane propri + quelli ereditati dalla cartella. In una vista di regola — propri + gruppo + cartella. Come le regole CSS/JS — gerarchia completa.
Condividere con un collega
I pane passano attraverso lo stesso meccanismo di sync delle regole. Genera un link di condivisione → il destinatario riceve anche i tuoi pane. Caso d'uso:
- Un consulente front-end entra nel negozio di un cliente, sperimenta in un pane «Ridisegno header».
- Clicca «Condividi» — link valido 24h.
- Il cliente apre il link nel suo Chrome → importa → il pane «Ridisegno header» appare da lui.
- Il cliente vede il risultato nella sua scheda. Approva? Il consulente copia il contenuto del pane in una regola CSS permanente.
Trappole
- sessionStorage può essere bloccato (iframe in sandbox, modalità privata, ecc.) — il contenuto non persisterà, ma l'injection in tempo reale funziona comunque.
- Il CSS pane non è CodeMirror — una semplice textarea, niente evidenziazione della sintassi nell'MVP. Un upgrade a CodeMirror è previsto, ma per l'uso da blocco per appunti basta.
- Il pane può coprire elementi importanti della pagina — trascinalo dall'header in un altro angolo. La posizione persiste per finestra del browser (chrome.storage), così le altre schede se ne ricordano.
- 3+ pane su un viewport piccolo possono sovrapporsi. Le connessioni snap (trascinare un pane su un altro) creano un «gruppo» — sposta uno, il gruppo segue.
Cosa fare dopo
Il CSS pane è il primo dei 4 tipi di «finestre nella pagina» di JustZix. I prossimi due sono il JS pane (JavaScript Run-on-demand) e la JS Console (REPL con cronologia ↑↓). Ne abbiamo scritto in articoli separati.
Installa JustZix e smetti di tenere i DevTools aperti solo per buttare giù un selettore ogni tanto.
Valuta questo articolo
Nessuna valutazione — sii il primo.