A Killer Collection of Global CSS Reset Styles
2008-08-20 23:57
375 查看
(转:http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/)
Using CSS to style semantically meaningful (X)HTML markup is an important key to modern web design practices. In a perfect world, every browser would interpret and apply all CSS rules in exactly the same way. However, in the imperfect world in which we live, quite the opposite frequently happens to be the case: many CSS styles are displayed differently in virtually every browser.
Many, if not all, major modern browsers (e.g., Firefox, Opera, Internet Explorer, Netscape, et al) implement their own generalized CSS rules, which often conflict with designer-applied styles. Other browsers fail to implement properly various CSS rules, making a mess of pages that happen to display perfectly in other browsers. Even worse, some browsers completely ignore specific aspects of CSS altogether, entirely ignoring widely accepted CSS attributes and properties.
Needless to say, the unpredictable manner in which browsers implement CSS requires us to seek realistic browser equalization strategies. Without relying on JavaScript to synthetically embellish default browser functionality, we focus our browser neutralization efforts entirely on CSS itself. By using an appropriately defined set of CSS “reset” rules, it is possible to override default browser styles and effectively neutralize behavior, allowing us to build our CSS on a uniform foundation.
Using a well-crafted set of global CSS reset styles enables designers to make assumptions about the defualt behavior of browsers. These presentational assumptions greatly simplify the process of creating a “universally” consistent CSS design using only one set of CSS rules. Such process simplification results in great savings of time and money. Many of the industry’s top designers have been using CSS reset styles for years, reaping the rewards and sharing the results.
In this article, I have rounded up a hand-selected collection of freely available global CSS reset styles. I have used each of these resets on various occasions with great success, and have even managed to scrape together a customized hybrid that cannibalizes key aspects of various others. For each reset, I provide as much information as possible concerning the source of the reset, key effects, and other essential information. Also, as I do not know the orignal author for some of these resets, please drop a comment if you happen to know. And so, without further ado, I present a killer collection of global CSS reset styles..
Here is the commented version as provided via Tantek’s site:
Here is the Tantek reset, reformatted and with explanatory comments removed:
white-space in all code tags
disabling of the
all text reset such that
targeted disabling of deprecated elements:
inclusion of deprecated elements:
disabling of the
..plus much more!
Here is the commented version of the Tripoli Reset as provided at David’s site:
Here is the Tripoli Reset, reformatted and with explanatory comments removed:
Note: Thanks to eliosh for bringing the Tripoli Reset to our attention!
Surely, this list will be updated with additional reset styles as they are discovered. Any suggestions?
Copyright2008PerishablePress
Obsessive CSS Code Formatting: Indentation and Spacing
Obsessive CSS Code Formatting: Patterns and Trends
New Mobile CSS Styles for Perishable Press
Obsessive CSS Code Formatting: Opening and Closing Brackets
Firefox CSS Magic
Embed External Content via iframe and div
Bookmark • Subscribe • Explore
« Rocking the Boat • Up • New Version of BlogStats PCC for WordPress 2.3 »
Mind Gravy » Blog Archive » links for 2008-03-04
roScripts - Webmaster resources and websites
Poll Results: What CSS Reset Do You Use? - CSS-Tricks
Templaterie Blog
One Less Headache: CSS Reset’s | Andreas Küfer
狐狸胡图 » Blog Archive » 杀手级的全球Css Reset整理
自然而然-Naturally style » Blog Archive » 杀手级的全球Css Reset整理
Browser Reset CSS » Siolon
new website with css problems - Graphic Design Forum and Web Design Forum
Intenta » Blog Archive » Colección de CSS de reinicialización
Reseting CSS default browser settings: | Urbano's Blog
» CSS de reinicialización
CSS Global Reset Styles - freeyourdesign.com
Reniciar el estilo CSS de los navegadores para minimizar las diferencias entre estos - Guia Breve
CSS coding for cross browser compatibility | Onyx Design Weblog
diarioTHC | Tres consejos CSS para obtener diseños Cross Browser
CSS tirks
Operación limpieza | DragóndeLuz.com
Override default browsers styles with CSS Reset at (it)gossips
Usefull CSS « My Weblog
Using CSS to style semantically meaningful (X)HTML markup is an important key to modern web design practices. In a perfect world, every browser would interpret and apply all CSS rules in exactly the same way. However, in the imperfect world in which we live, quite the opposite frequently happens to be the case: many CSS styles are displayed differently in virtually every browser.
Many, if not all, major modern browsers (e.g., Firefox, Opera, Internet Explorer, Netscape, et al) implement their own generalized CSS rules, which often conflict with designer-applied styles. Other browsers fail to implement properly various CSS rules, making a mess of pages that happen to display perfectly in other browsers. Even worse, some browsers completely ignore specific aspects of CSS altogether, entirely ignoring widely accepted CSS attributes and properties.
Needless to say, the unpredictable manner in which browsers implement CSS requires us to seek realistic browser equalization strategies. Without relying on JavaScript to synthetically embellish default browser functionality, we focus our browser neutralization efforts entirely on CSS itself. By using an appropriately defined set of CSS “reset” rules, it is possible to override default browser styles and effectively neutralize behavior, allowing us to build our CSS on a uniform foundation.
Using a well-crafted set of global CSS reset styles enables designers to make assumptions about the defualt behavior of browsers. These presentational assumptions greatly simplify the process of creating a “universally” consistent CSS design using only one set of CSS rules. Such process simplification results in great savings of time and money. Many of the industry’s top designers have been using CSS reset styles for years, reaping the rewards and sharing the results.
In this article, I have rounded up a hand-selected collection of freely available global CSS reset styles. I have used each of these resets on various occasions with great success, and have even managed to scrape together a customized hybrid that cannibalizes key aspects of various others. For each reset, I provide as much information as possible concerning the source of the reset, key effects, and other essential information. Also, as I do not know the orignal author for some of these resets, please drop a comment if you happen to know. And so, without further ado, I present a killer collection of global CSS reset styles..
Minimalistic Reset — Version 1
As basic as it gets, this global reset employs a wildcard selector to reset the padding and margins on all elements to zero. In my experience snooping around the source code of other designers, this is the most commonly used CSS reset. I see it everywhere..Minimalistic Reset — Version 2
This reset is identical to the previous one, but also takes into account all default border treatments, which are effectively neutralized to zero as well..Minimalistic Reset — Version 3
This last version of the “minimalistic” reset is similar to the previous two, but also kills the default outline style..Condensed Universal Reset
This is my current favorite CSS reset. It handles all the essentials, and ensures relatively universal default browser-style uniformity.Poor Man’s Reset
I have no idea what to call some of these CSS reset rules. I named this one as I did because it seems to focus on a minimal collection of default browser styles. The CSS resets padding and margins on only the html and body elements; ensures that all font-sizes are reset; and removes the border from image links. These are all important aspects of any CSS design, and this reset takes care of all of them. If you happen to know the source of this ruleset, please drop us a comment. Otherwise, check it out..Siolon’s Global Reset
Chris Poteet along with “various influences” created this remarkable technique for resetting default browser styles. Chris recommends placing the reset at the top of your style sheet for optimal cascading results. This method omits reset styles involving inline and block display elements. Also, remember to explicitly set margin and padding styles after implementing the reset. Note the uniquemargin-left
40px;declaration for lists and blockquotes, and the
margin
20px
0;for headings, forms, and other elements:
Shaun Inman’s Global Reset
Although I am not sure if Shaun actually wrote this particular CSS ruleset (although it is likely he did), it happens to be the CSS reset used to neutralize styles for his current, Helvetica/monochrome site. Although I have taken the liberty of restructuring the presentation of this reset for the sake of clarity (I have made no functional changes), this is some pretty tight CSS, implementing a choice set of rules to reset many critical default browser CSS styles.Yahoo CSS Reset
The folks at Yahoo! have also developed their own browser reset styles. As with other reset styles, the Yahoo! Reset CSS eliminates inconsistently applied browser styling for many key (X)HTML elements.Eric Meyer’s CSS Reset
As discussed in the original article, CSS guru Erik Meyer set forth to create a universal set of reset styles. This is heavy-duty stuff, effectively neutralizing virtually every significant aspect of default, browser-applied CSS rules. This reset ruleset is far-reaching, resetting many different CSS properties. Keep this in mind during subsequent CSS development. If you experience unexpected, unexplainable behavior happening with your styles, begin by investigating and eliminating suspected aspects of this code (or any newly added reset styles) as the possible culprit — you’ll thank yourself later.. ;) In the meantime, I have taken the liberty of reformatting the presentation of Eric’s code. Rest assured, the rules have merely been rearranged. Functionally, the code is identical. Update: Eric’s site now features an official Meyer CSS Reset page, serving as a permanent location for the most current version of the reset code.Condensed Meyer Reset
Although I am uncertain as to the original source of this particular CSS reset, it appears as if it is a condensed, slightly modified version of the Meyer reset. Many of the same declarations are made, and many of the same styles receive neutralizing treatments. Many attributes are not mentioned, however, resulting in more streamlined, less invasive reset collection. Note the duplicate declarations for the heading attributes (e.g.,h1-
h6), which seems to prevent font-weight and font-size normalization from affecting paragraphs, divisions, and the other non-heading attributes addressed in the first declaration.
Tantek’s CSS Reset
Dubbed “undohtml.css”, Tantek’s CSS Reset is a solid choice for removing many of the most obtrusive default browser styles. This reset removes underlines from links and borders from linked images, eliminates padding and margins for the most common block-level elements, and sets the font size to1emfor headings, code, and paragraphs. As an added bonus, Tantek’s reset also “de-italicizes” the infamous
addresselement! Nice :)
Here is the commented version as provided via Tantek’s site:
Here is the Tantek reset, reformatted and with explanatory comments removed:
The Tripoli Reset
The Tripoli Reset by David Hellsing is part of a complete CSS standard for (X)HTML rendering. By neutralizing browser-default CSS styles, Tripoli “forms a stable, cross-browser rendering foundation for your web projects.” After resetting CSS styles, Tripoli’s generic.css rules may be used to “rebuild” the browser defaults for content typography. Some of the more prominent reset features include:white-space in all code tags
disabling of the
<hr>element
all text reset such that
1emequals
10px
targeted disabling of deprecated elements:
<marquee>,
<blink>and
<nobr>
inclusion of deprecated elements:
<listing>,
<xmp>and
<plaintext>
disabling of the
<font>tag and other deprecated elements
..plus much more!
Here is the commented version of the Tripoli Reset as provided at David’s site:
Here is the Tripoli Reset, reformatted and with explanatory comments removed:
Note: Thanks to eliosh for bringing the Tripoli Reset to our attention!
Surely, this list will be updated with additional reset styles as they are discovered. Any suggestions?
Copyright2008PerishablePress
Related articles
More Killer CSS Reset StylesObsessive CSS Code Formatting: Indentation and Spacing
Obsessive CSS Code Formatting: Patterns and Trends
New Mobile CSS Styles for Perishable Press
Obsessive CSS Code Formatting: Opening and Closing Brackets
Firefox CSS Magic
Embed External Content via iframe and div
About this article
This is article #425, posted by Jeff Starr on Tuesday, October 23, 2007 @ 08:14am. Categorized as Presentation, and tagged with browser, code, css, reference, reset. Updated on July 29, 2008. Visited 55307 times. 51 Responses »Bookmark • Subscribe • Explore
« Rocking the Boat • Up • New Version of BlogStats PCC for WordPress 2.3 »
Trackbacks / Pingbacks
It’s Samuel » Blog Archive » CSS Reset, A Quick IntroductionMind Gravy » Blog Archive » links for 2008-03-04
roScripts - Webmaster resources and websites
Poll Results: What CSS Reset Do You Use? - CSS-Tricks
Templaterie Blog
One Less Headache: CSS Reset’s | Andreas Küfer
狐狸胡图 » Blog Archive » 杀手级的全球Css Reset整理
自然而然-Naturally style » Blog Archive » 杀手级的全球Css Reset整理
Browser Reset CSS » Siolon
new website with css problems - Graphic Design Forum and Web Design Forum
Intenta » Blog Archive » Colección de CSS de reinicialización
Reseting CSS default browser settings: | Urbano's Blog
» CSS de reinicialización
CSS Global Reset Styles - freeyourdesign.com
Reniciar el estilo CSS de los navegadores para minimizar las diferencias entre estos - Guia Breve
CSS coding for cross browser compatibility | Onyx Design Weblog
diarioTHC | Tres consejos CSS para obtener diseños Cross Browser
CSS tirks
Operación limpieza | DragóndeLuz.com
Override default browsers styles with CSS Reset at (it)gossips
Usefull CSS « My Weblog
相关文章推荐
- MOSS2007- closed problem of ["Cannot make a cache safe URL for "styles/portal.css", file not found.]
- [CSS] Easily Reset Styles With a Single CSS value
- css中的first-child nth-child nth-last-child() 和:nth-of-type(n)
- css重置样式表reset.css
- java 异常问题 No bean named 'sessionFactory' is defined 和 initialize a collection of role
- A Collection of Examples of 64-bit Errors in Real Programs
- Linux Out-Of-Memory(OOM) Killer分析
- A little collection of cool unix terminal/console/curses tools
- 关于reset.css的疑问:为什么一定要重置浏览器样式?
- The Zen of CSS(翻译)(1)
- [Clojure] Data Collection and Data Analysis on the music of www.xiami.com - Part 2
- cobertura report appear a lot of error : JavaNCSS got an error while parsing the java file
- 重置样式 reset.css
- Crossing Boundaries: The Deployment of Global IT Solutions
- mysql主从复制报错 :Incorrect usage of DB GRANT and GLOBAL PRIVILEGES
- SmartGwt: 404 - GET /sc/skins/Enterprise/skin_styles.css
- shining cento in book reading: handle out of memory problem for new operator -by register a global SetNewHandler
- failed to lazily initialize a collection of role:XXX, no sessi
- reset.css
- reset.css