Qu'est-ce que les styles d'agent utilisateur et…

Les styles d’agent utilisateur sont un ensemble de styles CSS par défaut que les navigateurs appliquent aux éléments HTML avant de charger toute feuille de style de l’auteur ou styles utilisateur. Ils assurent une apparence de base des éléments (par exemple, marges pour les paragraphes, texte en gras pour <strong>).

On peut travailler avec eux de plusieurs manières :

Surcharge des styles : Les styles de l’auteur avec une spécificité plus élevée ou après dans le code CSS remplacent les styles d’agent utilisateur.
```
p {
  margin: 0; /* Remplace la marge standard */
}
```

Utilisation de CSS Reset ou Normalize.css : Ces bibliothèques réinitialisent ou unifient les styles de base des éléments, neutralisant les différences dans les styles d’agent utilisateur entre navigateurs.

Reset CSS : Supprime complètement la majorité des styles d’agent utilisateur. Exemple :

/* Exemple de Reset CSS d’Eric Meyer */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* Reste des styles de reset */

Normalize.css : Corrige les styles d’agent utilisateur pour les rendre plus cohérents entre navigateurs, tout en conservant des styles de base utiles.

/* Exemple de Normalize.css */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
body {
  margin: 0;
}
/* Reste des styles normalisés */

Vérification dans DevTools : Les outils de développement du navigateur permettent de voir quels styles d’agent utilisateur sont appliqués à un élément spécifique.

Comprendre les styles d’agent utilisateur est important pour un rendu prévisible des éléments et pour assurer la compatibilité entre navigateurs.

Qu'est-ce que les styles d'agent utilisateur et quelles sont les méthodes pour y travailler ?