Как заставить браузер обновить стили CSS
 

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

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

Вопрос: можно ли сделать скриптом так, чтобы все эти шаги были "автоматическими", чтобы при нажатии на ссылку (допустим "обновить стили") на сайте - файл CSS и страничка сайта - обновились?

Спасибо!
А как сделать так, чтобы по клику на ссылку сначала открылся обновился и закрылся (желательно - в фоне) файл стилей, который, к примеру, по адресу http://my-sayt.ru/my.css, а уж потом - текущая открытая страница сайта? Такое возможно в одном скрипте?

Возможно есть более простой способ заставить браузер проглотить изменённую таблицу стилей, но как - не знаю :(

Я не понял вопроса) Где должен открыться и обновиться файл стилей? Может имеется ввиду кеш стилей? Если не надо, чтобы стили не кешировались в браузере, надо перейти в хроме в панель разработчика->вкладка network->disable cache. Самый лучший способ - с использованием сборщиков. Но тут как я понимаю, другие реалии)

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

Царь Леонид, файл стилей лежит как и у большинства сайтов, просто в корне сайта или в папке стилей.
Я бы хотел, чтобы не только я, но и посетители сайта могли нажатием на ссылку-скрипт мгновенно очистить кеш стилей, ибо объяснять каждому, что делать в браузере... бесполезно

laimas, как это сделать, не подскажете?

Серверный язык формируя страницу получает информацию о времени последнего изменения файла и подставляет ее в путь:

....name.css?метка_времени

А как получить эту метку, это уже от серверного языка зависит, а какой у вас неизвестно.

Движок сайта - юкоз

если это бывший "Народ", значит РНР, следовательно так:

<link href="path/filename.css?<?=filemtime('path/filename.css')?>" rel="stylesheet" media="screen"/>

laimas, на юКозе нет пхп, оно есть... но вообще отдельное и немного "кастрированное".... да и сайт не с народа, сразу на козе делался...
Может можно решить скриптом?

zarim,
https://javascript.ru/forum/dom-wind...tml#post264509

<script>
function addCSS(url) {
  var a = document.createElement('link');
  a.href = url+"?nocache="+Math.random();
  a.rel = 'StyleSheet';
  a.type = 'text/css';
  document.head.appendChild(a);
}
addCSS('path/filename.css');
  </script>

Не надо пороть ерунды, есть у них РНР, а вам из него то надо всего одна функция.

В смысле JS? А смысл какой в этом если при это браузер будет запрашивать ваш стиль постоянно с сервера не кешируя его?

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

Спасибо всем, откликнувшимся!

Такой мысли я вам не подсказывал ибо это совсем не то, это ровно тоже самое что и рони вам написал, но с серверной стороны.

То что вы сделали совсем не будет работать по принципу "обновлено - скачать с сервера", это вы понимаете?

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

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

zarim,
:-?
random отключает кеширование совсем, то есть вы заставляите клиента качать, то что у него уже есть. правильнее информировать браузер об обновлении, чтобы только в случае изменения, качать новую версию css, а не по каждому переходу по сайту закачивать снова и снова ... способ с random это костыль, если нет нормального способа или не волнует трафик сервера и клиента... :) много букв...

рони, согласен с вами, метод грубый, можно сделать хитрее, прописав в стиль ?"цифры" только после обновления сайта.

Файл стилей весит мало, не думаю, что он будет жрать трафик, учитывая, что средний вес страниц уже далеко не 100-200 килобайт, даже для мобильной версии.

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

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

Это не мой метод, по принципу "изменено - скачать" работает и etag.

Вы просто не разобрались почему у вас не работают вставки кода и на этом успокоились. Могу заметить, что

href="/_st/my.css?<? rnd 100 ?>"

это вставка РНР кода и есть, а значит РНР код выполняется. Но синтаксически, это полный бред, и должно быть как минимум rnd(100). А чтобы при этом и вывести число в браузер этот метод должен уже делать вывод вместо возврата значения, в противном случае вывод будет только в таком случае:

href="/_st/my.css?<?=rnd 100?>"

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

"Народ", это был бесплатный хост с гольным HTML/JS/CSS, юкоз не далеко ушел, предлагают и язык серверный, и базу, но все через задницу. И коли не охота разбираться, то выгоднее поступать именно так прописав в стиль ?"цифры" только после обновления сайта, не каждые пять минут вы же его обновляете. :)

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

laimas, народ и юкоз не имели ничего общего, а после того, как сайты народа были все перенесены на юкоз, разница пропала. Вы наверное забыли, что юкоз имеет свой собственный язык, схожий с пхп, его и предлагают вебмастерам, это так называемые "условные операторы", которые очень напоминают пхп, но это - не одно и тоже и синтаксис отличается.

Так вот, согласно таблице кодов юкоза, синтаксис может быть: <? rnd 100 ?> и <? rnd(100) ?> - они сработают одинаково.

Само ж пхп на юкозе - это отдельный криво*опый сервер, рассчитанный только на скрипты и базы на текстовых таблицах, на этом конструкторе нет ни доступа к файлу htaccess, ни возможности создать полноценную MySQL

Так же согласен, что постоянное обновление - не есть хорошо, поэтому что-то придумаю, например, привяжу не к оператору рандома, а к выводу текущего числа, то есть таблица стилей будет "обновляться" раз в сутки, как по мне - этого вполне достаточно :)

Ну а я о чем говорю - все через задницу, что было так, что и теперь не лучше. :)

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

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

zarim,
зачем вы это изобретаете всё? Умные люди до вас давно уже голову сломали и предложили прекрасные способы решения проблем с кэшем http://javascript.ru/optimize/cache-...ie-versionnost. С использованием различных сборщиков типа webpack, хэш файла добавляется к имени документа (css,js), создается файл манифеста, серверный код уже лезет в этот манифест и на его основе генерирует страницу. Впрочем это уже совсем другая история.

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

Поэтому считаю, что решение, описанное мной выше (на основе подсказок участников темы) - самое простое, а главное - реально работающее.