Qu’est-ce que la feuille de style de l’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 les outils de développement Chrome, la feuille de style de l’agent utilisateur est remplacée par le nom du fichier CSS.

Maintenant, si je soumets un formulaire et que des erreurs de validation se produisent, je reçois 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; } 

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

Quel est le navigateur cible? Différents navigateurs définissent différentes règles CSS par défaut. Essayez d’inclure un reset.css ou un normalise.css (Google pour l’un ou l’autre ou pour “réinitialiser vs normaliser” pour voir les différences) pour supprimer ces parameters par défaut.

Concernant le concept «feuille de style agent utilisateur», consultez la section Cascade dans la spécification 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 des bas: en l’absence de feuilles de style fournies par la page ou par l’utilisateur, le navigateur doit toujours afficher le contenu d’une manière ou d’une autre , et la feuille de style de l’agent utilisateur le décrit.

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

Si < !DOCTYPE> est manquant dans votre fichier HTML, vous pouvez constater que le navigateur donne la préférence à la “feuille de style de l’agent utilisateur” sur votre feuille de style personnalisée. L’ajout du doctype résout ce problème.

Le fait de marquer le document comme HTML5 par le type de document approprié sur la première ligne a résolu mon problème.

 < !DOCTYPE html> ... 

Fondamentalement, une feuille de style par défaut fournie par le navigateur. De la spécification …

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

En outre, pour plus d’informations sur l’agent utilisateur en général …

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

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

Certains navigateurs utilisent leur propre façon de 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 avez dit directement au navigateur quoi faire et le navigateur est en position de ne pas lire les commandes du fichier .css. Rappelez-vous que les commandes écrites dans le fichier .html sont plus puissantes que la commande dans le fichier .css.

Chaque navigateur fournit une feuille de style par défaut, appelée feuille de style de l’agent utilisateur, dans le cas où un fichier HTML n’en spécifie pas un. 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 tableau, les styles par défaut ont été appliqués

mettre le code suivant dans votre fichier CSS

 table { font-size: inherit; }