Different background color depending on URL

Question

I'd like to emphasize where a web application is loaded from: the local development environment vs a test or production environment. To keep things simple, the mechanism should work just on CSS. But so far my CSS is a static file.

Is it possible to write a CSS that evaluates on the browser what background color to use, maybe based on the URL it was loaded from (localhost vs other hosts)?

Somehow I am hoping to get a solution based on CSS Conditional Rules.

FUZIION · Accepted Answer · 2022-11-24T10:00:35.983

5

I don't think this is possible using CSS, however you can do this using JavaScript. Checking if the current URL that is visited contains a certain string. Then changing style, you can also of course add a class within the if statement.

If you were to run this snippet in the answer it is blue, if you run this snippet on your localhost it will be red.

if (window.location.href.indexOf("stackoverflow") > -1) {
  document.body.style.backgroundColor = 'red';
} else {
  document.body.style.backgroundColor = 'blue';
}

The following screenshots will show how it effectively changes the background color based on the URL entered in the browser.

Without localhost in the name;

With localhost in the name;

To ignore everything that comes after the hostname and only take a look at the hostname and port you can use location.host seen in the following snippet.

if (window.location.host.indexOf("localhost") > -1) {
  document.body.style.backgroundColor = 'red';
} else {
  document.body.style.backgroundColor = 'blue';
}

edited Nov 24 '22 at 10:00

answered Nov 23 '22 at 14:10

FUZIION

1,606
1
6
19

ignore the array, that is part of a test I am currently experiencing with – FUZIION Nov 23 '22 at 14:22
Well, I could try to match ` ://localhost` so the problem does not really occur. But it moves the task to adding JavaScript to my UI framework. I will try to look into that then. – Queeg Nov 23 '22 at 14:22
Alright glad I could help. – FUZIION Nov 23 '22 at 14:26
@HiranChaudhuri just out of curiosity, what UI framework are you using? :) – VilleKoo Nov 23 '22 at 14:35
For _reasons_ I am still on Vaadin 8 – Queeg Nov 23 '22 at 14:36
1

@FUZIION Yes, the answer is much better with screenshots. – Parking Master Nov 23 '22 at 17:29

Queeg · Answer 2 · 2022-11-23T19:47:49.497

While the accepted answer is the correct one to my question, I found a solution that I want to share with others and possibly my future self.

Since in Vaadin 8 it is not possible to directly add JavaScript into the generated HTML output (see here and here) it was easier for me to change the application slightly.

So in the application I added code like this. I am aware it does not check if the request was going to localhost - yet it checks that the client is on the same machine as the server, which essentially means the same.

public class App extends UI implements View {

    @Override
    protected void init(VaadinRequest request) {
        if ("127.0.0.1".equals(request.getRemoteAddr()) || "localhost".equals(request.getRemoteAddr())) {
            this.addStyleName("dev-environment");
        }
    }
}

Now as there is a new CSS class name in use, a simple tweak on the CSS did the trick:

// emphasize we are on localhost. The application sets the class name 'dev-environment' in this case
.dev-environment {
    background-color: #EEF0FF;
}

Different background color depending on URL

2 Answers2