Reset CSS(style reset) is zeroing with using CSS, some of the HTML element settings that browsers set by default. For example, such elements include paragraphs (tag), which initially have non-zero vertical margins (CSS), bulleted lists (tag), which already have not only margins, but also markers of a certain type (CSS), and so on.
Now let's think about what this CSS reset is for, what can it give us? Well, imagine that you have laid out the pages of your site and at the same time did not change the paragraph margins that the browsers suggested by default, since their size is fine for you. But tell me, please, why did you decide that all the browsers in the world that already exist and will still appear will create fields of the same size? Moreover, why do you think that the browsers in which you tested your layout will not change in their the following versions the size of these fields or will they not be removed at all? Feel what it smells like?
So, dumping CSS, layout designers simply hedge against such misunderstandings, that is, they first zero out all the "critical" values of the elements. CSS properties, and then, as necessary, add back, but with their own sizes. Thus, you can be sure that the site will look the same in all browsers. You can, of course, not reset the styles, but simply set desired parameters elements, but there is a risk that something will be missed somewhere and at some point everything will "float".
Based on the above, one of the features of resetting CSS is that after applying it, many HTML elements lose their familiar appearance. And if the loss of margins in paragraphs is something expected for beginners, then, for example, the fact that buttons created using tags or suddenly become outwardly similar to ordinary text is a complete surprise. But this should not confuse you, because for this, the styles are reset so that the layout designer does not forget to specify them again later.
There are many ways to reset styles, and which one you choose depends only on you, but I can tell you one thing - the best reset is the one that you created yourself, based on your experience and habits. If you do not have such experience yet, then you can use one of the options suggested below.
Always include CSS reset styles at the very beginning of the code, otherwise some of the parameters may not work due to style priorities that are set by browsers when processing HTML page and CSS code.
Resetting CSS using the universal selector
* (font-family: inherit; / * all elements inherit the typeface from their parent * / font-style: inherit; / * inherit the face * / font-weight: inherit; / * inherit the boldness * / vertical-align: baseline; / * vertical alignment to baseline * / font-size: 100%; / * font size 100% * / background: transparent; / * background of all elements is transparent * / border: 0; / * remove borders * / outline: 0; / * remove outlines * / margin: 0; / * remove margins * / padding: 0; / * remove margins * /)Description of the example
In this example, using universal selector the specified styles are reset immediately for all HTML elements that will be present on the page. As you can see, most of the properties are specified just for safety reasons, since their values already correspond to those that browsers should substitute by default according to the CSS specification. But as you already know, in practice all this is completely different, and if a property is indeed inherited by elements from its parents in all leading browsers, then the same external margins set by the CSS property are not always initially equal to zero.
But the sizes of frames (CSS) and outlines (CSS) are not equal to zero by default, but according to the specification. However, their thickness was also reset to zero, so that the layout designer would not forget to indicate it explicitly where it is required.
Reset CSS from Yahoo!
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td (margin: 0; padding: 0;) fieldset, img, abbr, acronym (border: 0;) address, caption, cite, code, dfn, em, strong, th, var (font-style: normal; font-weight: normal;) table (border-collapse: collapse; / * general borders for table cells * / border-spacing: 0; / * zeroing the spacing between cells * /) caption, th (text-align: left; / * aligning text to the left * / ) ol, ul (list-style: none; / * remove list markers * /) h1, h2, h3, h4, h5, h6 (font-size: 100%; font-weight: normal;) q: before, q : after (content: ""; / * remove quotes from the Q tag * /)Description of the example
Yahu's company at one time developed its own version of resetting styles. Here, the properties of specific elements are already changing, which allows you to achieve greater flexibility in managing them. appearance... For example, here the bullets are removed from the lists, and from the tag - the quotes using the CSS property. The advantages of this approach are obvious, but the disadvantages include more voluminous and sometimes redundant code. But no one bothers you to change any CSS reset to suit your needs. Let's say you can delete some of your unnecessary tag selectors or not just remove the quotes, but immediately set them the desired appearance.
Reset CSS by 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;) article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section (display: block; / * block elements (for older browsers) * /) body (line-height: 1; / * line spacing text on the page * /) ol, ul (list-style: none;) blockquote: before, blockquote: after, q: before, q: after (content: ""; / * Remove quotes from Q and BLOCKQUOTE * / content: none; / * add to be correct * /) blockquote, q (quotes: none; / * another way to remove quotes * /) table (border-collapse: collapse; border-spacing: 0;)Description of the example
Another way to reset CSS was suggested by Eric Meyer, a well-known web developer in certain circles. Here he has already added a reset of styles for tags from HTML 5, which, by the way, at the time of this writing, were themselves very poorly supported by modern browsers. But you always have to look in perspective, right?
In fact, this article could be continued indefinitely, since, I repeat once again, at a certain moment each layout designer comes up with his own reset option or does not use it at all, relying on his attentiveness.
Everything HTML elements pages by default have their own specific values. And, unfortunately, they are not interpreted in the same way by different browsers. As a result, the design of the site suffers, its design changes when changing the browser (Internet browser). The purpose of the style reset procedure is to reduce browser inconsistencies on things like line heights, margins, header font sizes, etc.
Examples of scripts to reset CSS styles
It is believed that every self-respecting webmaster should write their 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 from Eric Meyer, according to the author himself, is intentionally very general. For example, it does not have a default background color for the body element. Therefore, it must be modified, edited, expanded and otherwise customized to suit your needs. Add the colors you want for pages, links, and more.
/ * 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
Reset CSS YUI 3 mitigates the inconsistent styling of HTML elements across 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; )
Resetting normalize.css styles
Normalize.css is a custom CSS file that allows browsers to render all elements more consistently and in line with modern standards. Its authors explored the differences between the default styles of different browsers in order to correct only those styles that need normalization.
/ *! 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 nine-. * / 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 to be the simplest and most successful solution, why describe all HTML elements and assign values to them, when you can use the * selector, because its effect applies to all HTML.
* (margin: 0; padding: 0;)
Unfortunately, this is not a good practice. It is very difficult for the browser (takes a long time compared to other CSS reset procedures) to apply rules to every element in the document, especially on large web pages, and can also ruin many good default styles.
Reset styles and WordPress
If you want to use one of the above methods of resetting CSS styles for a WordPress site, there are two ways to do it.
The first is that you need to copy the reset code to the beginning of your style.css file. WordPress themes(after the lines about authorship and topic name, that is, after the text framed with a fraction and an asterisk / * ... * /.
Except for IE and Opera Mini families.
Since IE's lack of support can cause a problem, here are some of the ways to reset some CSS properties to their initial values:
Reset-this (animation: none; animation-delay: 0; animation-direction: normal; animation-duration: 0; animation-fill-mode: none; animation-iteration-count: 1; animation-name: none; animation- play-state: running; animation-timing-function: ease; backface-visibility: visible; background: 0; background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; background-position: 0 0; background-position-x: 0; background-position-y: 0; background-repeat: repeat; background-size: auto auto; border: 0; border- style: none; border-width: medium; border-color: inherit; border-bottom: 0; border-bottom-color: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-style: none; border-bottom-width: medium; border-collapse: separate; border-image: none; border-left: 0; border-left-color: inherit; border-left-style: none; border-left-width: medium; border-r adius: 0; border-right: 0; border-right-color: inherit; border-right-style: none; border-right-width: medium; border-spacing: 0; border-top: 0; border-top-color: inherit; border-top-left-radius: 0; border-top-right-radius: 0; border-top-style: none; border-top-width: medium; bottom: auto; box-shadow: none; box-sizing: content-box; caption-side: top; clear: none; clip: auto; color: inherit; columns: auto; column-count: auto; column-fill: balance; column-gap: normal; column-rule: medium none currentColor; column-rule-color: currentColor; column-rule-style: none; column-rule-width: none; column-span: 1; column-width: auto; content: normal; counter-increment: none; counter-reset: none; cursor: auto; direction: ltr; display: inline; empty-cells: show; float: none; font: normal; font-family: inherit; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; height: auto; hyphens: none; left: auto; letter-spacing: normal; line-height: normal; list-style: none; list-style-image: none; list-style-position: outside; list-style-type: disc; margin: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; max-height: none; max-width: none; min-height: 0; min-width: 0; opacity: 1; orphans: 0; outline: 0; outline-color: invert; outline-style: none; outline-width: medium; overflow: visible; overflow-x: visible; overflow-y: visible; padding: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; page-break-after: auto; page-break-before: auto; page-break-inside: auto; perspective: none; perspective-origin: 50% 50%; position: static; / * May need to alter quotes for different locales (e.g fr) * / quotes: "\ 201C" "\ 201D" "\ 2018" "\ 2019"; right: auto; tab-size: 8; table-layout: auto; text-align: inherit; text-align-last: auto; text-decoration: none; text-decoration-color: inherit; text-decoration-line: none; text-decoration-style: solid; text-indent: 0; text-shadow: none; text-transform: none; top: auto; transform: none; transform-style: flat; transition: none; transition-delay: 0s; transition-duration: 0s; transition-property: none; transition-timing-function: ease; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; widows: 0; width: auto; word-spacing: normal; z-index: auto; / * basic modern patch * / all: initial; all: unset; ) / * basic modern patch * / # reset-this-root (all: initial; * (all: unset;))
- Relevant github repo from December 2017 more compelling list
As mentioned in the comment by user @ user566245:
this is true in principle, but individual mileage may vary. For example, some elements like the default textarea have a border, applying this reset will reduce the textarea's borders.
Acquired to become the modern norm, user Joost
# reset-this-parent (all: initial; * (all: unset;))
EXAMPLE FROM W3
This can be useful for a root "widget" element included in a page that does not want to inherit the styles of an external page. Note, however, that any "default" style applied to this element (eg: display: block from UA stylesheet on block elements, for example) will also be removed.
Nobody thought of anything other than css for dumping css? Yes?
There is such an urgent utility:
getElementsByTagName ("*") will return all elements from the DOM. Then you can set styles for each item in the collection:
Var allElements = document.getElementsByTagName ("*"); for (var i = 0, len = allElements.length; i< len; i++) { var element = allElements[i]; // element.style.border = ... }
With all this it is said; I don't think resetting the css is anything doable unless we end up with just one web browser. If at the end "browser" is set to "default".
For comparison, here is a list of Firefox 40.0 values for
where font-style: oblique starts the DOM operation.Align-content: unset; align-items: unset; align-self: unset; animation: unset; appearance: unset; backface-visibility: unset; background-blend-mode: unset; background: unset; binding: unset; block-size: unset; border-block-end: unset; border-block-start: unset; border-collapse: unset; border-inline-end: unset; border-inline-start: unset; border-radius: unset; border-spacing: unset; border: unset; bottom: unset; box-align: unset; box-decoration-break: unset; box-direction: unset; box-flex: unset; box-ordinal-group: unset; box-orient: unset; box-pack: unset; box-shadow: unset; box-sizing: unset; caption-side: unset; clear: unset; clip-path: unset; clip-rule: unset; clip: unset; color-adjust: unset; color-interpolation-filters: unset; color-interpolation: unset; color: unset; column-fill: unset; column-gap: unset; column-rule: unset; columns: unset; content: unset; control-character-visibility: unset; counter-increment: unset; counter-reset: unset; cursor: unset; display: unset; dominant-baseline: unset; empty-cells: unset; fill-opacity: unset; fill-rule: unset; fill: unset; filter: unset; flex-flow: unset; flex: unset; float-edge: unset; float: unset; flood-color: unset; flood-opacity: unset; font-family: unset; font-feature-settings: unset; font-kerning: unset; font-language-override: unset; font-size-adjust: unset; font-size: unset; font-stretch: unset; font-style: oblique; font-synthesis: unset; font-variant: unset; font-weight: unset; font:; force-broken-image-icon: unset; height: unset; hyphens: unset; image-orientation: unset; image-region: unset; image-rendering: unset; ime-mode: unset; inline-size: unset; isolation: unset; justify-content: unset; justify-items: unset; justify-self: unset; left: unset; letter-spacing: unset; lighting-color: unset; line-height: unset; list-style: unset; margin-block-end: unset; margin-block-start: unset; margin-inline-end: unset; margin-inline-start: unset; margin: unset; marker-offset: unset; marker: unset; mask-type: unset; mask: unset; max-block-size: unset; max-height: unset; max-inline-size: unset; max-width: unset; min-block-size: unset; min-height: unset; min-inline-size: unset; min-width: unset; mix-blend-mode: unset; object-fit: unset; object-position: unset; offset-block-end: unset; offset-block-start: unset; offset-inline-end: unset; offset-inline-start: unset; opacity: unset; order: unset; orient: unset; outline-offset: unset; outline-radius: unset; outline: unset; overflow: unset; padding-block-end: unset; padding-block-start: unset; padding-inline-end: unset; padding-inline-start: unset; padding: unset; page-break-after: unset; page-break-before: unset; page-break-inside: unset; paint-order: unset; perspective-origin: unset; perspective: unset; pointer-events: unset; position: unset; quotes: unset; resize: unset; right: unset; ruby-align: unset; ruby-position: unset; scroll-behavior: unset; scroll-snap-coordinate: unset; scroll-snap-destination: unset; scroll-snap-points-x: unset; scroll-snap-points-y: unset; scroll-snap-type: unset; shape-rendering: unset; stack-sizing: unset; stop-color: unset; stop-opacity: unset; stroke-dasharray: unset; stroke-dashoffset: unset; stroke-linecap: unset; stroke-linejoin: unset; stroke-miterlimit: unset; stroke-opacity: unset; stroke-width: unset; stroke: unset; tab-size: unset; table-layout: unset; text-align-last: unset; text-align: unset; text-anchor: unset; text-combine-upright: unset; text-decoration: unset; text-emphasis-position: unset; text-emphasis: unset; text-indent: unset; text-orientation: unset; text-overflow: unset; text-rendering: unset; text-shadow: unset; text-size-adjust: unset; text-transform: unset; top: unset; transform-origin: unset; transform-style: unset; transform: unset; transition: unset; user-focus: unset; user-input: unset; user-modify: unset; user-select: unset; vector-effect: unset; vertical-align: unset; visibility: unset; white-space: unset; width: unset; will-change: unset; window-dragging: unset; word-break: unset; word-spacing: unset; word-wrap: unset; writing-mode: unset; z-index: unset;
Many layout designers use the so-called CSS Reset, serving to eliminate the peculiarities of different browsers. Actually, this file stylesheet resets all CSS properties to default... In this article, I will demonstrate the code of this file and tell you, is it worth using CSS Reset or not.
I have seen many different CSS Reset, they are all about the same. You can use this one:
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 (
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
body (
line-height: 1;
}
ol, ul (
list-style: none;
}
blockquote, q (
quotes: none;
}
blockquote: before, blockquote: after,
q: before, q: after (
content: "";
content: none;
}
: focus (
outline: 0;
}
table (
border-collapse: collapse;
border-spacing: 0;
}I think the reason for its use is understandable, but why, for example, I do not use it, like many other layout designers, it is worth telling about it. First is extra file, Secondly, extra time to handle, but most importantly, I like the default properties. For example, the same fields are in the table. After all, all the properties were done by default for a reason, but as the most the best option displaying various items. I assure you by resetting padding for table cells, most likely you will return it in the main file. And it is far from a fact that the value will differ from what was the default. So it turns out that we first remove it, and then return it. And along with the first drawbacks (extra file and extra code), many layout designers do not use CSS Reset.
Anyway, using a style reset is not a bad thing, so you can safely use it if you think that simplifying site adaptation for different browsers will really simplify your layout as a whole.
- Translation
This article is the first in a series on the topic of taming CSS. Today we will look at the technology CSS Reset.
Why is this needed?
Each browser sets its own default style values for different HTML elements. With the help of CSS Reset, we can neutralize this difference to ensure cross-browser style styles.For example, you use the element a in your document. Most browsers like Internet Explorer and Firefox add link blue color and underline... However, imagine that after five years someone decided to create new browser(let's call it UltraBrowser). Browser developers did not like the blue color and were annoyed by the underline, so they decided to highlight links in red and bold... It is on this basis that if you set the base style value for the element a then it is guaranteed to be the way you want it to be, not the way 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. You can do it different ways: Specify an indent at the bottom or top of a paragraph, specify it in percentages, pixels or em.
Most importantly, the browser now plays by our rules, not us by his. I decided to do it in a similar way:
* (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 step by step guide on 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 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, you should not expect anything good from the display by the browser. Remember that you should always include CSS Reset first, and then all other styles.Yes, I understand 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: the rules written below 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 stray too far from the topic and continue. Let's apply Eric Meyer's styles to our example, but after descriptions of our properties, as shown in 4 example. Mathematicians would say the following: "Which 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 a large number of developers.In fact, I take the position of creating one large CSS file due to the greater performance of this approach. But in this issue I tend to agree with the majority: CSS Reset should be moved to separate file(usually called reset.css). If so, 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, its use is often not desirable due to incompatibility with some browsers (for example, this selector is not handled correctly in Internet Explorer). You should only use this technique for simple, small, static and predictable pages (if you have to).This advice is especially important when you develop solutions such as themes for CMS. You cannot predict in advance how it will be used or how it will be modified. It is better to describe 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 file for CSS Reset is the potential redundancy of subsequent CSS property declarations. Duplicating your individual styles across a 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 at least we should try!Back to Eric's CSS Reset. It sets default values for the 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 how the element will look like. body:
- background-color: #cccccc;
- color: # 996633;
- You want to repeat a specific 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;)
Feel free to modify the CSS Reset itself. Customize it for yourself, make it work for you. Modify, rebuild, remove and add as needed in your specific case.Eric Meyer said the following about this: "This is not the case when everyone should use CSS Reset without changes."
