How can the user reset the browser cache and force him to download new css?

Question

css

Let's say the css file on my site has changed a little, I have corrected something in it.
The user enters the site and sees that everything has gone wrong and is crooked - in order for him to see everything, he must press F5 The
question is, can I make it so that the user's browser cache is automatically cleared and the css file is loaded again? Or is it possible to show the user a window "The site has been updated. click on the button for the changes to take effect" when updating the site.
Thanks in advance!
ps I saw that the web version of telegram has something similar, the window periodically pops out that the version is updated, but I don’t know what it does

Answer 1

In the project, store its version, the version of the project is, for example, the time of the last build, or at least a given number and changes with each update by hand.
Links to the style file, as well as js look like:
/path/to/file/file.js?VERSION
/path/to/file/file.css?VERSION
or configure mod_rewrite so that it understands links of the form (preferred) :
/path/to/file/file.VERSION.js
/path/to/file/file.VERSION.css
Also google grunt-version, webpack, frontend build

Answer 2

add a parameter to the included css file, such as creation time

<link rel="stylesheet" href="your_file.css?timestampcreate">