CSS pane : un éditeur CSS en direct sur n'importe quelle page, sans DevTools
Workflow standard d'expérimentation CSS : ouvrir les DevTools, cliquer sur Elements, trouver le nœud, éditer le style inline, recharger — et tout a disparu. JustZix v2.13.40+ a le CSS pane — une textarea flottante injectée sur la page avec injection <style> en direct. Vous tapez du CSS, vous voyez le changement en 200 ms, le contenu persiste à travers les rechargements dans l'onglet. Pas de DevTools, pas de F5.
Ce que c'est concrètement
Un CSS pane est une petite fenêtre déplaçable sur la page (fixed, z-index 2147483640) avec un en-tête (point coloré + nom) et une textarea à l'intérieur. Ce que vous tapez passe par un debounce de 200 ms dans <style id="jz-pane-style-{id}"> dans le <head> — vous voyez l'effet immédiatement. Le contenu vit dans le sessionStorage de cet onglet — rechargez la page, le contenu reste ; fermez l'onglet, c'est parti (volontaire : un pane est un bloc-notes, pas un stockage permanent).
Votre premier pane en 30 secondes
- Ouvrez les options JustZix → choisissez un dossier, groupe ou règle avec correspondance d'URL.
- Cliquez « CSS panes (0) » → modale avec la liste. Cliquez « + Ajouter un nouveau CSS pane ».
- Saisissez un nom (« Test »), choisissez une couleur de point — enregistré automatiquement.
- Visitez une page correspondant au scope. Dans le coin supérieur droit (ancre par défaut) le pane apparaît.
- Tapez
body { background: red; }— le fond de la page devient rouge après 200 ms.
Aperçu en direct — debounce et effacement
Le debounce de 200 ms existe pour que la frappe rapide ne spamme pas les reflows. En pratique c'est imperceptible — après 0,2 s le changement est visible. Pour effacer tous les styles : videz la textarea. Le pane écrit en interne une chaîne vide dans le <style>, donc l'effacement est instantané lui aussi.
Sélecteurs : écrivez-les comme dans une vraie règle. !important est souvent nécessaire car le site hôte a ses propres styles. Vous utilisez le pane surtout pour tester — une fois le résultat satisfaisant, copiez le CSS dans une vraie règle (onglet CSS d'une carte de règle) pour un usage permanent.
Persistance par onglet (sessionStorage)
Tout ce que vous tapez atterrit dans sessionStorage['jz_pane_{id}_content'] de l'onglet courant. Conséquences :
- F5 / navigation dans l'onglet — le contenu persiste. Le pane se remonte, la textarea relit depuis le storage.
- Nouvel onglet sur le même scope — le pane apparaît vide. Chaque onglet est un bloc-notes distinct.
- Fermer l'onglet — le contenu est parti. Pas de « j'ai accidentellement perdu une demi-heure de travail » — fermer = jeter consciemment le bloc-notes.
Quand vous avez fait quelque chose à garder — déplacez-le vers une règle CSS classique dans les options. Le pane n'est pas un endroit pour garder du code à long terme.
Multi-pane — 3 fenêtres sur une page
Vous pouvez avoir n'importe quel nombre de CSS panes dans le même scope. Chacun est un <style> distinct dans le head, chacun possède son contenu dans le sessionStorage. En pratique :
- Pane 1 : « Overrides du header » — expériences sur la barre du haut.
- Pane 2 : « Masquer pubs » — différentes variantes de sélecteurs anti-pub.
- Pane 3 : « Corrections de formulaire » — largeurs d'input, tailles de police des labels.
Chacun dans une couleur de point différente (vert, rouge, bleu). Visuellement clair d'un coup d'œil que vous avez 3 jeux de styles indépendants.
Hiérarchie de scope (dossier → groupe → règle)
Un pane peut être attaché à un dossier, un groupe ou une règle :
| Scope | Quand le pane apparaît | Cas d'usage |
|---|---|---|
| Dossier | L'URL correspond à folder.urlPatterns | Expériences CSS à l'échelle de toute la boutique |
| Groupe | Correspondance dossier + filtre d'URL du groupe | Expériences par section (p. ex. checkout) |
| Règle | Dossier + groupe + filtre d'URL de la règle | Expériences sur une page précise |
Héritage : sur une vue de groupe vous voyez les panes propres + hérités du dossier. Sur une vue de règle — propres + groupe + dossier. Comme les règles CSS/JS — hiérarchie complète.
Partager avec un collègue
Les panes passent par le même mécanisme de sync que les règles. Générez un lien de partage → le destinataire reçoit aussi vos panes. Cas d'usage :
- Un consultant front-end rejoint la boutique d'un client, expérimente dans un pane « Refonte du header ».
- Clique « Partager » — lien valide 24h.
- Le client ouvre le lien dans son Chrome → importe → le pane « Refonte du header » apparaît chez lui.
- Le client voit le résultat dans son onglet. Approuvé ? Le consultant copie le contenu du pane dans une règle CSS permanente.
Pièges
- sessionStorage peut être bloqué (iframe en sandbox, mode privé, etc.) — le contenu ne persistera pas, mais l'injection en direct fonctionne toujours.
- Le CSS pane n'est pas CodeMirror — une textarea simple, pas de coloration syntaxique dans le MVP. Une mise à niveau CodeMirror est prévue, mais c'est suffisant pour un usage bloc-notes.
- Le pane peut couvrir des éléments importants de la page — glissez-le par l'en-tête vers un autre coin. La position persiste par fenêtre de navigateur (chrome.storage), donc les autres onglets s'en souviennent.
- 3+ panes sur un petit viewport peuvent se chevaucher. Les connexions snap (glisser un pane sur un autre) créent un « groupe » — déplacez-en un, le groupe suit.
Et ensuite
Le CSS pane est le premier des 4 types de « fenêtres sur la page » de JustZix. Les deux suivants sont le JS pane (JavaScript Run-on-demand) et la JS Console (REPL avec historique ↑↓). Nous en avons parlé dans des articles séparés.
Installez JustZix et arrêtez de garder les DevTools ouverts juste pour glisser un sélecteur de temps en temps.
Notez cet article
Aucune note — soyez le premier.