Как обновить css
—>
Довольно часто web-разработчики сталкиваются, что после смены дизайна всего сайиа или отдельного блока, html код у пользователей меняется, а css остается в кэше. И как итог мы получаем, что блоки «поехали», цвета не те, фона нет и вообще всё пропало.
Как обновить css на компьютере посетителей?
Очень просто, есть 2 варианта:
1) Позвонить всем посетителями и попросить нажать ctrl+F5
2) В ссылке на css файл дописать «?v1» ну или любую информацию после знака «?» это должно быть похоже на GET запрос
Есть ещё несколько способов, но они скорее для тех, кто за ранее подумал об этой проблеме, это Cache-Control и if-Modified-Since
Cache-Control — можно указать время, через которое файл будет заново скачиваться, но если вы его измените раньше, то до момента обновления пользователи будут наслаждаться «красотой»
if-Modified-Since — это по сути автоматический ответ он времени последнего изменения, но работает это всё не стабильно, поэтому надежней чем изменение ссылки способа нет.
Кстати, всё выше описанное работает и с javascript
Обновление CSS-файлов на вкладке Стили (css зеркало редактирование)
Редактирование CSS зеркало обеспечивает двустороннее взаимодействие, чтобы изменить CSS в любом случае:
- В редакторе кода измените .css файл, изменения отражаются в инструменте Элементы на вкладке Средства разработки Edge .
- В инструменте Элементы на вкладке Edge DevTools изменения отражаются в .css файле в редакторе кода.
Редактирование CSS зеркало включено по умолчанию в расширении. В результате в расширении DevTools на вкладке Стили в инструменте Элементы при изменении селекторов CSS, правил или значений локальный .css файл автоматически изменяется при изменении значений.
Например, если выбрать значение размера точки для элемента body, а затем нажать клавишу СТРЕЛКА ВВЕРХ или СТРЕЛКА ВНИЗ, то при .css открытии файла значение автоматически изменится в .css файле в режиме реального времени при изменении значения на вкладке Стили :
Без редактирования css зеркало вкладка Стили в средствах разработки Microsoft Edge отлично подходит для отладки и настройки селекторов CSS и правил CSS. Однако, хотя эти изменения немедленно отображаются в веб-браузере, они не отражаются в вашем .css файле. Это означает, что после изменения CSS на вкладке Стили необходимо скопировать и вставить изменения обратно в .css файл.
Редактирование css зеркало — это функция расширения Microsoft Edge DevTools, которая решает эту проблему. Любое изменение, которое вы вносите на вкладке Стили, также автоматически изменяет .css файл в открытой папке в Visual Studio Code. Вы можете изменить любой селектор CSS или создать новые селекторы CSS на вкладке Стили , и все изменения автоматически отражаются в правильном .css файле.
Css зеркало редактирование также работает для .html файла, содержащего элемент, например страницу Успешно. Это показано в разделе Начало работы, нажав кнопку Запустить экземпляр.
Флажок Редактирование зеркального отображения CSS
Если используется URL-адрес (вместо пути к файлу), css зеркало редактирования требует открытия папки с исходными файлами веб-страницы в Visual Studio Code, что расширение может сопоставить с ресурсами веб-страницы URL-адреса, введенного в адресную launch.json строку или файл. Если у вас нет локальных исходных файлов, но вы хотите изменить CSS в средствах разработки, снимите флажок CSS зеркало редактирование, чтобы предотвратить сообщения об ошибках при сопоставлении и редактировании зеркало. См. раздел Включение редактирования CSS зеркало ниже.
Сохранение изменений в CSS-файле
Расширение не сохраняет изменения, внесенные в редакторе автоматически. На вкладке .css файла в редакторе появится белый кружок. Изменения необходимо сохранить вручную, если вы хотите сохранить их.
Если закрыть Visual Studio, текущую папку или .css файл, Visual Studio предложит сохранить изменения.
Пример зеркального отображения изменений с вкладки «Стили» в CSS-файл
В следующем примере index.html открывается в Visual Studio Code, а расширение Microsoft Edge DevTools открыто. Мы выбираем значок flexbox в селекторе .searchbar CSS, а затем изменяем на flex-direction column .
Это изменение отображается на вкладке Edge DevTools и на вкладке Edge DevTools: Browser :
В результате редактирования CSS зеркало Visual Studio Code также автоматически переходит к правильному .css файлу и соответствующему номеру строки и вставляет flex-direction: column код CSS:
Включение редактирования css зеркало
Если у вас есть доступные для записи надежные исходные файлы и вы хотите, чтобы изменения CSS в средствах разработки автоматически изменялись в исходных файлах, установите флажок CSS зеркало редактирование. Этот параметр выбран по умолчанию.
Очистите поле CSS зеркало редактирования проверка, если вы только экспериментируете, и в адресной строке на вкладке Edge DevTools: Browser есть URL-адрес, а не путь к файлу, а исходные файлы отсутствуют локально через панель > действий Обозреватель> кнопкой Открыть папку, и не хотите получать сообщения об ошибках о сопоставлении и зеркало редактировании.
Чтобы включить или отключить редактирование css зеркало, выполните приведенные далее действия.
- На вкладке Edge DevTools на вкладке Элементы перейдите на вкладку Стили .
- Установите или снимите флажок css зеркало редактирования:
Или откройте меню команд, начните вводить слово зеркало, а затем выберите Инструменты Microsoft Edge: Переключить зеркало редактирование в|off для CSS-файлов в рабочей области: 
Поддержка исходной карты
Зеркальное отображение CSS также поддерживает такие абстракции, как Sass или CSS-in-JS, если вы настроили проект для создания исходных карт. У нас есть проблема отслеживания на GitHub и мы приветствуем любые отзывы о том, как это можно улучшить: редактирование зеркала CSS с помощью исходных карт: известные проблемы и отзывы.
См. также
- Начало работы с расширением DevTools для Visual Studio Code
- Расширение Средств разработки Microsoft Edge для Visual Studio Code
Обновление стилей CSS без перезагрузки страницы — Reload CSS
Часто так бывает, что внося изменения в стили CSS, верстальщик постоянно обновляет страницу. Порою это сильно раздражает, особенно когда внесли изменения в HTML с помощью FireBug-а или инструментов разработчика в других браузерах.
В итоге с коллегой JS программистом Игорем Демьяновым написали скрипт, который перезагружает с сервера файлы стилей без перезагрузки страницы, так называемый Reload CSS.
Чтобы включить обновление стилей CSS у вас на сайте без перезагрузки, требуется сделать 3 простых шага.
1. Подключить JS следующим кодом:
var DeveloperTool=< Init:function()< this.headObj = document.getElementsByTagName('html')[0].getElementsByTagName('head')[0]; return this; >, ReloadAllCSS : function(headObj) < console.log("DT:ReloadAllCSS"); var links = headObj.getElementsByTagName('link'); for (var i=0 ; i < links.length ; i++)< var link = links[i]; this.ReloadCSSLink(link); >return this; >, ReloadCSSLink : function(item) < var value = item.getAttribute('href'); var cutI = value.lastIndexOf('?'); if (cutI != -1) value = value.substring(0, cutI); item.setAttribute('href', value + '?t=' + new Date().valueOf()); return this; >, ReloadAllCSSThisPage : function() < this.ReloadAllCSS(this.headObj); return this; >>; 2. В HTML код вставляем ссылку, в любое место. Лучше в начала или в конец:
3. Описываем стили. У меня лично такие, а там уже кто как хочет оформляет кнопку Reload CSS по своему:
.dev-css
Пользуйтесь на здороввье!
Как обновить css
—> Довольно часто бывают случаи когда необходимо внести правки в css и html уже запущенного сайта. И не редко это заканчивается тем, что у Вас всё хорошо, заказчик заходит и видит сайт как после войны. Блоки залезают друг на друга, цвета вообще не понятно какие.
Вы рекомендуете ему обновить страницу с помощью ctrl+F5 и у него всё сразу хорошо, дальше приходится объяснять, что это из-за того, что он заходил раньше на этот сайт, браузер запомнил css, вы обновили и html и css, но браузер загрузил только новый html.
Объясняете, что все посетители из директа скорее всего впервые на сайте и у них сразу всё красиво и не надо жать ctrl+F5. Но можно ли было избежать всех этих разговоров, конечно можно.
1. Другой файл css
Логика работы браузера простая, если он видит, что нужно скачать css который он уже скачивал, то делать он этого не будет. Но если мы пререименуем файл, то он его скачает и будет использовать.
В этом методе есть ряд недостатков, а именно, если у нас не одна страница или шаблон, то переименовывать нужно везде, есть вариант интереснее.
2. GET запрос в конце файла
Пишем путь к файлу css таким образом «styles.css?v=2»
По сути мы добавляем GET запрос в адресе, это никак не влияет на то, что отдает сервер, но для браузера это новый путь, по которому он обязатено пройдет.
Есть ещё варианты с заголовкоми HTTP Last-Modified и HTTP Cache-Control, но самым удачным я считаю всё же GET запрос