Menu
EDIT: My sincere apologies! This wasn't an issue with anything but myself - I had a global.css file with correct stuff in it, but below that I included another file with the old CSS in it, in the <head> bit of my HTML. Facepalm.
I have a site I'm developing. I'm using LESS to enhance my CSS to make it easier to write. The problem is, when I change the .less file, the styles rendered in the browser refuse to change. I've looked in the generated .css file, and that updates to reflect the changes made, however the browser doesn't update it's rendered style from the CSS file. I've tried this in Chrome, FF(3 and 4) and Opera, with the same non-updating results.
I've even told the browser to cache nothing, both with PHP and meta tags, to no avail. My Apache config file is almost vanilla, although I am using multiple localhosts (this is a local server). The code used to convert LESS to CSS is given below, and is run every time the page is reloaded:
try
{
lessc::ccompile('global/global.less', 'global/global.css');
}
catch(exception $ex)
{
exit('lessc fatal error:<br />' . $ex->getMessage());
}
There are no exceptions here. the less.php parser checks if the file has been modified, which I removed for a bit, but the CSS file is re-generated on every change, so this must be a caching issue with the browser somewhere... Apache serves up the updated CSS file just fine :-/
Sorry to go on for so long, but I wanted to be clear. If you need anything else, do let me know.
587
Browser Cache If you are adding/modifying in-line CSS or JavaScript and not seeing the changes reflected in the HTML source, the page is likely being cached. The solution may be to purge the WordPress object cache, which stores our page caching (Batcache) renders.
Anytime you make changes to CSS, JavaScript and are viewing the page you've updated - you will see this concern. You can force a refresh by pressing CTRL+F5 on the browser and that will get the latest version.
Make sure that your CSS and HTM/HTML files use the same encoding ! If your HTM/HTML files are encoded as UNICODE, your stylesheet has to be as well. IE and Edge are not fussy : stylesheets are rendered regardless of the encodings. But Chrome is totally intolerant of unmatched encodings.
This usually happens when the browser serves a cached version of your CSS file. To invalidate the cache and serve the latest version of your CSS file, you can perform a hard reload on the browser.
Once I saw in a code the use of timestamp to force the browser to download the css and js files every request, that way:
<link rel="stylesheet" type="text/css" href="http://www.example.com/style.css?ts=<?=time()?>" />
The ?ts=123456789 forces the browser to reload the file whenever the number is different from the previous one.
So I adopted the idea, but instead of timestamp of now, I use timestamp of the modification of file style.css; so it's cached in the browser until be modified on the server:
<link rel="stylesheet" type="text/css" href="http://www.example.com/style.css?ts=<?=filemtime('style.css')?>" />
I'm using LESS and Laravel, and I finally figured out a good solution:
In my <head> tag, I have:
<link rel="stylesheet/less" type="text/css" href="/less/main.less?ts={{FileHelper::getMostRecentModifiedTimeInFolder(realpath(public_path() . '/less'))}}" />
Then I also created a FileHelper class (based on https://stackoverflow.com/a/6767411/470749):
<?php
class FileHelper {
public static function getMostRecentModifiedTimeInFolder($path)
{
//https://stackoverflow.com/a/6767411/470749
$iterator = new DirectoryIterator($path);
$mtime = -1;
foreach ($iterator as $fileinfo) {
if ($fileinfo->isFile()) {
if ($fileinfo->getMTime() > $mtime) {
$mtime = $fileinfo->getMTime();
}
}
}
return $mtime;
}
}
I might decide to use this approach only on my local development server and use a different approach for production so that it's not always checking file timestamps on every page load.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
