Existe una propiedad CSS que remueve toda propiedad CSS aplicada 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>See the Pen Example 1: CSS `all: unset` property / value by Jorge Epuñan (@juanbrujo) on CodePen.
Crearemos una clase CSS para aplicar el estilo a las etiquetas y ver el resultado esperado:
.unstyle {
all: unset;
}See the Pen Example 2: CSS `all: unset` property / value by Jorge Epuñan (@juanbrujo) on 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:
See the Pen Example 3: CSS `all: unset` property / value by Jorge Epuñan (@juanbrujo) on CodePen.
Como observan, no necesitamos quitar el text-decoration: underline; del <a>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:
