Браузеры не будут читать обновленный CSS - PullRequest
Новая
       4

Браузеры не будут читать обновленный CSS

10 голосов
/ 13 апреля 2011

РЕДАКТИРОВАТЬ: мои искренние извинения!Это не было проблемой ни с чем, кроме меня - у меня был файл global.css с правильным содержимым, но ниже я включил другой файл со старым CSS в нем, в бит <head> моего HTML.Facepalm.

У меня есть сайт, который я разрабатываю.Я использую LESS, чтобы улучшить свой CSS, чтобы было легче писать.Проблема в том, что когда я изменяю файл .less, стили, отображаемые в браузере, отказываются меняться.Я посмотрел в сгенерированном файле .css, и он обновляется, чтобы отразить сделанные изменения, однако браузер не обновляет свой визуализированный стиль из файла CSS.Я пробовал это в Chrome, FF (3 и 4) и Opera с одинаковыми результатами без обновления.

Я даже сказал браузеру ничего не кэшировать, как с помощью PHP, так и с метатегамибезрезультатно.Мой конфигурационный файл Apache почти ванильный, хотя я использую несколько локальных хостов (это локальный сервер).Код, используемый для преобразования LESS в CSS, приведен ниже и запускается при каждой перезагрузке страницы: 

try 
{
    lessc::ccompile('global/global.less', 'global/global.css');
} 
catch(exception $ex) 
{
    exit('lessc fatal error:<br />' . $ex->getMessage());
}

Здесь нет исключений.синтаксический анализатор less.php проверяет, был ли изменен файл, который я немного удалил, но файл CSS заново генерируется при каждом изменении, так что это должно быть проблемой кеширования где-то в браузере ... Apache обслуживаетОбновленный файл CSS просто отлично: - /

Извините, что продолжаю так долго, но я хотел быть ясным.Если вам нужно что-то еще, дайте мне знать.

Ответы [ 3 ]

20 голосов
/ 13 апреля 2011

Однажды я увидел в коде использование метки времени, чтобы браузер загружал файлы css и js при каждом запросе, таким образом: 

<link rel="stylesheet" type="text/css" href="http://www.example.com/style.css?ts=<?=time()?>" />

?ts=123456789 заставляет браузер перезагружать файл всякий раз, когда число отличается от предыдущего.

Поэтому я принял идею, но вместо отметки времени now я использую отметку времени изменения файла style.css; поэтому он кэшируется в браузере, пока не будет изменен на сервере: 

<link rel="stylesheet" type="text/css" href="http://www.example.com/style.css?ts=<?=filemtime('style.css')?>" />
1 голос
/ 25 января 2014

Я использую LESS и Laravel, и, наконец, я нашел хорошее решение:

В моем теге <head> у меня есть:

<link rel="stylesheet/less" type="text/css" href="/less/main.less?ts={{FileHelper::getMostRecentModifiedTimeInFolder(realpath(public_path() . '/less'))}}" />

Затем я также создал класс FileHelper (на основе 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;
    }

}

. Я мог бы решить использовать этот подход только на моем локальном сервере разработки и использовать другой подход для производства, чтобы он не всегда проверял файлвременные метки на каждой странице загрузки.

0 голосов
/ 13 апреля 2011

Поскольку вы не можете контролировать кеш браузера, я бы посоветовал вам предоставить версии для вашего CSS-файла.Как global.1.11.css.

...