We have a series of best practices to fully explore the potential that CSS has. What I want to tell you about is the so-called CSS reset, a technique that allows you to improve the cross-browser properties of your layouts. Let’s take a step back to explain the utility of the reset.
Browsers have always hidden within them preset CSS properties that act on html tags without being given a CSS rule by the developer. This internal working is due to the very often incomplete sites that do not have everything they need to remain well formed.
The browser then “takes a piece” by adding the missing rule by itself. The problem arises because the properties added by each browser are different between one browser and another. As a result, one browser may display something totally different from another.
An example is the annoying blue border of the linked images present on old versions of internet explorer or the margins and paddings different from one browser to another. In short, after days and days to calibrate your beautiful site to the pixel, don’t you want to look at it from another browser so as not to terrify you at the sight of a completely different site (but which strangely has the same URL as yours)?
If these are your nightmares, the solution lies in the CSS reset.
A CSS reset example
Below I propose a complete example by Yahoo developers under BSD license:
/*Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt*/
html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code, form,fieldset,legend,input,textarea,p,blockquote,th,td {margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
li{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym {border:0;font-variant:normal}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
/*to enable resizing for IE*/
input,textarea,select{font-size:100%}
/*because legend doesn’t inherit in IE */
legend{color:#000}
Custom CSS reset
You should create your own CSS reset directly by inserting the various zeroes directly on top of your CSS file. This only taking inspiration from the one proposed above perhaps.
Avoid using external CSS resets (as they do in too many). It is not convenient for the rendering speed of your page.
For example, for this little page:
<html>
<head></head>
<body>
<div>
<h1>Title</h1>
<p>This is a <a href="#">Link</a>.</p>
<span>Hello</span>
</body>
</html>
It would not make sense to recall a CSS file with the rendering of the whole html tags reset. Instead, it will be better to reset only the tags used and little more:
html {color:#000;background:#FFF}
body, div, ul, li, h1, h2, form, input, p, textarea {margin:0;padding:0}
img {border:0}
h1, h2 {font-size:200%; font-weight:bold}
input, textarea, select {font-family:inherit; font-size:inherit; font-weight:inherit}
input, textarea, select {font-size:100%}
So as to cover the spectrum of tags that you will most likely use and without overwriting them a lot of times as would happen in the case of the H1, H2, etc. tags which, by a normal reset, we will set to the size of the normal text. In this way we’ll have to be re-enlarge them to use as a title.
And that’s all for today. I hope this technique will be useful to you.
See you next time.
