← Tous les articles

Tutoriels

Marqueurs d'environnement DEV/STAGING/PROD — 5 façons d'arrêter de détruire la production

15 mai 2026 · par JustZix Team

Vous cliquez « Supprimer tous les comptes » en pensant être sur le staging. C'était la production. Ça arrive à chaque DevOps et ingénieur au moins une fois. Cinq techniques de marquage visuel d'environnement pour ne plus jamais tomber dans ce piège.

Méthode 1 — bannière rouge en haut

La plus évidente et la plus efficace. Une bande en haut de chaque page, impossible à ignorer :

body::before {
  content: "ENVIRONNEMENT DEV — les données peuvent ne pas être de production";
  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 du body pour que le contenu ne glisse pas sous la bannière */
body { padding-top: 32px !important; }

Le dégradé répété donne un motif « ruban de sécurité » comme sur les chantiers — par évolution, cela signifie danger. Sans le dégradé ce serait une barre d'info ordinaire ; avec lui, personne ne l'ignore.

Méthode 2 — badge flottant dans le coin

La bannière du haut est agressive et prend de la place. Parfois vous voulez plus doux — un petit badge de coin :

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; /* ne pas bloquer les clics */
}

Épinglé dans le coin, visible mais discret. pointer-events: none est crucial — sans lui le badge bloquerait les boutons en dessous.

Méthode 3 — échanger le favicon

Une bannière n'aide que quand vous regardez la page. L'onglet du navigateur est visible même après Cmd+Tab. Échangez le favicon :

// Générer un nouveau favicon (cercle rouge avec la lettre 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);

// Retirer les anciens favicons
document.querySelectorAll('link[rel*="icon"]').forEach(el => el.remove());

// Ajouter le nouveau
const link = document.createElement('link');
link.rel = 'icon';
link.type = 'image/png';
link.href = canvas.toDataURL();
document.head.appendChild(link);

D rouge dans l'onglet, toujours visible. Fonctionne aussi dans les favoris — les favoris staging vs production deviennent trivialement distinguables.

Méthode 4 — teinte subtile du viewport

La plus élégante — un léger overlay coloré qui donne à toute la page une teinte à peine perceptible :

/* Teinte orange pour STAGING, rouge pour 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) = presque invisible, mais après quelques secondes votre cerveau sait « quelque chose est différent ». Après quelques jours vous le remarquez instantanément. Sans l'agressivité d'une bannière.

Méthode 5 — préfixe dans le titre de l'onglet

L'onglet du navigateur affiche document.title. Ajoutez un préfixe :

// Préfixe de titre + attention aux SPA qui le changent dynamiquement
const PREFIX = '[DEV] ';

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

ensurePrefix();

// Les SPA changent souvent le titre au changement de route
new MutationObserver(ensurePrefix)
  .observe(document.querySelector('title'), { childList: true });

Le MutationObserver attrape les SPA qui réécrivent le titre au changement de route. Sans l'observer, le préfixe disparaît après la première navigation.

Pièges

• Ne l'appliquez pas en production — le motif d'URL doit être étroit : https://staging.*, https://*-dev.*, http://localhost:*. Pas *.
• Conflit de z-index — certaines bannières cookies ou modales utilisent un z-index 9999. Vos marqueurs doivent être plus élevés (999999 devrait suffire).
• Feuille de style d'impression — la bannière apparaîtra dans un PDF imprimé. Ajoutez @media print { body::before { display: none } } pour la sauter.
• iframe — une page intégrée dans une iframe n'hérite pas du CSS du parent. Le motif d'URL doit aussi correspondre au contenu de l'iframe pour que le marqueur s'affiche dedans.

Comment brancher dans JustZix

1. Installez JustZix.
2. Dossier « Marqueurs d'env ». Règle par environnement :
   • Motif https://*-staging.company.com/* → Méthode 1 (bannière) + Méthode 3 (favicon).
   • Motif http://localhost:*/* → Méthode 2 (badge) + Méthode 5 (préfixe de titre).
3. Lien de partage à toute l'équipe — tout le monde a les mêmes marqueurs d'environnement.

Installez JustZix gratuitement et arrêtez de détruire la production par « clics accidentels ».