¿Qué son los estilos de agente de usuario y qué…

Los estilos de agente de usuario son un conjunto de estilos CSS predeterminados que los navegadores aplican a los elementos HTML antes de cargar cualquier hoja de estilos del autor o estilos de usuario. Proporcionan una apariencia básica de los elementos (por ejemplo, márgenes en los párrafos, texto en negrita en <strong>).

Se pueden trabajar con ellos de las siguientes maneras:

Sobrescribir estilos: Los estilos del autor con mayor especificidad o después en el código CSS sobrescriben los estilos del agente de usuario.
```
p {
  margin: 0; /* Sobrescribe el margen estándar */
}
```

Uso de CSS Reset o Normalize.css: Estas bibliotecas eliminan o unifican los estilos básicos de los elementos, neutralizando las diferencias en los estilos del agente de usuario de diferentes navegadores.

Reset CSS: Elimina por completo la mayoría de los estilos del agente de usuario. Ejemplo:

/* Ejemplo de Reset CSS de 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;
}
/* Resto de estilos de reset */

Normalize.css: Corrige los estilos del agente de usuario para hacer que sean más consistentes entre navegadores, manteniendo estilos básicos útiles.

/* Ejemplo de Normalize.css */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
body {
  margin: 0;
}
/* Resto de estilos normalizados */

Verificación en DevTools: Las herramientas de desarrollo del navegador permiten ver qué estilos del agente de usuario se aplican a un elemento específico.

Comprender los estilos del agente de usuario es importante para una visualización predecible de los elementos y para garantizar la compatibilidad entre navegadores.

¿Qué son los estilos de agente de usuario y qué formas existen para trabajar con ellos?