Browsers all cache the stylesheets of websites for a while once you’ve visited a site (or page) once. They do this to make the pages load faster when you visit again and for published websites that aren’t changing, it’s not a problem, as the fresh content still displays well.
However, when your website is in development and style changes are being made, it means that you can open a page that has been changed and not be able to see the changes.
Here’s where hard-refresh comes in. This forces the browser to fetch the edited stylesheet.
On a computer:
If using Chrome or Firefox, go to the page that has changed and click CMD+SHIFT+R
There are some situations where even this does not clear something in Chrome—in which case, you can go to the three dots at the top right of the browser window and select “Clear Browsing Data” then select “Clear images and files” for the period of time since a change was made and that clears things.
If using Safari, go to the page that has changed and click CMD+OPTION+E
If using Microsoft Edge,, go to the page that has changed and click CTRL + SHIFT + R
These options all enable you to clear the the browser cache without losing any history or data.
On an iPhone:
Go to Settings > Safari > Clear History & Website Data.
You’ll need to re-enter the url to get the page after this as this closes all your currently-open pages.
