normalize.css_使用Normalize.css进行均匀开发

浏览器兼容性是网络可访问性的重要组成部分。 开发人员需要考虑其受众和需要支持的浏览器版本差异 。 尽管CSS重置是一个选项,但是大多数开发人员更喜欢Normalize.css,因为它在所有现代Web浏览器中都具有简单性和交叉兼容性。

在这篇文章中,我将介绍Normalize的基础知识以及它与一般CSS重置的比较方式 。 这不是一个复杂的库,理解时间不应该超过几个小时。 但是规范化的关键是学习如何正确,明智地实施它。

浏览器重置与规范化

多年来,我一直使用Eric MeyerCSS resets的自定义版本。 这些对于我的大多数项目来说已经足够了,并且没有引起任何重大问题。 但是Normalize改变了我对重置的看法,因为它的工作方式不同于CSS重置。 了解差异很重要。

可以将Normalize视为始终适用于所有浏览器服装 ,并且可以将CSS重置视为所有浏览器的热核爆炸

标准化样式和格式的标题,段落,块引用和公共元素,以便它们在所有受支持的浏览器中看起来相同(或足够接近) 。 CSS重置会完全清除所有内容,因此没有默认值

重置CSS后,您的标题便与您的段落相同; 元素没有任何填充,边距或间隔。 使用CSS重置后, 您必须提供新代码以增强样式。 使用Normalize,您可以获得可以建立的预先设计的样式

那么,其中一个比另一个更好吗? 尽管有一个论点指出“规范化” 在兼容方面更有效,并且产生的文件较小 ,但这是一个热门话题。

“我不得不争论归一化比重置好。 这将导致更少CSS跨线被转移,更好地利用UA默认值,并更好地了解内容是如何打算的显示“。

无论您是爱上Normalize还是喜欢典型的重置,重要的是至少要了解双方并选择最合适的选择。 很少有开发人员从头开始编写代码,因此现代前端开发几乎需要Normalize或CSS重置。

如果您想尝试CSS重置,这里有一些流行的选择:

规范化配置

规范化创建者Nicolas Gallagher在介绍性帖子中写道:

“ Normalize.css是一个小CSS文件,可以在HTML元素的默认样式中提供更好的跨浏览器一致性。 这是一种现代的,支持HTML5的版本,可以替代传统CSS重置。”

多年来,它已发展成为全球开发人员使用的受信任库。 在BootstrapPure CSS中甚至使用了Normalize。

有两种在项目中使用Normalize的方法:编辑源代码以自定义自己的Normalize样式表,或将其用作基础并在顶部添加样式。

前者是一种选择策略,您可以遍历Normalize.css文件,并删除制作自己的自定义样式表所需的所有内容。 最好在每个项目的基础上保持较低的文件大小。

另外,一些开发人员包括整个Normalize.css文件,并在此文件之上构建自己的样式表。 完整的Normalize样式表跨越420多行代码,相当于约6.8KB未压缩。

两种方法都不比另一种更好,并且值得遵循对每个项目或您喜欢的工作流程最有效的方法。

首先,可以从GitHub下载Normalize副本或从外部CDN托管它。 您还可以像这样从NPM直接获取最新版本的Normalize:

npm install --save normalize.css

如果您不想下载任何文件,您甚至可以创建一个新的CodePen项目 ,该项目可以在单击按钮时附加Normalize。

codepen屏幕截图标准化

由于Normalize是模块化的,因此您可以临时删除部分,甚至可以自己创建自定义的Normalize。 然后,您可以从选定的部分(如HTML5显示元素)开始每个项目,同时删除嵌入内容的样式。

每个规范化规则都有一个相应CSS注释,说明其作用以及解决的问题/错误。 很明显,例如在较新HTML5元素上设置display:block

其他这样的SVG代码不太明显,它隐藏了Internet Explorer中的溢出:

svg:not(:root) { 
  overflow: hidden; 
}

我强烈建议浏览样式表,以准确了解其工作方式,并了解Normalize是否适合您的项目。

网页设计中的Normalize.css

最新版本的Normalize v4.0提供了广泛的浏览器支持。

  • Chrome(最后两个)
  • 边缘(后两个)
  • Firefox(最后两个)
  • Firefox ESR
  • Internet Explorer 8+
  • 歌剧(最后两个)
  • Safari 6+

据我所知,Normalize可能支持具有不断更新的旧版浏览器,例如Firefox。 但是“官方”支持仅包括Chrome / Edge / FF / Opera的两个最新版本。

Normalize v1也支持IE6 +和Safari 4+,但是该版本不再更新。

使用Google Analytics(分析)之类的工具检查浏览器版本至关重要。 这将使您更好地了解Normalize是否可以用作现代Web设计工作的有用工具。

更多资源

关于标准化的知识并没有很多,因此大多数学习都是通过实践来进行的。

实际上,没有太多的解释说明您无法通读样式表并根据需要复制/更改代码。 但是,如果您要查找其他相关信息,请在下面添加一些链接。

相关文章
介绍影片

翻译自: https://www.hongkiat.com/blog/normalized-css/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值