A look at CSS Reset

admin

Written by Phan Duc Anh

Preamble

It is no coincidence that many times you write an interface that does not add any attributes that your <h1>, <h2> … tags are still separated by. This is because most browsers have a set of default formatting styles applied to every web page, this is called a “user agent stylesheet”. Most of these formats are open source so you can look at them:

  • Chromium UA stylesheet – Google Chrome & Opera
  • Mozilla UA stylesheet – Firefox
  • WebKit UA stylesheet – Safari Between UASs (User agent stylesheet) there are almost the same default formats that can be used together. But also many different formats lead to conflicts when developing web. For example, when: focus on the input boxes of different browsers give different default interfaces.

Why need CSS Reset

To deal with inconsistencies between UAS formats, Reset CSS sets were born. The Reset CSS sets have reset CSS before having their own CSS settings, with the aim of creating a more standard basis for browsers. The introduction of Reset CSS is essential. In addition to creating a standard base between browsers, it also helps programmers not get tired every time they adjust the default CSS of each browser.

Override CSS Reset

One of the main reasons advocating not using CSS Reset is that we often think first and later when web development we do not edit all of these default formats, adding CSS Reset only heavy loading of pages. This is absolutely true but not the core reason for not using CSS Reset.

  • First: When using Reset CSS, we will establish a cleaner writing style. At that time we can freely create the style and browser we want without having to edit each browser one by one.
  • Second: Reset CSS sets are usually optimized to be as small as possible so as not to affect page performance.

Common CSS Reset sets

1. Reset all

I think this is a way to reset too heavy and not optimal. It does not completely reset what we need, but it takes away the insignificant as the padding of the input . We should think of using more professional and optimal built Reset CSS sets.

2. Normalize.css

This is the Reset CSS set that I found to be the most optimal and I am most often used to reset the default formats. This CSS reset kit is suitable for those who want to rewrite their own CSS for all elements of the website, including setting the font size for the title tags. This CSS Reset also supports many browsers. https://necolas.github.io/normalize.css/

3. Reset CSS 2.0 by Eric Meyer

If you need a CSS reset section that puts all of the “Stone Age” website elements, without any format, you can use this set. This CSS reset kit is suitable for those who want to rewrite their own CSS for all elements of the website, including setting the font size for the title tags. http://meyerweb.com/eric/tools/css/reset/

4. Bootstrap’s Reboot

Bootstrap’s Reset CSS set takes us further as it even declares the font family and the background color for the <body> element.

Conclude

Using CSS Reset will give you a cleaner way of writing, easy to shape your style and style on any web browser. This is one thing to do. However, you don’t necessarily have to use existing CSS Reset sets, but you can create your own Custom CSS Reset sets to best suit your intended use.

Happy coding!

Share the news now

Source : Viblo