How many times you come to face the situation of CSS design looking different in different browsers? Reason is that the all User Agents style the elements in their way differently. And the solution to these situations is CSS Reset.
CSS resets were the things that annoyed me for very long time but when I saw its use in many projects and frameworks that and associated with the CSS; then I researched it. I found some sources helpful. So here is the information.
CSS reset is the way by which we reset the various properties of some to all elements of HTML. These properties include display, font size, font family, line height etc.
This is the main question that should be considered while using resets. If we dont do CSS reset; we might end up checking the page view on each different browser and yes it wont be same on all browsers.
After resetting the view we can freshly write the design rules for elements which will be same for each and every browser.
There are many resets already available on internet. Some are listed here:
Moreover you can create your own or you can modify the above available options. Only things you need to take care; are the things that you want to be at a default stage and then you can customize it later in CSS.
Yes. Some people/developers consider it unnecessary or not important. They may be right; but in different approach. And it may be possible that some app requirement won’t even need a CSS Reset.
Then if you have applied the Reset; you HAVE to write style rules. As the default styles are applied; you will be further needed to create CSS for all the elements that you had included in reset. Sometimes it becomes a rework. For example look at following images. These are the images of the first ever created web page
Now you can understand; if you want full control and customization then CSS Resets are good. But if want to reduce the work then probably it might increase the work.
So my recommendation is to analyse your needs to use Reset before going for it.
There is an alternative for CSS reset. Normalize.css; In my view it work similar to Reset but it barely needs any customization. Just include it and start making your own style rules. You can also go for it. https://github.com/necolas/normalize.css/
What do you think? Let us know in comments! Happy Coding!
Subscribe to Time to Hack
Get the latest posts delivered right to your inbox