Как запретить браузерам кэшировать CSS-файлы?

Question

Когда я создаю страницу, связываю ее с файлом CSS и открываю ее в браузере, она отлично работает. Но если внести изменения и обновить страницу снова между очень короткими периодами времени, изменение не отражается. Но через некоторое время, когда я снова обновляю страницу, появляются изменения.

Итак, браузер каким-то образом сохраняет CSS-файл в кеше и истекает через некоторое время. Как сделать так, чтобы браузер не кэшировал файлы CSS или HTML. Было бы лучше, если бы я мог заблокировать его на определенном домене.

Я в Ubuntu, использую Chrome и Firefox, пытаюсь запретить браузерам кэшировать CSS-файлы на 'localhost' ... Как это сделать ...

Спасибо ...

Answer 1

Что-то настолько простое, как это должно работать:

<link rel="stylesheet" src="/css/screen.css?v={CURRENT_TIMESTAMP}">

Просто замените {CURRENT_TIMESTAMP} фактической отметкой времени в коде на стороне сервера.Это заставляет браузер думать, что это новый файл из-за строки запроса, и он будет загружен снова.Вы также можете использовать фактическое время изменения файла (filemtime('/path/to/css/screen.css'), если вы используете PHP), что должно предотвратить ненужные загрузки.

Answer 2

Вы можете открыть Инструменты разработчика, нажав Ctrl+Shift+J, и тогда вы увидите значок шестеренки внизу справа.При нажатии на нее вы должны увидеть возможность отключить кеширование.

Answer 3

Было бы полезно узнать, как размещается веб-сайт, поскольку вы можете настроить это на большинстве веб-серверов.

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

Хорошим примером механизма очистки кэша является конвейер ресурсов ruby ​​on rails 3.1, который также минимизирует файлы и архивирует их, если браузер их поддерживает:

Rails 3 - Asset Pipeline -- Что это значит для меня?

http://2beards.net/2011/11/the-rails-3-asset-pipeline-in-about-5-minutes/

Answer 4

Казалось бы, не элегантный, но надежный подход - дать активу новое имя при изменении содержимого. Это решает проблему для всех ваших пользователей, а не только для вас:

<link rel="stylesheet" src="/css/screen_034.css">
<link rel="stylesheet" src="/css/screen_035.css">
<link rel="stylesheet" src="/css/screen_036.css">

Или, может быть (но изменение в IDE сопряжено с большими трудностями, а иногда вызывает проблемы, связанные с кэшированием):

<link rel="stylesheet" src="/css/screen.css?pretend_version_number=034">

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

В разработке вы можете нажать Ctrl + Shift + J (Chrome) и отключить кеширование.