Was ist ein User Agent Stylesheet?

499

Ich arbeite an einer Webseite in Google Chrome. Es wird mit den folgenden Stilen korrekt angezeigt.

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

Es ist wichtig zu beachten, dass ich diese Stile nicht definiert habe. In den Chrome-Entwicklertools wird anstelle des CSS-Dateinamens das Stylesheet des Benutzeragenten angezeigt .

Wenn ich jetzt ein Formular abschicke und ein Validierungsfehler auftritt, erhalte ich das folgende Stylesheet:

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;
}

Das font-sizevon diesen neuen Stilen stört mein Design. Gibt es eine Möglichkeit, meine Stylesheets zu erzwingen und das Standard-Stylesheet von Chrome nach Möglichkeit vollständig zu überschreiben?

css google-chrome Kapil Sharma
quelle
2
Chrome: Wie deaktiviere ich die Stylesheet-Einstellungen für Benutzeragenten?
Givanse
7
Beachten Sie auch, dass Sie in Chrome (51) nur diese beiden Tabelleneinträge erhalten, wenn Sie keine Doctype-Deklaration haben. Ansonsten erhalten Sie nur den zweiten.
John
Leeren Sie den Chrome-Cache in weiteren Tools ->
Browserdaten löschen
2
In Verbindung stehender Beitrag hier . Wenn Sie wissen, wie sich das Stylesheet für Benutzeragenten (oder Browser) von den Stylesheets für Benutzer und Autoren unterscheidet, können Sie die Dinge einfacher konzipieren.
RBT

Antworten:

251

Was sind die Zielbrowser? Verschiedene Browser legen unterschiedliche Standard-CSS-Regeln fest. Versuchen Sie, einen CSS-Reset wie den meyerweb CSS-Reset oder normalize.css einzuschließen , um diese Standardeinstellungen zu entfernen. Google "CSS zurücksetzen gegen normalisieren", um die Unterschiede zu sehen.

Oliver Millington
quelle
19
Ich setze mein CSS vor jedem Projekt immer zurück / normalisiere es, so dass Sie ein "fast" ebenes Feld über alle Browser hinweg haben. Ich habe noch nie von einem negativen "Nebeneffekt" als solchem ​​gehört. Ich bin sicher, wenn Sie einen kurzen Blick auf Google werfen, werden Sie feststellen, dass dies empfohlen wird.
Oliver Millington
2
Das Zurücksetzen von Stilen kann zu seltsamen Ergebnissen bei Formularfeldern führen, insbesondere um Feldränder oder mehrteilige Elemente wie type = "file".
Behandle deine Mods gut
7
Auch wenn das Zurücksetzen / Normalisieren hilfreich sein könnte, beantwortet es nicht wirklich die Frage, warum sich das Stylesheet des Benutzeragenten ändert. Ich habe das gleiche Problem, bei dem sich die UA-Stile für vorgerenderte Seiten, die ich für SEO verwende, unterscheiden. Irgendwelche Ideen, warum es sich ändert?
Yaron
5
Sehen Sie, was Chrome standardmäßig auf der Webseite festlegt
Santosh Kumar
10
Dies ist keine Antwort ... Das Hinzufügen <!DOCTYPE>ist richtig von @Sebas
Amit Shah
140

Wenn <!DOCTYPE>in Ihrem HTML-Inhalt etwas fehlt, kann es vorkommen, dass der Browser das "User Agent Stylesheet" Ihrem benutzerdefinierten Stylesheet vorzieht. Das Hinzufügen des Doctype behebt dies.

Jesper Mygind
quelle
6
Das ist ein toller Hinweis. Sie haben mir einige Zeit der Recherche erspart. Worth bemerkte, dass ich in meinem Fall diese Doctype-Deklaration hatte, aber vorher ein Skript hatte. Es sieht so aus, als müsste der DOCTYPE als erstes auf der Seite geschehen, um berücksichtigt zu werden.
Sebas
3
Das Hinzufügen von <! DOCTYPE> löste ein sehr seltsames Problem mit der vertikalen Ausrichtung von tr / td, das ich hatte. Danke für diese Antwort.
Ralph Tee
3
Dies ist kein Problem, aber <! DOCTYPE html> hat das Problem für mich behoben.
Steve Zelaznik
8
Ich hatte <! DOCTYPE html> aktiviert, musste mich aber trotzdem normalisieren.
Antikbd
1
@ChrisMorgan zitiert aus der Spezifikation, auf die Sie verlinkt haben: "DOCTYPEs sind aus alten Gründen erforderlich. Wenn sie weggelassen werden, verwenden Browser in der Regel einen anderen Rendering-Modus, der mit einigen Spezifikationen nicht kompatibel ist. Durch die Aufnahme von DOCTYPE in ein Dokument wird sichergestellt, dass der Browser a erstellt Best-Effort-Versuch, die einschlägigen Spezifikationen einzuhalten ". In einer idealen Welt wäre DOCTYPE nicht notwendig. Aber zu behaupten, die Antwort sei "einfach nicht wahr", ist meiner Meinung nach ziemlich mutig, insbesondere angesichts der Anzahl der positiven Stimmen.
Jesper Mygind
104

Informationen zum Konzept „User Agent Style Sheet“ finden Sie in Abschnitt Cascade in der CSS 2.1-Spezifikation.

User Agent-Stylesheets werden von allem überschrieben, was Sie in Ihrem eigenen Stylesheet festgelegt haben. Sie sind nur der Tiefpunkt: Wenn keine Stylesheets von der Seite oder vom Benutzer bereitgestellt werden, muss der Browser den Inhalt immer noch irgendwie rendern , und das Stylesheet des Benutzeragenten beschreibt dies nur.

Wenn Sie also glauben, ein Problem mit einem Stylesheet für Benutzeragenten zu haben, haben Sie wirklich ein Problem mit Ihrem Markup, Ihrem Stylesheet oder beiden (über die Sie nichts geschrieben haben).

Jukka K. Korpela
quelle
@givanse, nein, Sie sehen User Agent-Stylesheet-Effekte, wenn Sie sie nicht überschreiben, und Ihr Beispiel-Markup ist keine Ausnahme. Es wird als ein liElement analysiert , das zwei ulElemente mit nur Textinhalt enthält. Sie werden vom Stylesheet des Benutzeragenten gestaltet, dieses Styling kann jedoch überschrieben werden. (Ob das Markup ungültig ist, hängt vom Kontext und der HTML-Version ab; dies hat jedoch keinen Einfluss auf das Styling.)
Jukka K. Korpela
@givanse, dieses Problem ist nicht relevant für die Frage "Was ist ein User Style Sheet?". Wenn Sie der Meinung sind, dass das Problem wichtig ist, stellen Sie es als neue Frage mit ausreichenden Details. Aber die Kugel in Ihrer jsfiddle ist einfach eine Kugel für das liElement, und Ihr Stylesheet überschreibt sie nicht.
Jukka K. Korpela
47

Das Markieren des Dokuments als HTML5 durch den richtigen Doctype in der ersten Zeile hat mein Problem gelöst.

<!DOCTYPE html>
<html>...
Daniel
quelle
8
Können Sie bitte erklären, wie genau es funktionieren soll? Wie wird HTML 5 mit undefinierten Stilen verknüpft? Ich werde es bestätigen, aber haben Sie eine Geige bereit, um es zu bestätigen?
Kapil Sharma
28

Ein User Agent-Stylesheet ist ein vom Browser bereitgestelltes "Standard-Stylesheet" (z. B. Chrome, Firefox, Edge usw.), um die Seite so darzustellen, dass die "allgemeinen Präsentationserwartungen" erfüllt werden. Beispielsweise würde ein Standard-Stylesheet Basisstile für Dinge wie Schriftgröße, Rahmen und Abstand zwischen Elementen bereitstellen. Es ist üblich, ein Reset- Stylesheet zu verwenden, um Inkonsistenzen zwischen Browsern zu beheben.

Aus der Spezifikation ...

Das Standard-Stylesheet eines Benutzeragenten sollte die Elemente der Dokumentensprache so darstellen, dass die allgemeinen Präsentationserwartungen für die Dokumentensprache erfüllt werden. ~ Die Kaskade .

Weitere Informationen zu Benutzeragenten im Allgemeinen finden Sie unter Benutzeragenten .

Kenneth Stoddard
quelle
15

Beantwortung der Frage im Titel: Was ist das Stylesheet für Benutzeragenten, die Standardstile im Browser: Hier sind einige davon (und die relevantesten auch im heutigen Web):

Persönliche Meinung: Kämpfe nicht mit ihnen. Sie haben beispielsweise in RTL / BIDI-Fällen gute Standardwerte und sind heutzutage konsistent. Setzen Sie zurück, was für Sie irrelevant ist, nicht alle auf einmal.

Ebrahim Byagowi
quelle
12

Definieren Sie die Werte, die nicht aus dem Benutzeragentenstil von Chrome verwendet werden sollen, in Ihrem eigenen CSS-Inhalt.

BenM
quelle
4

Einige Browser verwenden ihre eigene Methode zum Lesen von CSS-Dateien. Der richtige Weg, dies zu umgehen: Wenn Sie die Befehlszeile direkt in den HTML-Quellcode eingeben, schlägt dies die CSS-Datei. Auf diese Weise haben Sie dem Browser direkt mitgeteilt, was zu tun ist, und der Browser ist in der Lage, nicht zu lesen die Befehle aus der CSS-Datei. Denken Sie daran, dass die in der HTML-Datei geschriebenen Befehle stärker sind als der Befehl in der CSS-Datei.

rollin_jeksun
quelle
1

Ich hatte das gleiche Problem wie bei einem meiner <div>, dessen Rand vom Browser festgelegt wurde. Es war ziemlich nervig, aber dann habe ich herausgefunden, wie die meisten Leute sagten, es ist ein Markup-Fehler.

Ich ging zurück und überprüfte meinen <head> Abschnitt und mein CSS-Link war wie folgt:

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

Ich habe typees aufgenommen und wie folgt gemacht:

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

Mein Problem wurde gelöst.

Appy Sharma
quelle
0

Jeder Browser stellt ein Standard-Stylesheet bereit, das als User Agent-Stylesheet bezeichnet wird, falls in einer HTML-Datei kein Stylesheet angegeben ist. Von Ihnen angegebene Stile überschreiben die Standardeinstellungen.

Da Sie keine Werte für das Feld des Tabellenelements angegeben haben, wurden die Standardstile angewendet.

Erster Postkommentator
quelle
0

Ich wollte nur die Antwort von @BenM basierend auf dem, was ich hier gelesen habe, erweitern von Ire Aderinokun . Überlegen Sie zweimal, bevor Sie es überschreiben, da das User-Agent-Stylesheet ein hilfreiches Standard-Styling bietet.

Ich hatte einen dummen Fehler, bei dem ein Schaltflächenelement in Chrome nicht richtig aussah. Ich hatte es teilweise gestylt, weil ich nicht wollte, dass es wie ein traditioneller Knopf aussieht. Ich habe jedoch Stilelemente wie Rahmen, Rahmenfarbe usw. weggelassen. Also hat Chrome eingegriffen, um die Teile zu liefern, die mir fehlten.

Das Problem verschwand, als ich Stile wie border: noneusw. hinzufügte .

Wenn also jemand anderes dieses Problem hat, stellen Sie sicher, dass Sie alle anwendbaren Standard-Benutzeragentenstile für ein Element explizit überschreiben, wenn Sie feststellen, dass es wackelig aussieht, insbesondere wenn Sie die Benutzeragentenstile nicht vollständig zurücksetzen möchten. Es hat bei mir funktioniert.

Brent Miller
quelle
Sollte dies nicht ein Kommentar statt einer Antwort sein?
Peter Mortensen
@PeterMortensen ja, aber ich kann keine Kommentare hinterlassen - nicht genug Ruf.
Brent Miller
-1

Ich habe eine Lösung. Überprüfen Sie dies:

Error

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

Richtig 

<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
Vinkal Chandel
quelle
2
Bitte bearbeiten Sie, um zu erklären, wie dies funktioniert und warum es hilft.
Yunnosch
-6

Fügen Sie den folgenden Code in Ihre CSS-Datei ein:

table {
    font-size: inherit;
}
Srikanth
quelle
2
Dies fügt diesem Beitrag nichts Neues hinzu. Es gibt bereits eine akzeptierte Antwort sowie 5 weitere Antworten. Bitte posten Sie keine späten Antworten.
Kaspar Lee