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

chrome : how to turn off user agent stylesheet settings?

I am trying to disable the User Agent Stylesheet in chrome. How can I turn this off/disable this?

enter image description here

1 Answer 1

Open Chrome dev tools
Click gear icon on bottom right
In General section, check or uncheck «Show user agent styles».

The Overflow Blog

Linked

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Стилизация по умолчанию от браузера

Например, если в моем браузере «Microsoft Edge» (на движке «Chromium»), в операционной системе «Windows 10», в тело HTML-страницы добавить простой текст, не указывая нигде никаких стилей, то браузер отобразит текст черным цветом на белом фоне. А если заглянуть при этом в инструмент «Elements» из инструментов разработчика (F12) браузера, то можно заметить, что браузер добавил к HTML-элементу body такой стиль:
Таким образом, наш текст еще и аккуратно отодвинут от границ области просмотра на 8 пикселей.

Этот стиль, как видно в инструменте разработчика «Elements», помечен надписью «user agent stylesheet». Что это значит? Вообще «user agent» — это вид программ, на русский переводится как «агент пользователя». В данном случае под этим словосочетанием подразумевается наш браузер, который служит агентом пользователя, посредником между пользователем и вебом (Всемирной паутиной). То есть словосочетание «user agent stylesheet» переводится на русский как «таблица стилей браузера».

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

Я не понял, откуда берутся цвет текста и фона по умолчанию (через инструмент разработчика «Elements» это не видно), возможно, тоже из таблицы стилей браузера, либо они заданы где-то отдельно.

В устаревшем сейчас браузере «Internet Explorer» цвет текста и фона по умолчанию можно было задать через меню «Свойства браузера», там для этого была специальная кнопка «Цвета».

В моем теперешнем браузере «Microsoft Edge» (на движке «Chromium») я не смог найти ни того, как можно настроить цвета по умолчанию, ни того, как можно изменить таблицу стилей браузера по умолчанию (она же «user agent stylesheet»).

Я, конечно, обыскал настройки браузера. Для этого следует нажать кнопку с многоточием в правом верхнем углу окна браузера. В открывшемся меню нужно выбрать пункт «Settings» (по-русски «Настройки»). После этого откроется новая вкладка браузера с его настройками. В левом меню этой вкладки есть пункт «Appearance» (по-русски «Внешний вид»; тут настройки не только внешнего вида браузера, но есть и настройки, которые касаются отображения HTML-страниц). Тут можно поменять тему оформления самого браузера, настроить его панель инструментов (какие-то кнопки убрать, какие-то — показать). Можно выбрать шрифт, которым по умолчанию будет отображен текст HTML-страницы, и размер этого шрифта по умолчанию. Однако, здесь нельзя настроить цвета по умолчанию для элементов отображаемой HTML-страницы или таблицу стилей браузера по умолчанию.

Еще у меня была мысль о том, что, возможно, искомые настройки можно найти в настройках моей операционной системы (напомню, у меня — «Windows 10»). Чтобы это проверить, я нажал кнопку «Пуск», а в открывшемся меню, в столбце слева — пункт «Параметры». В открывшемся окне я выбрал пункт «Персонализация». Опять открылось новое окно, в котором, в меню слева, можно просмотреть пункты «Фон» и «Цвета». Как выяснилось, они не влияют на отображение браузером HTML-страниц.

Выводы. На сегодня для указанного выше браузера мы не можем поменять цвета по умолчанию или таблицу стилей браузера по умолчанию (она же «user agent stylesheet»). Скорее всего, это верно и для браузера «Google Chrome», а также для других браузеров, построенных на движке «Chromium», исходя из того, что они работают на одном и том же движке.

Но мы можем, конечно, для своей HTML-страницы написать свои стили на языке CSS, которые «перекроют» («затрут») соответствующие стили по умолчанию от браузера, так как стили автора HTML-страницы обладают большим приоритетом по сравнению со стилями по умолчанию от браузера (они же «user agent stylesheet»).

Русские Блоги

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

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

Концепцию таблицы стилей пользовательского агента можно посмотреть в официальной документации:Нажмите, чтобы открыть ссылку

Решение 1：

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

Скопируйте и вставьте его, измените стиль в своем собственном коде

хорошо, решение проблем

Решение 2: Напишите reset.css или normalize.css

Цель: уменьшить несоответствие браузера по умолчанию высоте строки, полей и размера шрифта заголовка

You can’t override !important user agent CSS declarations

While watching the video, I learned something new about the !important CSS keyword. Before getting into important, though, let’s look at where styles can come from. Three different CSS origins define a website’s look and feel:

the browser default styles defined in user agent stylesheets
user-defined styles to customize a website defined in user stylesheets
web page styling defined and linked in author stylesheets

User stylesheets don’t seem to be a thing anymore. Chrome disallows them, and Firefox plans to phase them out, hiding the feature behind a development flag.

How do these three origins affect each other? You can override user agent stylesheet declarations with your author styles. And indeed, you do that every day when you write your CSS. Author styles override user styles, which override user agent styles.

But here’s the thing: this cascade order is inverted for !important CSS properties. Important user agent styles override important user styles, which override important author styles.

You can’t override !important declarations coming from your browser’s user agent stylesheet. ��

Dev Doodle showing the importances of CSS declarations including !important.

I went straight into the Firefox user agent stylesheet to see what’s !important in there.

Luckily, there aren’t many !important declarations in Firefox’s user agent stylesheet and the defined ones seem reasonable.

Nevertheless, that’s a good-to-know fact. If you want to learn more about !important or want to get a taste of Cascade Layers, check Una’s video.