When Keza designs new websites and then shares our development links with clients, we sometimes run into issues where the styling doesn’t quite look the way it should. Occasionally this is due to server caching, but most often when we see one thing and the client sees another, it’s due to their web browser caching an old version of the stylesheet (or other files) and loading that instead of the updated version.
Browsers do this all the time in order to speed up your web experience, and it’s usually not a serious problem. However, when we update a file today, and you’re looking at a website with a file from a few days ago, it often leads to problems. Thankfully there’s a few quick ways around browser caching problems.
PERFORM A FORCE REFRESH
A force refresh clears the browser’s cache for a specific page and forces it to load the most recent version of the stylesheet.
Chrome – Windows
- Press and hold down Control (Ctrl) and click the Reload button.
- Or press and hold down Ctrl and click F5.
- Or open the Chrome Dev Tools by pressing and holding down F12. Once the Chrome Dev Tools are open, right click on the Refresh button and an options menu will drop down. This menu gives you the choice of performing a hard refresh, or clearing the cache and doing a hard refresh automatically.
Chrome – Mac
- Press and hold the Shift key and click the Reload button.
- Or hold press and hold down the Command (Cmd) and Shift key and then press R.
Mozilla Firefox – Windows
- Press and hold down the Control (Ctrl) key and press the F5 key.
- Or hold down Ctrl and Shift keys and then press R.
Mozilla Firefox – Mac
- Press and hold down the Shift key and click the Reload button.
- Or hold down both the Command (Cmd) and Shift keys and then press R.
CLEAR YOUR CACHE / BROWSING HISTORY
Clearing your browser cache will usually solve any lingering display issues, but take note that this will effect all of your recent website browsing, not just development sites. Saved information will be cleared such as shopping carts, as well as login credentials.
Firefox and Chrome
Press Ctrl + Shift + Delete (Windows) or Cmd + Shift + Delete (Mac) to open the appropriate window.
Safari (Mac)
Press Opt+Cmd+E.
Safari (iOS)
- Go to Settings
- Scroll down to the option for Safari
- Scroll down and select Clear Cookies and Data
- A pop-up will come up verifying that you want to clear the Cookies and Data. Select Clear.
- The button for Clear Cookies and Data should turn gray.
PRIVATE/INCOGNITO MODE
Most browsers offer a “Private” or “incognito” mode that disallows all tracking and cookies, and also uses all-new content instead of cached data. We often use this mode for testing internally, and recommend our clients use it as well.
Chrome
Select New incognito window or hit CTRL + SHIFT + N (Windows) or CMD + SHIFT + N (Mac)
Firefox
Select New Private Window or hit CTRL + SHIFT + P (Windows) or CMD + SHIFT + P (Mac)
Safari
Choose File > New Private Window or hit CTRL + SHIFT + N (Windows) or CMD + SHIFT + N (Mac)
Safari (iOS)
On your iPhone, iPad, or iPod touch, open Safari, then tap. Tap Private, then tap Done.
While Private Browsing is on, Safari appears black or dark instead of white or gray.