To reset or not to reset - using a CSS reset
Since we're at the start of this blog, why not start off with something that many people put at the top of their style sheets, a CSS reset. There are definitely folks out there who don't subscribe to the reset school of thought. Personally, I'm a fan. I use Eric A. Meyer's CSS Reset.
Now you may be wondering, "What the heck is this CSS reset stuff he's going on about and why would I use it?" Well, let's get into that.
Web browser engines treat various default HTML elements in different ways, resulting in pages looking differently in Internet Explorer than they do in say, Firefox. A CSS reset represents a big step towards easing our way into browser consistency. To put it simply, a reset allows you to start your site with a clean slate, which is consistent across most browsers. Eric Meyer explains the concept very well, so to get the full skinny, go have a read of his post on the subject.
Quite a while back, I would start my sites' CSS with:
* {
margin: 0;
padding: 0;
border: 0;
}
As Jonathan Snook points out, this approach has its negatives. Text boxes and submit buttons would lose their borders, lists would go all wonky, etc. It inevitably led to me having to write more CSS code to work around this method than it was worth.
When you use Sitemasher's style sheet editor, you'll be able to insert a CSS reset at the top of a style sheet simply by clicking "Insert CSS Reset" from a contextual menu. If you don't want it, you won't have to use it. If you want to use another reset, well you'll be able to do that as well by pasting the code into the editor.
There are various resets out there (with Yahoo in the mix as well) and through trial and error, I've found that Eric's works best for me. What do you folks think? What do you use? If you don't use one, why not? Let me know.
Now you may be wondering, "What the heck is this CSS reset stuff he's going on about and why would I use it?" Well, let's get into that.
Web browser engines treat various default HTML elements in different ways, resulting in pages looking differently in Internet Explorer than they do in say, Firefox. A CSS reset represents a big step towards easing our way into browser consistency. To put it simply, a reset allows you to start your site with a clean slate, which is consistent across most browsers. Eric Meyer explains the concept very well, so to get the full skinny, go have a read of his post on the subject.
Quite a while back, I would start my sites' CSS with:* {
margin: 0;
padding: 0;
border: 0;
}
As Jonathan Snook points out, this approach has its negatives. Text boxes and submit buttons would lose their borders, lists would go all wonky, etc. It inevitably led to me having to write more CSS code to work around this method than it was worth.
When you use Sitemasher's style sheet editor, you'll be able to insert a CSS reset at the top of a style sheet simply by clicking "Insert CSS Reset" from a contextual menu. If you don't want it, you won't have to use it. If you want to use another reset, well you'll be able to do that as well by pasting the code into the editor.
There are various resets out there (with Yahoo in the mix as well) and through trial and error, I've found that Eric's works best for me. What do you folks think? What do you use? If you don't use one, why not? Let me know.


0 Comments:
Post a Comment
Links to this post:
Create a Link
<< Home