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:
Comentarios
I just wanted to type a message so as to express gratitude to you for the superb concepts you are sharing on this website. My considerable internet research has at the end of the day been compensated with extremely good tips to exchange with my family. I ‘d say that most of us site visitors are really endowed to dwell in a perfect place with very many brilliant individuals with helpful advice. I feel quite fortunate to have come across the webpages and look forward to really more brilliant minutes reading here. Thank you once more for everything.
I truly wanted to type a brief message to say thanks to you for those unique concepts you are posting here. My time intensive internet lookup has finally been honored with incredibly good points to go over with my great friends. I would point out that we website visitors are very lucky to dwell in a good website with so many special people with helpful secrets. I feel really happy to have seen the weblog and look forward to tons of more cool moments reading here. Thanks once more for everything.
I actually wanted to write down a comment to express gratitude to you for all of the unique instructions you are giving at this website. My extensive internet lookup has at the end been rewarded with useful knowledge to share with my classmates and friends. I ‘d express that many of us visitors are undoubtedly lucky to be in a decent community with so many special people with great tactics. I feel extremely blessed to have discovered your entire webpages and look forward to some more enjoyable minutes reading here. Thanks a lot once again for all the details.
I precisely needed to thank you so much once more. I’m not certain the things that I might have accomplished in the absence of the actual strategies shown by you concerning such a problem. Certainly was a very frightening circumstance for me personally, however , spending time with your well-written manner you processed that took me to jump for fulfillment. Now i’m happy for this help and in addition hope you find out what a great job you’re providing educating the mediocre ones through your web site. More than likely you have never encountered all of us.
Thanks for all your labor on this website. Gloria take interest in engaging in research and it is easy to see why. My spouse and i know all regarding the powerful manner you convey effective tips and tricks via the blog and inspire response from others on this point so our simple princess is without a doubt being taught a great deal. Take advantage of the remaining portion of the year. You have been doing a great job.
I intended to post you the bit of observation just to thank you very much over again about the exceptional knowledge you’ve contributed in this article. It has been quite unbelievably open-handed with you to make extensively exactly what many individuals could possibly have made available as an ebook to help make some cash on their own, certainly considering the fact that you could possibly have done it in the event you wanted. The tips in addition worked like a easy way to comprehend other people online have the same dream just like mine to understand much more on the subject of this condition. I think there are thousands of more pleasurable situations ahead for people who read your blog.
Needed to post you a very little word to help say thank you the moment again on your remarkable guidelines you’ve documented above. It is generous with people like you to provide unhampered all most of us could have offered for an electronic book to help with making some money for themselves, specifically considering the fact that you could possibly have done it in the event you desired. These strategies likewise served to become good way to know that other people have the same keenness really like my own to know the truth way more when considering this condition. I believe there are some more pleasurable opportunities in the future for those who discover your site.
I must show my thanks to you just for rescuing me from this type of trouble. Because of researching throughout the the web and seeing proposals that were not pleasant, I believed my life was over. Existing without the presence of strategies to the problems you have resolved by means of your good article is a serious case, and the kind which could have in a wrong way damaged my entire career if I had not come across your blog post. Your own personal talents and kindness in dealing with a lot of things was tremendous. I am not sure what I would have done if I had not discovered such a thing like this. I can at this point look forward to my future. Thanks a lot so much for this professional and result oriented help. I won’t hesitate to propose your web sites to anybody who should receive counselling about this area.