Reset Styles Using CSS Reset
This article is the first of a series on taming CSS. Today we look at technology CSS Reset .
Each browser sets its own default style values ​​for different HTML elements. Using CSS Reset, we can offset this difference to ensure cross-browser style.
For example, you use the a element in your document. Most browsers, like Internet Explorer and Firefox, add a blue color and underline to the link. However, imagine that in five years someone decided to create a new browser (let's call it UltraBrowser). Browser developers didn’t like the blue color and annoying underscores, so they decided to highlight the links in red and bold . It is based on this, if you set the base value of the styles for the element a , then it is guaranteed to be what you want it to be, and not how the developers of UltraBrowser prefer to display it.
')
Example 1 : displaying the p element by default.
In the first example, I put 3 paragraphs ( p ) with no set styles inside the div element, to which I set a blue background and an orange border.
By default , you will see that in Firefox there is a gap between the top border of the div container and the top border of the first paragraph. The situation is similar with the lower border of the container. However, in Internet Explorer we no longer see the gaps that we observed in Firefox.
So which browser is still right? In fact, it does not matter. What really matters is a completely different display of indents in different browsers, if we don’t use our own styles to define them.
This example is, of course, simplified. In practice, CSS Reset is used to reset those rules that may call into question the cross-browser compatibility of your styles.
Below, we will touch on the peculiarities of work with the reset of styles in practice, but for the beginning we will plunge into the history of the formation of this technique.
CSS Reset was first used back in 2004 (dinosaurs roamed the network) Andrew Krespanis . In his article, he advised using the universal selector ( * ) at the beginning of the CSS file to set all elements to zero indents (margin and padding).
The universal selector works as a regular expression, capturing each element in its path, indiscriminately and without mercy. Since we did not specify any other selectors before it, any indents are removed from all elements in the document (this is only in theory, in fact it happens a little differently ). With this we solve the problem of the first example and indicate to the browser who is the boss here. You can look at the result in the second example .
But now we don’t have any padding at all, including between separate paragraphs! What to do? Do not lie and do not be afraid: below our reset, we describe the rule we need. This can be done in different ways: specify the indent from below or above the paragraph, specify it in percent, pixels, or in em.
Most importantly, the browser now plays by our rules, and not we by it. I decided to do this:
As a result, we got what we can see in the third example .
Shortly thereafter, CSS guru Eric Meyer (Eric Meyer) conducts further research on the above method of resetting indents. In them it affects the work of Tantek Celik and his set of CSS-rules undohtml.css , in which not only indents were reset, but also the basic values ​​of other attributes were established: font styles, list styles.
After numerous alterations and refinements, we come to a wonderful solution called CSS Reset . In it, resetting values ​​is done more carefully: using the element names directly, and not the universal selector. It also sets default values ​​for “problematic” elements, for example, tables in which border-collapse is incorrectly processed by some browsers.
Of course, there are other similar solutions ( YUI Reset CSS from Yahoo!). You can create your own, which will satisfy the needs of your layout.
Let's look at some moments of using the reception in the real world.
Above, I pointed out two ways to reset styles: simple, based on the use of a universal selector (which I do not recommend to use) and complex, using styles from Eric.
In addition, you can use the development from Yahoo! (YUI CSS Reset), which you can collect directly from their server .
You can create your own reset styles if you are solving a specific task in your project. Despite this, there is no step-by-step guide for creating your own CSS Reset. Rely on your own principles and your own style.
To help you make the right choice, here are a couple of links:
Resetting styles after setting your own styles for elements is the wrong approach. In this case, nothing good should be expected from the browser display. Remember that you should always connect a CSS Reset first, and then all other styles.
Yes, I understand, it sounded ridiculous, but this is one of the major mistakes of developers, young and old. Many simply forget about it.
Some may ask a logical question: why is this happening? The answer is simple: the rules written below in the text of the CSS file (and even lower in their order of connection in the document) overwrite the rules declared earlier.
Let's not go far from the topic and continue. Let's apply Eric Meyer’s styles to our example, but after describing our properties, as shown in Example 4 . Mathematicians would say the following: “What was required to prove.”
I must (no, I was not forced) to mention this advice. Using a separate file for CSS Reset is a common practice supported by a large number of developers.
In fact, I hold the position of creating one large CSS file due to the higher performance of this approach. But in this question, I tend to agree with the majority: CSS Reset should be placed in a separate file (usually called reset.css). In this case, you can use it in various projects without making any efforts to separate it from other CSS rules.
Although this concept works, its application is often not desirable due to incompatibility with some browsers (for example, this selector is incorrectly processed in Internet Explorer). You should use this technique only for simple, small, static and predictable pages (if you really had to do this).
This tip is especially important when you develop solutions such as topics for CMS. You cannot predict in advance how it will be used and how it will be modified. It is better to describe the fundamental CSS rules for all elements than to use for this the unpredictable (albeit smaller) mechanism of universal selectors.
Another reason I don’t like a separate CSS Reset file is the potential redundancy of subsequent CSS property declarations. Repetition of your individual styles among the entire set of CSS files is a moveton and should be avoided. Of course, sometimes we are too lazy to painstakingly go over a set of styles and combine some of them, but you should at least try!
Let's go back to Eric's CSS Reset. It sets the default values ​​for the line-height, color and background of the body element as follows:
Suppose you already know how the body element will look like:
In this case, there is no need to create a new selector to describe your properties - you can simply turn them on in the CSS Reset. Let's do it:
Do not be afraid to modify the CSS Reset itself. Adjust it for yourself, make it work for you. Modify, rebuild, remove and add as needed in your particular case.
Eric Meyer said the following about this: “This is not the case when everyone should use CSS Reset without changes.”
Perhaps the first mention of resetting indents with the universal selector in the WSG mailing list.
Eric Meyers is studying the mechanism of the universal selector.
Jonathan Snook (Johnathan Snook) gives an alternative point of view on CSS Reset and explains why he avoids them. The opinion of one of the respected Web developers.
Tripoli is another popular CSS Reset, which is subdivided into several versions. You can choose the one that suits you.
Why do you need it?
Each browser sets its own default style values ​​for different HTML elements. Using CSS Reset, we can offset this difference to ensure cross-browser style.
For example, you use the a element in your document. Most browsers, like Internet Explorer and Firefox, add a blue color and underline to the link. However, imagine that in five years someone decided to create a new browser (let's call it UltraBrowser). Browser developers didn’t like the blue color and annoying underscores, so they decided to highlight the links in red and bold . It is based on this, if you set the base value of the styles for the element a , then it is guaranteed to be what you want it to be, and not how the developers of UltraBrowser prefer to display it.
')
Simple example
Example 1 : displaying the p element by default.
In the first example, I put 3 paragraphs ( p ) with no set styles inside the div element, to which I set a blue background and an orange border.
By default , you will see that in Firefox there is a gap between the top border of the div container and the top border of the first paragraph. The situation is similar with the lower border of the container. However, in Internet Explorer we no longer see the gaps that we observed in Firefox.
So which browser is still right? In fact, it does not matter. What really matters is a completely different display of indents in different browsers, if we don’t use our own styles to define them.
This example is, of course, simplified. In practice, CSS Reset is used to reset those rules that may call into question the cross-browser compatibility of your styles.
Below, we will touch on the peculiarities of work with the reset of styles in practice, but for the beginning we will plunge into the history of the formation of this technique.
How it all began?
CSS Reset was first used back in 2004 (dinosaurs roamed the network) Andrew Krespanis . In his article, he advised using the universal selector ( * ) at the beginning of the CSS file to set all elements to zero indents (margin and padding).
*
{
margin: 0;
padding: 0;
}
The universal selector works as a regular expression, capturing each element in its path, indiscriminately and without mercy. Since we did not specify any other selectors before it, any indents are removed from all elements in the document (this is only in theory, in fact it happens a little differently ). With this we solve the problem of the first example and indicate to the browser who is the boss here. You can look at the result in the second example .
But now we don’t have any padding at all, including between separate paragraphs! What to do? Do not lie and do not be afraid: below our reset, we describe the rule we need. This can be done in different ways: specify the indent from below or above the paragraph, specify it in percent, pixels, or in em.
Most importantly, the browser now plays by our rules, and not we by it. I decided to do this:
* {margin: 0; padding: 0; }
p {margin: 5px 0 10px 0; }
As a result, we got what we can see in the third example .
Shortly thereafter, CSS guru Eric Meyer (Eric Meyer) conducts further research on the above method of resetting indents. In them it affects the work of Tantek Celik and his set of CSS-rules undohtml.css , in which not only indents were reset, but also the basic values ​​of other attributes were established: font styles, list styles.
After numerous alterations and refinements, we come to a wonderful solution called CSS Reset . In it, resetting values ​​is done more carefully: using the element names directly, and not the universal selector. It also sets default values ​​for “problematic” elements, for example, tables in which border-collapse is incorrectly processed by some browsers.
Of course, there are other similar solutions ( YUI Reset CSS from Yahoo!). You can create your own, which will satisfy the needs of your layout.
Applying CSS Reset
Let's look at some moments of using the reception in the real world.
1. Determine exactly how you will reset the styles.
Above, I pointed out two ways to reset styles: simple, based on the use of a universal selector (which I do not recommend to use) and complex, using styles from Eric.
In addition, you can use the development from Yahoo! (YUI CSS Reset), which you can collect directly from their server .
You can create your own reset styles if you are solving a specific task in your project. Despite this, there is no step-by-step guide for creating your own CSS Reset. Rely on your own principles and your own style.
To help you make the right choice, here are a couple of links:
2. Your CSS Reset is the first thing a browser should see.
Resetting styles after setting your own styles for elements is the wrong approach. In this case, nothing good should be expected from the browser display. Remember that you should always connect a CSS Reset first, and then all other styles.
Yes, I understand, it sounded ridiculous, but this is one of the major mistakes of developers, young and old. Many simply forget about it.
Some may ask a logical question: why is this happening? The answer is simple: the rules written below in the text of the CSS file (and even lower in their order of connection in the document) overwrite the rules declared earlier.
Let's not go far from the topic and continue. Let's apply Eric Meyer’s styles to our example, but after describing our properties, as shown in Example 4 . Mathematicians would say the following: “What was required to prove.”
3. Use a separate CSS document for CSS Reset
I must (no, I was not forced) to mention this advice. Using a separate file for CSS Reset is a common practice supported by a large number of developers.
In fact, I hold the position of creating one large CSS file due to the higher performance of this approach. But in this question, I tend to agree with the majority: CSS Reset should be placed in a separate file (usually called reset.css). In this case, you can use it in various projects without making any efforts to separate it from other CSS rules.
4. Try to avoid using the universal selector.
Although this concept works, its application is often not desirable due to incompatibility with some browsers (for example, this selector is incorrectly processed in Internet Explorer). You should use this technique only for simple, small, static and predictable pages (if you really had to do this).
This tip is especially important when you develop solutions such as topics for CMS. You cannot predict in advance how it will be used and how it will be modified. It is better to describe the fundamental CSS rules for all elements than to use for this the unpredictable (albeit smaller) mechanism of universal selectors.
5. Avoid excessive descriptions of properties when using CSS Reset
Another reason I don’t like a separate CSS Reset file is the potential redundancy of subsequent CSS property declarations. Repetition of your individual styles among the entire set of CSS files is a moveton and should be avoided. Of course, sometimes we are too lazy to painstakingly go over a set of styles and combine some of them, but you should at least try!
Let's go back to Eric's CSS Reset. It sets the default values ​​for the line-height, color and background of the body element as follows:
body
{
line-height: 1;
color: black;
background: white;
}
Suppose you already know how the body element will look like:
- background-color: #cccccc;
- color: # 996633;
- You want to repeat a certain background image horizontally.
In this case, there is no need to create a new selector to describe your properties - you can simply turn them on in the CSS Reset. Let's do it:
body {line-height: 1; color: # 996633; background: #ccc url (tiled-image.gif) repeat-x top left; } Do not be afraid to modify the CSS Reset itself. Adjust it for yourself, make it work for you. Modify, rebuild, remove and add as needed in your particular case.
Eric Meyer said the following about this: “This is not the case when everyone should use CSS Reset without changes.”
Additional materials
[WSG] Zeroing default padding / margin
Perhaps the first mention of resetting indents with the universal selector in the WSG mailing list.
Universal selector
Eric Meyers is studying the mechanism of the universal selector.
No CSS Reset
Jonathan Snook (Johnathan Snook) gives an alternative point of view on CSS Reset and explains why he avoids them. The opinion of one of the respected Web developers.
Tripoli - a CSS standard for HTML rendering
Tripoli is another popular CSS Reset, which is subdivided into several versions. You can choose the one that suits you.
Source: https://habr.com/ru/post/45296/
All Articles