我的 CSS 没有改变,为什么?

2022-01-19 00:00:00 web caching frontend html css

所以几周后,我重新开始编码,但遇到了问题.

So after many weeks, I got back to coding and I've got a problem.

我正在处理的项目包含 PHP 网站的基本内容,现在我正在尝试重新设计我的主页.

The project I was working on contains the basic stuff of a PHP site and now I'm trying to re-design my homepage.

问题是,每次我删除或更改 CSS 中的某些内容时,设计永远不会像冻结或其他什么一样发生变化,并且每个页面都会发生这种情况.当我在我的 HTML 中删除指向 CSS 的链接时,设计就消失了.代码如下:

The problem is, that everytime I delete or change something in the CSS, the design never changes as if it's like frozen or something, and it happens for every page. When I delete the link to the CSS in my HTML, the design goes away. Here's the code:

var scrolled=0;
    $(document).ready(function() {
        $("#master").click(function() {
            $("#holder").slideToggle('slow');
        });
                
        $("#down").on("click" ,function() {
            scrolled=scrolled+300;
            $("#solut").animate({
                scrollTop: scrolled
            });
        });
    });

@font-face {
      font-family: 'FontAwesome';
      src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
      src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    
    body {
        margin: 0;
        padding: 0;
        background-color: #e0e0e0;
        overflow-x: hidden;
    }
    .navbar {
        width: 100%;
        height: 60px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="icon" href="assets/logo.png" />
        <link href="css/font-awesome.min.css" rel="stylesheet" />
    </head>
    <body>
        <center>
          //code goes here: bunch of divs and texts
        </center>
    </body>
    </html>

推荐答案

在没有short run-through-guide、readme或自动化任务的基本列表在运行和测试网站时可能会导致一些不需要的副作用.

Getting back to an old project without a short run-through-guide, readme or a basic list of automated tasks can lead to several, unwanted side effects, when running and testing the website.

以下是我之前遇到的一些情况:

Here are some of what I've met before from the top of my head:

  • 浏览器缓存:在 Chrome 中打开 DevTools,然后通过单击 清空缓存和硬重新加载 (Ctrl+Shift+F5).如果没有帮助,请给您的 CSS 起一个类似的名称:(更多关于缓存爆裂):<link href="css/index.css?v=1.0.1" rel="stylesheet"/>

  • Browser cache: Open DevTools in Chrome, then reload the page by clicking Empty Cache and Hard Reload (Ctrl+Shift+F5). If it doesn't help, give your CSS a name like: (more on cache-bursting): <link href="css/index.css?v=1.0.1" rel="stylesheet" />

框架缓存:如果您使用带有资源缓存的框架,请将其删除/清空.这取决于您使用的框架(如果有).

Framework cache: If you use a framework with resource caching, delete/empty it. It depends on what framework you use, if any.

CSS Transpiler 不运行:如果你使用一些 transpiler (SASS、LESS 等),有时会忘记运行转译.

CSS Transpiler does not run: If you use some transpiler (SASS, LESS, etc.), sometimes running of the transpilation is forgotten.

在移动设备上进行测试:他们可以并且经常进行缓存,只是在开发过程中使用缓存爆发.

Testing on mobile devices: They can and do cache often, just use cache-bursting during development.

路径错误/无法访问文件:检查您的 网络服务器日志 了解问题所在.

Wrong paths/inability to access files: Check your webserver logs to get what's wrong.

不是真的编辑文件:如果您更喜欢 IDE(例如:IntelliJ IDEA ;)) 并且当您编辑特定文件,保存它,然后上传它(例如:通过 FTP)时,可能会发生 特定文件赢得'没有得到更新.更多信息.

Not REALLY editing the file: If you prefer an IDE (e.g.: IntelliJ IDEA ;)) and when you edit the specific file, save it, then upload it (e.g.: via FTP), it can happen, that the specific file won't get updated. More on this.

相关文章