web-dev-qa-db-fra.com

Qu'est-ce qu'une feuille de style d'agent utilisateur?

Je travaille sur une page Web dans Google Chrome. Il s'affiche correctement avec les styles suivants.

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

Il est important de noter que je n'ai pas défini ces styles. Sur Chrome _dev tools, il est indiqué feuille de style de l'agent utilisateur à la place du nom de fichier CSS.

Maintenant, si je soumets un formulaire et qu'une erreur de validation survient, j'obtiens la feuille de style suivante:

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

Le font-size de ces nouveaux styles perturbe mon design. Existe-t-il un moyen de forcer mes feuilles de style et, si possible, de remplacer complètement la feuille de style par défaut de Chrome?

cssgoogle-chrome
446
Kapil Sharma

Quels sont les navigateurs cibles? Différents navigateurs définissent différentes règles CSS par défaut. Essayez d’inclure une réinitialisation CSS, telle que le reset de meyerweb css ou normalize.css , pour supprimer ces valeurs par défaut. Google "réinitialisation css vs normaliser" pour voir les différences.

225
Oliver Millington

Si <!DOCTYPE> est manquant dans votre code html, vous constaterez peut-être que le navigateur donne la préférence à la "feuille de style de l'agent utilisateur" par rapport à votre feuille de style personnalisée. L'ajout du doctype résout ce problème.

115
Jesper Mygind

En ce qui concerne le concept “feuille de style de l'agent utilisateur”, consultez la section Cascade dans les spécifications CSS 2.1.

Les feuilles de style de l'agent utilisateur sont remplacées par tout ce que vous définissez dans votre propre feuille de style. Ils ne sont que le fond: en l'absence de feuilles de style fournies par la page ou par l'utilisateur, le navigateur doit toujours restituer le contenu d'une manière ou d'une autre , et la feuille de style de l’agent utilisateur ne fait que le décrire.

Donc, si vous pensez que vous avez un problème avec une feuille de style d'agent utilisateur, vous avez vraiment un problème avec votre balisage, ou votre feuille de style, ou les deux (à propos desquels vous n'avez rien écrit).

96
Jukka K. Korpela

Marquer le document en tant que HTML5 avec le doctype approprié sur la première ligne a résolu mon problème.

<!DOCTYPE html>
<html>...
43
Daniel

Une feuille de style d'agent d'utilisateur est une "feuille de style par défaut" fournie par le navigateur (par exemple, Chrome, Firefox, Edge, etc.) afin de présenter la page de manière à répondre aux "attentes générales de la présentation". Par exemple, une La feuille de style fournirait des styles de base pour des éléments tels que la taille de la police, les bordures et l'espacement entre les éléments. Il est courant d'utiliser une feuille de style réinitialiser pour gérer les incohérences entre les navigateurs.

De la spec ...

La feuille de style par défaut d'un agent utilisateur doit présenter les éléments de la langue du document de manière à répondre aux attentes générales en matière de présentation de la langue du document. ~ La cascade .

Pour plus d'informations sur les agents utilisateurs en général ...

https://www.w3.org/TR/UAAG20/#def-user-agent

20
Kenneth Stoddard

Définissez les valeurs que vous ne souhaitez pas utiliser dans le style d'agent utilisateur de Chrome dans votre propre code CSS.

11
BenM

En répondant à la question dans le titre, qu'est-ce que useragent stylesheet, ensemble de styles par défaut dans le navigateur, en voici quelques-uns,

Mozilla: https://dxr.mozilla.org/mozilla-central/source/browser/base/content/browser.css

Chrome/Chromium: https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/html/resources/html.css?q=html.css&sq=package:chromium&dr

WebKit: https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

3
Ebrahim Byagowi

Certains navigateurs utilisent leur propre méthode pour lire les fichiers .css. Donc, la bonne façon de battre ceci: si vous tapez la ligne de commande directement dans le code source .html, cela bat le fichier .css, de cette façon, vous indiquez directement au navigateur quoi faire et le navigateur est bien placé pour ne pas lire les commandes du fichier .css. N'oubliez pas que les commandes écrites dans le fichier .html sont plus puissantes que la commande du fichier .css.

3
rollin_jeksun

J'ai eu le même problème que l'un de mes était la marge définie par le navigateur, il était assez ennuyeux, mais ensuite, comme la plupart des gens l'ont dit, c'est une erreur de marquage.

Je suis retourné et vérifié ma section et mon lien css était comme ci-dessous:

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

j'ai inclus le type dedans et l'ai fait comme ci-dessous:

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

mon problème était résolu.

J'espère que ça aide pour certains d'entre vous.

1
Appy Sharma

Chaque navigateur fournit une feuille de style par défaut, appelée feuille de style de l'agent utilisateur, au cas où un fichier HTML n'en spécifierait pas. Les styles que vous spécifiez remplacent les valeurs par défaut. Comme vous n’avez pas spécifié de valeurs pour la zone de l’élément de la table, les styles par défaut ont été appliqués.

0
firstpostcommenter