Php скрипт для удаление неиспользуемых стилей. Сброс стилей с помощью CSS Reset

Преимущество чистого и организованного CSS очевидны. Сайт у которого безупречный CSS будет загружаться быстрее и будет более заметнее в результатах поиска. Для веб-разработчиков чистый код CSS служит ярким свидетельством профессионализма и для будущих заказчиков.

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

Инструменты очистки CSS

ProCSSor для улучшения ваших CSS

ProCSSor является простым, без излишеств средство для мгновенных улучшений ваших CSS. Доступен через OS X, iOS, или любой браузер, инструмент использует CSS файл, вставленный фрагмент или URL-адрес, и сразу же исправляет, и покажет будущей код вашего CSS.

CSS Lint

Инструмент проверки CSS c объяснением изменений

CSS Lint предлагает рекомендации, в отличии от других инструментов очистки CSS. Большинство из них даже не говорят о изменениях в CSS, но CSS Lint, даёт краткое объяснение для каждого из рекомендуемого изменения. Он имеет целый ряд функций, которые сосредоточены на ошибки, совместимость, производительность, устранить дублирование и доступности, которые могут быть включены или отключены.

Dirty Markup

Инструмент Dirty Markup сочетает в себе нескольких различных технологий

Dirty Markup имеет уникальный подход к оптимизации кода; он работает когда поле заполнено кодом и сочетает в себе нескольких различных технологий HTML Tidy , JavaScript , Ace Редактор , и делает комплексную очистку кода. Это работает точно так же как и CSS, как JavaScript или стандартный HTML.

CleanCSS

Инструмент CleanCSS выполняет оптимизацию CSS

CleanCSS работает с URL-адресом или вставленным фрагментом кода и предлагает разнообразное выполнение оптимизации CSS. Вы можете выбрать между пятью различными настройками сжатия, которые предлагают компромиссные варианты между читабельностью и размером файла.

Code Beautifier

Code Beautifier простой CSS cleanup tool

Code Beautifier простой CSS cleanup tool (инструмент очистки CSS) без лишних особенностей. Он обрабатывает код по URL-адресу или вставку кода, и тщательно очищает их, основываясь на практическом разнообразии вариантов. Если вам нужно быстро очистить CSS при этом не потеряться в море возможностей очистки кода, это может быть ваш идеальный CSS cleanup tool.

Spritemapper

Spritemapper генерирует спрайты, объединяет несколько изображений в таблицу стилей CSS

Ни один из других упомянутых инструментов не оптимизировал изображения, что так же полезно, как и оптимизация кода как такового. Spritemapper генерирует спрайты, объединяет несколько изображений в таблицу стилей CSS c правильным позиционированием. В результате более быстрый сайт, меньше количество запросов HTTP, и более обтекаемый стиль CSS.

Topcoat

Topcoat не традиционный инструмент очистки CSS

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

Инструмент CSSTidy работает на Windows, Mac, или платформ Linux.

CSSTidy похож на многие инструменты очистки CSS, но этот предлагает некоторые уникальные атрибуты. CSSTidy может быть вызван с помощью командной строки или PHP, и он работает на Windows, Mac, или платформ Linux. CSSTidy-cleanup tool может отлично вписываются в существующий рабочий процесс и сохранить ваш CSS чистым автономно. W3C Valdiator инструмент проверки валидности кода CSS

W3C Valdiator не предлагает средства для очистки, сжатия и оптимизации кода, его безусловно нужно рассматривать в случаях, когда код CSS действительно некорректный. Вышеупомянутые инструменты имеют свои средства, этот сделан Консорциум W3C который создаёт стандарты.

Приветствую всех читателей текущей статьи, а также подписчиков моего обучающего блога. Наверное, вы не раз сталкивались с проблемой, когда стилевая разметка выполнена идеально, но несмотря на это в страницы несколько отличаются. Для того чтобы этого не было я расскажу вам, что такое очистка css стилей.

Прочитав данную публикацию, вы узнаете историю возникновения данной технологии, разберете несколько видов чистки стилей, а также сможете закрепить свои новые знания, разобрав примеры кода. А теперь перейдем непосредственно к делу!

Как появилась технология CSS Reset и как ею пользоваться

CSS Reset – это список свойств каскадных стилевых таблиц, которые сбрасывают запрограммированные стандарты в браузерах по умолчанию.

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

На сегодняшний день существует множество вариантов реализации reset библиотек или можно их еще назвать фреймворками.

Я считаю, что каждый уважающий себя разработчик веб-приложений должен иметь reset фреймворк, подстроенный под себя. Это может быть один из уже готовых, а может и свой персонально сверстанный reset-файл.

Что касается истории, то впервые похожая технология была использована Креспанисом Эндрю в 2004 году. В своих технических публикациях он советовал верстальщикам в начале документа со стилями использовать универсальный селектор, т.е. *, и в нем обнулять отступы объектов, которые задаются в каждом браузере по умолчанию.

Программная реализация такого приема выглядит так:

Пример работы подхода Э. Креспаниса

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

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

Так, в одном из подходов используется дополнительное обнуление всех границ веб-объектов (добавляется строка border: 0; ), а в другом – сброс параметров границ и внешнего контура элементов (к первому варианту добавляется outline: 0; border: 0; ).

Однако все они обладают рядом недостатков. Так как это самые первые версии стилевого «контроля» браузеров, они не идеальны. Взять даже текст с параграфами. При использовании первой реализации reset-а, исчезнут отступы между абзацами. В этом случае каждый раз css-разметку придется корректировать.

Поэтому многие веб-гуру и профессионалы в IT-области продолжали совершенствовать новое направление. Так, Эрик Мейер провел ряд исследований, изучил множество работ, написанных в то время, и создал мощный инструмент под названием CSS Reset.

Осторожно! Веб-мафия! Убьет любой браузерный стандарт стилей!

Итак, что же мы имеем с CSS Reset? Данное решение не использует универсальный селектор, а задает стилевую разметку через теги. При этом в коде предусмотрена обработка «проблемных» зон как, например, border-collapse, который в некоторых браузерах функционирует плохо.

Хочу отметить важную деталь: сброс стилевой разметки обязательно нужно делать перед установкой других свойств, так как css обрабатывает стилевые правила по порядку и перезаписывает значения параметров, указанных несколько раз для одних и тех же тегов.

Вернемся к Эрику Мейеру и его CSS Reset. В своем решении он прописывает правила для почти всех элементов языка css, начиная от контейнеров и заканчивая такими мелкими тегами, как strong, var, mark и другие. Вот тут расположена официальная вторая версия этого документа: http://meyerweb.com/eric/tools/css/reset/index.html

После появления выше описанного варианта подгонки дизайна сайта «под одну гребенку» во всех браузерах, многие крупные фирмы создали свои модификации.

Например, Yahoo! создали YUI CSS Reset, который они выложили в свободный доступ (можно посмотреть по этой ссылке: http://yui.github.io/yui2/#start ).

Крис Потит с единомышленниками разработал Siolon`s CSS Browser Reset (http://www.siolon.com/blog/browser-reset-css/ ). И так можно перечислять очень долго.

Здесь я хочу перечислить некоторые важные правила и рекомендации использования CSS Reset:

1. Как я уже и говорил, первое, что должно отработать в css-коде, это сброс параметров. Хоть это и интуитивно понятно, но очень часто новички и разработчики с опытом спотыкаются об эту ошибку;
2. Считается хорошим тоном использовать отдельный css-документ для CSS Reset. К тому же такой файл становится универсальным инструментом девелопера и может быть использован в разных веб-проектах;
3. Не бойтесь внедрять персональные модификации или создавать свои собственные reset-фреймворки;
4. Старайтесь не слепо использовать готовые решения по сбросу стилей и после переопределять некоторые параметры. Это грозит избыточностью кода. А такое айтишники не любят. Поэтому в случае с Yahoo CSS Reset если вам в этих свойствах: caption, th {text-align: left;} нужно выравнивание по центру, а не слева, то смело пишите ключевое слово center.

Что касается меня, то я использую свой CSS Reset, который включает в себя основные общие правила шаблонов и мои поправки.

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

Пока-пока!

С уважением, Роман Чуешов

Прочитано: 114 раз

Созданный сайт будет постоянно расширяться, и однажды вы осознаете, насколько трудно разобраться в его CSS .

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

1. Type-o-Matic

Type-o-matic представляет собой Firebug -плагин, который умеет анализировать шрифты, использованные на страницах сайта. Этот плагин выводит отчет в виде таблицы с информацией о свойствах используемых шрифтов (семейство, размер, цвет и другое ).

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

2. CSSCSS

Инструмент анализирует ваши CSS -файлы на наличие дублей. Это позволит уменьшить размер CSS и гораздо удобнее работать с ними в дальнейшем. Инструмент очень прост в установке – он реализован в виде пакета расширения для Ruby , и запускается из командной строки.

3. CSS Lint

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

4. CSS Colorguard

Зачастую попадаются клиенты, желающие использовать такие цвета, о существовании которых вы даже не подозревали. CSS Colorguard поможет составить необходимые цветовые схемы, и предупредит в том случае, если вы используете два одинаковых цвета.

5. CSS Dig

CSS Dig — это скрипт, написанный на Python , который запускается локально, и позволяет проанализировать свойства и значения CSS практически любого сайта, независимо от того, располагаются ли стили в отдельном файле или в коде страницы. Инструмент также помогает изменять, стандартизировать и оптимизировать CSS -код.

6. Dust Me

Dust-Me – плагин для Firefox и Opera , который выводит неиспользуемые селекторы из таблицы стилей. Инструмент берет весь CSS вашего сайта, и показывает, какие именно селекторы используются, а какие лишние.

7. Devilo.us

Devilo.us – продвинутый движок для сжатия и оптимизации CSS -кода, который теперь поддерживает CSS3 .

8. PurifyCSS

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

9. Atomic CSS

Atomic CSS поможет уменьшить CSS -файлы. Он позволяет оптимизировать скорость загрузки страниц, исключает зависимости, а также умеет многое другое.

10. Clean CSS

CleanCSS представляет собой многофункциональный CSS -оптимизатор. Инструмент берет ваш CSS -код и делает его чище и меньше в объеме. Вы можете оптимизировать код, написанный на разных языках: javascript , json , python , html и т. д.

11. PubCSS

Инструмент облегчает форматирование CSS -кода страниц академических изданий. Это библиотека CSS -стилей для форматирования документов под печать и публикацию в интернете.

12. CSSO

CSSO (CSS Optimizer) ¬– это инструмент, который производит структурную оптимизацию ваших CSS -файлов.

13. Helium

Helium – это инструмент для выявления неиспользуемых CSS -свойств на всех страницах сайта. Он основан на javascript и работает прямо в браузере. Helium принимает список URL -адресов разделов сайта, а затем анализирует каждую страницу для последующего составления списка всех стилей. После чего выявляет не использующиеся свойства CSS .

14. Strip Comments

Strip CSS Comments значительно облегчает следующие задачи: удаление комментариев из CSS -файлов, уменьшение размеров файлов. Он также доступен в виде плагина для gulp/grunt/broccoli .

15. CSS Shrinks

Инструмент позволяет без труда оптимизировать CSS -файлы, сохраняя последовательность и формат разметки. В нем есть несколько средств, которые позволяют удалять в документе пробелы и комментарии.

Возможно, у вас на примете есть еще какие-нибудь полезные CSS -инструменты? Пожалуйста, поделитесь ими в комментариях!

Перевод статьи “15 CSS Tools to Audit and Optimize Your CSS Code ” был подготовлен дружной командой проекта

Рано или поздно, каждый front-end (верстальщик) сталкивается с задачей, когда нужно проверить весь сайт на наличие неиспользуемых правил CSS. Первым делом на ум приходит погуглить и найти какой-то сервис или программку, которая сделает всю грязную работу за нас.

Короче попотел, и нашел такие решения:

• платный сервис unused-css.com
• DustMe Selectors — расширение FireBug для Mozilla
• CSS Usage — расширение FireBug для Mozilla

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

Итак начнем с того какое программное обеспечение нам понадобится. Первым делом нам понадобится Mozilla Firefox. После того как Firefox установлен, внедряем в него дополнение FireBug .

Dust Me Selectors

Дополнения Dust Me Selectors в официальном каталоге дополнений к браузеру нет, установить его можно перейдя по ссылке и нажав кнопку Install Now (естественно открывать ссылку нужно FireFox’ом). Дополнение установили, перезагрузили браузер и в правом нижнем углу у нас появится розовый значок метлы.

После того как расширение просканирует страницу откроется окошко с тремя вкладками Unused selectors (неиспользуемые правила), Used selectors (правила которые используюся) и Spider log (паук — сканирование сайта). Внизу две кнопки: сохранить документ и очистить результат сканирования.

Теперь немного подробнее о Spider log. Требуется ввести адрес сайта или адрес карты сайта и нажать кнопочку GO! По идее все понятно и все должно работать, но как ни хотел я результата, результата не получилось, точнее получалось просканировать пару страниц и дополнение висло, что очень печалило, одним словом неудача какая-то. Автор утверждает, что для работы дополнения нужна Mozilla версии 1.5 и выше (это тоже развод [хихи] я ее устанавливал, да все работает, но все равно не так как нужно). В принципе это единственный минус и самый значительный, потому что нужно было весь сайт проверить, а проверяется достаточно долго (пол дня убил в этот хлам). Самое положительное это то, что если ввести название сайта, то дополнение построит карту сайта, а она нам пригодится для следующего дополнения CSS Usage , так что обязательно сохраните карту сайта.

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

CSS Usage

Дополнение CSS Usage в официальном каталоге можно найти по ссылке . До недавнего времени, чтобы расширение работало, приходилось устанавливать версию Firefox 3.6.25, а на момент написания статьи Автор, как бы проснулся или очухался и обновил дополнение, поэтому можно ставить на последнюю версию Mozill’ы. После того как Вы установите это дополнение и перезагрузите браузер, смело заходите на сайт который хотите проверить и как только страничка загрузится, смело нажимайте кнопочку F12 (откроется окошко FireBug’а) и там Вы увидите вкладку CSS Usage:

Чтобы проверить страницу на наличие неиспользуемых правил нужно нажать кнопочку Scan (сканирование занимает секунд 30, а то и меньше). На первый взгляд кажется что это расширение сканирует только одну страницу, что же делать с остальными страницами спросите Вы. А помните мы сохраняли карту сайта с помощью расширения Dust Me Selectors, правда если на проверяемом сайте есть html карта сайта, то использовать лучше ее, если же ее нет то создайте новую страничку сайта и вставьте карту сайта с расширения Dust Me Selectors (если нет возможности создать новую страницу то об этом ниже).

Сейчас я опишу последовательность действий для сканирования:

1. открываем html карту сайта
2. нажимаем F12 — открывается FireBug
3. переходим на вкладку CSS Usage
4. нажимаем кнопку AutoScan
5. обновляем страницу (нажимаем F5)

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

В самом начале просканированной страницы указываются следующие обозначения:

• Line — строка правила
• CSS Selector — CSS правило
• Seen — используемое CSS правило (светло-зеленым цветом)
• Seen before — правила CSS которые использовались ранее (темно-зеленым цветом)
• Unseen — неиспользуемые CSS правила (красным цветом)
• :hover — CSS правила для элементов, которые получили фокус (серым цветом)
• (2 scans) — показывается количество сканирований (если Вы просканировали тока одну страницу то соответственно будет цифра 1)
• export cleaned css — сохранить результат сканирования

Можете дальше продолжить сканирование, правда придется возвращаться к карте сайта (первый минус). Спешить прокликивать не нужно, важно чтобы страница загрузилась полностью, работу автосканирования Вы будете видеть (то есть результат сканирования будет отображаться в окне FireBug’а).

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

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

Когда все страницы будут просканированы кликните на ссылку export cleaned css , результат откроется в новой вкладке, выделите все и сохраните в файл с раширением.css , перед каждым неиспользуемым правилом будет указан тег UNUSED:

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

Несмотря на два минуса, на мой взгляд это самый крутой метод проверки файла стилей на наличие неиспользуемых правил CSS , которое на сегодняшний день существует.

Я его применял для оптимизации двух файлов стилей общим весом в 360Кб — 18000 строк, я был в шоке когда это увидел. После всех махинаций с помощью этого метода получился один файл стилей — 90Кб и 1100 строк, результатом остались все довольны, и я тоже. Правда решение искалось долго, в следующий раз все будет на много быстрее, что очень радует.

Чуть не забыл. Что делать если создать страницу с картой сайта не представляется возможным? В этом случае в адрессную строку Вам придется вставлять каждую ссылу с карты сайта ручками и все будет отлично срабатывать.

И кстати если Вы выбрали систему управления сайтом WordPress, то в этой статье вы можете узнать как для него сделать карту сайта.

Еще отмечу, что платный сервис присылает результат сканирования в течение 24 часов, а если на Вашем сайте (ресурсе) 10 или 20 шаблонов страниц, то Ваша проверка займет на много меньше времени, чем Вы потратите чтобы дождаться от них результата. Но, если на сайте огромное количество страниц и для них используются разные шаблоны, конечно целесообразно заплатить какието 25$ за такую услугу.

Надеюсь Вам окажется полезным такой метод проверки Вашего файла стилей.