En este artículo os voy a mostrar un reset CSS con el que me topé recientemente y como dice José Mota: «pa’ la saca». Me gustó bastante y aquí lo guardo para tenerlo a mano.
El propósito de un reset CSS es sobrescribir los estilos predeterminados del navegador para garantizar que tu sitio web se vea de manera consistente en todos los navegadores.
Este reset CSS fue creado por el desarrollador front-end Andy Bell.
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Prevent font size inflation */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
/* Set core body defaults */
body {
min-height: 100vh;
line-height: 1.5;
}
/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
line-height: 1.1;
}
/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
text-wrap: balance;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
color: currentColor;
}
/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
font: inherit;
}
/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
min-height: 10em;
}
/* Anything that has been anchored to should have extra scroll margin */
:target {
scroll-margin-block: 5ex;
}
Vamos a verlo paso a paso para ver qué hace cada regla CSS.
Reglas de Box Sizing:
*,
*::before,
*::after {
box-sizing: border-box;
}
Aquí se está estableciendo la propiedad box-sizing a border-box para todos los elementos y sus pseudo-elementos. Esto significa que el padding y el borde de los elementos se incluirán en su tamaño total, lo que puede hacer que el diseño sea más predecible.
Evitar el ajuste automático del tamaño de texto:
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
Se está deshabilitando el ajuste de tamaño de texto automático en varios navegadores para evitar que cambien el tamaño del texto en ciertas condiciones.
Eliminar márgenes predeterminados:
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
margin: 0;
}
Se eliminan los márgenes predeterminados de varios elementos para permitir un control más preciso a través del CSS que escribas posteriormente.
Eliminar los estilos de las listas:
ul[role='list'],
ol[role='list'] {
list-style: none;
}
Se eliminan los estilos de lista predeterminados de ul y ol cuando tienen un atributo role de list.
Establecer valores predeterminados para el body:
body {
min-height: 100vh;
line-height: 1.5;
}
Se establecen valores predeterminados para el cuerpo del documento, incluyendo una altura mínima de 100% de la altura de la ventana y una altura de línea de 1.5.
Modficar alturas de línea para algunos elementos:
h1, h2, h3, h4,
button, input, label {
line-height: 1.1;
}
Se configura una altura de línea más corta para los encabezados y algunos elementos interactivos.
Balance de envoltura de texto en encabezados:
h1, h2,
h3, h4 {
text-wrap: balance;
}
Se utiliza para intentar equilibrar la cantidad de texto en cada línea de un elemento, de manera que las líneas tengan longitudes más o menos iguales. Esto puede ser útil para mejorar la legibilidad y la estética de los encabezados en un documento web. Aunque text-wrap no es una propiedad estándar y podría no tener efecto en todos los navegadores.
Estilos predeterminados para los enlaces:
a:not([class]) {
text-decoration-skip-ink: auto;
color: currentColor;
}
Se establecen estilos predeterminados para los enlaces <a> que no tienen un atributo de clase.
Facilitar el trabajo con imágenes:
img,
picture {
max-width: 100%;
display: block;
}
Se configura un ancho máximo del 100% y se cambia la propiedad display a block para los elementos img y picture, lo que ayuda a manejar las imágenes de manera más flexible.
Herencia de fuentes para entradas y botones:
input, button,
textarea, select {
font: inherit;
}
Esta regla se utiliza para asegurar que los elementos de formulario especificados (input, button, textarea, select) hereden las propiedades de fuente del elemento padre, en lugar de utilizar las propiedades de fuente predeterminadas del navegador. Esto puede ayudar a mantener una apariencia consistente en toda la página web o aplicación, especialmente en lo que respecta a la tipografía, ya que los elementos de formulario a menudo tienen estilos de fuente predeterminados que pueden no coincidir con el diseño deseado.
Ajuste de altura mínima para textarea:
textarea:not([rows]) {
min-height: 10em;
}
Se establece una altura mínima para los elementos textarea que no tienen un atributo rows especificado.
Margen de desplazamiento para elementos anclados:
:target {
scroll-margin-block: 5ex;
}
Se añade un margen de desplazamiento adicional a cualquier elemento que haya sido anclado para asegurar que no se corte o quede oculto detrás de otros elementos, como una barra de navegación fija.
Es decir, este fragmento de código asegura que cuando se navega a un elemento en la página a través de un enlace con un identificador de fragmento (Ej: http://web.com/#section1), hay un margen de desplazamiento de 5ex por encima y por debajo del elemento, lo que puede ayudar a evitar que el contenido se solape o se oculte detrás de otros elementos en la página.
Un apunte final
Resetear el CSS es un enfoque antiguo y muchos ya lo consideran como una mala práctica. Sobre todo si el reset es agresivo y elimina todos los estilos predeterminados del navegador.
En la actualidad hay un enfoque más moderno para hacer consistentes los estilos predeterminados entre los diferentes navegadores, este es Normalize.css. En lugar de eliminar todos los estilos, modifica solo aquellos estilos que son conocidos por ser inconsistentes entre navegadores.
Otro enfoque muy interesante es usar Normalize junto con reset CSS.
Si quieres ver más en detalle las diferencias entre normalizar y resetear un CSS, echa un vistazo a este artículo: Normalize vs Reset CSS.