User agent stylesheet как убрать

Отключение стилей автозаполнения

При авто-заполнении инпутов, Chrome выставляет следующие стили для авто-заполненных полей. Как эти стили перекрыть или отключить? Именно стили, а не само по себе автозаполение. И следующий код не отключает стили автозаполнения:

input:-webkit-autofill

Отслеживать
задан 17 мая 2016 в 23:26
JamesJGoodwin JamesJGoodwin
3,968 6 6 золотых знаков 39 39 серебряных знаков 74 74 бронзовых знака
Вы не должны этого хотеть
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; /* выставляется желаемая задержка */ >

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-тегам (например: ) изначально предоставляются браузером (клиентским приложением).

Повторим еще раз:

1. initail : базовые или начальные значения существуют только для CSS-свойств и не имеют никакого отношения к HTML-элементам,
2. user-agent : стили клиентского-приложения (браузера) являются CSS-свойствами и их значениями, устанавливаемыми для каждого HTML-элемента браузером по умолчанию.

О сбросе стилей

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

Например, сбросим стили для заголовков первого уровня:

Следует помнить, что свойство all может принимать и другие значение, такие как initial или inherit .

Поддержка браузерами

1. inherit : работает во всех актуальных версиях популярных браузеров, включая Internet Explorer 11,
2. 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 .
мир глазами веб-разработчика

Как убрать стили браузера и зачем нужно сбрасывать CSS, файл reset.css

09.07.18 ИТ / CSS 15135

Современные браузеры содержат свои базовые стили CSS для многих элементов, это можно заметить, открыв консоль разработчика и наведя на любой элемент — в консоли отобразятся его стили, даже если Вы ничего не прописывали. Помечаются они обычно надписью «user agent stylesheet». Это и есть родные стили браузера, которые он применяет к элементам. Зачем нужно их сбрасывать и всегда ли следует это делать?

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

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

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

Как сбросить стили браузера, а точнее удалить их? Раньше часто можно было увидеть на многих сайтах подключение файлов reset.css, в которых содержались огромные перечисления элементов HTML, для которых перечислялись сбрасывающие свойства. Эти свойства по сути просто обнуляли отступы, дизайн и т.д. Но использование файла reset.css не самый лучший вариант, так как это подключение лишнего файла, а значит и замедление скорости загрузки сайта. Но это не все, на составление таких стилей придется потратить немало времени, а потом может выясниться, что этот файл только мешает и сбивает с толку при верстке.

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

Как запретить user agent stylesheet перекрывать мои классы?

Всем привет!
Впервые столкнулся с такой проблемой — мои классы перекрываются значением из user agent stylesheet, везде оно в формате «display: none! important». На тестовом сайте все работает нормально, а на боевом такая подстава.
При изменении названия класса в html все работает, но это не варик — на названия классов завязаны скрипты, это путь к куче ошибок.
Что пробовал:

• Проверить правильность написания
• Добавить normalize.css до своего файла
• Вставить в своем CSS импортанты
• Вставить все классы в style.css темы (дело происходит в вордпрессе)
• Обновить кэш:)

Кто сталкивался? Подскажите плз куда думать.

• Вопрос задан 06 сент. 2023
• 232 просмотра

Комментировать
Решения вопроса 1

Varikweru @Varikweru Автор вопроса

Хех, я нашел, в чем причина:) у всех этих классов в названии было «ad_» в начале — и их заблокировал Адблок, который я забыл отключить на боевом сайте. Если ВДРУГ у кого-то возникнет такая проблема — скажете мне спасибо:)

Ответ написан 06 сент. 2023

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

Сергей delphinpro @delphinpro Куратор тега CSS

Кирилл Никитин, просто поменять название класса. «Рекламные» названия лучше не применять, известный факт.

Сергей delphinpro, ну я как бы несколько иронично на это и намекал, ибо:

При изменении названия класса в html все работает, но это не варик — на названия классов завязаны скрипты, это путь к куче ошибок.

Varikweru @Varikweru Автор вопроса

Кирилл Никитин, это да, но я рад, что хотя бы понял, а то непонятно было, что это и не появится ли вновь:)