Файл CSS не обновляется в моем браузере
Я сталкиваюсь с этой проблемой уже несколько недель. Я не знаю, почему, если я делаю какие-либо изменения в моем CSS-файле, он не отображается. Не отображается ни в одном браузере. Пожалуйста, скажите мне, как решить эту проблему.
12 ответов
На недели? Попробуйте открыть саму таблицу стилей (введя ее адрес в адресную строку браузера) и нажав клавишу F5. Если он все еще не обновляется, ваша проблема лежит в другом месте.
Если вы обновляете таблицу стилей и хотите убедиться, что она обновляется в кэше каждого посетителя, очень популярный способ сделать это - добавить номер версии в качестве параметра GET. Таким образом, таблица стилей обновляется при необходимости, но не чаще, чем это.
<link rel="stylesheet" type="text/css" href="styles.css?version=51">
Исправление называется "жесткое обновление" http://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache
В большинстве браузеров Windows и Linux: удерживайте нажатой клавишу Ctrl и нажмите клавишу F5.
В Apple Safari: удерживайте нажатой ift Shift и нажмите кнопку "Обновить" на панели инструментов.
В Chrome и Firefox для Mac: удерживайте обе клавиши ⌘ Cmd+⇧ Shift и нажмите R.
Хороший способ заставить ваш CSS перезагрузиться:
<link href='styles.css?version=1' rel='stylesheet'></link>
А затем просто увеличивайте номер версии, когда вы меняете свой CSS. Браузер будет подчиняться. Я считаю, что Stackru использует эту технику.
Я всегда использую Ctrl+Shift+F5 по привычке, это должно вызвать полное обновление, включая обход любых http-прокси, через которые вы можете проходить.
У меня была эта проблема, я почесал голову лучшую часть двух дней.
Оказывается, я полностью забыл, что у меня была настройка CloudFlare в домене, на котором я проводил тестирование.
CloudFlare кэширует ваш JavaScript и CSS. Включил режим разработки и БАМ!
Серьезно... два целых дня.
Делаем Shift+F5 в Windows. Кеш действительно расстраивает в такого рода вещи
Решение Ctrl+ F5 не сработало для меня в Chrome.
Но я нашел, как очистить кеш Chrome только для определенного веб-сайта (3 шага):
- По мере загрузки страницы откройте Инструменты разработчика Chrome (щелкните правой кнопкой мыши> Проверить) или (Меню> Дополнительные инструменты> Инструменты разработчика)
- Затем перейдите к кнопке "Обновить" в браузере Chrome и щелкните правой кнопкой мыши кнопку "Обновить".
- Выберите "Очистить кеш и полностью обновить".
Надеюсь, этот ответ кому-то поможет!
Имея эту проблему, прежде чем я нашел свое собственное ленивое решение (на основе предложений других людей). Это должно быть полезно, если ваш <head> содержимое проходит через интерпретатор php.
Чтобы принудительно загружать файл каждый раз, когда вы вносите в него изменения, вы можете добавить размер файла в байтах этого файла после знака вопроса в конце.
<link rel="stylesheet" type="text/css" href="styles.css?<?=filesize('styles.css');?>">
РЕДАКТИРОВАТЬ: Как предлагается в комментариях, filemtime() на самом деле является лучшим решением, если ваши файлы правильно обновили время модификации (я сам испытывал такие проблемы в прошлом, работая с удаленными файлами):
<link rel="stylesheet" type="text/css" href="styles.css?<?=filemtime('styles.css');?>">
Похоже, ваш браузер кеширует ваш CSS. Если вы используете Firefox, попробуйте загрузить страницу с помощью Shift-Reload.
Поскольку я обнаружил, что эта тема имеет ту же проблему, 10 ЛЕТ спустя, я также добавлю свое собственное решение. Я использую PHP большую часть времени, и вместо того, чтобы требовать от пользователя нажимать необычные кнопки для обновления страницы или от меня, чтобы не забыть увеличить номер версии, встроенный в ссылку, я использовал функцию filemtime(), чтобы получить время изменения файл css (как временная метка unix), а затем используйте этот номер в качестве параметра.
$FILE_TIME = filemtime("main.css");
$CSS_LINK = "main.css?version=$FILE_TIME";
В результате получается такой URL-адрес:
http://example.com/blah/main.css?version=1602937140
Это полностью отключает кеширование, поскольку каждый раз, когда страница обновляется, он будет считать, что ему нужно снова захватить файл CSS, измененный или нет... но это гораздо менее неприятно, чем забыть вручную обновить этот трюк и тратить время на размышления, почему это не не прав. Вы всегда можете удалить его с рабочего сервера.
Если вы используете простой HTML, вы, вероятно, могли бы разработать оболочку javascript или что-то подобное, но это, вероятно, больше проблем, чем оно того стоит.
Если вы используете веб-формы ASP.NET, убедитесь, что вы используете правильную тему:
Я просто потратил около часа, пытаясь решить эту проблему!
Вы пытались переименовать новую версию вашего CSS в CSSv2.css, а затем указали своей странице, чтобы использовать это? Если это решает проблему устаревших файлов, то вы просто не обновляете файлы. Если нет, у вас есть большие проблемы.
Причина, по которой это происходит, заключается в том, что файл хранится в "кеше" браузера, поэтому браузеру нет необходимости повторно запрашивать лист. Это происходит с большинством файлов, на которые ссылается ваш HTML - будь то CDN или на вашем сервере, например, таблица стилей. Жесткое обновление перезагрузит страницу и отправит новые запросы GET на сервер (и на внешний b, если необходимо).
Вы также можете очистить кеши в большинстве браузеров с помощью следующих сочетаний клавиш.
Safari: Cmd+Alt+e
Chrome и Edge: Shift+Cmd+Delete(Mac) и Ctrl+Shift+Del(Windows)
Это локальный пользовательский файл CSS? Это ваш сайт? Может быть, вы должны очистить кэш.
Также последнее объявление CSS имеет приоритет.
Я столкнулся с той же проблемой. Переименование файла сработало для меня.