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

Могу ли я принудительно обновить файл моей таблицы стилей?

Я только что провел полдня спокойно сошел с ума.

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

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

Есть ли способ принудительно обновить (желательно только во время отладки, я думаю)?

4b9b3361

Ответ 1

Популярным способом "кэширования" является добавление параметра в ваш источник css. Обычно используется временная метка. Я предпочитаю время последнего изменения файла, т.е. filemtime() в PHP. Я уверен, что есть функция asp.net, которая даст вам это.

Затем ваш тег CSS будет выглядеть следующим образом:

<link rel="stylesheet" type="text/css" media="screen" href="/main.css?123456789"/>

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

Ответ 2

Нажмите CTRL + F5, чтобы обновить все на своей веб-странице, включая скрипты и таблицы стилей.

Кроме того, вы можете включить таблицы стилей, которые будут обслуживаться с динамической страницы сервера [php/asp.net], и Response.Expires = -1, которая заставит клиента загружать css по каждому запросу HTTP-GET явно. Вы также можете сделать это в настройках вашего веб-сервера для типов mime CSS.

Ответ 3

Я использую этот трюк:

<link rel="stylesheet" type="text/css" href="cssfile.css?t=<%= DateTime.Now.Ticks %>" media="screen" />

Ответ 4

Для ASP.NET код позади (вы можете поместить его в служебный класс или главную страницу):

public static string GetTimestampedUrl(string virtualPath)
{
  var realPath = HostingEnvironment.MapPath(virtualPath);
  var file = new FileInfo(realPath);

  return VirtualPathUtility.ToAbsolute(virtualPath) + "?" + file.LastWriteTime.ToFileTime();
}

И затем на вашей странице:

<link href="<%= GetTimestampedUrl("~/screen.css") %>" rel="stylesheet" type="text/css" media="screen" />

Ответ 6

Я не уверен обо всех браузерах, но в IE8 вы можете использовать инструменты разработчика...

Перейти к:

Инструменты → Инструменты разработчика (F12)

Затем (пока на вашей странице) внутри инструментов разработчика:

Кэш → Всегда обновлять с сервера

Ответ 7

Это классическая проблема. У вас есть много доступных решений:

  • Вероятно, самый простой способ - настроить ваш веб-сервер на серверные файлы CSS как никогда не кэшированные/истекающие немедленно. Очевидно, вы не захотите этого в производственной среде. С IIS это очень легко сделать.
  • Добавьте случайное значение к имени файла, который вы включаете, например. Site.css? V = 12. Это то, что SO делает для их включения. Я делаю это в доме так, чтобы на машине разработки каждый раз изменялся параметр (директив), файл, но при развертывании он использует номер версии svn. Немного сложнее, но более надежным.
  • Многие, многие другие, я уверен.

Ответ 8

Для пользователей Wordpress ниже приведен код

<link rel="stylesheet" href="<?php echo get_bloginfo('stylesheet_url')."?d=".date( 'Ymd', time()); ?>" type="text/css" media="screen" />

Или лучше

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />

Ура!

Ответ 9

В моем подходе используется метод изменения "querystring" для обхода кэшей (даже в браузере и прокси-серверах). Поскольку я использую мастер-страницы, я поддерживаю ссылку на CSS как обычно, но добавляю идентификатор (называемый здесь как cssStyleSheet):

<head runat="server">
<link id="cssStyleSheet" href="~/Styles/Default.css" rel="stylesheet" type="text/css" />

Затем в коде позади я реализовал в Page_Load эту строку кода, добавляя quesrystring как "? t = 5343423424234".

Protected Sub Page_Load(…)

    If IsNothing(Application("CSSTicks")) = True Then
        Application("CSSTicks") = DateTime.Now.Ticks
    End If


    cssStyleSheet.Attributes("href") = cssStyleSheet.Attributes("href") & "?t=" & Application("CSSTicks")

End Sub

Почему? В HTML-коде какой-то конструктор может легко изменить файл CSS, не мешая некоторому "сложному" коду. Используя переменную Application, я избегаю использовать пропускную способность с моих серверов, а также с точки зрения клиента (например, с помощью мобильных телефонов).

Если новое приложение развернуто, переменная Application reset автоматически и "новая" версия CSS, если она загружена в браузер (даже через прокси).

Ответ 10

Самый простой способ - отключить кеширование в вашем браузере. Если вы не можете или не хотите этого делать, вы можете нажать ctrl + f5.

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

Ответ 11

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

Ответ 12

В дальнейшем ответ Ян Кемпа, в котором используется LastWriteTime таблицы стилей, я написал помощник MVC для вывода тега <link> с помощью встроенный параметр кэширования ошибок.

Код

public static class CssLinkHelper
{
    public static IHtmlString StyleSheet(this HtmlHelper helper, string stylesheetname)
    {
        // define the virtual path to the css file (see note below)
        var virtualpath = "~/" + stylesheetname;
        // get the real path to the css file
        var realpath = HostingEnvironment.MapPath(virtualpath);
        // get the file info of the css file
        var fileinfo = new FileInfo(realpath);

        // create a full (virtual) path to the css file including a cache busting parameter (e.g. /main.css?12345678)
        var outputpath = VirtualPathUtility.ToAbsolute(virtualpath) + "?" + fileinfo.LastWriteTime.ToFileTime();
        // define the link tag for the style sheet
        var tagdefinition = string.Format("<link rel=\"stylesheet\" type=\"text/css\" href=\"{0}\" />", outputpath);

        // return html string of the tag
        return new HtmlString(tagdefinition);
    }
}

Использование

@Html.StyleSheet("main.css")

Выход

<link rel="stylesheet" type="text/css" href="/main.css?131393346850223541" />

Примечание

Если вам интересно узнать о части var virtualpath = "/~" + ... и думать, почему бы просто не передать ее как "~/main.css"? Я реализовал эту функцию таким образом, потому что все мои файлы css находятся в общей папке (/assets), и помощник будет префикс моего вывода с общим именем папки i.e. /assets/main.css?131393346850223541