不同的背景颜色取决于 URL答案

【问题标题】：Different background color depending on URL不同的背景颜色取决于 URL
【发布时间】：2022-11-24 03:53:37
【问题描述】：

我想强调从何处加载 Web 应用程序：本地开发环境与测试或生产环境。为了简单起见，该机制应该只适用于 CSS。但到目前为止，我的 CSS 是一个静态文件。

是否可以编写一个 CSS 在浏览器上评估要使用的背景颜色，可能基于它从中加载的 URL（本地主机与其他主机）？

不知何故，我希望得到一个基于CSS Conditional Rules 的解决方案。

【问题讨论】：

标签： css

【解决方案1】：

我认为使用 CSS 不可能做到这一点，但是您可以使用 JavaScript 来做到这一点。检查当前访问的 URL 是否包含某个字符串。那么改变样式，当然你也可以在if语句中添加一个类。

如果你在答案中运行这个 sn-p 它是蓝色的，如果你在你的本地主机上运行这个 sn-p 它将是红色的。

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

以下屏幕截图将显示它如何根据在浏览器中输入的 URL 有效地更改背景颜色。

名称中没有 localhost；

名称中带有localhost；

要忽略主机名后面的所有内容，只查看主机名和端口，您可以使用 location.host，如以下 sn-p 所示。

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

【讨论】：

忽略数组，这是我目前正在经历的测试的一部分
好吧，我可以尝试匹配 `://localhost` 这样问题就不会真正发生了。但它将任务转移到将 JavaScript 添加到我的 UI 框架中。那时我会试着调查一下。
好的，很高兴我能提供帮助。
@HiranChaudhuri 只是出于好奇，您使用的是什么 UI 框架？ :)
为了原因我还在 Vaadin 8

【解决方案2】：

虽然公认的答案对我的问题是正确的，但我找到了一个解决方案，我想与他人分享，也可能与未来的自己分享。

由于在 Vaadin 8 中无法将 JavaScript 直接添加到生成的 HTML 输出中（请参阅here 和here），因此我可以更轻松地稍微更改应用程序。

所以在应用程序中我添加了这样的代码。我知道它不会检查请求是否发送到本地主机 - 但它会检查客户端是否与服务器位于同一台机器上，这本质上是相同的。

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");
        }
    }
}

现在由于使用了一个新的 CSS 类名，对 CSS 进行简单的调整就可以达到目的：

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

【讨论】：