Изменяем СSS в реальном времени

«О как же достало обновлять страницу браузера после каждой мелкой правки css кода!».

Решил я это дело автоматизировать, чтобы раз, поменял в своём любимом редакторе код в css, а в браузере тут же изменения отобразились. И так за вечер появилась небольшая библиотечка "cssWatch.js". Не буду долго расписывать, что да как. Только суть.

И так, что же cssWatch.js делает?

А делает этот скриптик, то что от него и требуется — обновляет стили css прямо в браузере.

Подключаете cssWatch.js к проекту
Открываете нужную страницу в браузере
Делаете изменения в css файлах, и результат тут же отображается на странице

Как подключить?

Подключаем cssWatch.js к странице:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>cssWatch</title>
  <link rel="stylesheet" type="text/css" href="example.css">
  <link rel="stylesheet" type="text/css" href="example2.css">  

  <script src="cssWatch.js"></script>    <!-- Здесь -->

 </head>
 <body>
     <h2>Попробуйте поменять стили в соответствующих файлах:</h2>
     <div class="b-block">
         example.css
     </div>
     
     <div class="b-block2">
         example2.css
     </div>
 </body>
</html>

И все, никаких других манипуляций делать не нужно. Теперь стили будут автоматически обновляться.

Отмечу, что для проверки изменился ли css используются заголовки ответа сервера, т.е. cssWatch.js не будет работать (точнее будет работать не так как ожидается) на файлах, открытых напрямую из файловой системы (например с рабочего стола).

По умолчанию, скрипт прослушивает все файлы стилей на странице, но можно ненужные отключить. Делается это путём добавления атрибута cssWatch к тегу link:

  <link rel="stylesheet" type="text/css" href="example.css">
  <link rel="stylesheet" cssWatch="no" type="text/css" href="example2.css">  <!--  Этот файл проверяться не будет -->

СssWatch.js можно подключать к любому проекту, с любым уровнем вложенности css файлов.

Скачать архив с библиотекой и примером. ^[1]

Посмотреть в браузере как работает. ^[2]
Правда интерактивности нет, т.к. файлы css не меняю, но через консоль браузера можно посмотреть как работает.

Спасибо за внимание. Буду рад услышать ваше мнение.

P.S> В IE не тестировал. Пока нет возможности его поставить.

Автор: antonre

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/11590

Ссылки в тексте:

[1] Скачать архив с библиотекой и примером.: http://end-of-the-world.ru/cssWatch/cssWatch.zip

[2] Посмотреть в браузере как работает.: http://end-of-the-world.ru/cssWatch/example.html

Нажмите здесь для печати.