css - :root CSS not loaded sometimes?

Question

我正在使用 ASP.net 和 MVC5 和 Razor 开发一个网络应用程序。

我在我的 CSS 中使用了一些变量来处理我的样式中的重复值，我是这样做的:

:root {
    --base-color: #15616b;
    --color-bg-b-1: #15616b;
    --color-bg-b-2: #1a8b97;
    --color-bg-b-3: #6ca9b3;
    --color-bg-b-4: #a0c0c6;
    --small-tile-text: #297d88;
    --color-tile-shock: var(--color-bg-b-2);
    --color-tile-alarm: #3ab5b0;
    --color-tile-inactive: #a8dad8;
    --color-glyph-help: var(--color-bg-b-3);
    --color-h2: var(--color-bg-b-2);
    --color-loader: var(--color-bg-b-2);
    --color-form-title: #297d88;
    --color-button: #009688;
    --color-selected-row: #009688;
    --color-label: #297d88;
    --color-mybtn-hover: var(--color-bg-b-2);
    --color-mybtn: #3ab5b0;
}

有时，当我部署新版本的应用程序时，这些值没有加载，我需要刷新页面才能正确看到我的页面。

该问题出现在不同的浏览器中。

我做错了什么？这可能是由于这一行:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700);

也许如果加载失败(有时 Chrome 会阻止它)其他一切都会发生？

附言。我在网上看到使用 CSS 变量可能不好，有更好的方法吗？

Answer 1

这可能是由于浏览器缓存，这就是为什么它会在另一次刷新后工作。

您可以使用缓存清除器来确保您部署的版本是您想要的版本。

缓存破坏者可能会在包含的末尾添加时间戳，例如:

//Pre cache buster
<link href="stylesheet.css" type="text/css" rel="stylesheet">

//Post cache buster
<link href="stylesheet.css?1522063943" type="text/css" rel="stylesheet">

这会强制浏览器再次获取样式表，因为从技术上讲它是一个不同的 url。

CSS 变量根本不是一个坏主意，但是我不建议像您那样将变量放在变量内部:

--color-h2: var(--color-bg-b-2);