Stylesheet not updating when I refresh my site

Solution 1:

If your site is not live yet, and you just want to update the stylesheet at your pleased intervals, then use this: Ctrl + F5.

On Mac OS (in Chrome) use: Cmd + Shift + R.

This will force your browser to reload and refresh all the resources related to the website's page.

So every time you change something in your stylesheet and you wanna view the new results, use this.

Solution 2:

Most probably the file is just being cached by the server. You could either disable cache (but remember to enable it when the site goes live), or modify href of your link tag, so the server will not load it from cache.

If your page is created dynamically by some language like php, you could add some variable at the end of the href value, like:

<link rel="stylesheet" type="text/css" href="css/yourStyles.css?<?php echo time(); ?>" />

That will add the current timestamp on the end of a file path, so it will always be unique and never loaded from cache.

If your page is static, you have to manage those variables yourself, so use something like:

<link rel="stylesheet" type="text/css" href="css/yourStyles.css?version=1" />

after doing some changes in the file content, change version=1 to version=2 and so on.

If you wish to disable the cache from caching css files, refer to your server type documentation (it's done differently on apache, IIS, nginx etc.) or ask/search for a question on https://serverfault.com/

Assuming IIS - adding the key under <system.webServer> with the right settings in the root or the relevant folder does the trick.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <caching enabled="false" enableKernelCache="false" /> <!-- This one -->
    </system.webServer>
</configuration>

That said sometimes one still has to recycle the Application Pool to "bump" the CSS. Therefore: Disabling IIS caching alone is not a 100% guaranteed solution.

For the browser: There are some notes on fine-grain controlling the local cache on FF over on SuperUser for the interested.

Solution 3:

Easiest way to see if the file is being cached is to append a query string to the <link /> element so that the browser will re-load it.

To do this you can change your stylesheet reference to something like

<link rel="stylesheet" type="text/css" href="/css/stylesheet.css?v=1" />

Note the v=1 part. You can update this each time you make a new version to see if it is indeed being cached.

Solution 4:

This may not have been the OP's problem, but I had the same problem and solved it by flushing then disabling Supercache on my cpanel. Perhaps some other newbies like myself won't know that many hosting providers cache CSS and some other static files, and these cached old versions of CSS files will persist in the cloud for hours after you edit the file on your server. If your site serves up old versions of CSS files after you edit them, and you're certain you've cleared your browser cache, and you don't know whether your host is caching stuff, check that first before you try any other more complicated suggestions.

Solution 5:

I had a similar problem, made all the more infuriating by simply being very SLOW to update. I couldn't get my changes to take effect while working on the site to save my life (trying all manner of clearing my browser cache and cookies), but if I came back to the site later in the day or opened another browser, there they were.

I also solved the problem by disabling the Supercacher software at my host's cpanel (Siteground). You can also use the "flush" button for individual directories to test if that's it before disabling.