Can't see CSS style changes in Browser

Question

Okay guys. I'm not new to coding, I'd like to think I'm not stupid, but I'm at my wits end with this issue, and am running out of things to try.

Problem:
Trying to update a Wordpress stylesheet. I can't see changes in the browser no matter what I do, but my boss can make updates to it fine. This is only an issue on 3 sites so far (2 wordpress 1 custom built). Not all sites.

Things I've tried:

• updated css on wordpress - saves fine - looked at update date via FTP and the timestamp is new - refresh website, can’t see changes in stylesheet in browser

• downloaded css file via FTP, changes from wordpress update are there - try to add more changes/styles and re-upload - still can’t see stylesheet changes in browser.

• deleted all history of everything. Cache, browser data etc, in firefox, chrome, and safari - no changes seen in browser

• tried uploading files with dreamweaver - no changes seen

• tried flushing DNS cache in terminal with: sudo killall -HUP mDNSResponder, and sudo dscacheutil -flushcache - no changes seen

• updated the css file using filemanager on the host/server itself - no changes seen

• unplugged router, plugged back in - no changes seen

• tried uploading on WiFi, and directly plugged into the internet - no changes seen

• Tried viewing in chrome incognito - no changes seen

• Checked file permissions, Folders are 755, files are 644

• There is no caching plugin installed on wordpress. So nothing to be cleared there.

By 'no changes seen', I am actually looking at the stylesheet code in firebug/web inspector, and it looks like no changes have been made to the stylesheet whatsoever. Not that I just typed in a wrong CSS selector and it's not working.

Any suggestions on to what the heck is going on with my computer and how to fix it would be greatly appriciated. This is driving me nuts!! I'm using a Mac OS X 10.9.4

http://www.wareinterventions.com/wp-content/themes/ware/style.css

---

The last style I can see in the stylesheet is:

.hms-testimonial-group .cf-type

But I should be seeing these:

#test{}
#test2{}
#slider .caption span{
    color: red;
}
#slider .caption h2{
    color: green !important;    
}

Answer 1

I had a similar issue. My CSS and JS files couldn't be updated. I solved my problem with purging cache from Cloudflare DNS.

Cloudflare Dashboard > Caching > Configuration > Purge Everything

Answer 2

It seems cache issue.

1. Try CTRL+F5 which loads the fresh webpage,

2. If you are using Google Chrome > > More tools > Developer tools > Network, under that select Disable cache. (This feature will work only when developer tools window open)

3.You can use PHP or JavaScript to generate random css file(only for testing purpose).

PHP Code for Random Number{Server end}

 <link rel="stylesheet" href="style.css?v<?php echo(mt_rand(100,72)); ?>">

or

 <link rel="stylesheet" href="style.css?versionnumber">

JavaScript Version for Random Number {Client end}

<script type="text/javascript">
    window.onload = function(){
         var n = 205;
         var number = Math.floor(Math.random()*n)+1;
         document.getElementById("random").innerHTML = number;
    };
 </script>

Note: Always place Above JS script above your CSS link (like this).

<link rel="stylesheet" href="style.css?v<span id="random" ></span>">

Answer 3

Your browser is caching the CSS file. You can try going to the original link and doing Ctrl/Cmd + R (Ctrl/Cmd + Shift + R, hard reload) and see if that clears it.

The best way is to disable the cache using the browser's developer tools.

If you are on Chrome, click the Menu icon > More Tools > Developer Tools and click the gear icon. You should see an option to disable cache. For Firefox, click the Menu icon > Developer and click on Toggle Tools. Then click the gear and check disable cache.