Как выключить css на сайте
Как отключить CSS в браузере для целей тестирования
Можно ли отключить все внешние CSS в браузере (Firefox, Chrome…)?
Я хочу убедиться, что моя веб-страница отображается нормально, даже если файлы CSS не загружены.
Я не имел ввиду, что хочу преобразовать внешний CSS в inline. Но я хочу, чтобы явным образом отключил все CSS из браузера, чтобы я мог более легко и легко изменять мои элементы.
Я знаю, что могу удалить ссылку записи, но что, если у меня много связанных страниц?
Плагин для веб-разработчиков для Firefox и Chrome может это сделать
После установки плагина опция доступна в меню CSS. Например, CSS > Disable Styles > Disable All Styles
В Chrome/Chromium вы можете сделать это в консоли разработчика.
Если панель инструментов Web Dev установлена, люди могут использовать эти быстрые клавиши: Command + Shift + S (Mac) и Control + Shift + S (Win)
Этот script работает для меня (наконечник шляпы для scrappedcola)
встроенный стиль остается неповрежденным, хотя
Установите Adblock Plus, затем добавьте правило *.css в опции Фильтры (вкладка пользовательских фильтров). Метод влияет только на внешние таблицы стилей. Он не отключает встроенные стили.
Этот метод – именно то, что вы просили.
Просто запустите следующий фрагмент и перетащите ссылку на панель закладок/избранное:
Еще один способ добиться решения @David Baucum за меньшее количество шагов:
В некоторых случаях он может быть более удобным.
В Firefox самый простой способ – с помощью команды меню “Вид” > “Стиль страницы” > “Нет стиля”. Но это также отключает эффекты некоторой презентационной разметки HTML. Поэтому использование плагинов, предложенное @JoelKuiper, обычно лучше; они дают большую гибкость (например, отключение только некоторых таблиц стилей).
Я попробовал в инструментах разработчика Chrome, и этот метод действителен только в том случае, если CSS включены в качестве внешних файлов, и он не будет работать для встроенных стилей.
Результат в простой HTML-странице
Для страниц, которые полагаются на внешний CSS (большинство страниц в настоящее время), простым и надежным решением является уничтожение элемента head :
Щелкните правой кнопкой мыши эту страницу (в Chrome/Firefox), выберите “Осмотр”, вставьте код в консоли devtools и нажмите “Enter”.
Версия букмарклета того же кода, которую вы можете вставить в качестве URL закладки:
Теперь нажатие закладки на панели “Избранное” покажет страницу без каких-либо стилей CSS.
Удаление головы не будет работать для страниц, использующих встроенные стили.
Если вы используете Safari для MacOS, тогда:
Поскольку большинство ответов выглядят довольно старыми, ссылаясь на пункты меню, которые, похоже, не могут найти в текущих версиях популярных браузеров, вот как это сделать в текущей версии Firefox Developer Edition:
На самом деле, это проще, чем вы думаете. В любых браузерах нажмите F12, чтобы открыть консоль отладки. Это работает для IE, Firefox и Chrome. Не уверен в Opera. Затем закомментируйте CSS в окнах элементов. Что это.
При проверке HTML с помощью средства разработки браузера, который вы предпочитаете (например, Chrome Devtools), найдите элемент и вообще удалите его.
Обратите внимание, что этот также удалит js, но для меня это самый быстрый способ получить страницу голая.
Как вы избавляетесь от неиспользуемого CSS-кода? Часть 1
Автор статьи, первую часть перевода которой мы сегодня публикуем, хотел бы, чтобы читатели заранее знали о том, что избавление от ненужного CSS — это трудная задача. Если вы это читаете в надежде найти некий инструмент, запустив который, вы сможете узнать о том, какой именно CSS-код можно безбоязненно удалить из вашего проекта, то… Есть подобные инструменты, но их нужно использовать крайне осторожно, так как ни один из них не способен дать достойный ответ на вопрос о неиспользуемом CSS.
Несложно понять, что любому веб-разработчику хотелось бы взять некую утилиту, запустить её, и удалить тот ненужный CSS, о котором она сообщит. Пара минут — и сайт ускорен. Но не всё так просто. Автор этого материала полагает, что к подобным инструмента стоит относиться со здоровым скептицизмом. Ни один из них не лжёт разработчику. Эти инструменты обычно просто не обладают достаточным объёмом информации, позволяющим им выдать результаты, которым можно безоговорочно доверять. Но это не означает, что такими инструментами невозможно пользоваться. Не значит это и того, что от неиспользуемого CSS никак нельзя избавиться. Обсудим это.
Зачем избавляться от неиспользуемого CSS?
Я полагаю, что главную причину, по которой кому-то может понадобиться избавиться от неиспользуемого CSS, можно описать с помощью следующего примера. Предположим, вы пользуетесь CSS-фреймворком (вроде Bootstrap), и в ваш проект попадает весь CSS-код этого фреймворка. А реально в проекте применяется лишь небольшая часть такого кода. Как избавиться от всего ненужного?
Я могу проникнуться чувствами того, кто оказался в подобной ситуации. CSS-фреймворки часто не дают разработчикам простых способов выбора именно тех возможностей, которые применяются в конкретных проектах. При этом доведение исходного кода фреймворка до состояния, идеально соответствующего некоему проекту, может потребовать от команды такого уровня опыта, которого у неё может и не быть. Подобная ситуация уже сама по себе может стать причиной поиска фреймворка.
Предположим, вы загружаете 100 Кб CSS. Я бы сказал, что это много. (В тот момент, когда я это пишу, на сайте css-tricks.com используется около 23 Кб CSS. Здесь имеется довольно много страниц и шаблонов. При этом я ничего особого не делал для того, чтобы уменьшить размер CSS.) Тут у вас возникает подозрение, что некую часть из этого объёма кода вы не используете. А, может быть, вы находите некие доказательства этого. Я тут вижу причину бить тревогу. Если у вас имеется JPG-файл объёмом в 100 Кб, который можно сжать до 20 Кб, обработав его неким инструментом, то это замечательно, и это стоит сделать. Но если нечто подобное сделать с CSS, то подобное гораздо важнее. Дело в том, что CSS загружается в начале загрузки страницы и является ресурсом, блокирующим рендеринг. JPG-файлы такими ресурсами не являются.
Анализ ситуации с помощью инструментов разработчика Chrome
Инструменты разработчика Chrome, вкладка Coverage
Мне неприятно это говорить, но анализ сайта с помощью вкладки Coverage оказался практически бессмысленным занятием. То, что я увидел, эти 70.7%, представляет собой ужасную картину, которая играет на моих сомнениях, но ничего конкретного этот анализ мне не даёт, в результате мне остаётся лишь беспокоиться о том, что на моём сайте что-то не так.
Возможно, подобный анализ сайта и будет тем самым механизмом, который наведёт вас на мысль о том, что вам нужно найти и удалить CSS-код, который загружается, но в вашем проекте не используется.
Моя первостепенная проблема
В деле поиска и удаления неиспользуемого CSS-кода меня больше всего беспокоит следующее. Предположим, некто смотрит на результаты анализа и видит неиспользуемые фрагменты CSS.
Неиспользуемые фрагменты CSS
Он думает: «Отлично, удаляю всё лишнее!». Лишнее удаляется, а потом оказывается, что было оно вовсе не лишним, и что его удаление привело к большим проблемам со стилизацией на всём сайте. Вот в чём тут дело: можно быть полностью уверенным в том, что некий CSS-селектор не используется, только если провести изыскания по следующему плану:
Нечто подобное — это слишком сложно для автоматических средств анализа CSS. Они не в состоянии идеально выполнить подобные проверки, особенно если учитывать анализ сайта в ситуации неопределённости. Речь идёт, например, об исследовании проектов в различных браузерных контекстах (разные размеры экранов, разные возможности браузеров, разные браузеры), и об учёте влияния на сайт сторонних библиотек.
А сейчас я хочу показать пример того, как все те проблемы, о которых я только что рассказал, выглядят на практике.
PurifyCSS Online
Я решил попробовать оптимизировать css-tricks.com с помощью ресурса PurifyCSS Online. Ему можно передавать ссылки, а он тут же выдаёт готовый к использованию CSS. Я «скормил» этому сайту css-tricks.com и в моём распоряжении оказался новый CSS-код. Вот что получилось после того, как я этим кодом воспользовался.
Слева — обычный вид css-tricks.com. Справа — результат применения нового, «очищенного» CSS. В этом новом коде недоставало много такого, что нужно для различных страниц сайта
Вероятно, я уже рассказал достаточно для того, чтобы вы поняли, что я не случайно так мало доверяю подобным инструментам.
Очистка CSS с помощью PurifyCSS как часть процесса сборки проекта
PurifyCSS, вероятно, чаще используется в роли инструмента, применяемого при сборке проекта, чем в роли онлайн-средства для очистки CSS. В документации проекта есть инструкции по его использованию при применении Grunt, Gulp и webpack. Вот, например, обработка файлов по шаблонам:
Такой подход позволяет добиться гораздо большей точности. Материалы сайта, передаваемые на анализ, могут представлять собой список, в который входит каждый шаблон, каждый фрагмент, используемый для построения страниц, каждый JavaScript-файл. Может оказаться так, что подобный список ресурсов непросто поддерживать, но это позволяет учесть всё, что можно учесть. Это, правда, не относится к содержимому страниц, лежащему в неких хранилищах (вроде блог-постов, которые хранятся в базе данных), и к стороннему JavaScript-коду, но, возможно, это в некоторых случаях и неважно, или, может быть, разработчик способен будет как-то учесть CSS-нужды подобных ресурсов.
В документации к конкуренту PurifyCSS PurgeCSS есть предупреждение, касающееся способа обработки ресурсов, используемого PurifyCSS. А именно, речь идёт о том, что PurifyCSS может работать с ресурсами любых типов, а не только с HTML и JavaScript. PurifyCSS в ходе работы анализирует все слова в файлах и сравнивает их с селекторами в CSS-коде. Каждое слово рассматривается как селектор. То есть — множество селекторов может быть ошибочно признано используемыми на сайте. Например, в текстовом наполнении файла, в обычном предложении, может присутствовать слово, соответствующее некоему CSS-селектору.
Об этой особенности PurifyCSS стоит помнить. Этот инструмент ищет CSS-селекторы в материалах сайта, применяя предельно простой алгоритм. Это, с одной стороны, толковая идея, а с другой — это довольно-таки опасно.
Сервис UnusedCSS
Ручная настройка некоего инструмента, проводимая так, чтобы этот инструмент проанализировал бы каждую страницу, чтобы он рассмотрел её со всех возможных точек зрения, это, конечно, скучная рутина. При этом такая работа должна проводиться на ежедневной основе, так как анализируемые сведения о сайте должны пополняться новыми данными по мере развития проекта. Существует один онлайн-сервис, который называется UnusedCSS. Он самостоятельно обходит страницы сайта, избавляя разработчика от массы однообразной работы. Этому сервису достаточно передать единственную ссылку на сайт.
Я оформил платную подписку на этот сервис и проанализировал с его помощью css-tricks.com. Надо признать, что после того, как я взглянул на результаты, у меня возникло такое ощущение, что выглядят они гораздо точнее, чем то, что мне доводилось видеть раньше.
Анализ css-tricks.com с помощью UnusedCSS. В отчёте говорится о том, что на сайте используется 93% от загружаемого CSS-кода. Мне это кажется близким к истине, так как я вручную написал весь CSS-код для этого сайта
Сервис, кроме того, позволяет загрузить файл с очищенным CSS-кодом и предлагает возможности по управлению содержимым этого файла. Например, это включение и отключение селекторов, которые разработчику хотелось бы или не хотелось бы добавлять в CSS-код. Предположим, разработчик видит имя класса, которое, по мнению UnusedCSS, на сайте не нужно, но разработчик совершенно точно знает о том, что без этого имени класса он обойтись не может. В результате ошибочно признанный ненужным код можно отметить как нужный. Среди других возможностей UnusedCSS можно отметить работу с префиксами и удаление дублирующихся селекторов.
Мне очень понравилось то, что UnusedCSS дал мне гораздо более точные результаты, чем другие инструменты. Однако в данных, выдаваемых этим сервисом, слишком много «шума», и я, к тому же, пока не знаю о том, как включить UnusedCSS в регулярно повторяющийся процесс сборки проекта и вывода его новых версий в продакшн.
Уважаемые читатели! Сталкивались ли вы с проблемой наличия неиспользуемого CSS-кода в своих проектах?
Как убрать стили браузера и зачем нужно сбрасывать CSS, файл reset.css
CSS позволяет задать нужное оформление любой странице, без него код на HTML выглядел бы уныло. Действительно, CSS практически полностью отвечает за внешнее оформление любого тега, ведь тег – это всего лишь кирпичик, стоит убрать у него стили, от него останется нативный каркас с функциональной составляющей. Зачем браузеры добавляют свои стили к элементам HTML? Как раз по это причине. Ведь если не будут добавлены базовые стили, на них страшно будет смотреть, пусть даже Вы и разработчик, всё содержимое попросту склеится и наедет друг на друга.
Производители браузеров стремятся составлять базовые стили CSS таким образом, чтобы элементы выглядели стандартизовано. Разные движки и производители стараются использовать одинаковые таблицы стилей, чтобы во всех браузерах не было колоссальных различий в оформлении тегов. Часто можно управлять некоторыми стилями прямо из настроек браузера, например, можно задать цвет ссылок. Это и есть базовые стили CSS браузера.
Итак, мы разобрались для чего браузер добавляет свои стили к элементам HTML. Но иногда нужно убрать стили браузера и применить свои. Это может понадобится для создания уникального оформления элементов, создания необычного дизайна. И тут базовые стили браузера могут помешать.
Как сбросить стили браузера, а точнее удалить их? Раньше часто можно было увидеть на многих сайтах подключение файлов reset.css, в которых содержались огромные перечисления элементов HTML, для которых перечислялись сбрасывающие свойства. Эти свойства по сути просто обнуляли отступы, дизайн и т.д. Но использование файла reset.css не самый лучший вариант, так как это подключение лишнего файла, а значит и замедление скорости загрузки сайта. Но это не все, на составление таких стилей придется потратить немало времени, а потом может выясниться, что этот файл только мешает и сбивает с толку при верстке.
Поэтому, в настоящее время нет необходимости составлять отдельные файлы для сброса стилей. При разработке достаточно смотреть в консоль разработчика и обнулять нужные свойства путем переопределения стилей – нужно просто задать свое свойство CSS для тега, предыдущее будет отменено. Для некоторых базовых тегов, можно в общем файле стилей Вашего сайта сделать сброс их основных свойств. Таким образом, сброс стилей браузера будет выполняться по необходимости, за счет применения стилей сайта.
WordPress CSS – Как отключить любые стили плагинов в function.php
И вот настал тот торжественный момент когда проект грубо говоря полностью готов, всё сделано и последним штрихом осталось произвести ускорение сайта. Это заключительная фаза всех трудов и стараний но иногда случается так что по своей продолжительности данный этап разработки занимает внушительный ресурс времени. Основной причиной трудозатрат являются файлы каскадных стилей CSS, так как веб мастеру необходимо не только произвести работу с оптимизацией CSS файлов, а также настроить очередность вывода каждого файла в зависимости от его важности для отображения того или иного элемента (или элементов) сайта.
Отключение стилей плагинов в function.php
Часто случается Так что необходимо отключить файл CSS одного из определенных плагинов дабы стили плагина не блокировали рендеринг страницы во время загрузки сайта. Код ниже позволит отключить файл стилей практически любого плагина:
Как определить идентификатор подключаемого css файла
Для того чтобы отключить файл стилей определенного плагина, в начале Вам необходимо узнать идентификатор данного файла стилей. В примере выше данный перечень названий является идентификаторами файлов стилей:
Для того чтобы определить какой идентификатор подключенного файла стилей, достаточно заглянуть в код страницы, и если например блок подключения стилей выглядит так:
Значит идентификатор имеет такое имя:
То есть окончание в виде:
Откидываем и получаем правильное имя идентификатора.
Правильное подключение отключенных файлов стилей
Здесь важным моментом является тот факт, что мало отключить стили плагина, ведь они могут понадобиться для отображения определенных (а возможно и важных) элементов страницы. По этому после отключения стилей плагинов, настоятельно рекомендую создать отдельный файл стилей в котором будут находиться все отключенные стили. После чего отдельно подключить файл с отключенными стилями например вот так:
Сброс / удаление стилей CSS только для элемента
Я уверен, что это должно было быть упомянуто/задано раньше, но искали возраст без везения, моя терминология должна быть неправильной!
Я смутно помню твит, который я видел некоторое время назад, который предположил, что существует правило css, которое удалит любые стили, ранее установленные в таблице стилей для определенного элемента.
хорошим примером использования может быть сайт mobile-first RWD, где большая часть стиля используется для определенного элемента в представления с малым экраном необходимо «сбросить» или Удалить для того же элемента в представлении рабочего стола.
правило css, которое может достичь чего-то вроде:
таким образом, мы могли бы быстро удалить или переустановить стиль без необходимости объявлять каждое свойство.
14 ответов
на CSS3 с сайта initial задает CSS3 свойство начального значения, как определено в спецификации. The initial ключевое слово широкая поддержка браузеров за исключением IE и Opera Mini семей.
поскольку отсутствие поддержки IE может вызвать проблему, вот некоторые из способов, которыми вы можете сбросить некоторые свойства CSS до их начальных значений:
как упоминалось в комментарии @user566245:
это правильно в принципе, но отдельные пробег может варьироваться. Для пример некоторые элементы, такие как textarea по умолчанию имеют границу, применение этого сброса отобразит границу textarea меньше.
[POST EDIT FEB 4, ‘ 17] Upvoted для того, чтобы стать современной нормой, пользователь Юст
например, если автор указывает all: initial на элементе, он будет заблокируйте все наследование и сбросьте все свойства, как будто нет правил появляется на уровне автора, пользователя или агента пользователя каскада.
это может быть полезно для корневого элемента «виджета», включенного в страница, которая не хочет наследовать стили внешней страницы. Обратите внимание, однако, что любой стиль» по умолчанию » применяется к этому элементу (например как, например, дисплей: блок из таблицы стилей UA на элементах блока, таких как as ) также будет сдуто.
никто не думал, кроме css, чтобы сбросить css? Да?
getElementsByTagName («* » ) вернет все элементы из DOM. Тогда ты может устанавливать стили для каждого элемента в коллекции:
ответил 9 февраля ‘ 13 в 20: 15 по VisioN
для сравнения, вот Firefox 40.0 список значений
здесь font-style: oblique запускает операцию DOM.
для будущих читателей. Я думаю, что это то, что подразумевалось, но в настоящее время не очень широко поддерживается (см. ниже):
позвольте мне ответить на этот вопрос подробно, потому что это было источником боли для меня в течение нескольких лет, и очень немногие люди действительно понимают проблему и почему это важно для ее решения. Если бы я вообще отвечал за спецификацию CSS, я был бы смущен, честно говоря, за то, что не занимался этим в последнее десятилетие.
Проблема
нужно вставить разметку в HTML-документ, и он должен выглядеть определенным образом. Кроме того, вы не является владельцем этого документа, поэтому вы не можете изменить существующие правила стиля. Вы понятия не имеете, что таблицы стилей мог бы быть, или что они могут изменить.
случаи использования для этого, когда вы предоставляете отображаемый компонент для неизвестных сторонних веб-сайтов для использования. Примерами этого могут служить:
Простое Исправление
Поместите все в iframe. Это имеет свой собственный набор ограничений:
Если ваш контент can укладывается в коробку, вы можете получить вокруг проблемы №1, имея ваш контент, напишите iframe и явно установите контент, таким образом, обходя проблему, так как iframe и документ будут иметь один и тот же домен.
решение CSS
Я искать далеко и широко для решения этой проблемы, но, к сожалению, нет. Лучшее, что вы можете сделать, это явно переопределить все возможные свойства, которые можно переопределить, и переопределить их на то, что вы думаю их значение по умолчанию должно быть.
для этой проблемы найдено совершенно новое решение.
вам нужно «доступно правило css, которое удалит все стили, ранее заданные в таблице стилей для определенного элемента.»
Итак, если элемент имеет имя класса, например remove-all-styles :
или в вашем случае:
здесь мы использовали одно классное свойство CSS с другим классным значением CSS.
и когда мы используем revert С all свойства, все свойства CSS примененный к этому элементу будет возвращен к стилям user/user-agent.
например: если мы хотим изолировать встроенные виджеты / компоненты от стилей страницы, которая их содержит, мы могли бы написать:
который вернет все author styles (т. е. разработчик CSS) в user styles (стили, которые a пользователь нашего сайта set-less chance scenario) или к user-agent стили, если не установлены пользовательские стили.
и только поддержка: только Safari 9.1 и iOS Safari 9.3 поддерживают revert значение на момент написания.
поэтому я скажу, что используйте этот стиль и отступление к любым другим ответам.