Je travaille sur une page Web dans Google Chrome. Elle 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. Dans les outils de développement de Chrome, il est écrit user agent stylesheet à la place du nom du fichier CSS.
Maintenant, si je soumets un formulaire et qu'une erreur de validation se produit, 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;
}
La "taille de la police" de ces nouveaux styles perturbe ma conception. Existe-t-il un moyen de forcer mes feuilles de style et, si possible, d'écraser complètement la feuille de style par défaut de Chrome ?
Quels sont les navigateurs cibles ? Les différents navigateurs définissent différentes règles CSS par défaut. Essayez d'inclure une réinitialisation CSS, telle que meyerweb css reset ou normalize.css, pour supprimer ces valeurs par défaut. Google "css reset vs normalize" ; pour voir les différences.
En ce qui concerne le concept de "feuille de style de l'agent utilisateur", consultez la section [Cascade][1] de la spécification CSS 2.1.
Les feuilles de style de l'agent utilisateur sont remplacées par tout ce que vous avez défini dans votre propre feuille de style. Elles ne sont que la base : en l'absence de toute feuille de style fournie par la page ou par l'utilisateur, le navigateur doit toujours rendre 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 avoir un problème avec une feuille de style de l'agent utilisateur, alors vous avez vraiment un problème avec votre balisage, ou votre feuille de style, ou les deux (sur lesquels vous n'avez rien écrit).