modern-normalize vs normalize.css

最新推荐文章于 2024-08-24 08:32:21 发布
最新推荐文章于 2024-08-24 08:32:21 发布
阅读量772 收藏
点赞数
分类专栏： css3 文章标签： normailize.css CSS 重置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whqet/article/details/79296403
版权

normalize.css

我们知道normalize.css可以让浏览器以接近标准的方式一致地渲染所有元素，而且不同于cssrest，只针对需要正常化的元素。它的官方网站为normalize.css，最新版本为8.0。

浏览器支持

  • Chrome
  • Edge
  • Firefox ESR+
  • Internet Explorer 10+
  • Safari 8+
  • Opera

源码分析

/*! normalize.css v8.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 iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * 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
   ========================================================================== */

/**
 * 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
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * 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 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
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

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

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

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

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-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 Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

modern-normalize

针对一些normalize.css问题进行了一些改进，官方网站为modern-normalize。
需要特别注意的是，浏览器兼容性方面，作者真实任性！！！

IE and Edge will never be supported though.

与normalize.css的不同

源码分析

/*! modern-normalize | MIT License | https://github.com/sindresorhus/modern-normalize */

/* Document
   ========================================================================== */

/**
 * Use a better box model (opinionated).
 */

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

/**
 * Correct the line height in all browsers.
 */

html {
    line-height: 1.15;
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
    margin: 0;
}

/**
 * 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
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 */

hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
}

/**
 * 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
   ========================================================================== */

/**
 * Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
    -webkit-text-decoration-skip: objects;
}

/**
 * Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
    text-decoration: underline dotted;
}

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

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

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

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type='reset'],
[type='submit'] {
    -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
    padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
    vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type='search'] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type='search']::-webkit-search-cancel-button,
[type='search']::-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 Edge, IE, and Firefox.
 */

details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
    display: list-item;
}
whqet
关注
专栏目录
Normalize.css简介、使用
梅花寺
08-11 2151
Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。...
elm-css-modern-normalize：rtfeldmanelm-css的Elm现代规范化端口
02-17
elm-css-modern-normalize Elm端口，用于的。 安装 elm install hmsk/elm-css-modern-normalize 用法 import Css.ModernNormalize as ModernNormalize view : Model -> Html Msg view _ = [ ModernNormalize . globalHtml -- Your application view comes here ] elm-css友好功能 import Css exposing ( color , hex ) import Css.Global exposing ( global , selector ) import Css.ModernNormalize as ModernNormalize imp
Normalize vs Reset
Cipuzp的博客
11-11 220
2. Normalize vs Reset 2.3 css reset 和 normalize.css 有什么区别？ 2.3.1 创造 normalize.css 的几个目的 保护有用的浏览器默认样式而不是完全去掉它们 一般化的样式：为大部分 HTML 元素提供 修复浏览器自身的 bug 并保证各浏览器的一致性 优化 CSS 可用性：用一些小技巧 解释代码：用注释和详细的文档来 2.3.2 N...
推荐项目：Modern-Normalize —— 现代Web开发的CSS基础
最新发布
gitblog_00853的博客
08-24 699
推荐项目：Modern-Normalize —— 现代Web开发的CSS基础 modern-normalize???? Normalize browsers' default style项目地址:https://gitcode.com/gh_mirrors/mo/modern-normalize 在繁星点点的技术海洋中，有一个项目静默发光，为现代浏览器的CSS样式奠定坚实的基础——那就是Modern-...
推荐开源项目：Modern Normalize——现代化的CSS正常化解决方案
gitblog_00095的博客
05-11 343
推荐开源项目：Modern Normalize——现代化的CSS正常化解决方案 modern-normalize???? Normalize browsers' default style项目地址:https://gitcode.com/gh_mirrors/mo/modern-normalize 项目介绍 Modern Normalize是一个轻量级且针对最新版Chrome、Firefox和Safa...
Normalization vs. Standardization vs. Batch Normalization
Chown先森
06-11 436
Normalization标准化和Standardization归一化，作为ML常用的tricks，大家再熟悉不过，但大家往往只知道基本的计算公式，且没深入了解过，甚至不知道标准化与归一化的区别，也不知道其具体作用，原理等，其次，存在为为什么使用Batch Normalization替代Normallization等问题。于是，我做了一定功课，及归纳如下。 一：Normalization归一化和Standardization标准化的定义 以上为众所周知的数学公式定义，我们看国外对Normaliz
normalize.css
12-26
浏览器兼容问题：不同浏览器的标签默认的margin和padding不同的解决方案
normalize.css内容
04-26
Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It's a modern, HTML5-ready alternative to the traditional reset.css.
static-webpack-boilerplate：用于构建静态站点的最小和现代Webpack样板
01-31
使用modern-normalize标准化默认浏览器样式 带有社交媒体元标记HTML模板 针对最新的浏览器 离线工作 文件树 ├── public # Main folder │ ├── css # Subfolder with css │ │ ├── main.css # Main CSS ...
modern-normalize 使用教程
gitblog_00935的博客
08-22 646
modern-normalize 使用教程 modern-normalize???? Normalize browsers' default style项目地址:https://gitcode.com/gh_mirrors/mo/modern-normalize 项目介绍 modern-normalize 是一个开源项目，旨在为现代浏览器提供一致的 CSS 初始化样式。与传统的 normalize.c...
moderngl：适用于python的现代OpenGL绑定
02-04
现代GL ModernGL是OpenGL 3.3+内核上的python包装器，可简化科学模拟，游戏或用户界面等简单图形应用程序的创建。 通常，获得OpenGL的深入知识需要陡峭的学习曲线。 相比之下，ModernGL易于学习和使用，而且能够以高性能和高质量进行渲染，并且编写的代码更少。 大多数moderngl代码库也是用C ++编写的，以实现高性能。 pip install moderngl （窗口创建，资源加载，..） 注意：从moderngl 5.6起，上下文创建被委托给包。 这使我们能够扩展和改善上下文创建，而无需发布新版本的moderngl。 这也使用户可以自定义自己的上下文
cpp-ModernGL一个python的现代OpenGL绑定
08-16
ModernGL一个python的现代OpenGL绑定
moderngl-window：用于ModernGL的跨平台实用程序库，可简化窗口创建和资源加载
02-04
现代窗口 用于跨平台实用程序库，窗口创建和资源加载。 它也可以与PyOpenGL一起使用，以通过可编程管线进行渲染。 请报告错误或在上发布问题/反馈。 产品特点 跨平台支持。 在Windows 10，Linux和Mac OS X上进行了测试。这可以节省用户很多时间，并且通常比大多数人想象的要难。 使用pyglet，pygame，PySide2，GLFW，SDL2，PyQt5或tkinter轻松地为ModernGL创建窗口，从而支持各种窗口，键盘和鼠标事件。 这些事件被统一到一个系统中，因此您的项目可以在任何窗口中工作。 使用枕头加载2D纹理，纹理阵列和立方体贴图 将着色器加载为单个或多个g
CSS重置和normalize.css
u013864585的专栏
07-03 858
很多人在自己的工作中喜欢利用CSS重置来清除烦人的不同浏览器的默认样式。这些样式差异通常都很细微但在使用CSS进行布局统一工作时相当烦人，况且有些差异还不是那么细微。比如，默认表单样式跨浏览器间的差异以及和元素的margins和padding的差异，这让你不得不把这些难看的空隙清除出去。 传统上CSS重置可以解决这些样式问题。CSS重置移除几乎所有默认的CSS样式，让你添加属于自己的样式并且有信
探索现代图形渲染：ModernGL —— 一个纯粹的OpenGL绑定库
gitblog_00001的博客
06-22 489
探索现代图形渲染：ModernGL —— 一个纯粹的OpenGL绑定库 项目地址:https://gitcode.com/gh_mirrors/mo/ModernGL.jl 项目介绍 ModernGL 是一个针对OpenGL 3.0到4.6版本的低级绑定库，同时也部分支持OpenGL 2.1。这个项目的核心理念是保持其作为一个严格的底层包装器，提供直接与OpenGL API交互的能力，而不涉及任何...
ModernGL-Volume-Raycasting-Example学习笔记
courage的专栏
01-02 992
前记：       最近手头的project要用到ray casting，在github上找到一个现成的example。在MacBook上跑起来学习一下。谢谢example author的无私奉献。 项目ModernGL-Volume-Raycasting-Example 地址： https://github.com/ulricheck/ModernGL-Volume-Raycas
CSS进阶篇--Normalize.css的使用（重置表）
weixin_34353714的博客
09-14 1615
本文译自Normalize.css官网: http://nicolasgallagher.com/a... Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normaliz...
【Modern OpenGL】转换 Transformations
aganlengzi的专栏
12-28 2412
我们已经学会了怎样创建对象，并且学会利用着色或者纹理使他们呈现出表面细节，但是它们还并不是十分有趣，因为它们只是静止的对象。我们虽然可以通过在每帧中改变它们的顶点坐标值挥着通过重新配置他们的缓存区使它们动起来，但是这样做是十分繁杂并且消耗更多能量。实际上，有更好的办法可以转换一个对象：使用一个矩阵对象。 矩阵是一种十分强大的数学概念，一开始看上去是令人生畏的。但是当你习惯它们的时候，你会觉得它们非常有用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值