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

9/Nov/2018 408

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. pharmaceptica.com [#]

    erectile hypertension https://www.pharmaceptica.com/

  2. Delta Air lines San Jose booking customer service [#]

    control of pest San Jose service https://www.goodcarbadcar.net/?s=control+of+pest+%E2%98%8E+1%28844%299484793+San Jose+service+phone+number

  3. zyrtec 30 tablets [#]

    cost of cetirizine 10mg – http://allergyd.com

  4. drineejrlp [#]

    provigil and alcohol provigil 200 mg

  5. yeezy 500 [#]

    I would like to express my thanks to this writer for rescuing me from this predicament. Because of researching throughout the world wide web and getting methods which are not pleasant, I figured my life was over. Being alive without the strategies to the problems you’ve solved by way of your entire post is a critical case, as well as the ones that would have badly damaged my entire career if I had not discovered your web page. Your main ability and kindness in playing with the whole lot was invaluable. I am not sure what I would have done if I hadn’t encountered such a subject like this. I am able to at this point look ahead to my future. Thanks a lot very much for your professional and sensible help. I won’t hesitate to refer your site to any individual who should have guidelines on this issue.

  6. golden goose [#]

    I have to express some appreciation to the writer for rescuing me from such a condition. After looking through the the net and coming across opinions which are not helpful, I was thinking my life was well over. Existing devoid of the approaches to the issues you’ve fixed all through your main posting is a critical case, as well as the ones that might have in a negative way affected my entire career if I had not discovered your website. Your personal mastery and kindness in maneuvering everything was important. I’m not sure what I would have done if I had not come upon such a step like this. I can at this time look ahead to my future. Thanks for your time very much for this expert and effective guide. I will not think twice to suggest your web site to anyone who should get care about this situation.

  7. kd shoes [#]

    I must express thanks to this writer just for bailing me out of such a instance. Because of researching throughout the world wide web and finding strategies which are not powerful, I was thinking my life was over. Being alive devoid of the solutions to the problems you have fixed all through your entire guide is a serious case, as well as those which could have in a wrong way affected my entire career if I had not come across your blog post. Your actual talents and kindness in maneuvering all areas was very useful. I don’t know what I would have done if I hadn’t discovered such a point like this. I am able to at this time look ahead to my future. Thanks so much for this high quality and result oriented guide. I will not be reluctant to propose the website to any person who needs to have tips on this matter.

  8. curry 8 [#]

    I am commenting to let you be aware of what a incredible encounter our princess enjoyed going through your blog. She even learned lots of details, which included how it is like to possess a wonderful teaching heart to let many more very easily comprehend a variety of tricky topics. You really did more than visitors’ expected results. Thank you for supplying the insightful, trustworthy, educational and in addition cool guidance on the topic to Lizeth.

  9. kyrie 5 spongebob [#]

    Thanks for your entire labor on this website. Betty really loves participating in internet research and it’s really simple to grasp why. Almost all hear all of the dynamic method you deliver powerful techniques through this web site and in addition improve participation from some other people on the concern then our own child is without question being taught a great deal. Enjoy the remaining portion of the new year. Your doing a first class job.

  10. buyprovigil [#]

    provigil over the counter provigil vs modafinil

  11. bactrim for uti [#]

    trimethoprim cream https://bactrimhoprim.com/

  12. Delta Air lines San Diego booking customer service [#]

    control of pest San Diego service https://www.webdesignerdepot.com/?s=control+of+pest+%E2%98%8E+1%28844%299484793+San Diego+service+phone+number

  13. stromectolforte.com [#]

    ivermectin dosage by weight http://stromectolforte.com/# ivermectin stromectol online canada

  14. golden goose outlet [#]

    I must voice my love for your kindness in support of people who should have help with this important area. Your real dedication to getting the message throughout had become exceptionally interesting and have truly made guys and women much like me to attain their pursuits. Your amazing informative publication implies a lot to me and especially to my mates. Thanks a ton; from each one of us.

  15. hermes [#]

    I would like to voice my admiration for your generosity giving support to all those that actually need guidance on your theme. Your very own dedication to getting the message throughout became pretty helpful and have usually helped workers like me to arrive at their desired goals. Your personal informative instruction can mean a whole lot to me and further more to my colleagues. Thanks a ton; from all of us.

  16. golden goose [#]

    A lot of thanks for all of the work on this web site. Ellie enjoys carrying out investigations and it’s simple to grasp why. All of us notice all regarding the compelling manner you create powerful tips via your blog and as well cause response from other ones on this concept so my child is now studying a lot of things. Take pleasure in the remaining portion of the new year. Your carrying out a stunning job.

  17. air jordan [#]

    I together with my friends have already been going through the great guides found on your website while the sudden I got a terrible feeling I had not thanked the site owner for them. The boys are actually consequently happy to see all of them and already have honestly been loving these things. Appreciate your turning out to be indeed considerate and then for having certain good topics millions of individuals are really desperate to discover. Our honest regret for not expressing appreciation to sooner.

  18. kyrie 4 [#]

    My spouse and i ended up being absolutely thankful when Ervin managed to round up his homework from the ideas he acquired out of the web site. It’s not at all simplistic to just continually be handing out guides which some people have been making money from. We really fully understand we now have the writer to thank for that. The main explanations you have made, the easy website navigation, the relationships you make it easier to instill – it is many incredible, and it’s really leading our son in addition to our family recognize that the concept is cool, and that’s really important. Thank you for all!

  19. golden goose outlet [#]

    Thank you so much for giving everyone such a spectacular possiblity to read from this site. It is often so great and also jam-packed with amusement for me personally and my office colleagues to visit your website at least thrice in a week to see the latest stuff you have. And lastly, I’m also usually satisfied concerning the terrific strategies served by you. Selected 1 facts on this page are in reality the most efficient we have had.

  20. kEYs1seF01Y [#]

    68053 412174really good put up, i undoubtedly enjoy this internet web site, maintain on it 748446

  21. good rx coupon [#]

    how to buy stromectol https://stromectolforte.com/ dosage for ivermectin in humans stromectol 12mg

  22. Курорт - 2021 смотреть онлайн [#]

    Веном 2 – смотреть онлайн в хорошем качестве https://bit.ly/venom2-2021

CSSLab