栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

css样式初始化 normalize

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

css样式初始化 normalize

总于找到一款良心的css初始化样式重置,哈哈

在没上google之前,在百度搜一些腾讯,阿里等初始化样式,效果一般般,勉强用,
网上也有很多类似不过大部分都是去除浏览器所有样式
而normalize.css最大特点:保留有用的浏览器默认样式,而不是一概将它们“抹杀”,对浏览器很友好

vue框架中如何使用

NPM
npm install --save normalize.css

mianimport 'normalize.css'  如果报错
npm install css-loader style-loader

本文译自Normalize.css官网: http://nicolasgallagher.com/about-normalize-css/

Normalize.css是一个小的CSS文件,它在HTML元素的默认样式中提供了更好的跨浏览器一致性。这是一个现代化的,HTML5就绪的,可以替代传统的CSS重置。

Normalize.css目前通过Twitter Bootstrap,HTML5 Boilerplate,GOV.UK,Rdio,CSS技巧以及许多其他框架,工具包和网站以某种形式使用。

  • Normalize.css项目网站

  • GitHub上的Normalize.css源代码

概观

Normalize.css是CSS重置的替代方法。该项目是由@necolas 和@jon_neal进行的几百小时广泛研究的产物,其中介绍了默认浏览器样式之间的差异。

normalize.css的目标如下:

  • 保留有用的浏览器默认值,而不是删除它们。

  • 规范化各种HTML元素的样式

  • 纠正错误和常见的浏览器不一致。

  • 通过微妙的改进提高可用性

  • 使用注释和详细文档解释代码

它支持多种浏览器(包括移动浏览器),并且包括对HTML5元素,排版,列表,嵌入式内容,表单和表格进行规范化的CSS。

尽管该项目是基于规范化原则的,但它使用务实的默认设置,因此它们更可取。

正常化与重置

更详细地了解normalize.css与传统的CSS重置有何不同。

Normalize.css保留有用的默认值

通过展开几乎所有元素的默认样式,重置强加了均匀的视觉风格。相反,normalize.css保留了许多有用的默认浏览器样式。这意味着您不必为所有常见印刷元素重新声明样式。

当元素在不同浏览器中具有不同的默认样式时,normalize.css旨在尽可能使这些样式保持一致并符合现代标准。

Normalize.css纠正常见错误

它修复了超出重置范围的常见桌面和移动浏览器错误。这包括HTML5元素的显示设置,更正 font-size预格式化文本,IE9中的SVG溢出,以及浏览器和操作系统中与表单相关的许多错误。

例如,这是normalize.css如何使新的HTML5 search输入类型跨浏览器一致和可调整的:

input[type="search"] {  -webkit-appearance: textfield; 
  -moz-box-sizing: content-box;  -webkit-box-sizing: content-box; 
  box-sizing: content-box;
}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button {  -webkit-appearance: none;
}

关于渲染元素的方式,重新设置通常无法将浏览器带入一个起点。这对于表单尤其如此 - normalize.css可以提供一些重要帮助。

Normalize.css不会混淆你的调试工具

使用重置时常见的问题是浏览器CSS调试工具中显示的大型继承链。



image

浏览器调试工具在使用CSS重置时的常见现象

这对normalize.css来说不是这样的问题,因为有规则的样式和规则集中多个选择器的保守使用。

Normalize.css是模块化的

该项目分解为相对独立的部分,使您可以轻松查看哪些元素需要特定的样式。此外,如果您知道它们永远不会被您的网站所需,它可以让您删除部分(例如表单规范化)。

Normalize.css有丰富的文档

normalize.css代码基于详细的跨浏览器研究和方法测试。该文件大量记录在线并在GitHub Wiki中进一步扩展。这意味着你可以找出每行代码在做什么,为什么包含它,浏览器之间有什么区别,更容易运行你自己的测试。

该项目旨在帮助教育人们如何默认浏览器呈现元素,并使他们更容易参与提交改进。

如何使用normalize.css

首先,从GitHub 安装或下载normalize.css。然后有两种主要的方式来使用它。

方法1:使用normalize.css作为您自己项目基本CSS的起点,根据设计要求定制值。

方法2:包含normalize.css,并在之后构建,如果有必要,在CSS中重写默认值。



作者:艾尔丶Lawliet
链接:https://www.jianshu.com/p/2425d07c6b11

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/244871.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号