CSS pane: un editor CSS en tiempo real en cualquier página, sin DevTools
Flujo estándar de experimentación CSS: abres las DevTools, pulsas Elements, encuentras el nodo, modificas el estilo inline, recargas — y todo ha desaparecido. JustZix v2.13.40+ tiene el CSS pane — un textarea flotante inyectado en la página con inyección <style> en tiempo real. Escribes CSS, ves el cambio en 200 ms, el contenido persiste entre recargas en la pestaña. Sin DevTools, sin F5.
Qué es en concreto
Un CSS pane es una pequeña ventana arrastrable sobre la página (fixed, z-index 2147483640) con una cabecera (punto coloreado + nombre) y un textarea dentro. Lo que escribes pasa por un debounce de 200 ms a <style id="jz-pane-style-{id}"> en el <head> — ves el efecto enseguida. El contenido vive en el sessionStorage de esa pestaña — recarga la página, el contenido permanece; cierra la pestaña, desaparecido (intencionado: un pane es un bloc de notas, no un archivo permanente).
Tu primer pane en 30 segundos
- Abre las opciones de JustZix → elige una carpeta, un grupo o una regla con coincidencia de URL.
- Pulsa «CSS panes (0)» → modal con la lista. Pulsa «+ Añadir nuevo CSS pane».
- Introduce un nombre («Test»), elige un color para el punto — guardado automáticamente.
- Visita una página que coincida con el scope. En la esquina superior derecha (anclaje predeterminado) aparece el pane.
- Escribe
body { background: red; }— el fondo de la página se vuelve rojo tras 200 ms.
Vista previa en tiempo real — debounce y vaciado
El debounce de 200 ms existe para que la escritura rápida no spamee los reflows. En la práctica es imperceptible — tras 0,2 s el cambio es visible. Para borrar todos los estilos: vacía el textarea. El pane internamente escribe una cadena vacía en el <style>, así que el vaciado también es instantáneo.
Selectores: escríbelos como lo harías en una regla real. !important hace falta a menudo porque el sitio anfitrión tiene sus propios estilos. Usas el pane sobre todo para probar — cuando el resultado te gusta, copia el CSS a una regla real (pestaña CSS en una card de regla) para el uso permanente.
Persistencia por pestaña (sessionStorage)
Todo lo que escribes acaba en sessionStorage['jz_pane_{id}_content'] de la pestaña actual. Consecuencias:
- F5 / navegación en la pestaña — el contenido persiste. El pane se vuelve a montar, el textarea relee del storage.
- Nueva pestaña con el mismo scope — el pane aparece vacío. Cada pestaña es un bloc de notas separado.
- Cerrar la pestaña — el contenido se pierde. Nada de «he perdido sin querer media hora de trabajo» — cerrar = descartar conscientemente el bloc de notas.
Cuando has hecho algo que quieres conservar — muévelo a una regla CSS normal en las opciones. El pane no es un sitio para guardar código a largo plazo.
Multi-pane — 3 ventanas en una página
Puedes tener cualquier número de CSS panes en el mismo scope. Cada uno es un <style> separado en el head, cada uno posee su contenido en el sessionStorage. En la práctica:
- Pane 1: «Override de la cabecera» — experimentos sobre la barra superior.
- Pane 2: «Ocultar publicidad» — varias variantes de selectores anti-publicidad.
- Pane 3: «Fix de los formularios» — anchuras de los inputs, tamaños de fuente de las etiquetas.
Cada uno con un color de punto distinto (verde, rojo, azul). Visualmente claro de un vistazo que tienes 3 conjuntos de estilos independientes.
Jerarquía de scope (carpeta → grupo → regla)
Un pane puede estar vinculado a una carpeta, un grupo o una regla:
| Scope | Cuándo aparece el pane | Caso de uso |
|---|---|---|
| Carpeta | La URL coincide con folder.urlPatterns | Experimentos CSS en toda la tienda |
| Grupo | Coincidencia carpeta + filtro URL del grupo | Experimentos por sección (p. ej. checkout) |
| Regla | Carpeta + grupo + filtro URL de la regla | Experimentos en una página específica |
Herencia: en una vista de grupo ves los panes propios + los heredados de la carpeta. En una vista de regla — propios + grupo + carpeta. Como las reglas CSS/JS — jerarquía completa.
Compartir con un compañero
Los panes pasan por el mismo mecanismo de sync que las reglas. Genera un enlace de compartición → el destinatario recibe también tus panes. Caso de uso:
- Un consultor front-end entra en la tienda de un cliente, experimenta en un pane «Rediseño de la cabecera».
- Pulsa «Compartir» — enlace válido 24h.
- El cliente abre el enlace en su Chrome → importa → el pane «Rediseño de la cabecera» aparece en su navegador.
- El cliente ve el resultado en su pestaña. ¿Lo aprueba? El consultor copia el contenido del pane a una regla CSS permanente.
Trampas
- sessionStorage puede estar bloqueado (iframe en sandbox, modo privado, etc.) — el contenido no persistirá, pero la inyección en tiempo real funciona igualmente.
- El CSS pane no es CodeMirror — un simple textarea, sin resaltado de sintaxis en el MVP. Una actualización a CodeMirror está prevista, pero para el uso de bloc de notas basta.
- El pane puede tapar elementos importantes de la página — arrástralo desde la cabecera a otra esquina. La posición persiste por ventana del navegador (chrome.storage), así que las demás pestañas la recuerdan.
- 3+ panes en un viewport pequeño pueden solaparse. Las conexiones snap (arrastrar un pane sobre otro) crean un «grupo» — mueve uno, el grupo le sigue.
Qué hacer después
El CSS pane es el primero de los 4 tipos de «ventanas en la página» de JustZix. Los dos siguientes son el JS pane (JavaScript Run-on-demand) y la JS Console (REPL con historial ↑↓). Hemos escrito sobre ellos en artículos aparte.
Instala JustZix y deja de tener las DevTools abiertas solo para soltar un selector de vez en cuando.
Valora este artículo
Sin valoraciones — sé el primero.