Що таке таблиця стилів агента користувача?

499

Я працюю над веб-сторінкою в 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
— givanse
7
Зауважте також, що в Chrome (51) ви отримуєте лише ті дві записи в таблиці, коли у вас немає декларації про тип. Інакше ви отримуєте лише другий.
— Джон
Очистіть кешований хром у інших інструментах -> Очистити дані веб-перегляду
— doford
2
Відносяться пост тут . Розуміння того, чим аркуш стилів користувача-агента (або браузера) відрізняється від таблиць стилів користувача та автора, допоможе легко зрозуміти речі.
— RBT

Відповіді:

251

Що таке цільові браузери? Різні браузери встановлюють різні правила CSS за замовчуванням. Спробуйте включити скидання CSS, наприклад, скидання CSS meyerweb або 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
— Аміт Шах
140

Якщо <!DOCTYPE>у вашому HTML-вмісті відсутній, ви можете переконатися, що веб-переглядач надає перевагу "таблиці стилів агентів користувача" над вашим користувальницьким таблицею стилів. Додавання цього виправлення виправляє це.

— Jesper Mygind
джерело
6
Це чудовий натяк. Ви врятували мені деякий час досліджень. Варто зазначити, що в моєму випадку я мав цю декларацію доктрипу, але раніше у мене був сценарій. Виглядає так, що ДОКЕТИП повинен відбутися першим, що слід врахувати на сторінці.
— Себас
3
Додавання <! DOCTYPE> вирішило дуже дивну задачу вертикального вирівнювання tr / td. Дякую за цю відповідь.
— Ralph Tee
3
Це витісняння, але <! DOCTYPE html> вирішив проблему для мене.
— Стів Зелазник
8
У мене було включено <! DOCTYPE html>, але все-таки довелося нормалізуватись.
— antikbd
1
@ChrisMorgan цитуючи специфікацію, з якою ви пов’язали: "DOCTYPE потрібні для застарілих причин. Якщо вони опущені, браузери, як правило, використовують інший режим візуалізації, несумісний з деякими специфікаціями. Включення DOCTYPE у документ гарантує, що браузер робить намагання докласти максимум зусиль за дотриманням відповідних специфікацій ". В ідеальному світі DOCTYPE не був би необхідним. Але стверджувати, що відповідь "просто не відповідає дійсності" є досить сміливим ІМХО, особливо враховуючи кількість оновлених результатів.
— Jesper Mygind
104

Щодо поняття "аркуш стилів користувальницьких агентів", див. Розділ Cascade у специфікації CSS 2.1.

Аркуші стилів користувацьких агентів перекриваються будь-чим, що ви встановили у своєму власному аркуші стилів. Вони є лише найменшим дном: за відсутності будь-яких таблиць стилів, наданих сторінкою або користувачем, браузер все одно повинен виводити вміст якось , і аркуш стилів користувальницького агента просто описує це.

Отже, якщо ви думаєте, що у вас є проблема зі стилем аркуша користувальницького агента, то у вас дійсно є проблема з розміткою, або вашим таблицею стилів, або обома (про які ви нічого не писали).

— Юкка К. Корпела
джерело
@givanse, ні, ви бачите ефекти аркушів стилів користувача, коли ви їх не переосмислюєте, і ваша зразкова розмітка не є винятком. Він буде розбиратися як один liелемент, що містить два ulелементи з просто текстовим вмістом; вони стилізовані на аркуші стилю користувацьких агентів, але цей стиль можна змінити. (Чи є розмітка недійсною, залежить від контексту та версії HTML; але це не впливає на стилізацію.)
— Jukka K. Korpela
@givanse, ця проблема не стосується питання "що таке аркуш користувача". Якщо ви вважаєте, що проблема важлива, опублікуйте її як нове запитання з достатньою кількістю деталей. Але куля у вашій jsfiddle - це проста куля для liелемента, і ваш аркуш стилів не перевищує його.
— Юкка К. Корпела
47

Позначення документа як HTML5 належним документом у першому рядку вирішило мою проблему.

<!DOCTYPE html>
<html>...
— Даніель
джерело
8
Чи можете ви поясніть, як саме це має працювати? Як HTML 5 асоціюється з невизначеними стилями? Я підтверджу, але чи є у вас якась готова загадка, щоб підтвердити це?
— Капіль Шарма
28

Аркуш стилів користувальницьких агентів - це «аркуш стилів за замовчуванням», який надається браузером (наприклад, Chrome, Firefox, Edge тощо), щоб представити сторінку таким чином, що відповідає «загальним очікуванням презентації». Наприклад, аркуш стилів за замовчуванням надає базові стилі для таких речей, як розмір шрифту, межі та інтервал між елементами. Зазвичай використовується аркуш стилю скидання для усунення невідповідностей серед браузерів.

З специфікації ...

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

Для отримання додаткової інформації про користувача агентах в цілому см агент користувача .

— Кеннет Стоддард
джерело
15

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

Особиста думка: Не бійся з ними. Вони мають хороші значення за замовчуванням, наприклад, у випадках rtl / bidi та є послідовними на сьогоднішній день. Скиньте те, що ви бачите неважливим для вас, а не всі вони відразу.

— Ебрагім Бягові
джерело
12

Визначте значення, які ви не хочете використовувати зі стилю користувача-агента Chrome у власному вмісті CSS.

— БенМ
джерело
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-файл не вказує його. Стилі, які ви вказуєте, замінюють параметри за замовчуванням.

Оскільки ви не вказали значення для поля елемента таблиці, застосовано стилі за замовчуванням.

— першийпостомір
джерело
0

Я просто хотів розширити відповідь від @BenM на основі того, що я прочитав тут від Іре Адерінокун. Оскільки таблиця стилів користувальницького агента забезпечує корисну стилізацію за замовчуванням, подумайте двічі, перш ніж її перекрити.

У мене була помилкова помилка, коли елемент Chrome не виглядав правильно в Chrome. Я частково стилізував його, бо не хотів, щоб він виглядав як традиційна кнопка. Однак я залишив такі елементи стилю, як окантовка, колір облямування тощо. Отже, 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
Відредагуйте, щоб пояснити, як це працює і чому це допомагає.
— Yunnosch
-6

Помістіть у CSS-файл такий код:

table {
    font-size: inherit;
}
— Шрікант
джерело
2
Це насправді не додає нічого нового до цієї публікації. Відповідь вже прийнята, як і 5 інших відповідей, тому не пишіть пізніх відповідей.
— Каспар Лі
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.