我想强调一个web应用程序从何处加载:本地开发环境还是测试或生产环境。 为了简单起见,机制应该只在CSS上工作。但到目前为止,我的CSS是一个静态文件。
是否可能编写一种CSS,根据浏览器上加载的URL(localhost vs其他主机)来评估使用什么背景颜色?
我希望能够基于CSS条件规则获得解决方案。
我不认为这是使用CSS实现的,但你可以使用JavaScript来实现。检查当前访问的URL是否包含特定字符串,然后更改样式,当然你也可以在if语句中添加一个类。
如果您在答案中运行此代码段,则为蓝色,如果您在本地主机上运行此代码,则将为红色。
if (window.location.href.indexOf("stackoverflow") > -1) {
document.body.style.backgroundColor = 'red';
} else {
document.body.style.backgroundColor = 'blue';
}
location.host
。
if (window.location.host.indexOf("localhost") > -1) {
document.body.style.backgroundColor = 'red';
} else {
document.body.style.backgroundColor = 'blue';
}
虽然被接受的答案是我问题的正确答案,但我找到了一个解决方案,我想与他人分享,也可能是未来的自己。
由于在Vaadin 8中不可能直接将JavaScript添加到生成的HTML输出中(请参见此处和此处),因此对我来说更容易稍微更改应用程序。
所以在应用程序中,我添加了像这样的代码。 我知道它没有检查请求是否要去本地主机 - 但它检查客户端是否在与服务器相同的计算机上,这基本上意味着相同。
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;
}
://localhost
,这样问题就不会真正发生。但是这将把任务移交给向我的 UI 框架添加 JavaScript。那我会尝试研究一下。 - Queeg