Что такое таблица стилей агента пользователя?

500

Я работаю над веб-страницей в Google Chrome. Он отображается правильно со следующими стилями.

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

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

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

table {
    white-space: normal;
    line-height: normal;
    font-weight: normal;
    font-size: medium;
    font-variant: normal;
    font-style: normal;
    color: -webkit-text;
    text-align: -webkit-auto;
}

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

font-sizeИз этих новых стилей мешая мой дизайн. Есть ли способ заставить мои таблицы стилей и, если возможно, полностью переписать таблицу стилей Chrome по умолчанию?

css google-chrome

— Капил Шарма
источник

2

chrome: как отключить настройки таблицы стилей агента пользователя?

— Givanse

7

Также обратите внимание, что в Chrome (51) вы получаете только те две записи таблицы, когда у вас нет объявления типа документа. В противном случае вы получите только второй.

— Джон

Очистите кэш-память Chrome с помощью других инструментов -> Очистить данные о просмотре

— doford

2

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

— RBT

251

Какие целевые браузеры? Различные браузеры устанавливают разные правила CSS по умолчанию. Попробуйте включить сброс CSS, такой как сброс настроек meyerweb CSS или normalize.css , чтобы удалить эти значения по умолчанию. Google "CSS сброс против нормализации", чтобы увидеть различия.

— Оливер Миллингтон
источник

19

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

— Оливер Миллингтон

2

Сброс стилей может привести к странным результатам с полями формы, особенно вокруг границ полей или элементов из нескольких частей, таких как type = "file".

— хорошо относитесь к своим модам

7

Хотя сброс / нормализация могут помочь, на самом деле это не отвечает на вопрос, почему меняется таблица стилей пользовательского агента? У меня та же проблема, когда стили UA меняются для предварительно отрендеренных страниц, которые я использую для SEO. Есть идеи, почему это меняется?

— Ярон

5

Посмотрите, что Chrome устанавливает по умолчанию на веб-странице: trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

— Сантош Кумар

10

Это не ответ ... Добавление <!DOCTYPE>правильное @Sebas

— Амит Шах

141

Если <!DOCTYPE>в вашем HTML-контенте отсутствует, вы можете столкнуться с тем, что браузер отдает предпочтение «таблице стилей агента пользователя» по сравнению с вашей пользовательской таблицей стилей. Добавление doctype исправляет это.

— Джеспер Мигинд
источник

6

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

— Себас

3

Добавление <! DOCTYPE> решило очень странную проблему вертикального выравнивания tr / td, которая у меня была. Спасибо за этот ответ.

— Ральф Ти

3

Это придирки, но <! DOCTYPE html> исправил проблему для меня.

— Стив Желязник

8

Я включил <! DOCTYPE html>, но все равно пришлось нормализоваться.

— antikbd

1

@ChrisMorgan цитирование из спецификации, с которой вы связались: «DOCTYPE требуются по старым причинам. Если не указано, браузеры, как правило, используют другой режим рендеринга, который несовместим с некоторыми спецификациями. Включение DOCTYPE в документ гарантирует, что браузер сделает попытка сделать все возможное для соблюдения соответствующих спецификаций ". В идеальном мире DOCTYPE не был бы необходим. Но утверждать, что ответ «просто не соответствует действительности», довольно смелое ИМХО, особенно с учетом количества голосов.

— Джеспер Мигинд

104

Что касается понятия «таблица стилей агента пользователя», обратитесь к разделу « Каскад» в спецификации CSS 2.1.

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

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

— Юкка К. Корпела
источник

@givanse, нет, вы видите эффекты таблиц стилей пользовательского агента, когда вы не переопределяете их, и ваша разметка образца не является исключением. Он будет проанализирован как один liэлемент, содержащий два ulэлемента только с текстовым содержимым; они стилизованы таблицей стилей агента пользователя, но этот стиль можно переопределить. (От того, является ли разметка недействительной, зависит от контекста и версии HTML; но это не влияет на стилизацию.)

— Юкка К. Корпела

@givanse, эта проблема не относится к вопросу «что такое таблица стилей пользователя». Если вы считаете, что проблема важна, опубликуйте ее как новый вопрос с достаточным количеством деталей. Но маркер в вашем jsfiddle - это просто маркер для liэлемента, и ваша таблица стилей не переопределяет его.

— Юкка К. Корпела

47

Маркировка документа как HTML5 с помощью правильного типа документа в первой строке решила мою проблему.

<!DOCTYPE html>
<html>...

— Даниил
источник

8

Не могли бы вы объяснить, как именно это должно работать? Как HTML 5 связан с неопределенными стилями? Я подтверждаю, но у вас есть готовая скрипка, чтобы подтвердить это?

— Капил Шарма

28

Таблица стилей агента пользователя представляет собой «таблицу стилей по умолчанию», предоставляемую браузером (например, Chrome, Firefox, Edge и т. Д.), Чтобы представить страницу так, чтобы она соответствовала «общим ожиданиям при представлении». Например, таблица стилей по умолчанию предоставит базовые стили для таких вещей, как размер шрифта, границы и расстояние между элементами. Обычно используется таблица стилей сброса для устранения несоответствий в браузерах.

Из спецификации ...

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

Для получения дополнительной информации о пользовательских агентах в целом см. Пользовательский агент .

— Кеннет Стоддард
источник

15

Отвечая на вопрос в заголовке, что такое таблица стилей агента пользователя, набор стилей по умолчанию в браузере: Вот некоторые из них (и наиболее важные из них также в современной сети):

Геккон (Firefox): https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css
Хром (Chrome): https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css
WebKit (Safari): https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Личное мнение: не борись с ними. Они имеют хорошие значения по умолчанию, например, в случаях RTL / BIDI и являются согласованными в настоящее время. Сбросить то, что вы видите не относящимся к вам, не все из них сразу.

— Эбрахим Бягови
источник

12

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

— BenM
источник

4

Некоторые браузеры используют свой собственный способ чтения файлов .css. Таким образом, правильный способ справиться с этим: если вы вводите командную строку непосредственно в исходном коде .html, это лучше, чем файл .css, таким образом, вы прямо указали браузеру, что делать, и браузер находится в состоянии не читать команды из файла .css. Помните, что команды, записанные в файле .html, сильнее, чем команды в файле .css.

— rollin_jeksun
источник

1

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

Я вернулся и проверил мой раздел <head>, и моя CSS-ссылка была такой:

<link rel="stylesheet" href="ex.css">

Я включил typeэто и сделал это как ниже:

<link rel="stylesheet" type="text/css" href="ex.css">

Моя проблема была решена.

— Аппи Шарма
источник

0

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

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

— firstpostcommenter
источник

0

Я просто хотел бы расширить ответ от @BenM на основе того, что я прочитал здесь от Ire Aderinokun. Поскольку таблица стилей пользовательского агента предоставляет полезные стили по умолчанию, дважды подумайте, прежде чем переопределять ее.

У меня была глупая ошибка, когда элемент кнопки не выглядел правильно в Chrome. Я частично разработал его, потому что не хотел, чтобы он выглядел как традиционная кнопка. Тем не менее, я пропустил такие элементы стиля, как border, border-color и т. Д. Поэтому Chrome вмешался, чтобы предоставить детали, которые, по его мнению, мне не хватало.

Проблема ушла, когда я добавил такие стили, как border: noneи т. Д.

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

— Брент Миллер
источник

Разве это не комментарий, а ответ?

— Питер Мортенсен

@PeterMortensen да, но я не могу оставлять комментарии - недостаточно репутации.

— Брент Миллер

-1

У меня есть решение. Проверь это:

ошибка

<link href="assets/css/bootstrap.min.css" rel="text/css" type="stylesheet">

Правильный

<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">

— Винкал Чандель
источник

2

Пожалуйста, измените, чтобы объяснить, как это работает и почему это помогает.

— Юннощ

-6

Поместите следующий код в ваш файл CSS:

table {
    font-size: inherit;
}

— Srikanth
источник

2

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

— Каспар Ли