Как убрать стили браузера и зачем нужно сбрасывать CSS, файл reset.css
09.07.18 ИТ / CSS 14975
Современные браузеры содержат свои базовые стили CSS для многих элементов, это можно заметить, открыв консоль разработчика и наведя на любой элемент — в консоли отобразятся его стили, даже если Вы ничего не прописывали. Помечаются они обычно надписью «user agent stylesheet». Это и есть родные стили браузера, которые он применяет к элементам. Зачем нужно их сбрасывать и всегда ли следует это делать?
CSS позволяет задать нужное оформление любой странице, без него код на HTML выглядел бы уныло. Действительно, CSS практически полностью отвечает за внешнее оформление любого тега, ведь тег – это всего лишь кирпичик, стоит убрать у него стили, от него останется нативный каркас с функциональной составляющей. Зачем браузеры добавляют свои стили к элементам HTML? Как раз по это причине. Ведь если не будут добавлены базовые стили, на них страшно будет смотреть, пусть даже Вы и разработчик, всё содержимое попросту склеится и наедет друг на друга.
Производители браузеров стремятся составлять базовые стили CSS таким образом, чтобы элементы выглядели стандартизовано. Разные движки и производители стараются использовать одинаковые таблицы стилей, чтобы во всех браузерах не было колоссальных различий в оформлении тегов. Часто можно управлять некоторыми стилями прямо из настроек браузера, например, можно задать цвет ссылок. Это и есть базовые стили CSS браузера.
Итак, мы разобрались для чего браузер добавляет свои стили к элементам HTML. Но иногда нужно убрать стили браузера и применить свои. Это может понадобится для создания уникального оформления элементов, создания необычного дизайна. И тут базовые стили браузера могут помешать.
Как сбросить стили браузера, а точнее удалить их? Раньше часто можно было увидеть на многих сайтах подключение файлов reset.css, в которых содержались огромные перечисления элементов HTML, для которых перечислялись сбрасывающие свойства. Эти свойства по сути просто обнуляли отступы, дизайн и т.д. Но использование файла reset.css не самый лучший вариант, так как это подключение лишнего файла, а значит и замедление скорости загрузки сайта. Но это не все, на составление таких стилей придется потратить немало времени, а потом может выясниться, что этот файл только мешает и сбивает с толку при верстке.
Поэтому, в настоящее время нет необходимости составлять отдельные файлы для сброса стилей. При разработке достаточно смотреть в консоль разработчика и обнулять нужные свойства путем переопределения стилей – нужно просто задать свое свойство CSS для тега, предыдущее будет отменено. Для некоторых базовых тегов, можно в общем файле стилей Вашего сайта сделать сброс их основных свойств. Таким образом, сброс стилей браузера будет выполняться по необходимости, за счет применения стилей сайта.
doctor Brain
Рано или поздно каждый frontend-разработчик сталкивается со стилями, установленными по умолчанию. Это приносит в проект массу неудобств. Обычно, верстальщик в таком случае начинает волноваться, чувствует себя неуверенно и, занимая свое время поиском решения проблемы, вспоминает всех: от создателей CSS до программистов, мастерящих известные браузеры.
Как же избавиться от такого кошмара? Существует ли какая-то секретная кнопка, которая может быстро и эффективно справиться с проблемой CSS-стилей, установленных по умолчанию?
“Да, существует” — вот короткий ответ на этот вопрос. Но, все-таки, как решить озвученную проблему? В этой короткой статье или заметке, мы познакомимся с очень простой реализацией сброса CSS-стилей, установленных по умолчанию, а точнее CSS-стилей, навязываемых нам клиентским приложением (user-agent), то есть браузером.
Стили по умолчанию
Перед тем, как перейти к решению проблемы, давайте разберемся: откуда, собственно, берутся базовые значения CSS-свойств или, если изъясняться более привычными формулировками: стили, установленные по умолчанию (default styles).
В CSS все свойства имеют начальные (initial) значения. И эти значения никаким образом не связаны с HTML-элементами.
Стили клиентского приложения
Итак, мы уже поняли, что каждое CSS-свойство имеет начальное или базовое значение. Но, при загрузке страницы в браузер, для HTML-элементов загружаются значения, установленные по умолчанию, так же известные, как стили клиентского приложения или браузера (user-agent styles).
Таким образом, сами стили клиентского приложения никак не изменяют начальные значения CSS-свойств. Они применются в соответствии с правилами, установленными для каскадных стилей и отображаются в инструментах разработчика (developer tools) браузера.
Сами HTML-элементы не имеют никаких базовых или начальных значений. Любые стили, применяемые к HTML-тегам (например: ) изначально предоставляются браузером (клиентским приложением).
Повторим еще раз:
- initail : базовые или начальные значения существуют только для CSS-свойств и не имеют никакого отношения к HTML-элементам,
- user-agent : стили клиентского-приложения (браузера) являются CSS-свойствами и их значениями, устанавливаемыми для каждого HTML-элемента браузером по умолчанию.
О сбросе стилей
В настоящее время для сброса стилей, установленных браузером по умолчанию, есть отличное решение, которое умещается всего в одну строку, и это стиль all: unset , которой нужно установить для каждого элемента, требующего сброса стилей, устанавливаемых клиентским приложением.
Например, сбросим стили для заголовков первого уровня:
Следует помнить, что свойство all может принимать и другие значение, такие как initial или inherit .
Поддержка браузерами
- inherit : работает во всех актуальных версиях популярных браузеров, включая Internet Explorer 11,
- initial , unset , revert : работает во всех актуальных версиях популярных браузеров, кроме Internet Explorer 11.
Заключение.
Надеюсь эта статья позволит Вам чуть упростить работу над проектами.
Спасибо за внимание.
Новые публикации
JavaScript: сохраняем страницу в pdf
2021-07-12
HTML: Полезные примеры
2021-07-11
CSS: Ускоряем загрузку страницы
2021-07-10
JavaScript: 5 странностей
2021-07-10
JavaScript: конструктор сортировщиков
Категории
О нас
Frontend & Backend. Статьи, обзоры, заметки, код, уроки.
© 2021 dr.Brain .
мир глазами веб-разработчика
Почему user agent stylesheet перекрывает мои стили
Тут вопрос как бы в двух плоскостях — во-первых почему это происходит и как от этого избавится? Я явно задаю размер шрифта, но браузер его переопределяет своими стилями и пофиг ему что я там написал. Причем в данном конкретном случае так делают все браузеры. Не помогает даже !important.
А во-вторых, почему вообще, в принципе, в дефолтнонастроенном браузере его стиль, без особого приказа, может перекрывать стиль установленный в таблице стилей? В чью светлую голову пришла такая мысль? Очень хочется в рожу дать.
Suntechnic ★★★★★
23.05.12 09:47:25 MSK
Примеры в студию что ли.
Deleted
( 23.05.12 14:26:24 MSK )
Ответ на: комментарий от Deleted 23.05.12 14:26:24 MSK
Первый абзац слева от картинки — таблица ячейки должна бы наследовать размер шрифта от #page-column но он переопределяется.
P.S. Только пожалуйста без комментов по поводу верстки вообще — я перетягиваю ее с существующего сайта — верстать с нуля не хочу, я и так ее изрядно поправил.
Suntechnic ★★★★★
( 23.05.12 16:47:17 MSK ) автор топика
Ответ на: комментарий от Suntechnic 23.05.12 16:47:17 MSK
>Первый абзац слева от картинки
Который из них первый абзац слева? (~_~)
Запусти Firebug/Dragonfly (в зависимости от браузера) и выдели этот элемент. Просмотри цепочку наследования CSS свойств. Возможно твоего id там банально нет.
Deleted
( 23.05.12 17:11:18 MSK )
Ответ на: комментарий от Deleted 23.05.12 17:11:18 MSK
Сорри, справа. «Подсветка в барах ресторанах и кафе сегодня полностью основано на светодиодах.» — Гоню уже.
Конечно я запускал. В том-то и дело что стиль переопределяется. Я же это в Dragonfly и вижу. Т.е. оно видит что шрифт унаследован и показывает что он переопределен. В этом и трабла.
Suntechnic ★★★★★
( 23.05.12 17:15:31 MSK ) автор топика
Ответ на: комментарий от Suntechnic 23.05.12 17:15:31 MSK
Deleted
( 23.05.12 17:24:36 MSK )
Ответ на: комментарий от Deleted 23.05.12 17:24:36 MSK
Блин, спасибо. Битрикс, такой битрикс.
Suntechnic ★★★★★
( 23.05.12 17:32:59 MSK ) автор топика
Ответ на: комментарий от Suntechnic 23.05.12 17:32:59 MSK
да, не дай бог мне с ним поработать
spiritkhl ★
( 23.05.12 19:51:24 MSK )
Ответ на: комментарий от spiritkhl 23.05.12 19:51:24 MSK
У битрикса есть при этом огромное преимущество которое компенсирует все его недостатки вместе взятые оптом — он платный. Более того — он сильно платный.
Suntechnic ★★★★★
( 24.05.12 02:41:56 MSK ) автор топика
Ответ на: комментарий от Suntechnic 24.05.12 02:41:56 MSK
Вы разработчик битрикса?
Yasenfire
( 24.05.12 13:41:37 MSK )
Ответ на: комментарий от Yasenfire 24.05.12 13:41:37 MSK
Нет. Просто поддерживаю на нем сайты, иногда (редко), делаю — исправлять чужие ляпы смешнее чем делать свои собственные 🙂
Suntechnic ★★★★★
( 24.05.12 15:24:27 MSK ) автор топика
Ответ на: комментарий от Suntechnic 24.05.12 02:41:56 MSK
Звучит как «можно получить откат» 🙂
Deleted
( 25.05.12 08:27:22 MSK )
Ответ на: комментарий от Deleted 25.05.12 08:27:22 MSK
М. Не. Совсем не то.
Просто это ценз. Люди купившие на ровном месте то, что можно плучить на халяву [я имею ввиду CMS вообще], уж наверняка и за работу заплатят, потому что они наверняка знают, что за все в интернете надо платить, и что все за что в интернете надо платить, стоит дорого.
Suntechnic ★★★★★
( 25.05.12 12:15:58 MSK ) автор топика
Ответ на: комментарий от Suntechnic 25.05.12 12:15:58 MSK
Мне собственно просто не угодила архитектура всей цмс, она не удобна, я считаю что в готовом сайте человек должен видеть только те функции, которые он потребовал в ТЗ и ничего лишнего. А в битриксе там много чего нелогичного
spiritkhl ★
( 27.05.12 03:20:05 MSK )
Ответ на: комментарий от spiritkhl 27.05.12 03:20:05 MSK
Ну согласен архитектура не самая лучшая. Но и не худшая далеко.
Мало того, что много лишнего, так еще много частных всяких решений, прикрученных непонятно зачем на основе общей идеи инфоблоков, при этом нормального интерфеса для работы с этим универсальным объектом нет. Это же нонсенс! Его приходится делать каждый раз собственными руками.
А то как оно написано? Иногда разный стиль кода внутри одного класса! А есть файлы по 2000 строк без единой функции.
А верстка? Вот прям этот случай. Я же взял стандартный шаблон из последнего битрикса и мучу его. Вижу что сверстан он с тегами html5 — ну и пусть. А доктайп у него 4. Мать вашу!
Но самое плохое как вояют под ним сайты. Это надо видеть! Вот из недавнего: https://plus.google.com/u/0/112929298698740639866/posts/CdhwYHw2Ed4
Зафигачить больше сотни правил обработки адресов где можно было бы обойтись одним. Ну это полная жесть. Вся мощь регулярных выражений.
Ну и так далее. Вобщем иногда работа у меня смешнее Амстердама.
Suntechnic ★★★★★
( 27.05.12 05:10:40 MSK ) автор топика
Ответ на: комментарий от Suntechnic 27.05.12 05:10:40 MSK
Deleted
( 27.05.12 12:35:01 MSK )
Ответ на: комментарий от Suntechnic 27.05.12 05:10:40 MSK
Вот как раз из-за этих штук я не хочу с ним связываться, всё только потому что не хочется работать над тем, где очень много тупости, просто когда видишь такое, настроение пропадает работать с продуктом.
Мне вот интересно, как происходила его разработка.
20 Петь пишут ядро, потом 20 Вась допиливают ядро, дальше 30 Саш вносят корректировки для расширения функционала, ну и никто им всем не говорил о едином стиле написания, либо говорили, но многим было пофиг на это.
Причем в некоторых моментах такой быдлокоддинг встречается, что понимаешь что там писали его в школе на уроках информатики
spiritkhl ★
( 27.05.12 13:27:42 MSK )
Ответ на: комментарий от spiritkhl 27.05.12 13:27:42 MSK
Я думаю все это связано с тем, что продукт на самом деле очень старый. Там есть код которому лет десять наверное. Версия 3 появилась в 2003. Но были же еще версии 1, 2. Разработчики меняются — продукт остается. Вот и результат. Посмотри на тот же OOo (теперь уже LO и AOo) — да там еще код от StarOffice остается! Вот и грабли. Тока у него альтернатив ко всему прочему нет.
Отключение стилей автозаполнения
При авто-заполнении инпутов, Chrome выставляет следующие стили для авто-заполненных полей. Как эти стили перекрыть или отключить? Именно стили, а не само по себе автозаполение. 
И следующий код не отключает стили автозаполнения:
input:-webkit-autofill
Отслеживать
задан 17 мая 2016 в 23:26
JamesJGoodwin JamesJGoodwin
3,968 6 6 золотых знаков 39 39 серебряных знаков 73 73 бронзовых знака
Вы не должны этого хотеть
18 мая 2016 в 4:26
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Вот что говорит MDN про :-webkit-autofill:
Note: The user agent style sheets of many browsers use !important in their :-webkit-autofill style declarations, making them non-overrideable by webpages without resorting to JavaScript hacks.
Cтили, добавляемые многими браузерами через user agent, содержат !important в объявлении свойства :-webkit-autofill , запрещая его перезапись без вмешательства хаков Javascript
Можно выкрутиться, применив хитрости:
1) в случае, если фон input должен быть какого-либо цвета, но не прозрачный:
input:-webkit-autofill < -webkit-box-shadow:0 0 0 50px white inset; /* можно изменить на любой вариант цвета */ -webkit-text-fill-color: #333; >в этом случае мы заливаем содержимое input применением внутренней тени желаемого цвета поверх цвета фона, устанавливаемого user agent stylesheet в Chrome
2) можно установить задержку на анимацию «пожелтения» фона на большой промежуток времени, тем самым давая возможность пользователю ввести свои данные и не увидеть желтый фон достаточно долго:
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active < transition: background-color 5000s ease-in-out 0s; /* выставляется желаемая задержка */ >