Css-3 — Как почистить CSS


Содержание

Сбросить /удалить стили CSS только для элемента

Я уверен, что об этом уже говорилось /спрашивалось, но я искал возраст без удачи, моя терминология, должно быть, неверна!

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

Хорошим примером использования может служить сайт RWD, ориентированный на мобильные устройства, где большая часть стилей, используемых для определенного элемента в представлениях маленького экрана, нуждается в «сбросе» или удалении для того же элемента в представлении рабочего стола. >

Правило CSS, которое может достичь чего-то вроде:

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

12 ответов

Ключевое слово CSS3 initial устанавливает Свойство CSS3 к начальному значению, как определено в спецификации . Ключевое слово initial имеет широкая поддержка браузера , за исключением семейств IE и Opera Mini.

Поскольку отсутствие поддержки IE может вызвать проблемы, вот несколько способов, которыми вы можете сбросить некоторые свойства CSS до их начальных значений:

Как упомянуто в комментарии @ user566245:

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

[POST EDIT 4 февраля ’17] Голосовал за то, что стал современной нормой, пользователь Joost

Например, если автор указывает все: начальный элемент, он будет заблокировать все наследование и сбросить все свойства, как будто нет правил появился на уровне автора, пользователя или агента пользователя.

Это может быть полезно для корневого элемента «виджета», включенного в страница, которая не желает наследовать стили внешней страницы. Обратите внимание, что любой стиль «по умолчанию» применяется к этому элементу (например, как, например, display: блок из таблицы стилей UA для таких элементов блока, как а) тоже сдулся.

Никто не думал о чем-то кроме css для сброса css? Да?

getElementsByTagName («*») вернет все элементы из DOM. Затем вы может установить стили для каждого элемента в коллекции:

ответил 9 и 13 февраля в 20:15 VisioN

Со всем этим сказано; я не думаю, что сброс css является чем-то выполнимым, если только у нас не останется только один веб-браузер . если в конце браузер установит ‘default’.

Для сравнения, вот список значений Firefox 40.0 для

где font-style: oblique запускает операцию DOM.

Для будущих читателей. Я думаю, что это было то, что имелось в виду, но в настоящее время не очень широко поддерживается (см. Ниже):

  • Поддерживается в ( источнике ): Chrome 37, Firefox 27, IE 11, Opera 24
  • Не поддерживается: Safari

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

Проблема

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

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

  1. Рекламный тег
  2. Создание расширения для браузера, в которое вставляется контент
  3. Виджет любого типа

Самое простое исправление

Поместите все в iframe. Это имеет свой собственный набор ограничений:

  1. Междоменные ограничения. Ваш контент вообще не будет иметь доступа к исходному документу. Вы не можете наложить контент, изменить DOM и т. Д.
  2. Ограничения отображения. Ваш контент заблокирован внутри прямоугольника.

Если ваш контент может уместиться в поле, вы можете обойти проблему # 1, если ваш контент напишет iframe и явно задает контент, обходя тем самым проблему, поскольку iframe и document будет использовать тот же домен.

Решение CSS

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

Даже когда вы переопределяете, невозможно гарантировать, что более целенаправленное правило CSS не переопределит ваше . Лучшее, что вы можете здесь сделать, — это настроить ваши правила переопределения как можно точнее, и надеяться, что родительский документ случайно не превзойдет его: используйте скрытый или случайный идентификатор в родительском элементе вашего контента и используйте! Важное во всех определениях значений свойств .

Для этой проблемы найдено новое решение.

Вам необходимо «Доступно правило css, которое удалит все стили, ранее установленные в таблице стилей для определенного элемента.»

Итак, если элемент имеет имя класса, например, remove-all-styles :

Сбросит все стили, примененные other-class , another-class и все другие унаследованные и примененные стили к этому div .

Или в вашем случае:

Здесь мы использовали одно классное свойство CSS с другим классным значением CSS.

На самом деле revert , как следует из названия, возвращает это свойство к своему стиль пользователя или агента пользователя.

И когда мы используем revert с all свойство, все свойства CSS Применительно к этому элементу будут возвращены стили пользователя /агента пользователя.

Например: если мы хотим изолировать встроенные виджеты /компоненты от стилей страницы, на которой они находятся , мы могли бы написать:

Что вернет все author styles (т. е. CSS разработчика) в user styles (стили, которые задает пользователь нашего веб-сайта — менее вероятный сценарий) или user-agent , если нет пользователя набор стилей.

И единственной проблемой является поддержка : только Safari 9.1 и iOS Safari 9.3 поддерживают —- +: = 16 =: + —- значение на момент написания.

Поэтому я скажу использовать этот стиль и использовать любые другие ответы.

1) включает код (файл) css Yahoo CSS сбросил и затем поместил все в этот DIV:

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

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

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

Что вам нужно сделать, это обернуть этот элемент в тег h1 и проверить его. Посмотрите, какие стили CSS применяются конкретно к элементу h1.

Допустим, я вижу следующие стили, примененные к элементу.

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

Это намного чище и не просто помещает в ваш файл случайный фрагмент кода, который вы не знаете, что он на самом деле делает.

Теперь вы можете добавить этот класс к вашему h1

Если вы используете sass в системе сборки, один из способов сделать это, который будет работать во всех основных браузерах, — обернуть все ваши импорты стилей с помощью селектора: not (), например, так .

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

Конечно, все ваши стили теперь будут дополнены селектором: not (), так что это немного неаккуратно, но работает хорошо.

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

После работы со сбросом CSS, который не принес большого успеха (в основном из-за приоритета правил и сложной иерархии таблиц стилей), вызвала на помощь повсеместно распространенный jQuery, который сделал работу очень быстро и довольно грязно:

(теперь расскажите, как плохо использовать JS для работы с CSS :-))

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

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

если вы установите свой CSS в классах, Вы можете легко удалить их, используя метод jQuery removeClass (). Код ниже удаляет класс .element:

Если параметр не указан, этот метод удалит ВСЕ имена классов из выбранных элементов.

Цукерберг рекомендует:  Красиво оформляем список с помощью одного пикселя

Есть ли шанс, что вы ищете важное правило? Он не отменяет все объявления, но позволяет переопределить их.

«Когда в объявлении стиля используется правило! Important, это объявление переопределяет любое другое объявление, сделанное в CSS, где бы оно ни находилось в списке объявлений. Хотя! важный не имеет ничего общего со спецификой.»

ЛУЧШЕЕ РЕШЕНИЕ

Загрузите таблицу стилей «копировать /вставить», чтобы сбросить свойства CSS по умолчанию (стиль UA):
https://github.com/monmomo04/resetCss.git

Спасибо @ Мильче Патерн!
Я действительно искал значения свойств стиля сброса /по умолчанию. Моя первая попытка состояла в том, чтобы скопировать вычисленное значение из инструмента Dev в браузере корневого (html) элемента. Но, как он рассчитал, он выглядел бы /работал по-разному в каждой системе.
Для тех, кто сталкивается с ошибкой браузера при попытке использовать звездочку * для сброса стиля дочерних элементов, и, поскольку я знал, что это не сработало для вас, я заменил звездочку «*» вместо имени всех тегов HTML. , Браузер не зависал; Я на Chrome версии 46.0.2490.71 м.
Наконец, хорошо отметить, что эти свойства будут сбрасывать стиль к стилю по умолчанию для верхнего корневого элемента, но не к начальному значению для каждого элемента HTML. Поэтому, чтобы исправить это, я взял стили «user-agent» браузера, основанного на webkit, и реализовал его в классе «reset-this».

Очистка css стилей поможет вам правильно сверстать свои веб-странички

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

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

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

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

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

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

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

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

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

Для наглядности я сверстал небольшой пример с использованием описанного минималистичного reset-а Креспаниса.

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

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

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

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

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

Как найти и удалить неиспользуемые строки стилей (лишние селекторы) в CSS файле вашего сайта

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Это небольшая заметка из серии «самому себе на память». Возникла идея убрать лишние строки из файла стилей. За семь лет существования блога много чего поменялось, но строки в файлике STYLE.CSS оставались (на всякий случай или просто забывал их убирать). Сейчас мне показалось, что он стал слишком много весить, а посему возникла идея его почистить.

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

Варианты поиска ненужных для работы сайта CSS стилей

Как-то я уже писал, как объединить все файлы стилей в WordPress в один. По сути, нужно просто отключить файлы стилей некоторых плагинов, которые автоматом их добавляют между тегами Head в код каждой страницы сайта. Ну, а строки со стилями из этих файлов нужно перенести в основной — у меня он называется STYLE.CSS и живет в папке с используемой темой оформления.

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

В сети я нашел несколько рекомендуемых для этого дела плагинов. Остановился на плагине для Фаерфокса под названием Dust-Me. Он в реальном времени делает разбор открытой в браузере страницы мгновенно выявляя те селекторы CSS, которые оказались не используемыми для ее отрисовки.

Но этого, как вы понимаете, мало для того, чтобы выносить вердикт этим селекторам. Ведь они могут использоваться на других типах страниц вашего сайта. Что делать? Проверять их все вручную? Вовсе нет. Dust-Me умеет работать с картой вашего сайта вида сайтмар xml — достаточно будет только указать путь до нее:

Как видите, у меня в sitemap.xml около 1000 страниц и плагин успешно начал их сканирование. Примерно через сотню другую страниц он у меня затыкался и приходилось нажимать на паузу, а потом его повторно запускать.

Данный метод всем хорош, ибо позволяет проверить абсолютно все страницы своего сайта, чтобы точно знать, что лишние CSS селекторы нигде не используются и не понадобятся. Проблема в том, что Dust-Me для моего STYLE.CSS в итоге выдал ошибку при показе неиспользуемых строк (селекторов). Может быть ему не понравилась его компрессия или еще что помешало, но факт остается фактом.

Далее я зашел на платный онлайн-сервис Unused-Css.com, где зарегистрировался и указал Урл своего сайта. Они обещали в течении нескольких часов его просканировать и прислать отчет по почте. Полный вариант нового (очищенного) CSS файла стоит 25$, что, по-моему, очень дорого.

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

Суть метода удаления неиспользуемых стилей заключается в следующем:

  1. Открываете содержимое вашего файла стилей, например, загрузив файлик STYLE.CSS (или как он там у вас обзывается) по ФТП к себе на компьютер. Копируете все его нутро в буфер обмена и вставляете в окно верхнего текстового поля на приведенной странице сервиса.
  2. Проделываете ряд итераций с помощью браузера Хром и инструментов разработчика в нем спрятанных (открывается панель инстументов, например, по нажатию на F12 на клаве).
  3. Получаете на выходе «чистый» CSS код, которым можно заменить старое содержимое файлика стилей.

Методика очистки CSS файла от совсем ненужных селекторов

Вся соль как раз в манипуляциях проводимых в браузере. Открываете сначала в нем любую страницу сайта, запускаете «инструменты разработчика» (F12) и проделываете следующее: «Audits» → «Reload Page and Audit on Load» → «Run» → разверните «Web Page Performance» → разверните «Remove unused CSS rules» → разверните ваш CSS файл → скопируйте все что появилось в буфер обмена.

Выглядит все это примерно так:

Т.е. просто переставляете галочку в указанное место и жмете на запуск. По окончании процесса находите под спойлером «Remove unused CSS rules» название вашего файла стилей (у меня это STYLE.CSS) и кликаете по нему. Все CSS селекторы, которые не используются для отрисовки данной страницы, будут там приведены в столбик:

Копируете их все (от первого до последнего) в буфер обмена и вставляете в окно сервиса, помеченное на приведенном выше скриншоте цифрой 1. Т.к. это данные только с одной страницы вашего сайта, то делать по ним выводы еще рано. Поэтому повторяете все то же самое с десятком других страниц своего сайта, чтобы охватить весь их возможный набор: статьи, список рубрик, статические страницы, страницы с таблицами, страницы с оформленным кодом, страницы со списками и т.п.

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

Сервис таким образом сравнит CSS стили неиспользуемые на всех протестированных вами страницах и удалит из общего списка те, что участвовали в прорисовке хотя бы одной страницы. Чем больше страниц вы проверите, тем лучше. Когда надоест — жмите на кнопку «Удалить неиспользуемые стили» и копируйте появившееся в нижнем текстовом поле содержимое вашего обновленного (очищенного) стилевого файла.

Лично я сначала сравнил его содержимое с оригинальным файлом STYLE.CSS в Нотепад++ с помощью плагина Compare. Все удаленные из оригинала строки (у меня в каждой строке записано по селектору, чтобы уменьшить общий размер файла) подсветятся и можно будет на вскидку проанализировать целесоображность их удаления.

Никаких нареканий у меня удаленные селекторы не вызвали (они остались в STYLE.CSS от старых экспериментов или уже неиспользуемых плагинов). В итоге число строк (селекторов) у меня в файле стилей уменьшилось с почти 600 до чуть более 300. А итоговый вес файла снизился до 25 килобайт (менее 10 с учетом его gzip сжатия при передаче с сервера до браузера).

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

Очистка неиспользуемых стилей CSS с помощью PurifyCSS

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

PurifyCSS – это инструмент, написанный на JavaScript, который разбирает разметку файлов (HTML, PHP, и даже JavaScript), и затем соотносит ее со стилями CSS, которые вы используете. Любые селекторы в стилях CSS, которые не используются, будут удалены, оставляя только стили, которые вам на самом деле необходимы.

Установка инструмента

Чтобы установить PurifyCSS, вы можете скачать его непосредственно на GitHub, или установить его с помощью системы управления пакетами npm (детальнее по работе с терминалом рассказано в предыдущем уроке).

Для установки PurifyCSS через терминал, наберите в консоли следующую команду:

npm install –g purify-css

Подготовка файлов разметки и стилей CSS

Проще всего инструмент очистки стилей применяется к статическим файлам: например, указываете путь к статическому файлу с разметкой index.html и к единственному файлу стилей, с которым будет соотноситься эта разметка.

Например, складываете эти два файла в отдельную папку ( d:\purify\ ) и запускаете из этой папки консоль. Желательно запускать консоль именно из той папки, с которой нужно будет потом работать, — так нам не придется прописывать полный путь к нужным файлам, и он подставится автоматически.

Если вы используете Total Commander: откройте нужную папку, зажмите Shift и кликните правой кнопкой мыши где-то в пустом месте окна текущей папки, — это откроет контекстное меню, в котором добавлен нужный нам пункт «Открыть окно команд». При нажатии на этот пункт открывается консоль с уже прописанным путем к используемой папке.

То же можно провернуть и в простом Проводнике: откройте нужную папку, наберите в верхней строке поиска cmd и нажмите Enter. Так мы тоже откроем консоль, в которой уже прописан нужный нам путь.

Со статическими файлами все более-менее понятно, но как быть, если разметка генерируется динамически (например, движком WordPress или Magento), а файлов стилей много и все они расположены в разных местах шаблона? Мы не стали изобретать велосипед, а решили привести все эти динамические данные к статическому виду. Например, в браузере открыли через исходный код (Ctrl+U) большинство различных типов страниц (для WordPress – главную, страницу категорий, страницу тегов, страницу архивов и страницу одиночного поста; для Magento – главную, страницу категорий и страницу товара), потом методом копирования/вставки сохранили весь этот исходный код в один файл index.html, а также сохранили все стили в один файл стилей style.css.

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

Запуск PurifyCSS через консоль

Для запуска PurifyCSS, откройте папку проекта и запустите из нее командную строку (описано выше), затем в консоли выполните команду со следующим содержанием:

  • команда purifycss для непосредственного запуска приложения
  • ссылка на файл стилей CSS, которые нужно почистить (в нашем примере style.css )
  • ссылка на файл целевой разметки (в нашем примере index.html )
  • необязательный параметр —min ; включите его, если хотите, чтобы исходный файл CSS был минимизирован
  • необязательный параметр —out ; включите его, чтобы определить желаемое место для сохранения исходного файла
  • необязательный параметр —info , — используется для логирования данного процесса очистки в терминале
  • и необязательный параметр —rejected , — если указан, то в консоли будет зарегистрированы все селекторы, которые были удалены из исходного файла таблицы стилей

Наша финальная команда выглядит следующим образом (все выше указанные параметры были использованы):

purifycss style.css index.html —min —out purify-style.css —info —rejected

Вы можете вставить всю эту команду в консоль путем копирования: выделите команду и нажмите Ctrl+C, для копирования; потом, чтобы вставить скопированный текст в консоль нужно использовать комбинацию Alt+Spase (пробел), чтобы открыть меню диалогового окна, потом в появившемся меню выберите Изменить — Вставить. Это вставит весь скопированный текст в консоль и вам останется только нажать Enter, чтобы запустить очистку стилей CSS.

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

Результат

При обработке статических страниц небольшого сайта исходный файл стилей CSS стал меньше на более чем 100Кб (в основном были удалены неиспользуемые стили, взятые из фреймворка bootstrap). Это очень даже неплохой результат, и такая оптимизация позволила значительно повысить скорость загрузки сайта в браузере.

Css-3 — Как почистить CSS?

Группа: Active User
Сообщений: 2372
Регистрация: 15.12.2009
Из: мамы
Поблагодарили: 1065 раз
Репутация: 119

Забей страницу сюда и посмотри, что сервис предложит удалить в css, в разделе Remove unused CSS

Сообщение отредактировал Fallup — 16.6.2012, 11:45

Группа: User
Сообщений: 18
Регистрация: 16.6.2012
Поблагодарили: 3 раза
Репутация: 1

Группа: Active User
Сообщений: 2760
Регистрация: 21.4.2009
Из: Мытищи, МО, РФ
Поблагодарили: 1111 раз
Репутация: 163

И это сюда и это cy-pr.com учитывают все страницы сайта (т.е. кроме указанной).
И, тем более, с учётом javascript и jQuery.

Крайне сомневаюсь. Я таких инструментов не знаю, и быть их не может в природе (по крайней мере с учётом JS и jQuery, если они используются).

Группа: User
Сообщений: 18
Регистрация: 16.6.2012
Поблагодарили: 3 раза
Репутация: 1

Говорю что думаю

Группа: Active User
Сообщений: 683
Регистрация: 3.7.2010
Поблагодарили: 509 раз
Репутация: 71

Часто ждать пока дадут ответ, получается намного дольше чем начать делать самому.

Сообщение отредактировал Красавчег — 16.6.2012, 21:30

Группа: User
Сообщений: 23
Регистрация: 2.11.2010
Поблагодарили: 0 раз
Репутация: 2

Группа: User
Сообщений: 44
Регистрация: 13.6.2012
Из: Украина, Донецк-Харьков
Поблагодарили: 8 раз
Репутация: 3

Как удалить лишние CSS стили на сайте

Расскажем о сайте, который достался нам на техническую поддержку. На момент написания статьи сайт уже пережил 3-4 итерации редизайна и содержал в своем коде тучу неиспользуемых CSS стилей. Объем CSS файлов был более 2 Мб и даже в сжатом виде они составляли более 400 Кб, что довольно много. Особенно для мобильных устройств. К тому же, это очень сильно влияло на показатели в Google Pagespeed Insight.

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

Решение нашлось в заграничном сегменте и мы спешим с вами им поделиться.

Хоть разработчики FireFox и убрали возможность поиска лишних CSS стилей в браузере для пользователей, но они оставили ее в версии для разработчиков. Для работы нам понадобится скачать и установить именно ее.

Перед работой по очистке стилей настоятельно рекомендую сделать бекап хотя бы для шаблона сайта, т.к. баги могут выплыть лишь спустя какое-то время. Мы для этой операции делали вообще отдельный шаблон сайта, так удобнее потом сравнивать 2 шаблона: очищенный и исходный.

Алгоритм работы следующий:

1. Если работаете с сайтом на Битрикс, отключаем в админке сайта сжатие и объединение CSS стилей в настройках главного модуля.

2. Открываем FireFox ESR и нажимаем Shift + F2

3. В открывшейся панели пишем csscoverage start

4. Обходим все разделы сайта со всеми возможными шаблонами. Тут смысл в том, чтобы открыть все отличающиеся страницы. Не обязательно открывать 200 карточек товаров, т.к. стили в них скорее всего идентичные.

5. После обхода страниц пишем csscoverage stop

6. Получаем список файлов стилей. Зачеркнутыми будут отмечены стили, которые не используются в работе. Работать с файлом можно прямо в окне браузера, скачать уже очищенный файл нельзя. Впрочем, это и не надо, объясню почему.

Данный инструмент не понимает, используется псевдокласс или нет (:before, :after и т.д.). И тут вам нужно смотреть глазами: если стили для класса используются, то и для псевдокласса скорее всего тоже. И наоборот.

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

Все! Сохраняем очищенные файлы стилей. Визуально проходим по шаблону и сравниваем его с исходным. Прогоняем страничку через Google Pagespeed Insight и радуемся полученным результатам!

А если возникли вопросы или что-то пошло не так (Боже упаси!), то мы на связи 24/7 и всегда готовы помочь Вам решить любую проблему!

Самое полезное

Как отправлять СМС на любые события из 1С-Битрикс. Пошаговая инструкция.

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

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

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

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

ProCSSor

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

CSS Lint

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

Dirty Markup

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

CleanCSS

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

Code Beautifier

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

Spritemapper

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

Topcoat

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

CSSTidy

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

Styleneat

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

Валидатор W3C

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

Очистить div и его содержимое любого стиля CSS

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

Есть ли способ сделать это (в CSS или Javascript) или мне нужно переопределить каждый отдельный стиль, который ранее был установлен?

Я покажу код, но это то, что я хотел, чтобы этот вопрос был. Например, допустим, у меня есть div:

Так как этот div является частью более крупной страницы, он и его содержимое подвергаются стилизации (например, полям, прокладкам, шрифтам, размерам шрифта, цветам и т.д.) со своей страницы и любых файлов CSS. Есть ли способ свести на нет ВСЕ эти стили, а не индивидуально их отменять?

В будущем вы reset все свойства с all: unset объявление, но он доступен только в Firefox 27 +.

Теперь вы можете поместить свое «внутреннее» содержимое в отдельный документ и вставить его через iframe:

content.html (минимальный допустимый документ HTML5):

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

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

Как очистить css код от всех неиспользуемых селекторов?

31.07.2014, 12:11

Как правильно указывать путь css селекторов
Как будет правильнее и влияет это на что-либо ? .sidebar ul li a .sidebar a

Использование CSS-селекторов
Добрый день. У меня есть две строки «Меню_верхнее» и «Меню_нижнее». Мне нужно, чтобы при наведении.

Как проверить и очистить не используемые CSS правила?
Добрый день, уважаемые коллеги :senor: Пишу проект на Vue.js. Много компонентов, большая.

iptables закрытие всех неиспользуемых портов
iptables (centos) нужно закрыть все порты кроме: tcp 27030-27039 udp 1200,27000-27015 и ssh порт.

Как удалить неиспользуемые стили из CSS?

Имеется HTML и CSS файл, в котором много неиспользуемых стилей CSS которые хотелось бы удалить в автоматическом режиме и оставить только те стили, которые используются. Как и чем это сделать?

1 ответ 1

Используйте uncss:

А для сборки, нужно скачать и установить node.js, в проекте создать файлы: package.json, gulpfile.js.

Минимальное содержимое package.json:

В командной строке (лучше бы coneEmu консоль) выполнить установку gulp npm install -g gulp npm install —save-dev gulp

Установить gulp-uncss: npm install —save-dev gulp-uncss

Цукерберг рекомендует:  Help - Как правильно задавать вопрос.
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих