How to avoid accidentally posting test content on live sites

It’s quite unprofessional, let alone embarrassing, to post some test content on a development site only to discover you’re actually in the wrong tab and you just posted to the live site.

To avoid this I use the Stylish Add-on for Firefox to inject custom CSS into live sites I’m working on.

For example, I have the following rule for

@-moz-document domain("") {
   html {
      border-left: 30px solid red !important; 

The result is that, in my browser, the live site has a hard-to-ignore red border that acts as a clear visual reminder:

Screenshot of website
Caution: Live site!


Since writing this I’m working with four distinct versions of the site: local development, remote development, remote live and remote legacy (backup of the previous version).

I’ve refined my Stylish rules accordingly to add a custom footer for each. The new rule for the live site is:

@namespace url(;

@-moz-document domain("") {
  body::after {
    z-index: 99999;
    line-height: 40px;
    text-align: center;
    width: 100%;
    font-size: 16px;
    color: #fff;
    background: #800;
    content: "live";
    left: 0;
    position: fixed;
    bottom: 0;

which looks like this:


Whereas the local development version looks like this:

Red = Caution, Green = Go!