Вредоносное ПО (malware) - это назойливые или опасные программы,...
Преимущество чистого и организованного CSS очевидны. Сайт у которого безупречный CSS будет загружаться быстрее и будет более заметнее в результатах поиска. Для веб-разработчиков чистый код CSS служит ярким свидетельством профессионализма и для будущих заказчиков.
Но, очистка от мусора разметки CSS в бесчисленных повторах проектирования и изменения могут быть кропотливым, трудоемким процессом выполняя его в ручную. К счастью, есть некоторые замечательные и полезные инструменты, которые помогут вам автоматизировать некоторые наиболее актуальные аспекты CSS. На этой странице ссылки на инструменты очистки CSS, лично Я, проверял CSS разметку сайта на всех инструментах ниже, советую и Вам сделать так же.
Инструменты очистки CSS
ProCSSor для улучшения ваших CSSProCSSor является простым, без излишеств средство для мгновенных улучшений ваших 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 выполняет оптимизацию CSSCleanCSS работает с URL-адресом или вставленным фрагментом кода и предлагает разнообразное выполнение оптимизации CSS. Вы можете выбрать между пятью различными настройками сжатия, которые предлагают компромиссные варианты между читабельностью и размером файла.
Code Beautifier
Code Beautifier простой CSS cleanup toolCode Beautifier простой CSS cleanup tool (инструмент очистки CSS) без лишних особенностей. Он обрабатывает код по URL-адресу или вставку кода, и тщательно очищает их, основываясь на практическом разнообразии вариантов. Если вам нужно быстро очистить CSS при этом не потеряться в море возможностей очистки кода, это может быть ваш идеальный CSS cleanup tool.
Spritemapper
Spritemapper генерирует спрайты, объединяет несколько изображений в таблицу стилей CSSНи один из других упомянутых инструментов не оптимизировал изображения, что так же полезно, как и оптимизация кода как такового. Spritemapper генерирует спрайты, объединяет несколько изображений в таблицу стилей CSS c правильным позиционированием. В результате более быстрый сайт, меньше количество запросов HTTP, и более обтекаемый стиль CSS.
Topcoat
Topcoat не традиционный инструмент очистки CSSTopcoat не традиционный инструмент очистки 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 должно перевести ситуацию в управляемое русло. Прежде чем мы начнем искать неиспользуемые стили, стоит отметить, что существует множество других стратегий написания обслуживаемых стилей. Наши стили можно разделить на логические части (макет страницы, кнопки, сетки, виджеты и т.д.) и использовать понятную систему именования (например, БЭМ). Как правило, разработчики делают это еще до того, как ищут неиспользуемые правила. Я думаю, это правильно, ведь стили имеют долгосрочное воздействие.
Еще одна причина, по которой не так часто урезают правила – просто неудобно искать и удалять неиспользуемые стили в чем-либо, что больше маленького веб-проекта. Если контент не статичен, как понять, какие правила используются и где?
Инструмент разработчика Chrome
Оказывается, в инструментах разработчика Chrome уже есть встроенная функция. Я испытал ее на сайте, на котором, как я знал, было много стилей, которые можно удалить. Ощущения были смешанные. Порог входа очень низкий, особенно для разработчиков, которые уже работали с панелью разработчика Chrome. Устанавливать ничего не нужно, это приятно.
Что нужно сделать для проверки стилей на сайте:
Откройте интересующий сайт
Откройте панель разработчика
Перейдите на вкладку audits
Выберите опцию Web Page Performance и запустите
В части результатов будет «Remove unused CSS rules». Если этого нет, значит, у вас нет неиспользуемых стилей. Поздравляю! Результат разбит по стилям. Разбивка не просто по файлам, а по блокам style. Реально полезная функция, так как нам нужны только те стили, которые писали мы. По крайней мере, в рамках этой статьи.
Хорошо ли это?
Я не нашел супер простого способа экспортировать результат из Chrome. Можно копировать прямо из блока, но его сначала нужно развернуть. Это делает разбор результатов немного неудобным. Запуск теста в браузере еще дальше отталкивает нас от работы с кодом, что, возможно, приведет к тому, что мы будем забывать тестировать сайт.
Вывод: для начала полезно, но не долгосрочное решение.
UnCSS
Для поиска неиспользуемых стилей можно задействовать инструменты командной строки. UnCSS – интересный экземпляр. Он вытягивает страницу через phantomJS и ловит стили, вставленные через JS. Я очень хотел попробовать этот инструмент, так как он решал мою проблему, ведь панель разработчика Chrome совсем не связана с редактированием кода. С помощью UnCSS результат можно сохранить прямо в файл, идеально.
Установка
У меня не получилось выполнить npm install uncss на Ubuntu. Ничего серьезного, оказалось, я забыл пару зависимостей. Команды для установки недостающих библиотек, которые я запускал:
sudo apt-get update sudo apt-get install build-essential chrpath libssl-dev libxft-dev sudo apt-get install libfreetype6 libfreetype6-dev sudo apt-get install libfontconfig1 libfontconfig1-dev
sudo apt - get update sudo apt - get install build - essential chrpath libssl - dev libxft - dev sudo apt - get install libfreetype6 libfreetype6 - dev sudo apt - get install libfontconfig1 libfontconfig1 - dev |
UnCSS можно интегрировать в процесс билда, но мы сейчас опустим это. Думаю, вставлять его в процесс билда не самая хорошая идея. У Addy Osmani есть по этой теме хорошая статья. В идеале, нам нужно удалять неиспользуемые стили прямо из кода, а не просто фильтровать их под финальный продукт.
Возможно, лучший выход – делать и то и то. Во-первых, запускать его как пребилд шаг для оптимизации кода. Во-вторых, запускать шаг билда для оптимизации стилей, которые вы не контролируете.
Использование командной строки
uncss http://your-site.foo/ > unused-styles.css
uncss http : //your-site.foo/ > unused-styles.css |
Результат разбивается на стили сайта your-site.com и браузер Chrome, но хранятся в одном файле. На моем сайте есть шрифт font-awesome, и все иконки, которые не используются на домашней странице, попали в вывод UnCSS. Сейчас мне это неважно. Их можно спрятать, если запустить команду еще раз и указать ignoreSheets.
Обратите внимание, что ignoreSheets может принимать строку (полный URL стиля, который нужно проигнорировать) или регулярное выражение. С регулярным выражением проще, так как там меньше символов, и оно покрывает возможные изменения в пути к файлу.
IgnoreSheets /.*font-awesome.min.css/
Вот такое сообщение об ошибке выскакивает при таймауте страницы. Таймаут можно увеличить с помощью -t N, где N – количество миллисекунд (не ставьте –t 360, чтобы потом удивляться, почему код не подождал 5 минут).
Вывод: UnCSS удобнее, так как ближе к месту, где я редактирую стили. Выходной файл полезен при исключении ненужных стилей. Я вижу ему применение из-за опции –includeSheets, которая автоматически игнорирует все, что попало под регулярное выражение. Удобно для, например, сайтов в WordPress, где различные плагины могут подтягивать свои стили, но разработчику нужны только стили темы style.css и т.д.
Какой инструмент использовать?
Сначала я выбор отдал UnCSS и удобной командной строке. Однако пока я писал эту статью, я попробовал их на еще паре сайтов и получил менее перспективные результаты. В частности, у меня есть несколько сайтов, созданных пару лет назад, на которых используется фреймворк, где задействованы постоянные комментарии /*!*…*/. Они плохо работают с PostCSS, поэтому и с UnCSS. Я еще не вникал в проблему, но, возможно, более новая версия PostCSS прощает такие комментарии. Тем не менее, прямо сейчас это стало еще одним барьером, и я не могу полностью использовать UnCSS в своей работе.
Здравствуйте, уважаемые читатели блога сайт. Это небольшая заметка из серии «самому себе на память». Возникла идея убрать лишние строки из файла стилей. За семь лет существования блога много чего поменялось, но строки в файлике STYLE.CSS оставались (на всякий случай или просто забывал их убирать). Сейчас мне показалось, что он стал слишком много весить, а посему возникла идея его почистить.
Делать это вручную довольно сложно, да и не нужно. Есть способы данный процесс автоматизировать. Часть из них у меня не сработала, за что-то нужно было платить и я посчитал это излишним. В итоге я воспользовался полуавтоматическим методом, о котором и напишу в ближайших нескольких абзацах. Забегая вперед скажу, что уменьшить размер файла CSS удалось чуть ли не в два раза, что меня даже несколько удивило.
Варианты поиска ненужных для работы сайта CSS стилей
Замена файла стилей (его содержимого — старое удалил, а новое вставил, после чего сохранил изменения через файлзилу) на новый (покоцанный) видимых изменений на сайте не вызвало (пока, во всяком случае, не выявил). В общем, я очень доволен и рекомендую попробовать. Быстро, просто и удобно (а так же бесплатно).
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на");">
Вам может быть интересно
Как увеличить скорость загрузки сайта по максимуму и оптимизация нагрузки на сервер
CSS - что это такое, как таблицы каскадных стилей подключаются к Html коду с помощью Style и Link
Оптимизация и сжатие CSS в Page Speed - как отключить внешние файлы стилей и объединить их в один для ускорения загрузки
Как настроить чередование фонового цвета строк таблиц, списков и прочих Html элементов на сайте с помощью псевдокласса nth-child
Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
List style (type, image, position) - Css правила для настройки внешнего вида списков в Html коде
Как получить быстрый сайт - оптимизация (сжатие) изображений и скриптов, а так же уменьшение числа Http запросов
Приветствую всех читателей текущей статьи, а также подписчиков моего обучающего блога. Наверное, вы не раз сталкивались с проблемой, когда стилевая разметка выполнена идеально, но несмотря на это в страницы несколько отличаются. Для того чтобы этого не было я расскажу вам, что такое очистка 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:
- Как я уже и говорил, первое, что должно отработать в css-коде, это сброс параметров. Хоть это и интуитивно понятно, но очень часто новички и разработчики с опытом спотыкаются об эту ошибку;
- Считается хорошим тоном использовать отдельный css-документ для CSS Reset. К тому же такой файл становится универсальным инструментом девелопера и может быть использован в разных веб-проектах;
- Не бойтесь внедрять персональные модификации или создавать свои собственные reset-фреймворки;
- Старайтесь не слепо использовать готовые решения по сбросу стилей и после переопределять некоторые параметры. Это грозит избыточностью кода. А такое айтишники не любят. Поэтому в случае с Yahoo CSS Reset если вам в этих свойствах: caption, th {text-align: left;} нужно выравнивание по центру, а не слева, то смело пишите ключевое слово center.
Что касается меня, то я использую свой CSS Reset, который включает в себя основные общие правила шаблонов и мои поправки.
На этом статья подошла к концу. Буду благодарен, если вы оцените мою работу по достоинству, а также вступите в ряды моих подписчиков. Не забывайте делиться ссылкой на мой блог с друзьями и коллегами. Удачи!
Пока-пока!
С уважением, Роман Чуешов
Прочитано: 114 раз
