Let’s Talk About How to Clear The CSS Cache

1. Clear CSS cache

Clearing the CSS cache usually means that the browser has stored an old version of the CSS file, resulting in no change in the page style even if the file is updated.

To solve this problem, there are several approaches you can take:

1.1. Developer Operation:

1. Force refresh the page:

• Press Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac) in Chrome or Firefox to refresh the page. This will force the browser to reload resources instead of using the cache.

2. Clear your browser cache:

• Go to the browser's settings, find the Clear browsing data option in the privacy or advanced settings, and select Clear cache files and images.

3. Check the console for errors:

• Use the browser developer tools to check the Network panel to see if any CSS files fail to load or have a status code of 304 (Not Modified).

1.2. Code level

1. Modify the file name

Each time you release a new version, you can manually modify the name of the CSS file, such as from styles.css to styles_v2.css.

2. Adding a query string

When referencing a CSS file in HTML, you can add a version number or timestamp as part of the query string after the URL, for example:

<link rel="stylesheet" href="styles.css?v=1.0">
1.

• Or using timestamp:
  copy

  <link rel="stylesheet" href="styles.css?ts=1607768852">
  1.

3. Using hash values

Build tools such as Webpack can automatically add hash values ​​to file names to ensure that the file names after each build are unique, for example:

<link rel="stylesheet" href="styles.e4bca2d.css">
1.

1.3. Server Configuration

• HTTP Cache Headers

Set appropriate HTTP response headers on the server, such as Cache-Control and Expires, to control the length of the cache. For example, you can set a short-term cache:

Cache-Control: max-age=3600
1.

Or set a longer time, but use version control or hashing to ensure that expired resources are not used:

Cache-Control: max-age=31536000
1.

These methods can help you effectively manage and clear CSS cache in different scenarios. Choose the most suitable method according to the actual situation of the project and the technology stack.