CSS: resetting the browser internal stylesheet

Tweet

As you may know, every browser has a default CSS stylesheet. Knowing that, it is possible to set all the predefined styles to neutral values. In that way, we are sure that nothing will get in the way, and that all the built-in styles (applied automatically by the browser) will be set to a baseline. The main advantage will be that every browser (no matter which one we are using) will behave in the same way, according exactly to our custom stylesheet.

In the past, there has been a long debate about resetting default stylesheets. It seems that it all started when programmers noticed a difference in predefined margins between browsers (specifically Firefox and Internet Explorer). After that, different people worked on the so called reset CSS, discussed about it and today, we can say that there are three main different opinions. Some always use reset CSS stylesheets in their projects. Others think that they are useless and that if we properly create custom stylesheets there's no need for them. Finally there are some who think that reset CSS stylesheets are only sometimes useful and they use them only when necessary.

With the contribution of people like Eric Meyer, the discussion goes on. As he says:

"The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on." 

Until a few days ago, I thought it was useless. Today I might have change my mind. Here I will explain why.

The background

A few weeks ago, I had to create a document for a new project. The web page is quite long and the user should be able to print it directly. I styled the document, creating custom page breaks, margins and so on.
When displaying the print preview in Firefox, I noticed immediately there were some issues. For example, page breaks were randomly inserted by the browser. In some cases, the page break was inserted just after a few lines of a new page.
I played with my stylesheet a while, trying to understand what was responsible for the strange behaviour. I noticed that if I changed the page margins or scaling in the page print preview, the page breaks issue was still there, however the break points moved in different places and even increase or decrease in number.
The first thing that came to my mind, was to export the document to pdf programmatically (as I've explained in this post), but the final user told me he didn't want a pdf output: he wanted to print the document directly on his printer, without exporting.

The behaviour was in some way different in every browser. I tried Internet Explorer, Opera, Chrome and Safari, and what I noticed was a different behaviour in each of them, with a different output every time.

I normally use Firefox as default browser. One of the extensions I have installed is Web Developer in which we can bypass the browser default CSS stylesheet. As a last resort, I tried it, and magically all my problems were gone.
That is why, I started to reconsider CSS reset.

What is CSS reset doing?

Basically, a reset stylesheet is setting all the elements to neutral values. For example, it sets all the headings to:

margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;

That will ensure that nothing will get in the way, if you forget to set a proper style for them.
That is why some people are against reset CSS: if you properly create your stylesheet, you don't need to reset the browser's built-in stylesheet. And that is what I thought.
The point is that we might forget something and we might overlook some other things. Personally, I tried to understand what was messing my print preview. I concentrated on Firefox. And let me be direct, I couldn't find what was the issue. I have a prime suspect: line-height. But, to tell you the truth, I'm not sure. I believe it's a mix of different styles, applied to different elements.
In my situation, the reset CSS worked instantly, and solved my problems.

Conclusion

I might not be completely sure about the use of reset CSS. I still think that we should not insert it in every document we create. And I must say, I want to understand better why my web page was behaving strangely and which is the style that is messing my print preview.
However, for the moment, reset CSS solved my problems.

If I find something new, I will post it. In the mean time, please share your thoughts using the comment section below.