0, Introduction
Whenever you have a new project, the first step is to use a reset.css to reset the style. Abuse is not as good as not, directly with a ready-made reset.css will lead to a variety of bizarre late in the occurrence of bugs. So it's best to write a reset.css yourself and understand what each reset is for. Reset.css's intention was to reset the style, and I always suggested that the. Clearfix be put into layout.css, and the definition of H1 and H2 into TYPOGRAPHY.CSS. Specifically how to plan the Web site CSS structure, not in the text of the list, you can refer to Smashing magazine on the article, there are passable Chinese translation. Note that this article divides the reset into two parts, one is pure reset.css and can be used for any project. The other is "reset" for a particular project, a custom modified content that can be placed in files such as Layout.css, TYPOGRAPHY.CSS, and they are imported into a base.css to form the underlying style of a project. This article is about how to write a generic reset.css for all the projects, and what you need to set up for the different items after you set up the play reset.css.
1, the foundation
Newton was standing on the shoulders of the giant Galileo, and we could do the same. First we have to select a basis for progress.
Please never use
copy content to clipboard
Code:
* { margin: 0; padding: 0; }This problem is too much to express here.
Currently more popular with Eric Meyer's reset style and Yui's reset style. Another condensed Meyer reset simplifies Eric Meyer's style. Interestingly, Eric's reset style also stems from Yui's. and the simplified version of Eric's style to simplify back to Yui's style. But at the same time, the bad thing is that the spread of the Internet (especially at home) is not the latest version. All of the above two pages are not up to date, Eric is dedicated to having a reset.css page. and Yui current version (2.7.0) of the reset.css actual address, than the page above more things. In addition, we can also base on some common frameworks, such as the blueprint or elements CSS framework (which is also derived from Eric Meyer). OK, it's almost ready for work. All of these can be used as reference materials to organize our own reset. I mainly use Yui here, with Eric's reset.
2, default color
For the page is not a default background color and foreground color, Yui and Eric have different views.
Yui Reset background color is white and the text color is black.
copy content to clipboard
Code:
html {
color: #000;
background: #FFF;
}And Eric makes all the colors transparent in the current latest edition, and he thinks that transparency is the original color. Although he once thought should also set white background color, black text color. As to why the last change, Eric did not give a specific reason.
This question I basically think is the user custom more important or your design more important question. My personal view is that if your design is a white background, then do not set the background. A small number of high level users who will customize the default background color of the page. Set to their favorite background color, such as light blue. The basic common browsers offer this simple feature. And our background-color reset will destroy the user's choice-though this will ensure that your design is authentic and present to all users. Of course I know that more high-end users will use Firefox extensions such as stylish to customize the page. But I have to say, only use the "option" to adjust the background color more users, is not it? At the same time, if the design itself has other background colors, such as black, blue, green and so on, OK, these design of course can set the background color. But please don't put it in the reset.css. This is the place to reset the style, not the place you designed it. Please put your design on the more vast land.
So, to put it simply, no, do not set the background color in reset.
So, what's the color of the text? In principle, the text color should not be set. But in IE in the form element legend This object is more special, with the theme of the relatively close. Legend will default to its own color (related to the current topic) without inheriting the color of the parent element (even if the Color:inherit is set).
From some points of view, it can be taken for granted that the number of font colors is much smaller than the number of people setting the background color; it's not surprising to see that the legend element is black if the background color is set. Therefore, Yui in its reset set the legend {color: #000;} is understandable.
But conversely, wouldn't it be better to put this in typography.css or form.css? Different page design, its legend color requirements are likely to be different, put in reset.css repeat definition is not necessary. This CSS rule can therefore be used as the first rule to be set after reset.css.
3,padding and Margin
It was once popular.
copy content to clipboard
Code:
* { margin: 0; padding: 0; }That's the reason. Let the elements of the padding and margin are zero, especially those H1 and p and ul/ol/li elements such as, and the body itself is also margin. It is useful to clear the padding and margin of elements.
Yui do this:
copy content to clipboard
Code:
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}And Eric does this:
copy content to clipboard
Code:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}As you can see, Eric writes almost all the elements into the rules. And Yui only have padding and margin elements empty style, while other elements are not moving. I personally prefer Yui's approach, because he can avoid some extraneous elements with unnecessary style. Performance degradation when there are too many elements. But Eric also has the merit, he writes, the entire reset.css can be small many bytes, to the server's pressure to be smaller. But think further, what difference does it make to select all elements with a *? This has almost all the elements! How do you use it? See what you like.
4, Border
Yui Li:
copy content to clipboard
Code:
fieldset, img {
border: 0;
}
abbr, acronym {
border: 0;
font-variant: normal;
}Eric has been in the last one to clear all the borders, or recommend Yui, the reason ditto.
5, outer frame (outline)
This is the dotted box when the element gets the focus, and can be eliminated by setting outline in browsers other than IE, as Eric does below.
copy content to clipboard
Code:
/* remember to define focus styles! */
:focus {
outline: 0;
}And Yui did not set this article. In Eric's style, you can see Eric's reminder: Be sure to redefine the style that gets the focus!
This is really important, for the sake of accessibility, those who are not easy to use the mouse is basically the tab navigation to browse the page. The element that gets the focus has a specific style that can greatly help users of such groups, and is usually recommended as follows: hover. It is often designed to be discounted by this dotted box. This is therefore retained in reset and as an early-defined rule after reset.css.
In addition, for browsers supporting outline such as Firefox, in addition to capturing the focus of the elements, the browser itself does not set the outline attribute to the element, so, like Eric, all the elements of the outline set to 0, I think it is not much necessary.
6, Font style (fonts style/weight/size/variant)
Yui in, divided into a number of:
copy content to clipboard
Code:
address, caption, cite, code, dfn,
em, strong, th, var, optgroup {
font-style: inherit;
font-weight: inherit;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
abbr, acronym {
border: 0;
font-variant: normal;
}
input, button, textarea,
select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
*font-size: 100%;
}Eric removed the style reset from his final version of the reset, retaining only the
copy content to clipboard
Code:
font-size: 100%;Reasons see below.
But normally, I think it's better to reset these styles, like strong elements, most of the time it's just semantics, not that he's really bold. There may be a background color or some other way to emphasize it. And it's all used here to inherit this inherited property, not to define it.
copy content to clipboard
Code:
font-weight: normal;Can be seen in Eric's previous reset article. This is to prevent-the parent element font is bold, and none of the child elements inherit the bold attribute (because normal is set)-this occurs. So the Yui set H1-h6 style and ABBR and acronym of the two styles are changed to inherit will be better.
In addition, for the H1-h6 font size definition, the proposal is placed in a special typography.css, not recommended in RESET.CSS. So here I also tend to use Yui's strategy, all reset.
But unfortunately, in the ie6/ie7, whether strong or h1-h6, or EM and other elements, set inherit can not inherit the attributes of the parent element, still maintain their own characteristics. This brings the browser differences, the style reset itself is to avoid browser differences, but now brings the browser differences, is absolutely not to take. I have considered this question for a long time, in order to unify all browsers are reset to normal (Yui idea), or give up the reset of these elements, let them go with the nature, to ensure that in all browsers the same style (Eric's idea). I finally decided to adopt Yui's approach. Because, these elements cannot inherit the parent element properties, whether they are reset to normal or not reset. That being the case, the next step is to ensure that the elements are restored to their normal appearance, avoiding the need to reset the style at design time.
Have to say, this compromise is only for IE6 and IE7, perhaps 5 years later, the boss and customers do not require support for IE7, we can be assured that the use of inherit bold.
In addition, Yui did not give the code KBD SAMP TT These elements to reset the font size. But actually in IE, they will be reduced to display. So the reset font-size:100% should be given here;
7, Row height (line-height)
For line height, Yui did not give a reset definition, and Eric gave a reset:
copy content to clipboard
Code:
body {
line-height: 1;
}Row height default all elements are inherited, so it is sufficient to set the line height to 1. Usually the line height is set at 1 times, English is read as usual, but Chinese can not read, the line spacing is too close to cause easy to read wrong line. Usually in the Chinese environment can be set 1.4 to 1.5 to be the user normal reading. My recommendation is 1.5, so the calculated value is also an integer. For example, the font size of 12px when the row height is 18px, font size 16px high 24px. It also seems to be more comfortable. In addition, there is an important reason is not set to 1 is: ie, the row height of 1 o'clock, the top of the text will be cut off a few pixels, the font bold when especially obvious. So, the principle of resetting is good, but must not reset to 1.
8, List style
Yui used:
copy content to clipboard
Code:
li {
list-style: none;
}Eric used the following:
copy content to clipboard
Code:
ol, ul {
list-style: none;
}Although I did not test the Yui has any problems, but I always feel that the setting OL and UL will be more secure. Furthermore, there are fewer elements to be affected and the performance should be a little higher. Although the download volume will be more than 3 bytes.
9, table elements
In terms of tables, they are more uniform. are:
copy content to clipboard
Code:
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}Eric also cautions that you need to set the cellspacing= "0" in HTML to achieve the perfect reset effect.
But in addition Yui also set the
copy content to clipboard
Code:
caption, th {
text-align: left;
}Let caption and th elements not be centered. As a reset, is desirable. It is recommended that you add this rule.
10, Subscript and baseline
Yui written
copy content to clipboard
Code:
sup {
vertical-align: baseline;
}
sub {
vertical-align: baseline;
}There seems to be no optimization, and I don't know why I didn't write it together. And Eric is already defined in the first line. And the problem is, Yui this definition, but did not reset the font size, this is regrettable. Since it's a reset style, it's a bit more thorough, so it's recommended:
copy content to clipboard
Code:
sup, sub {
font-size: 100%;
vertical-align: baseline;
}Also for Eric to put all the elements on the baseline, including superscript subscript. Eric's explanation is to force designers to pinpoint the vertical offsets of these elements.
11, inserting and Deleting (Ins/del)
For this problem, Yui directly cleared the ins of the underline and Del Delete line of the two text decoration:
copy content to clipboard
Code:
del, ins {
text-decoration: none;
}And Eric retains the strikethrough:
copy content to clipboard
Code:
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}How to choose? I chose Eric, why don't I have the perfect style reset here? Quite simply, the goal of my reset is to try to avoid the default style of the browser and the problems caused by the default style differences between browsers when we write the page. While the Del element deletes the text decoration of the line, I am sure no one will object to it. Someone may add other styles, such as a lighter font, but there is nothing more expressive than a strikethrough to the elements of this strong semantics. Unlike the focus style above, not everyone likes the dotted box. But it seems that there is no browser default to the Del element to delete the line, so this can be omitted.
So, here I just reset the ins style, and don't forget to add some style to the INS element waiting.
12, quotation marks for quoted elements
In some browsers, quotes will appear before and after Q or blockquote. This is not everyone's favorite. So he needs to be reset.
Yui's relatively simple, only reset the Q:
copy content to clipboard
Code:
q:before,
q:after {
content: '';
}And Eric is more thoughtful, the Q and blockquote are reset.
copy content to clipboard
Code:
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}OK, it's decided to use Eric's, and for the style reset, there's nothing wrong with being meticulous and thoughtful.
13, Link
For links, Yui and Eric did not take the style reset, but from my thinking for a long time or decided to put the link style back in. The reason, or because the style reset one to be thorough, and secondly for the link style not all designers like to use underline decoration. Therefore, I suggest to reset the underline of the link.
copy content to clipboard
Code:
a {
text-decoration: none;
}But it's a little rough. The real underline style is actually only: link and: Visited so change to the following is better:
copy content to clipboard
Code:
:link, :visited {
text-decoration: none;
}In addition, the link color can be treated as a rule that needs to be set after reset. It is not appropriate to put it directly into the reset.css.
14, my reset style
Summary of the above rules, here is my CSS reset rules, BSD protocol release, please feel free to use. Test samples (This is from Yui there copied over, thank Yui to make contributions to this. ）
Download: Reset.css reset-min.css
copy content to clipboard
Code:
/*
Copyright (c) 2009, Shawphy (shawphy.com). All rights reserved.
Http://shawphy.com/2009/03/my-own-reset-css.html
Based on YUI http://developer.yahoo.com/yui/reset/
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
Licensed under the BSD License:
http://creativecommons.org/licenses/BSD/
version:1.1 | 20090303
*/
Body, Div, DL, DT, DD, UL, OL, Li,
H1, H2, H3, H4, H5, H6, pre, code,
form, fieldset, legend, Input, button,
TextArea, p, blockquote, TH, TD {
margin:0;
padding:0;
}
FieldSet, img {
border:0;
}
/* Remember to define focus styles! */
: Focus {
outline:0;
}
Address, caption, cite, code, DFN,
EM, strong, Th, Var, optgroup {
Font-style:normal;
Font-weight:normal;
}
H1, H2, H3, H4, H5, h6 {
font-size:100%;
Font-weight:normal;
}
ABBR, acronym {
border:0;
Font-variant:normal;
}
Input, button, textarea,
Select, optgroup, option {
Font-family:inherit;
Font-size:inherit;
Font-style:inherit;
Font-weight:inherit;
}
Code, KBD, Samp, TT {
font-size:100%;
}
/* @purpose to enable resizing for IE * *
/* @branch for Ie6-win, Ie7-win * *
Input, button, textarea, select {
*font-size:100%;
}
Body {
line-height:1.5;
}
OL, UL {
List-style:none;
}
/* Tables still need ' cellspacing= ' 0 "' in the markup * *
Table {
Border-collapse:collapse;
border-spacing:0;
}
caption, Th {
Text-align:left;
}
SUP, SUB {
font-size:100%;
Vertical-align:baseline;
}
/* Remember to highlight anchors and inserts somehow! */
: Link,: visited, ins {
Text-decoration:none;
}
BLOCKQUOTE, Q {
Quotes:none;
}
Blockquote:before, Blockquote:after,
Q:before, Q:after {
Content: ';
Content:none;
}
15, complete a preliminary CSS framework
As mentioned earlier, styling is a common feature that can be used for all items, and different projects should have a personality. There are, of course, other commonalities, not part of the style reset, but equally important. Then you can do a CSS frame. The CSS framework is much more to consider than a CSS reset, and here is just a little bit more to do.
Layout.css
First of all, in addition to Reset.css to build the Layout.css, here is currently the main recommended into. Clearfix. Clearing floats is important. But this does not belong to the style reset, which is appropriate in the layout.
copy content to clipboard
Code:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */In addition, LAYOUT.CSS can also be placed in their usual layout, such as
copy content to clipboard
Code:
#wrap{margin:0 auto;width:960px;}Rules like that. It depends on one's liking.
Typography.css
There are a lot of rules to put here, and it's important to have the following three:
: Focus, A, INS
These three are reset, but very important content, it is recommended that immediately after reset in the typography to set the total station style, to maintain style unity.
INS can be set separately: Focus is best set to follow: hover, and A's style is set according to Love,hate's rules.
The H1-h6 series was also previously reset. You can consider setting the style here. determined by site characteristics. I personally do not like the global definition of the font size of the HX series, unified 100% I think it's good.
The next thing to set is the Font-family property, which you can refer to shootout's article. In addition, the wheat article mentioned that the form element font in IE can not inherit the font of the parent element, so to set separately.
As for the other needs of the global settings, you can refer to the previous narrative, find the appropriate part to add to the TYPOGRAPHY.CSS can be. In this way, in order to ensure the reset.css of the general nature of the case, so that different projects have personality. Try to ensure that RESET.CSS is the same in all projects. Facilitate the development of the project. Finally, don't forget to add cellspacing= "0" When you write the form to achieve the perfect reset effect.
16, to explore
Article written more hasty, but also limited by my ability to limit, can only write here. Welcome to the message to explore, you can send e-mail or on Twitter to find me. To further refine this reset. Thank you.
