← Tutti gli articoli

Tutorial

Marcatori d'ambiente DEV/STAGING/PROD — 5 modi per smettere di distruggere la produzione

15 maggio 2026 · di JustZix Team

Clicchi «Elimina tutti gli account» pensando di essere su staging. Era la produzione. Capita a ogni DevOps e ingegnere almeno una volta. Cinque tecniche di marcatura visiva dell'ambiente perché tu non cada più in quella trappola.

Metodo 1 — banner rosso in alto

Il più ovvio e il più efficace. Una striscia in cima a ogni pagina, impossibile da ignorare:

body::before {
  content: "AMBIENTE DEV — i dati potrebbero non essere di produzione";
  position: fixed;
  top: 0; left: 0; right: 0;
  background: repeating-linear-gradient(
    -45deg, #dc2626, #dc2626 12px, #b91c1c 12px, #b91c1c 24px
  );
  color: #fff;
  text-align: center;
  padding: 6px 12px;
  font: 700 13px/1.4 ui-monospace, monospace;
  letter-spacing: .5px;
  z-index: 999999;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* Padding del body perché il contenuto non scivoli sotto il banner */
body { padding-top: 32px !important; }

Il gradiente ripetuto crea un motivo «nastro di sicurezza» come nei cantieri — per evoluzione, significa pericolo. Senza il gradiente sarebbe una normale barra informativa; con esso, nessuno lo ignora.

Metodo 2 — badge flottante nell'angolo

Il banner in alto è aggressivo e occupa spazio. A volte vuoi qualcosa di più delicato — un piccolo badge d'angolo:

body::after {
  content: "DEV";
  position: fixed;
  bottom: 16px; left: 16px;
  background: #dc2626;
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font: 700 12px ui-monospace, monospace;
  letter-spacing: 1px;
  z-index: 999999;
  box-shadow: 0 4px 12px rgba(220, 38, 38, .4);
  pointer-events: none; /* non bloccare i clic */
}

Fissato all'angolo, visibile ma discreto. pointer-events: none è cruciale — senza, il badge bloccherebbe i pulsanti sottostanti.

Metodo 3 — scambiare la favicon

Un banner aiuta solo quando guardi la pagina. La scheda del browser è visibile anche dopo Cmd+Tab. Scambia la favicon:

// Generare una nuova favicon (cerchio rosso con la lettera D)
const canvas = document.createElement('canvas');
canvas.width = 32; canvas.height = 32;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#dc2626';
ctx.beginPath();
ctx.arc(16, 16, 14, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = '#fff';
ctx.font = 'bold 18px sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('D', 16, 17);

// Rimuovere le vecchie favicon
document.querySelectorAll('link[rel*="icon"]').forEach(el => el.remove());

// Aggiungere quella nuova
const link = document.createElement('link');
link.rel = 'icon';
link.type = 'image/png';
link.href = canvas.toDataURL();
document.head.appendChild(link);

D rossa nella scheda, sempre visibile. Funziona anche nei segnalibri — i segnalibri staging vs produzione diventano banalmente distinguibili.

Metodo 4 — tinta sottile del viewport

Il più elegante — un leggero overlay colorato che dà all'intera pagina una tinta appena percettibile:

/* Tinta arancione per STAGING, rossa per DEV */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(245, 158, 11, .04);
  pointer-events: none;
  z-index: 999998;
  mix-blend-mode: multiply;
}

rgba(..., .04) = quasi invisibile, ma dopo qualche secondo il cervello sa «qualcosa è diverso». Dopo qualche giorno lo noti all'istante. Senza l'aggressività di un banner.

Metodo 5 — prefisso nel titolo della scheda

La scheda del browser mostra document.title. Aggiungi un prefisso:

// Prefisso del titolo + attenzione alle SPA che lo cambiano dinamicamente
const PREFIX = '[DEV] ';

function ensurePrefix() {
  if (!document.title.startsWith(PREFIX)) {
    document.title = PREFIX + document.title;
  }
}

ensurePrefix();

// Le SPA cambiano spesso il titolo al cambio di rotta
new MutationObserver(ensurePrefix)
  .observe(document.querySelector('title'), { childList: true });

Il MutationObserver cattura le SPA che riscrivono il titolo al cambio di rotta. Senza l'observer, il prefisso sparisce dopo la prima navigazione.

Trappole

• Non applicarlo in produzione — il pattern URL deve essere stretto: https://staging.*, https://*-dev.*, http://localhost:*. Non *.
• Conflitto di z-index — alcuni banner dei cookie o modali usano z-index 9999. I tuoi marcatori devono essere più alti (999999 dovrebbe bastare).
• Foglio di stile per la stampa — il banner apparirà in un PDF stampato. Aggiungi @media print { body::before { display: none } } per saltarlo.
• iframe — una pagina incorporata in un iframe non eredita il CSS del genitore. Il pattern URL deve corrispondere anche al contenuto dell'iframe perché il marcatore appaia all'interno.

Come collegarlo a JustZix

1. Installa JustZix.
2. Cartella «Marcatori d'ambiente». Regola per ambiente:
   • Pattern https://*-staging.company.com/* → Metodo 1 (banner) + Metodo 3 (favicon).
   • Pattern http://localhost:*/* → Metodo 2 (badge) + Metodo 5 (prefisso del titolo).
3. Link di condivisione a tutto il team — tutti hanno gli stessi marcatori d'ambiente.

Installa JustZix gratis e smetti di distruggere la produzione per «clic accidentali».