← Alle Beiträge

Anleitungen

Umgebungsmarker DEV/STAGING/PROD — 5 Wege, die Produktion nicht mehr zu zerstören

15 Mai 2026 · von JustZix Team

Du klickst „Alle Konten löschen" und denkst, du bist auf Staging. Es war die Produktion. Passiert jedem DevOps und Engineer mindestens einmal. Fünf visuelle Umgebungsmarkierungs-Techniken, damit du nie wieder in diese Falle tappst.

Methode 1 — roter Banner über der Seite

Am offensichtlichsten und am wirksamsten. Ein Streifen oben auf jeder Seite, unmöglich zu ignorieren:

body::before {
  content: "DEV-UMGEBUNG — Daten sind möglicherweise nicht produktiv";
  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);
}

/* Body-Padding, damit der Inhalt nicht unter den Banner rutscht */
body { padding-top: 32px !important; }

Der sich wiederholende Verlauf ergibt ein „Absperrband"-Muster wie auf Baustellen — evolutionär bedeutet das Gefahr. Ohne den Verlauf wäre es eine gewöhnliche Infoleiste; mit ihm ignoriert es niemand.

Methode 2 — schwebendes Badge in der Ecke

Der obere Banner ist aggressiv und braucht Platz. Manchmal willst du es sanfter — ein kleines Eck-Badge:

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; /* Klicks nicht blockieren */
}

In der Ecke verankert, sichtbar aber unaufdringlich. pointer-events: none ist entscheidend — ohne es würde das Badge die Buttons darunter blockieren.

Methode 3 — Favicon tauschen

Ein Banner hilft nur, wenn du auf die Seite schaust. Der Browser-Tab ist auch nach Cmd+Tab sichtbar. Tausche das Favicon:

// Ein neues Favicon erzeugen (roter Kreis mit Buchstabe 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);

// Alte Favicons entfernen
document.querySelectorAll('link[rel*="icon"]').forEach(el => el.remove());

// Das neue hinzufügen
const link = document.createElement('link');
link.rel = 'icon';
link.type = 'image/png';
link.href = canvas.toDataURL();
document.head.appendChild(link);

Rotes D im Tab, immer sichtbar. Funktioniert auch in Lesezeichen — Staging- vs. Produktions-Lesezeichen werden trivial unterscheidbar.

Methode 4 — subtile Viewport-Tönung

Am elegantesten — ein leichtes farbiges Overlay, das der ganzen Seite eine kaum wahrnehmbare Tönung gibt:

/* Orange Tönung für STAGING, rot für 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) = fast unsichtbar, aber nach ein paar Sekunden weiß dein Gehirn „irgendwas ist anders". Nach ein paar Tagen merkst du es sofort. Ohne die Aggressivität eines Banners.

Methode 5 — Präfix im Tab-Titel

Der Browser-Tab zeigt document.title. Füge ein Präfix hinzu:

// Titel-Präfix + auf SPAs achten, die ihn dynamisch ändern
const PREFIX = '[DEV] ';

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

ensurePrefix();

// SPAs ändern den Titel oft bei einem Routenwechsel
new MutationObserver(ensurePrefix)
  .observe(document.querySelector('title'), { childList: true });

Der MutationObserver erfasst SPAs, die den Titel bei einem Routenwechsel überschreiben. Ohne den Observer verschwindet das Präfix nach der ersten Navigation.

Fallstricke

• Wende es nicht in der Produktion an — das URL-Muster muss eng sein: https://staging.*, https://*-dev.*, http://localhost:*. Nicht *.
• z-index-Konflikt — manche Cookie-Banner oder Modals nutzen z-index 9999. Deine Marker müssen höher sein (999999 sollte reichen).
• Print-Stylesheet — der Banner erscheint in einem gedruckten PDF. Füge @media print { body::before { display: none } } hinzu, um ihn zu überspringen.
• iframe — eine in einem iframe eingebettete Seite erbt nicht das CSS des Parents. Das URL-Muster muss auch auf den iframe-Inhalt passen, damit der Marker drinnen erscheint.

So bindest du es in JustZix ein

1. Installiere JustZix.
2. Ordner „Umgebungsmarker". Regel pro Umgebung:
   • Muster https://*-staging.company.com/* → Methode 1 (Banner) + Methode 3 (Favicon).
   • Muster http://localhost:*/* → Methode 2 (Badge) + Methode 5 (Titel-Präfix).
3. Freigabe-Link ans ganze Team — alle bekommen dieselben Umgebungsmarker.

Installiere JustZix kostenlos und höre auf, die Produktion durch „versehentliche Klicks" zu zerstören.