This article is the first in a series on CSS taming. Today we will look at the technology CSS Reset.
Why is this needed?
Each browser sets its own default style values for various HTML elements. FROM using CSS Reset we can level this difference to ensure cross-browser styles.For example, you are using the element a in your document. Most browsers like Internet Explorer and Firefox, add a link Blue colour and underlining. However, imagine that five years later someone decided to create new browser(let's call it UltraBrowser). The developers of the browser did not like the blue color and the underlining was annoying, so they decided to highlight links in red and bold. Precisely based on this, if you set the base style value for an element a, then it is guaranteed to be the way you want it to be, and not how the UltraBrowser developers prefer to display it.
But now we don’t have any indents at all, including between individual paragraphs! What to do? Do not lie and do not be afraid: below our reset, we will describe the rule we need. It can be done different ways: specify the indent below or above the paragraph, specify it in percentage, pixels or em.
Most importantly, the browser is now playing by our rules, not us by his. I decided to do it like this:
* ( margin: 0; padding: 0; ) p ( margin: 5px 0 10px 0; )
As a result, we got what can be seen in the third example.
You can create your own reset styles if you are solving a specific problem in your project. Despite this, there is no walkthrough to create your own CSS Reset. Rely on your own principles and your own style.
To help you make the right choice, here are a couple more links:
- Less is more - my choice of Reset CSS (Ed Elliot).
2. Your CSS Reset is the first thing the browser should see
Resetting styles after setting your own styles for elements is not the right approach. In this case, nothing good should be expected from the display by the browser. Remember that you should always include CSS Reset first, and then all other styles.Yes, I understand that it sounded ridiculous, but this is one of the main mistakes of developers, young and old. Many people simply forget about it.
Some may ask a logical question: why is this happening? The answer is simple: rules written down in the CSS file (and even down in their order in the document) overwrite the rules declared earlier.
Let's not deviate too much from the topic and continue. Let's apply Eric Meyer's styles to our example, but after descriptions of our properties, as shown in example 4. Mathematicians would say the following: "That is what was required to be proved."
3. Use a separate CSS document for CSS Reset
I must (no, I was by no means forced) to mention this advice. Using a separate file for CSS Reset is a common practice supported by big number developers.In fact, I take the position of creating one big CSS file due to the higher performance of this approach. But on this issue, I tend to agree with the majority: CSS Reset should be moved to a separate file (usually called reset.css). In this case, you can use it in different projects without making any effort to separate it from other CSS rules.
4. Try to avoid using the universal selector
Although this concept works, it is often not desirable due to incompatibilities with some browsers (for example, this selector is handled incorrectly in Internet Explorer). You should only use this technique for simple, small, static, and predictable pages (if you have to).This tip is especially important when you are developing solutions such as CMS themes. 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 the unpredictable (albeit smaller) mechanism of universal selectors for this.
5. Avoid Redundant Property Descriptions 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 bad manners and should be avoided. Of course, sometimes we are too lazy to painstakingly go through a set of styles and combine some of them, but we should at least try!Let's get back to Eric's CSS Reset. It sets default values for line-height, color and background of an element body in the following way:
body ( line-height: 1; color: black; background: white; )
Let's say you already know what the element will look like. body:
- background-color: #cccccc;
- color: #996633;
- You want to repeat a particular background image horizontally.
In this case, there is no need to create a new selector to describe your properties - you can simply include them in the CSS Reset. Let's do it:
body ( line-height: 1; color: #996633; background:#ccc url(tiled-image.gif) repeat-x top left; )
Don't be afraid to modify the CSS Reset itself. Customize it for you, 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 a case where everyone should use CSS Reset without changes."
All HTML page elements by default have their own defined values. And, unfortunately, they are not treated equally by different browsers. As a result, the design of the site suffers, its design changes when you change the browser (Internet browser). The purpose of the style reset procedure is to reduce browser inconsistencies in things like line heights, margins, heading font sizes, etc.
CSS Reset Script Examples
There is an opinion that every self-respecting webmaster should write his own CSS reset code. But I am a supporter of a different approach, take a ready-made solution, understand it and correct it if necessary.
Eric Meyer CSS Reset
The reset script by Eric Meyer, according to the author himself, is intentionally very general. For example, it does not set any default background color for the body element. Therefore, it should be modified, edited, expanded, and otherwise customized to suit your needs. Add the colors you want for pages, links, and so on.
/* http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126 License: none (public domain) */ 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video ( margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline ; ) /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- collapse:c ollapse; border-spacing: 0; )
Yahoo! (YUI 3) Reset CSS
YUI 3 CSS Style Reset mitigates conflicting styling of HTML elements by browsers just like any other CSS reset script to create a solid foundation for building websites and web applications.
/* YUI 3.18.1 Copyright 2014 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */ /* TODO will need to remove settings on HTML since we can"t namespace it. TODO with the prefix, should I group by selector or property for weight savings? */ html( color:#000; background:#FFF; ) /* TODO remove settings on BODY since we can"t namespace it. */ /* TODO test putting a class on HEAD. - Fails on FF. */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td ( margin:0; padding:0; ) table ( border-collapse:collapse; border-spacing:0; ) fieldset, img ( border:0; ) /* TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit ... */ address, caption, cite, code, dfn, em, strong, th, var ( font-style:normal; font-weight:normal; ) ol, ul ( list-style:none; ) caption, th ( text-align:left; ) h1, h2, h3, h4, h5, h6 ( font-size:100%; font-weight:normal; ) q:before, q:after ( content:""; ) abbr, acronym ( border:0; font-variant:normal; ) /* to preserve line-height and selector appearance */ sup ( vertical-align:text-top; ) sub ( vertical-align:text-bottom; ) input, textarea , select ( font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%; /*to enable resizing for IE*/ ) /*because legend doesn't inherit in IE * / legend ( color:#000; ) /* YUI CSS Detect ion Stamp */ #yui3-css-stamp.cssreset ( display: none; )
Reset normalize.css styles
Normalize.css is a custom CSS file that allows browsers to render all elements more consistently and according to modern standards. Its authors explored the differences between styles different browsers by default to adjust only those styles that need to be normalized.
/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document =================================== ===================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in * IE on Windows phone and in iOS. */ html ( line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ ) /* Sections ============================================= =========================== */ /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section ( display: block; ) /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and safari. */ h1 ( font-size: 2em; margin: 0.67em 0; ) /* Grouping content ============================ ===========================================*/ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main ( /* 1 */ display: block; ) /** * Add the correct margin in IE 8. */ figure ( margin: 1em 40px; ) /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr ( box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ ) /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /* Text-level semantics =============== ================================================= ========= */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a ( background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ ) /** * 1. Remove the bottom border in Chrome 57- and Firefox 39- . * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr ( border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ ) /** * Prevent the duplicate application of `bolder ` by the next rule in Safari 6. */ b, strong ( font-weight: inherit; ) /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong ( font-weight: bolder; ) /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /** * Add the correct font style in Android 4.3-. */ dfn ( font-style: italic; ) /** * Add the correct background and color in IE 9-. */ mark ( background-color: #ff0; color: #000; ) /** * Add the correct font size in all browsers. */ small ( font-size: 80%; ) /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup ( font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; ) sub ( bottom: -0.25em; ) sup ( top: -0.5em; ) /* Embedded content ============================================== ========================== */ /** * Add the correct display in IE 9-. */ audio, video ( display: inline-block; ) /** * Add the correct display in iOS 4-7. */ audio:not() ( display: none; height: 0; ) /** * Remove the border on images inside links in IE 10-. */ img ( border-style: none; ) /** * Hide the overflow in IE. */ svg:not(:root) ( overflow: hidden; ) /* Forms =============================== ========================================== */ /** * Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea ( margin: 0; ) /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input ( /* 1 */ overflow: visible; ) /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select ( /* 1 */ text-transform: none; ) /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html , /* 1 */ , ( -webkit-appearance: button; /* 2 */ ) /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner ( border-style: none; padding: 0; ) /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, :-moz-focusring, :-moz-focusring, :-moz-focusring ( outline: 1px dotted ButtonText; ) /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend ( box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0 ; /* 3 */ white-space: normal; /* 1 */ ) /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress ( display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ ) /** * Remove the default vertical scrollbar in IE. */ textarea ( overflow: auto; ) /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ , ( box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ ) /** * Correct the cursor style of increment and decrement buttons in Chrome. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button ( height: auto; ) /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ ( -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ ) /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ ::-webkit-search-cancel-button, ::-webkit-search-decoration ( -webkit-appearance: none; ) /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button ( -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ ) /* Interactive ============ ================================================= ============ */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, /* 1 */ menu ( display: block; ) /* * Add the correct display in all browsers. */ summary ( display: list-item; ) /* Scripting =================================== ===================================== */ /** * Add the correct display in IE 9-. */ canvas ( display: inline-block; ) /** * Add the correct display in IE. */ template ( display: none; ) /* Hidden ==================================== ==================================== */ /** * Add the correct display in IE 10- . */ ( display: none; )
Reset via universal selector * (asterisk)
At first glance, this may seem like the simplest and most successful solution, why describe all HTML elements and assign values to them, when you can use the * selector, because it applies to all HTML.
* ( margin: 0; padding: 0; )
But unfortunately this is not a good practice. It is very hard (and time consuming compared to other CSS resets) for the browser to apply rules to every element in a document, especially on large web pages, and can also break many good default styles.
Reset Styles and WordPress
If you want to use one of the above methods reset CSS styles for a WordPress site, then this can be done in two ways.
The first is that you need to copy the reset code to the top of your WordPress theme's style.css file (after the theme's authorship and title lines, that is, after the text framed by a fraction and an asterisk /* ... */.
@import "reset.css";
If there is an @import directive in CSS, then it should be at the very beginning of the table (before all the rules). Otherwise, the browser may ignore it.
On the other hand, in order to improve performance, CSS tables styles, as a rule, on the contrary, are combined into one file. Therefore, using @import without a real need is not worth it.
As you can see, resetting styles in WordPress is nothing special.
Thanks
The following sources were used in writing this article.
By default, the browser sets its own settings for some properties in css. But the trouble here is that there are a lot of web browsers and everyone can set their own rules. What solution? Learn how to reset css settings to default and overwrite them with your own. But this article will be devoted to how this can be done.
CSS Reset or Reset Defaults
CSS Reset is a set of styles that reset some parameters, installed by the browser default. Each web developer writes this file for himself individually, and someone takes a ready-made solution. This is where I propose to start. There are many good style reset options, but my favorite is this one by Eric Meyer:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video (
margin: 0;
padding: 0;
border: 0;
font-size: 100%
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section (
display:block;
}
body (
line-height: 1;
}
ol, ul (
list-style: none;
}
blockquote, q (
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after (
content: "";
content: none;
}
table(
border-collapse: collapse;
border-spacing: 0;
}
I will comment the code a bit. Firstly, it resets the inner and outer margins for all the necessary elements. Secondly, there is support for HTML5 elements. They have a rule that will allow them to display correctly in some versions of browsers. Thirdly, the typical settings for convenient operation with tables (removed indents between cells and double borders). Also, the standard markers for lists and quotes for quotes have been dropped. These parts of the code should be removed if you want to use the default styling.
How to reset css settings yourself
With a more or less normal possession of css, you can try to write a couple of rules yourself. For example:
*{
margin: 0;
padding: 0;
}
This is perhaps the most simple command. The asterisk in this case represents all selectors, so the styles will be applied to all elements on the web page, resetting their margins and padding. You will be surprised, but these simple lines of code may be enough to provide cross-browser compatibility in many web browsers. All other rules can be added at will. I also recommend adding display: block to all HTML5 tags.
Where to place css reset rules
Here above I offered you the code, but where to insert it? There are two options here:
- Paste it at the very beginning of the main style sheet on your site
- Create a new css file on the server and save the code to it, then save and connect to all pages BEFORE the main style.css table.
For more information on connecting css stylesheet to html see
In my opinion, the second option is worse because it worsens performance by adding one extra file to the download. On the other hand, it will be easier for you to manage these rules. But for the sake of performance, I recommend using the first option.
Resetting the settings is one of the measures to ensure cross-browser compatibility of the site, that is, the same display in different web browsers. Of course, these are not all measures that will ensure the same appearance, I will write about the rest in the future on this blog. Subscribe if interested.
From the author: Website building on the Web can be like building on quicksand. Browsers do the same thing, but every now and then they get annoyingly unpredictable differences. For example, all browsers have "style sheets user agent' is a set of default CSS styles to make the heading look like a heading, etc., even before you assign styles to page1. Of course, each browser engine uses slightly different default sets.
One example was default list styles, where Internet Explorer and Opera's default browser style sheets originally had list indent margin-left: 30pt;, while Firefox and KHTML came with padding-left: 40px;. If you wanted to change the default padding by defining ul (padding-left: 0;), then this led to very different results in browsers.
RESET CSS SETTINGS
To achieve a little stability, some developers reset all margins and padding with a universal selector:
* (margin: 0; padding: 0;)
* ( margin : 0 ; padding : 0 ; ) |
By indenting the list and starting your stylesheet from there, you'll get what you expect. However, using * meant that the default margin and padding "crashed" for all elements, and as soon as you added the form element, it got really hard.
The purpose of a reset is to reset everything you can… [and] serve as a starting point for your own basic styles.- Eric Meyer
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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video ( margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; )
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 , 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 , article , aside , canvas , details , embed , figure , figcaption , footer , header , hgroup , menu , nav , output , ruby , section , summary , time , mark , audio , video ( margin : 0 padding: 0 border: 0 font-size: 100%; font : inherit ; vertical - align : baseline ; |
It resets some properties of many (but not all) elements to their plain text equivalent. Since only matching elements are reset, this circumvents some problems * (margin: 0; padding: 0;). We can then style those dropped "unstyled" properties, safe in the knowledge that we're building on a stable cross-browser foundation. This style assignment also acts as a signal for the need to consciously set appropriate styles for these elements.
CSS RESET ISSUES
CSS resets have been a real lifesaver, but now, especially with the rise of wireframes, they are often used "as is". For example, Eric assumed that other developers would start building sites on the reset styles he suggested, overriding them accordingly, and the first version of Meyer Reset temporarily included this rule:
/* remember to define focus styles! */ :focus ( outline: 0; )
Unfortunately, not everyone actually defined focus styles, and Eric removed it from the second version.
Applying resets, you feel a little perverted. Resetting browser default styles forces you to think about how each element should be displayed, helping to ensure that elements are applied for semantically rather than default styles. But elements like i and em almost always have a default browser style. Other default browser styles, such as the once-ridiculously large heading text size, have changed and become fairly tolerable by default. The problems start when someone wants to apply a reset HTML element after submission with only "unstyled" reset styles assigned.
For me, the biggest problem with resets is inheritance, which leads to spam in browser tools. When trying to track down a deeply nested element's CSS problem in someone else's code, this won't help:
CSS Reset Rules Repeated Due to Inheritance
NORMALIZE.CSS
Nicholas Gallagher and Jonathan Neal took a different approach with Normalize.css , "a small CSS file that guarantees better cross-browser consistency in the default styles of HTML elements." As with CSS resets, it gives us a solid cross-browser starting point - the primary reason for resetting in the first place - but the two approaches differ philosophically.
CSS resets override user agent styles and return a lot of elements to their "unstyled" state, some level ground on which to build safely. However, we then need to style most of the elements before we can build with them. Instead, Normalize.css only addresses user agent style inconsistencies by choosing the most appropriate default settings, which is the difference. Here we also get a secure cross-browser foundation, but one that includes normalized user agent styles as ready-to-use base building materials. It's basically something like an idealized cross-browser version of the default CSS 2.1 stylesheet. In both cases, we then have to add our own overriding styles to create the image, but because the default browser settings remain in Normalize.css, there is generally less styling to add.
Since the changes in Normalize.css are more targeted, there is no cascade of inheritance of the rewritten rules in your browser-based authoring tools. Here is a simple ul: unstyled with Meyer Reset and Normalize.css versions 1 and 2:
"Unstyled" element of an unordered list
Apply Meyer Reset
Apply Normalize.css v1
Applying Normalize.css v2
There is a clear difference in philosophy where the Meyer Reset example appears as a couple of lines of plain text with no margins, padding, or bullets, while the Normalize.css examples are similar to the default styles. The difference in styling applied to this ul is also easily noticeable.
However, these are not all styles applied to ul. For comparison, here is the same “unstyled” screenshot, but with visible user agent styles, in Firefox 21 and Opera Next 15.