Reset de todas las propiedades CSS de selectores con una sola propiedad: all
Existe una propiedad CSS que remueve todas los estilos aplicados por el browser a un selector y la deja sin nada, desnuda y cruda. No me refiero a un reseter, menos a un normalizer. La propiedad all: unset;
aplicada a un selector, por ejemplo, un <input />, <button>, <select>
y muchos otros que tienen diferencias de render entre browsers, puedes remover todo estilo aplicado por defecto y crear los tuyos de cero sin tener que sobre-escribirlos.
Un ejemplo a continuación con los siguientes elementos HTML:
<button>button</button>
<input type="text" value="input">
<select>
<option>select</option>
</select>
<a href="#">link</a>
Codepen
Crearemos una clase CSS para aplicar el estilo a las etiquetas y ver el resultado esperado:
.unstyle {
all: unset;
}
Codepen
Al aplicar all: unset;
todo parece similar, solo texto los cuales puedes aún interactuar (button, input, select y link (si tuvieran algo). Ahora podemos crear estilos base para, por ejemplo, .button
donde el mismo estilo se aplique a todas las etiquetas que tengan esta clase:
Codepen
Como observan, no necesitamos quitar el text-decoration: underline;
del o el border: 0;
del <button>
, simplemente escribimos el CSS que queremos para cualquier etiqueta que necesitamos se comporte como un botón.
Últimas observaciones⌗
Como consejo, no se les ocurra utilizar esta propiedad como su nuevo reseter / normalizar o algo por el estilo:
body {
all: unset;
...
}
Esta propiedad es para situaciones puntuales, como las que acabo de mostrar. Quizás para listas (ordenadas, desordenadas o de definición) y algunos otros elementos puntuales. Quizás sea útil para crear componentes de vista (UI components) en sus propias guías de estilos.
Soporte:⌗
A la fecha de publicado este artículo no se ve mal: