Как добавить версию css
Перейти к содержимому

Как добавить версию css

  • автор:

CSS, JS: как указать браузеру, что нужно обновить закэшированный файл?

Например, браузер при первой загрузке закэшировал файлы CSS и JS. Позже я изменил содержимое этих файлов и загрузил их на сервер. Как указать браузеру, что файлы были обновлены, чтобы он перегрузил их и обработал? Можно обновить страницу с помощью клавиш Ctrl+F5 , однако не будем же мы вешать объявления на сайте, чтобы все пользователи обновляли страницу указанным способом.

Отслеживать
Roman Grinyov
задан 14 мар 2016 в 21:21
Roman Grinyov Roman Grinyov
3,867 4 4 золотых знака 23 23 серебряных знака 58 58 бронзовых знаков
– user176262
14 мар 2016 в 21:23
Посмотрите мой ответ, отлично работает на январь 2021 https://ru.stackoverflow.com/a/1229806/390731
11 янв 2021 в 12:11

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Традиционно к URL файла, на который есть ссылка, добавляется какое-нибудь уникальное значение в query, например, script.js?1337 . Формат запроса значения не имеет, так как веб-серверы игнорируют его для файлов.

Надо отметить, что в большинстве случаев это избыточно. Протокол HTTP предоставляет множество возможностей по настройке кэширования. Обычно запрос на статический файл уходит всегда, но при этом клиент (браузер то есть) может сообщить, что файл уже закэширован, и указать версию (дату, метку). В случае, если на сервере файл не обновился, сервер отдаст пустой ответ, говоря клиенту пользоваться кэшированной версией. Если файл обновился, то сервер отошлёт новый файл.

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

Версия файлов CSS и JS

Привет, тема наверное избитая, но ответа не нашел.
Как добавить версию к файлам CSS и JS? Или так — как добавить к нужным файлам CSS и JS дату их изменения?

19 апреля 2018, 19:13

Сергей /users/gohhan modx.pro https://modx.pro

Комментарии: 5

21 апреля 2018, 11:38
21 апреля 2018, 12:36
1) Создаем новый сниппет:
Назовем его к примеру fileversion

2) В head страницы используем вывод следующим образом:
host_tm это статичная переменная, путь к шаблону. Можно использовать что-то вроде /manager/templates/design…

[[!fileversion?input=`[[++host_tm]]/css/style-modal.css`]] - необходим путь от корня сайта.

Да, это не дата изменения, это хеш файла, но при каждом изменении хеш меняется. В итоге стили не приходится CTRL+F5 на странице.

Принуждаем браузеры загружать свежие версии CSS и JS в WordPress

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

Просмотр новой страницы со старыми таблицами стилей непременно будет отображен некорректно.

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

http://example.com/stylesheet.css?v=1

Теперь же, когда вы проделаете изменения, то нужно будет всего лишь изменить версию вашей таблицы стилей на 2.

http://example.com/stylesheet.css?v=2

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

Существует еще один способ — использование функции time(), которая будет добавлять текущее время в конец ссылки на таблицу стилей.

http://example.com/stylesheet.css?v=

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

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

Применяем технологию к WordPress

Для подключения таблицы стилей в WordPress вам нужно использовать функцию wp_enqueue_style(). Функция понимает определенный набор параметров. Четвертым параметром можно указать номер версии, который и будет добавлен к ссылке на ваш файл таблицы стилей.

add_action( 'wp_enqueue_scripts', 'add_styles' ); function add_styles() < $css_file = get_stylesheet_directory() . '/css/style.css'; wp_enqueue_style( 'css-file', get_stylesheet_directory_uri().'/css/style.css', NULL, filemtime($css_file) ); >

По всем вопросам и отзывам просьба писать в комментарии ниже.

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

Как задавать версии css?

гугл выдаёт много разнообразной информации по поводу того, как задать для css версию и подсовывать самую свежую версию клиенту, не перезагружая её, но вот конкретного примера использования я не нашёл, покажите, пожалуйста, как подобной возможностью пользуетесь вы

  • Вопрос задан более трёх лет назад
  • 8887 просмотров

Комментировать
Решения вопроса 3

Я добавляю версию /style.css?v=2, и меняю ее каждый раз при изменении файла, рандомное число, как советует IceJOKER , ставить наверное все-таки не надо, так как файл перестанет кэшироваться браузером.

Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
Вся сила в самообразовании

Можете использовать Gulp или Grunt сборщики для автоматического добавления версионности для css/js файлов. Также сможете заодно их минимизировать.

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
front-end developer

Используйте hash в названии файла style.baedb042c16e1bf.css . Для сборки советую использовать webpack.

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

Ответ написан более трёх лет назад
Нравится 1 2 комментария
0leg5ergeev @0leg5ergeev Автор вопроса
хеш как-то вычисляется или тоже рандомный набор цифр-букв?

0leg5ergeev: хеш вычисляется на основании содержимого файла. Поменяли что-то в файле, хеш изменился. Для gulp смотрите gulp-rev.

Ответы на вопрос 2

Я на php получаю timestamp последнего изменения файла. Проблем с производительностью нет, операция достаточно быстрая.
/style.css?ver=1450975943

Преимущества:
— файл берется из кеша до тех пор, пока не был фактически изменен
— нет необходимости помнить какие файлы менял, а какие нет → меньше вероятность ошибки и меньше работы

Ответ написан более трёх лет назад
Комментировать
Нравится 4 Комментировать
Web/Android developer
добавляете к ссылке с css случайные числа.
/templates/some/css/style.css?
Math.rand()
Ответ написан более трёх лет назад
Нравится 1 5 комментариев
0leg5ergeev @0leg5ergeev Автор вопроса
и каждый раз, как что-то меняю в css, менять числа?

0leg5ergeev: файл css так и сохраняете style.css, а вот к ссылке уже добавляете случайно число, таким образом браузер в каждый раз будет выдаваться свежая версия css

*выдавать свежую версию
0leg5ergeev @0leg5ergeev Автор вопроса

IceJOKER: ну, я хочу как раз чтобы кешилось каждый раз нужное, а тут пролучается, что вообще ничего не кешится. На данный момент в проекте css весит около 100кб, что не очень хорошо

0leg5ergeev: «как задать для css версию и подсовывать самую свежую версию клиенту» — вы противоречите сами себе. если хотите , чтоб кешировался файл, то просто отдавайте его, браузер сам закеширует его. либо в ручную задавайте версию как написал Кирилл

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *