Подтвердить что ты не робот

Как предотвратить кеширование CSS на веб-странице?

Я учусь разрабатывать xhtml, css веб-страницы. Часто я делаю изменения в CSS, но он не отражается на странице из-за кеширования браузеров, и если я вручную очищаю cahceing, он показывает последние эффекты кода. Есть ли что-то, что я могу добавить в код, чтобы заставить browker не кэшировать материал? Любые советы пожалуйста

4b9b3361

Ответ 1

Вы можете добавить случайный параметр запроса к URL-адресу таблицы стилей (например, с помощью javascript или кода на стороне сервера). Он не будет изменять загружаемый файл css, но это предотвратит кеширование, поскольку браузер обнаруживает другой URL-адрес и не загружает кэшированную таблицу стилей.

<link rel="stylesheet" type="text/css" href="http://mysite/style.css?id=1234">

Ответ 2

Вы можете создать класс с методом GetVersion, который вернет вашу версию приложения (или, например, номер сборки или дату сборки).

Для приложения asp.net в разметке вы можете указать что-то вроде этого:

<script src="Scripts/some.js?version=<%= Common.GetVersion%>" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="~/styles/Style.css?version=<%= Common.GetVersion%>" />

Это заставит браузер перезагружать файлы, потому что часть URL-адреса для статических файлов будет изменена каждая сборка (или, по крайней мере, каждая версия).

Ответ 3

Если вы используете Chrome в качестве браузера разработки, есть 2 варианта:

1) Когда вы удерживаете кнопку страницы перезагрузки на секунду, появится меню и предложит перезагрузить жесткую страницу.

2) В настройках инспекторов вы можете заставить браузер никогда не кэшировать файлы.

enter image description here

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

Ответ 4

Без улова: Поместите переменные строки в конец пути css, как показано ниже:

<link rel="stylesheet" type="text/css" href="style.css?2016-12-3:10 13 30"/>

Обновить при изменении версии:

<link rel="stylesheet" type="text/css" href="style.css?v=1.1.0"/>

Ответ 5

Вы можете использовать случайный идентификатор версии в своей ссылке. например, используйте это:

<link   href=<%="'mystyle.css?version="+ DateTime.Now.ToString("yyyyMMddhhmmss") +"'"%>   rel="stylesheet" type="text/css"/>

где myStyle.css - файл таблицы стилей и функция DateTime.Now.ToString( "yyyyMMddhhmmss" ), используемая для генерации произвольного идентификатора версии. Используя этот случайный идентификатор версии, браузер заставил перезагрузить ваш css.

Ответ 6

Это можно сделать через файл .htaccess. Поместите этот код в файл с именем .htaccess в корень вашего сайта:

<filesMatch "\.(html|htm|js|css)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</filesMatch>

Ответ 7

вместо написания тега <link> с использованием HTML просто используйте PHP-код. внутри тега <link> в конце используйте функцию php mt_rand(), которая выдаст случайное число и, следовательно, ваша таблица стилей никогда не будет кэширована. <?php echo "<link rel='stylesheet' type='text/css' href='style.css?'".mt_rand().">"; ?>

Ответ 8

Так как тег ASP.net также включен в вопрос, я хотел бы расширить ответ максима Корнилова (fooobar.com/questions/306839/...) на то, как я использовал его идею сделать URL-адреса специфичными для веб-приложения для сборки на ASP.net MVC (его Например, в синтаксисе веб-форм ASP/ASP.net вместо MVC и более новом синтаксисе Razor в Razor Pages:

1) Добавлен в основной класс веб-приложения (назывался MvcApplication) в Global.asax.cs

#region Versioning

public static string Version => typeof(MvcApplication).Assembly.GetName().Version.ToString(); //note: syntax requires C# version >=6

public static DateTime LastUpdated => File.GetLastWriteTime(typeof(MvcApplication).Assembly.Location);

#endregion

someProperty => Синтаксис someReadOnlyExpression - это просто сокращение для someProperty {get {return...;}}, возможного с С# 6

2) в его файле Content/_Layout.cshtml я использовал следующее для отображения номера сборки и даты сборки (на основе основной сборки веб-приложения) в нижнем колонтитуле страницы:

Version @ViewContext.Controller.GetType().Assembly.GetName().Version (@string.Format("{0:yyyy/MM/dd-HH:mm:ss}", @File.GetLastWriteTime(ViewContext.Controller.GetType().Assembly.Location)))

который я изменил на более простой:

Version @somewebappname.MvcApplication.Version (@string.Format("{0:yyyy/MM/dd-HH:mm:ss}", somewebappname.MvcApplication.LastUpdated))

3) он загружал CSS через жестко закодированную ссылку в _Layout.cshtml (все еще рефакторинг), которую я изменил на:

<link href='@Url.Content("~/Content/Site.css?version=" + somewebappname.MvcApplication.Version)' rel="stylesheet" type="text/css" /> 

так что если кто-то щелкнет правой кнопкой мыши на веб-странице, и они просматривают источник, он увидит:

<link href='/Content/Site.css?version=2.1.5435.22633' rel="stylesheet" type="text/css" /> 

то есть URL-адрес CSS зависит от версии благодаря фиктивной версии параметра

Если бы вместо этого использовалось случайное число, оно получало бы CSS при каждой загрузке страницы, что обычно нежелательно, особенно если вы уже загружаете новую сборку веб-приложения вместо изменений отдельных страниц на веб-сервере (так что у вас есть доступ к сборке номер, который можно вставить в URL).

Обратите внимание, что для достижения автоматического увеличения номера сборки в файле Properties/AssemblyInfo.cs у меня есть (см. Как получить автоматически увеличивающийся номер версии (Visual Studio)?):

// Version information for an assembly consists of the following four values:
//
//      Major Version
//      Minor Version 
//      Build Number
//      Revision
//
// You can specify all the values or you can default the Revision and Build Numbers 
// by using the '*' as shown below:
[assembly: AssemblyVersion("1.0.*")]
//[assembly: AssemblyFileVersion("1.0.*")] //don't use boh AssemblyVersion and AssemblyFileVersion with auto-increment

Ответ 9

Нажимайте F5 клавишу 5-6 раз непрерывно или очищайте свою историю.... Это не постоянное решение, а решение, которое работает для меня..