Normal reset
Tell about resets and normalize what is better to use?
You know, it's like a screwdriver and a hammer - which is better? All is good.
HTML is good for throwing up tags and that's it - they look right away. And in all browsers, everything is approximately the same: black Time and white <body> , and with blue links. Oh, beauty! But the fact of the matter is that almost: the exact styles for all elements, though recommended today in HTML5 , are different in each browser.
In HTML 4, there were only 78 default style lines, like head { display: none } or text-decoration: underline for links. In WebKit, Chrome and Firefox today there are about 1000 lines of styles in which you can safely equip an archaeological expedition. But we will not, we have enough cases.
For a long time, developers didn’t interfere with this approximate correspondence of styles, besides browsers tried to improve and unify them from time to time. The problem was different: all these indents, frames, underscores are always not in design, and you have to undo them again and again for each element. But then someone came up with an eraser, the first style reset.
* { margin: 0; padding: 0; border: 0; joffrey: kill; cersei: kill; frey: kill; } The asterisk selects all the elements, and then begins: margin: 0 , padding: 0 , border: 0 , , , and all other properties that prevent you from living. The method is rather barbaric: not only because it chooses elements that do not need to drop anything, but also because it is better not to touch some styles, otherwise everything will fall apart - for example, form elements.
/* ORLY? */ div, span { margin: 0; padding: 0; border: 0; } The next attempt to make HTML a sterile set of cubes was the CSS Reset from Yahoo UI , which only reset styles where it was needed. Reset CSS by Eric Meyer , based on the Yahoo UI, was even more popular. These resets not only reset the indents, but also led to a single value of the size and font family, alignment for text and other properties.
/* YUI Reset */ html { color: #000; background: #FFF; } select { *font-size:100%; } There were differences between the resets of Yahoo and Meyer: Eric, for example, did not reasonably touch the form elements. There were many other solutions, but they all solved a single task - to make a simple constructor from complex styles by default, so that you could immediately write your styles without discarding the built-in ones.
These resets were never pure drops of browser styles: no, no, yes, colors were assigned, alignment, the struggle for cross-browser compatibility began. As a result, all projects carried the stamp of preferences of specific authors. The most neutral of the resets still remains Meyer's CSS reset, but even he removed the harmful one :focus { outline: 0 } - and did the right thing.
/* */ :focus { outline: 0; } /* */ Many resets were annoying: for internal blocks with content, we had to restore styles not only for lists, but also for basic text elements like <strong> , <em> , `` `and others. Yahoo even had CSS Base, which assigned the correct base styles. After the reset, which canceled the wrong. Why not.
Nicholas Gallagher and Jonathan Neal came from the other side: instead of resetting about the same browser defaults, they studied all the differences and problems in detail - and did Normalize.css . He does the same thing everywhere and solves many problems along the way.
With Normalize, you again have to remove indents from lists. This provokes many people to use elements simpler, but be careful - this is fraught with divatism. But Normalize takes on the complexity of the design of form elements, the behavior of mobile browsers and many minor bugs.
Do you see? A completely different problem is solved by the project. I recently saw a site where after Normalize.css they connect Reset CSS to leave normalization, but still get a neutral constructor. This is of course nonsense, which lead to the swelling of global styles. It is better to collect your hybrid - the code there is nothing at all.
@import "normalize.css"; @import "reset.css"; @import "yui-reset.css"; @import "yui-base.css"; @import "h5bp.css"; The benefit of Normalize.css is meticulously documented: each property has an explanation for why it is needed. In doubtful places that do not normalize, but prescribe more appropriate (in the opinion of the authors) defaults — they are marked. It helps not only to blindly copy it from a project to a project, but to use only the necessary parts.
Imagine that you are making a module in a project that will then be used on another site. Do you have a Normalize, and they? Or vice versa: a third-party module comes to your project - and there is no Normalize and everything is tailored to browser bugs, or features. Or even have a Normalize, but a different version. So-so modularity turns out.
But if you immediately went to Normalize and copied the necessary pieces for each difficult situation - the module would come out good, independent. Normalize is also the most complete encyclopedia of cross-browser difficulties Yes, it provokes easy duplication, but gives flexibility - while compressing repetitive fragments is bread and butter for gzip.
Reset CSS has not been updated since 2011, although it still works fine. But his era has already passed - a new property, all with the value of unset, is in a hurry to change. It resets browser defaults where it is needed - read on MDN. Normalize.css is now in fashion and solves cross-browser compatibility problems well , but try using it as a reference. So, Reset or Normalize? Dance from the task.
/* Welcome to the */ .future { all: initial; all: inherit; all: unset; } Video version
Questions can be asked here .
')
Source: https://habr.com/ru/post/342052/
All Articles