Browsers won't read updated CSS_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-25 10:07 出处：网络

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 <

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 se开发者_JS百科rves 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.

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.

Since you can't control browser cache, I would suggest you give versions to your css file. Like global.1.11.css.