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.

Web Design: resizeMyBrowser

Tweet

When building web sites, one of the most important things we must deal with nowadays is the target screen size. I have published different articles on the subject, but everytime I think about it and search on the web, I find different tools to check if I've done things right. With the explosion of handheld devices, the screen size has become a more important matter, and what we see on our beloved widescreen monitor is just not enough to evaluate how visitors will look at our web site.
There is one tool I would like to suggest; a tool conceived to help us in that evaluation.

ResizeMyBrowser

resizeMyBrowser is a simple tool that will resize your browser window according to different standards like the iPhone 3G/3GS screen size (320x480 or 480x320), iPhone 4 (640x960 or 960x640), iPad and so on. In addition to the available presets, there's the possibility to create custom presets.

The testing is done quite accurately, and there's the possibility to see the result considering the outer window (including toolbars) or considering the inner window (the interior of the browser window).

If you use Firefox and the Web Developer toolbar, you would probably don't need this, but I think that an additional testing tool is always welcomed.

Happy coding to all of you!

Firefox Extension: Web Developer

Tweet

If you are a web site developer you probably have got inspiration from other site sometimes. Again, while developing a new project, you had to deeply and thoroughly test your creation. These are the main reasons why - if you use Firefox or Chrome - you should consider installing the Web Developer extension.