时间戳

首页 > 解决方案 > CSS为缓存创建问题？

html - CSS为缓存创建问题？

问题描述

我正在制作一个网站，在使用 css 进行了一些编码之后，我将数据推送到了我的主机上。但是，网站 css 并没有显示应该是什么！我在这里得到了很多支持，discord 和 namecheap（我的主机）。他们都说这与浏览器缓存有关。

在做了一些实验后，我得出结论，它会随着 wifi 连接而改变。我去了学校的 wifi，css 看起来很正常，但回到家它看起来不像它应该的样子。

我隔离了错误，发现它与 1 个 css 文件有关。但是在将相同的代码放入不同的文件后，它工作正常。当然，当我将代码放入不同的文件时，代码确实发生了变化，因为之前有 css。

这是似乎导致它的代码：

h1 {
  font-family: "JetBrains Mono ExtraBold", monospace;
  color: #2474ff;
  text-align: left;
  float: left;
  margin: 5px 30px;
  font-size: xxx-large;
  box-shadow: 0 0 25px 5px #0ff;
  border: solid dodgerblue 4px;
  border-radius: 15px;
  animation: crazy 3s infinite;
}

@keyframes crazy {
  50% {box-shadow: 1px 2px 3px blue}
} 

.content {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  border: 4px solid dodgerblue;
  box-sizing: border-box;
  width: 300px;
  height: 500px;
  padding: 5px;
  display: block;
  border-radius: 10px;
}
.content h3{
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}
button {
  font-family: "JetBrains Mono ExtraBold", monospace;
}
a {
  float: left;
  margin-left: 15px;

现在问题已解决，但我想知道为什么会这样。

标签： htmlcsshosting

解决方案

这是浏览器缓存的预期行为；这不是错误。您的浏览器“记住”它已经下载的文件，并将该数据保存在本地一段时间，而不是重新加载和重新读取它，以便更有效地加载网站。

因为，在您开发和频繁更改文件时，您不希望出现这种行为，因此您可以做很多事情。这些才一点点：

• Web 浏览器中内置的开发人员工具，例如 Chrome Inspector（这也将在许多其他方面有利于您的开发）将设置在浏览器缓存处于活动状态时禁用浏览器缓存，因此每次刷新页面时，它都会自动下载最新的文件

• 您可以手动清除浏览器上的缓存。大多数浏览器都有这方面的快捷方式（例如，在按下重新加载按钮的同时按住 shift 键）

• 确保其他人的浏览器也下载最新版本的 css 文件的一种简单方法是在 css 链接的末尾添加一个查询字符串，并在每次更新时更改它。例如：（ <link rel="stylesheet" type="text/css" href="styles.css?v=1"> 下次您更新文件并希望确保每个人都能看到这些更改时，将 v=1 更改为 v=2）

推荐阅读