Браузер который сохраняет css

Заметки верстальщика: Полезные расширения Google Chrome в 2019 году

В моем браузере установлено около 30 расширений, которые упрощают жизнь и работу в интернете. В этой статье я хочу поделиться 10 актуальными расширениями Google Chrome для верстальщика, которые постоянно использую при разработке сайтов.

1. PerfectPixel

Пример использования PerfetPixel при разработке новых блоков на www.wrike.com

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

2. Wappalyzer

Пример использования Wappalyzer на сайте collaborate.wrike.com/2019/london

Всегда интересно какие инструменты и технологии используются на сайтах. Wappalyzer предоставляет информацию о CMS, JS фреймворках, CSS библиотеках, инструментах аналитики и многом другом. Представьте, что анимация на сайте – это бесплатная CSS библиотека, которую вы можете использовать у себя в проекте. Это позволит сократить время поиска необходимого инструмента и быть в курсе технологий, которые использует сайт.

3. HTML5 Outliner

Иерархия заголовков на странице habr.com/ru/company/wrike

HTML 5 Outliner отображает список заголовков на странице сайта. Расширение помогает структурировать заголовки и определять нарушения в иерархии. Например, в теге section HTML 5 Outliner выводит предупреждение об отсутствии тега h2. Это один из быстрых и удобных способов, чтобы определить правильность использования заголовков в верстке.

4. Wireframify

Пример использования Wireframify на сайте www.wrike.com

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

• отрицательных margin;
• выравнивания элементов с помощью padding;
• добавления отступов с помощью CSS свойств left, right;

5. PageLiner

Пример использования PageLiner на сайте www.wrike.com/apps

В графическом редакторе выровнять элементы или отобразить сетку сайта можно с помощью направляющих линий. Верстальщик может включить этот функционал в браузере используя PageLiner. Расширение отображает похожие направляющие, как в том же Adobe Photoshop. С PageLiner выравнивать элементы становится намного проще.

6. Web Developer

Список возможностей web developer

Web Developer добавляет в браузер дополнительную панель с инструментами. Внутри нее находится 10 вкладок: Disable, Cookies, CSS, Forms, Images, Information, Miscellaneous, Outline, Resize и Tools. Функционал расширения позволяет:

• отключать CSS, JS и изображения;
• проверять валидность HTML, CSS;
• манипулировать CSS стилями;
• тестировать HTML формы;
• отображать необходимую информацию мета тегов;
• изменять размер окна браузера;
• очищать кэш;

Web Developer остается популярным расширением среди разработчиков. Его можно сравнить с мультитулом в реальной жизни: всегда под рукой необходимый набор инструментов.

7. User CSS

Пример использования User CSS на сайте www.wrike.com/customers

Представим, что вы захотели поправить CSS прямо в браузере, но после этого пришлось перезапустить страницу. Все ваши наработки пропали, и приходится вносить изменения заново. Используйте User CSS, который будет сохранять ваши стили. Больше не нужно переживать по поводу того, что CSS исчезнет. Функциональность расширения позволит тестировать написанный CSS при переходе на другие страницы.

8. StyleURL

Пример использования StyleURL на сайте Wrike www.wrike.com/customers

User CSS не заменит панель разработчика браузера. Если вы привыкли работать в devtools и при этом не хотите потерять изменения после обновления браузера – установите StyleURL. Расширение запомнит ваши изменения и предоставит возможность сохранить наработки в отдельном файле или загрузить в github gist.

9. Siteimprove Accessibility Checker

Пример использования Siteimprove Accessibility Checker на сайте www.wrike.com/newsroom

Siteimprove Accessibility Checker — это инструмент, который проверяет HTML на соответствие стандартам доступности, чтобы обеспечить доступ к контенту для всех. Расширение отображает ошибки с подробной информацией. В описании к ним вы можете найти сноски с WCAG 2 и прямые ссылки на подробные статьи о доступности.

10. Tabsbook

Пример использования Tabsbook

Каждый работает с закладками по-своему. Есть те, кто сохраняет ссылки для быстрого доступа к сайтам, и те, кто используют закладки, чтобы хранить полезную информацию. С помощью Tabsbook можно превратить ваши закладки в базу знаний. Интерфейс расширения отображает древовидную структуру папок для удобной навигации по вашим закладкам. Все данные хранятся в облаке, что позволяет иметь доступ к ним с любого устройства.

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

• google chrome
• chrome extensions
• верстка сайтов
• расширения для браузеров
• perfect pixel
• wappalyzer
• wireframily
• pageliner
• web developer
• user css
• accessibility
• tabsbook

Источник

Способы по отключению кэширования CSS

От автора: в первую очередь производительность браузера повышается за счет кэширования CSS. Проверьте, что ваш сервер отправляет заголовки, которые говорят браузеру хранить CSS файлы определенное время. Это наилучший подход, которым пользуются на большинстве, если не на всех сайтах.

Кэширование очень тесно связано с браузером, и в итоге легче его отключить. Задайте в настройках браузера хранить кэш CSS один год (что не редкость). И вдруг вам понадобилось изменить стили. В таком случае вам нужно подумать, как очистить кэш и заставить браузер перезагрузить CSS. Ниже представлены несколько вариантов по решению этой задачи.

CSS необходимо кэшировать, это очень важно…

Просто посмотрим на то, как выглядят заголовки для кэширования CSS файлов:

Нам нужны Cache-Control и Expires. Я не эксперт в области конфигурации серверов, обычно я смотрю в H5BP конфиги. Но в нашем случае есть классический способ через Apache/HTAccess:

Изучите Веб-вёрстку с нуля

Если вы мечтаете создавать сайты, но не знаете, с чего начать. Хотите глубоко погрузиться в основы веб-разработки, а не просто пройтись по верхам — этот курс для вас!

Запросы

Сейчас браузеры видят URL с какими-либо запросами, как отдельные файлы и просто обновляют их на свежие копии. Большинство CDN поддерживают такую функцию и рекомендуют ее.

Что-то не так? Измените на это:

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

Скорее всего, вы даже могли бы использовать семантическое версионирование, а также можно задать константы.

Изменение имени файла

Запросы не всегда срабатывают. Некоторые браузеры не различают разные строки запросов, как разные файлы. А некоторое ПО (Squid) вообще не кэширует файлы по строковым запросам. Steve Souders в своей статье рассказывает, почему не стоит использовать строковые запросы. Похожая техника применяется с изменением имени файла. Как в HTML ниже:

Необходимо программно изменить имя файла, а не просто вбить готовое. Таким образом, файл на самом деле не существует вообще, вам придется написать пару строк кода, чтобы попасть к нужному файлу. Совсем недавно Jeremy Keith открыл эту технику.

Сервер будет игнорировать цифры в именах файлов CSS и JavaScript, однако браузер все же будет считать названия файлами и будет пытаться обновить код. Jeremy Keith пользуется Twig и применяет следующий шаблон:

Уверен, что вы можете представить похожий код на любом backend языке (типа ASP). Можно потренироваться с написанием данного скрипта для обновления переменной.

Отключение кэширование основано на обновлении даты

Во время поиска в интернете по поводу отключения кэширования вы наткнетесь на кучу советов, вам будут рекомендовать использовать сервер для проверки последнего обновления кэшированного файла и создать «номер» отключения кэша (номер означает что угодно, что вы можете изменить для обновления кэша).

Вообще, я не слишком в этом хорош. Мне кажется, что каждый раз спрашивать сервер при просмотре страницы будет крайне опасно. Раньше я вообще искал фото на сервере по его размерам! Будьте осторожны, в общем.

ETag’и

Возможно ETag’и покажутся хорошей идеей, так как большинство из них это информация о том, имеются ли уже у браузера копии файлов. Но большинство советчиков в интернете говорят: «отключайте ETag заголовки». Yahoo говорит:

«Вся проблема с ETag’ами в том, что они создаются с помощью атрибутов, которые делают их уникальными для каждого сервера. ETag’и не совпадут, если браузер получил компонент от одного сервера, и тот пытается проверить компонент на другом сервере. Общая проблема сайтов, построенных на кластерных серверах.»

Другая проблема в том, что они просто не эффективны при кэшировании. Для проверки ETag’ов все еще нужно делать сетевые запросы. Это не просто загрузка файлов, которая уменьшает производительность, а также различные задержки на стороне сервера при обработке запросов.

И снова я не эксперт в этой тематике, но рекомендуется отключить их в Apache:

Источник

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

Как часто вам приходится сохранять стили в своем редакторе и обновлять страницу в браузере? Каждый раз при работе в 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 шага: сохранить вместо скопировать, сохранить и обновить. Но мне лично просто нравится такая удобная фишка.

Источник