我知道什么是CSS重置,但最近我听说了一个叫Normalize.css的新东西

CSS和Reset CSS的区别是什么?

规范化CSS和重置CSS之间的区别是什么?

这只是CSS重置的一个新流行语吗?


当前回答

css:每个浏览器都有一些默认的css样式,例如,在段落或标题周围添加填充。如果你添加了normalize样式表,所有这些浏览器默认规则将被重置,因此对于这个实例标签上的0px填充。这里有更多详细信息的链接:https://necolas.github.io/normalize.css/ http://nicolasgallagher.com/about-normalize-css/

其他回答

我的工作是标准化。css。

主要的区别是:

Normalize.css preserves useful defaults rather than "unstyling" everything. For example, elements like sup or sub "just work" after including normalize.css (and are actually made more robust) whereas they are visually indistinguishable from normal text after including reset.css. So, normalize.css does not impose a visual starting point (homogeny) upon you. This may not be to everyone's taste. The best thing to do is experiment with both and see which gels with your preferences. Normalize.css corrects some common bugs that are out of scope for reset.css. It has a wider scope than reset.css, and also provides bug fixes for common problems like: display settings for HTML5 elements, the lack of font inheritance by form elements, correcting font-size rendering for pre, SVG overflow in IE9, and the button styling bug in iOS. Normalize.css doesn't clutter your dev tools. A common irritation when using reset.css is the large inheritance chain that is displayed in browser CSS debugging tools. This is not such an issue with normalize.css because of the targeted stylings. Normalize.css is more modular. The project is broken down into relatively independent sections, making it easy for you to potentially remove sections (like the form normalizations) if you know they will never be needed by your website. Normalize.css has better documentation. The normalize.css code is documented inline as well as more comprehensively in the GitHub Wiki. This means you can find out what each line of code is doing, why it was included, what the differences are between browsers, and more easily run your own tests. The project aims to help educate people on how browsers render elements by default, and make it easier for them to be involved in submitting improvements.

我在一篇关于normalization .css的文章中对此进行了更详细的描述

从它的描述来看,它似乎试图让用户代理的默认样式在所有浏览器中保持一致,而不是像重置那样去掉所有的默认样式。

保留有用的默认值,不像许多CSS重置。

重设似乎是满足定制设计规范的必要条件,特别是在复杂的非样板型设计项目中。听起来似乎规范化是一种纯web编程的好方法,但通常情况下,网站是web编程和UI/UX设计规则的结合。

这个问题已经回答过几次了,我将对每个问题进行简短的总结,并给出截至2019年9月的例子和见解:

css——顾名思义,它规范化了浏览器中用户代理的样式,也就是说,由于默认情况下它们略有不同,所以它们在所有浏览器中都是相同的。

示例:<h1>标签内<section>默认谷歌Chrome将使<h1>标签的“预期”大小更小。另一方面,Microsoft Edge正在使<h1>标签的“期望”大小。css将使其一致。

当前状态:npm存储库显示normalize.css包目前每周有超过50万的下载量。GitHub中项目库的星星超过36k。

重置CSS -顾名思义,它重置所有的样式,即它删除所有浏览器的用户代理样式。

示例:它会像下面这样做:

html, body, div, span, ..., audio, video {  
   margin: 0;  
   padding: 0;  
   border: 0;  
   font-size: 100%;  
   font: inherit;  
   vertical-align: baseline; 
}

目前的状况:它远不如Normalize.css流行,reset-css包显示它每周大约有26k的下载量。GitHub的星星只有200,从项目的存储库可以看出。

Normalize.css

CSS是一个小的CSS文件,它在HTML元素的默认样式中提供跨浏览器的一致性。

这意味着,如果我们查看浏览器应用的样式的W3C标准,并且在其中一个浏览器中存在不一致,则normalize.css样式将修复存在差异的浏览器样式。

但在某些情况下,我们无法按照标准修复有问题的浏览器,通常是因为IE或EDGE。在这些情况下,Normalize中的修复程序将把IE或EDGE样式应用于其他浏览器。

现实生活中的例子

Chrome, Safari和Firefox在<article>/ <aside>/ <nav>/ <section>标签中呈现<h1>标签,其字体大小小于独立标签,并具有不同的边距大小。这些是Chrome, Safari和Firefox中<h1>标签在<article>/ <aside>/ <nav>/ <section>的情况下的用户代理样式

Tag

:-webkit-any(article,aside,nav,section) h1 {
  font-size: 1.5em;
   margin-block-start: 0.83em;
   margin-block-end: 0.83em;
   }

例子:

/* 
 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;}

CSS重置

Reset CSS采用了一种不同的方法,它说我们根本不需要浏览器的默认样式。无论我们需要什么样式,我们将根据我们的需要在项目中定义。所以“CSS重置”重置浏览器的用户代理提供的所有样式。

这种方法在上面的例子中工作得很好,对于那些<h1>到<h6>的默认样式:大多数情况下,我们既不想使用浏览器的默认字体大小,也不想使用浏览器的默认边距。

下面是CSS重置的一小部分示例

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; 
}

在CSS重置的方式中,我们定义所有的HTML标签没有填充,没有边距,没有边框,相同的字体大小和相同的对齐方式。

CSS重置的问题是它们很丑:它们有一个大的选择器链,并且它们做了很多不必要的重写。更糟糕的是,在调试时它们是不可读的。

但仍然有一些样式我们更喜欢重置,如<h1>到<h6>, <ul>,<li>等。