ФорумРазработкаSEO → Сохранение CSS прямо на странице в браузере

Сохранение CSS прямо на странице в браузере

  • arvitaly

    Сообщения: ? Репутация: N Группа: Адекваты

    Spritz 23 ноября 2012 г. 23:00

    Как часто вам приходится сохранять стили в своем редакторе и обновлять страницу в браузере? Каждый раз при работе в web-консоли — копируете стили и вставляете в файл .css и сохраняете его?
    Решение проблемы
    Представим, что у нас есть html-страница и подключены несколько css с помощью
    <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/MAIN.css&quot; />
    <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/PAGE.css&quot; />


    и есть отдельный блок стилей

    <style>
    #main {width:100%;}
    </style>


    Каждый из блоков содержит плоский список из 2 значений: селекторов и собственно стилей.

    При загрузке страницы браузер для каждого из подгружаемого блока стилей создает новый элемент в document.styleSheets.
    Каждый styleSheet элемент содержит деток cssRules и ownerNode.

    А дальше начинается самое интересное.

    При изменении в web-консоли стилей именно на эти селекторы — соответственно изменяются массивы cssRules (ну и computed style в самом элементе и это позволяет нам видеть изменения сразу).

    Мы создаем функцию срабатывающую по горячей клавише или нажатию на кнопку на странице (неважно). Допусти можно навесить обработчик keyup на ctrl+S. Далее мы пробегаемся по массиву document.styleSheets, для каждого ownerNode узнаем значение аттрибута href и посылаем на сервер сериализованный массив cssRules и Href. На сервере сохраняем в соответствующий файл — новые правила!

    А как же быть с нефайловыми стилями? Тут нужен индивидуальный подход. Допустим можно дать каждому из них ID и перезаписывать их в файле, а впрочем это уже зависит от архитектуры приложения и вариантов действительно очень много.

    Таким образом мы ускоряем изменение каждого стиля — как минимум на 2 шага: сохранить вместо скопировать, сохранить и обновить. Но мне лично просто нравится такая удобная фишка.
  • artoodetoo

    Сообщения: 5138 Репутация: N Группа: в ухо

    Spritz 24 ноября 2012 г. 2:03, спустя 3 часа 3 минуты 12 секунд

    нихрена не понял.
    ιιlllιlllι унц-унц
  • adwo

    Сообщения: ? Репутация: N Группа: Джедаи

    Spritz 24 ноября 2012 г. 19:34, спустя 17 часов 31 минуту 7 секунд

Пожалуйста, авторизуйтесь, чтобы написать комментарий!