arvitaly
Новичок
Как часто вам приходится сохранять стили в своем редакторе и обновлять страницу в браузере? Каждый раз при работе в web-консоли — копируете стили и вставляете в файл .css и сохраняете его?
Решение проблемы
Представим, что у нас есть html-страница и подключены несколько css с помощью
и есть отдельный блок стилей
Каждый из блоков содержит плоский список из 2 значений: селекторов и собственно стилей.
При загрузке страницы браузер для каждого из подгружаемого блока стилей создает новый элемент в document.styleSheets.
Каждый styleSheet элемент содержит деток cssRules и ownerNode.
А дальше начинается самое интересное.
При изменении в web-консоли стилей именно на эти селекторы — соответственно изменяются массивы cssRules (ну и computed style в самом элементе и это позволяет нам видеть изменения сразу).
Мы создаем функцию срабатывающую по горячей клавише или нажатию на кнопку на странице (неважно). Допусти можно навесить обработчик keyup на ctrl+S. Далее мы пробегаемся по массиву document.styleSheets, для каждого ownerNode узнаем значение аттрибута href и посылаем на сервер сериализованный массив cssRules и Href. На сервере сохраняем в соответствующий файл — новые правила!
А как же быть с нефайловыми стилями? Тут нужен индивидуальный подход. Допустим можно дать каждому из них ID и перезаписывать их в файле, а впрочем это уже зависит от архитектуры приложения и вариантов действительно очень много.
Таким образом мы ускоряем изменение каждого стиля — как минимум на 2 шага: сохранить вместо скопировать, сохранить и обновить. Но мне лично просто нравится такая удобная фишка.
Любителям SASS тоже можно найти чем поживиться
Решение проблемы
Представим, что у нас есть html-страница и подключены несколько css с помощью
PHP:
<link rel="stylesheet" type="text/css" href="/MAIN.css" />
<link rel="stylesheet" type="text/css" href="/PAGE.css" />
PHP:
<style>
#main {width:100%;}
</style>При загрузке страницы браузер для каждого из подгружаемого блока стилей создает новый элемент в document.styleSheets.
Каждый styleSheet элемент содержит деток cssRules и ownerNode.
А дальше начинается самое интересное.
При изменении в web-консоли стилей именно на эти селекторы — соответственно изменяются массивы cssRules (ну и computed style в самом элементе и это позволяет нам видеть изменения сразу).
Мы создаем функцию срабатывающую по горячей клавише или нажатию на кнопку на странице (неважно). Допусти можно навесить обработчик keyup на ctrl+S. Далее мы пробегаемся по массиву document.styleSheets, для каждого ownerNode узнаем значение аттрибута href и посылаем на сервер сериализованный массив cssRules и Href. На сервере сохраняем в соответствующий файл — новые правила!
А как же быть с нефайловыми стилями? Тут нужен индивидуальный подход. Допустим можно дать каждому из них ID и перезаписывать их в файле, а впрочем это уже зависит от архитектуры приложения и вариантов действительно очень много.
Таким образом мы ускоряем изменение каждого стиля — как минимум на 2 шага: сохранить вместо скопировать, сохранить и обновить. Но мне лично просто нравится такая удобная фишка.
Любителям SASS тоже можно найти чем поживиться
