Nov 05 2010
CSS Resets
0 comments“It became necessary to destroy the village in order to save it.”
- Unidentified US Army Major
Each browser inevitably has slightly different default values for appearance when displaying some tags. For example, the default body margin amount is different by 1 pixel between Internet Explorer and other browsers; Firefox will place a space between the top of an <h1> element and the top of the page (assuming the <h1> is the first element in the page), which follows W3C specifications, but IE will not.
In response to these inconsistencies, some web developers have developed “CSS Resets”, a series of style declarations that are intended to “wipe the slate clean”: setting the CSS back to a base layer of default values that are shared between all browsers.
Eric Meyer’s CSS Reset is probably the most well-known attempt at this, although Yahoo’s YUI reset is also well-regarded. Many CMS’s and frameworks, such as Wordpress, also employ a CSS reset before applying themes.
Personally, I consider most CSS resets overkill, the equivalent of flattening a building in order to redesign it. CSS reset files tend to be rather long, which increases file size, and the process of building up styles from the state of CSS left after a reset can be arduous. In addition, CSS resets tend to more focused on setting IE straight, which I would tend to deal with using a conditional comment (discussed later). Finally, one can become so obsessed in making every browser “the same” that the design itself suffers: flexibility in the appearance of content from device to device is a feature of the web, not a bug.
That being said, there are a few declarations I typically make in a stylesheet that could be considered a “mini-reset”. It’s one of the few times I will use the “wildcard” selector (*), which affects every element. As the first declarations in a linked stylesheet:
* { outline: none; border: none; }body { margin: 0; padding: 0; }
This turns outline off for all tags under all states (I find outline irritating and distracting), along with border (eliminating borders on linked images and other elements). Finally, I reset body margin to 0.
This minimal reset allows me to build my designs in CSS without backtracking, avoiding moments of “Oh, I meant to do that”, or the tendency to add “fixes” for individual selectors.
- Tags
You must be signed up and logged in to leave a comment. Doing so only takes a moment.
