Reset de todas las propiedades CSS de selectores con una sola propiedad: all

9/Nov/2018 167

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:

Link:

Comentarios

  1. Snxpqb [#]

    cheap 10 mg tadalafil – cialis 40 mg pills genuine cialis tablets

  2. cialis [#]

    tadalafil tablets ip cialis generic purchase peptides tadalafil

  3. Zocuev [#]

    viagra price per pill – us viagra prices purchasing viagra in usa

  4. Bydfhn [#]

    how to buy viagra online safely – where can you buy viagra over the counter in canada where to purchase viagra in canada

  5. Fgzdfl [#]

    vardenafil free sample – vardenafil online pharmacy vardenafil paypal

  6. Frxlgc [#]

    mail order vardenafil – levitra vs viagra vardenafil 20mg

  7. Xytmld [#]

    where to buy vardenafil online – vardenafil coupon generic vardenafil professional

  8. Jbiqxi [#]

    vardenafil hydrochloride – where to buy vardenafil in singapore generic vardenafil pills

  9. Wszgxr [#]

    ivermectin buy nz – buy ivermectin pills stromectol generic name

  10. Tuyilk [#]

    stromectol 12mg online – topical ivermectin cost buy stromectol canada

  11. Qpelsd [#]

    viagra 100mg uk price – female viagra buy online viagra tablet price

  12. Bokzea [#]

    over the counter viagra – online sildenafil citrate viagra 25 mg price

  13. Rrzogu [#]

    best online pharmacy tadalafil – cialis daily 5mg online tadalafil 20mg online

  14. odofzmyjl [#]

    Reset de todas las propiedades CSS de selectores con una sola propiedad: all | CSSLab | Laboratorio de ideas web
    odofzmyjl http://www.gq90y8745xgmtfj6j48edb31sz7f2571s.org/
    [url=http://www.gq90y8745xgmtfj6j48edb31sz7f2571s.org/]uodofzmyjl[/url]
    aodofzmyjl

  15. Mzkevm [#]

    cialis 20 mg price in india – cheap cialis uk cialis prescription online

  16. Itskfl [#]

    prednisone brand name in usa – deltasone coupon prednisone 20 mg buy online

  17. Xyggjc [#]

    prednisone 12 mg – prednisone 12 tablets price where can i buy prednisone online

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

CSSLab