Normalize.css源码注释翻译&浏览器css兼容问题的理解
版本v5.0.0源码地址:
https://necolas.github.io/normalize.css/5.0.0/normalize.css
翻译版:
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ /** * 1. 更改所有浏览器中的默认字体系列(意见)。 * 2. 更正所有浏览器中的行高。 * 3. 在Windows Phone的IE或者ios上方向更改后,防止字体大小的调整。 */ /* 文档 ========================================================================== */ html { font-family: sans-serif; /* 1 */ line-height: 1.15; /* 2 */ -ms-text-size-adjust: 100%; /* 3 */ -webkit-text-size-adjust: 100%; /* 3 */ } /* 部分 ========================================================================== */ /** * 删除所有浏览器的边距 (意见). */ body { margin:; } /** * 更正IE9以下的display */ article, aside, footer, header, nav, section { display: block; } /** * 更正Chrome,Firefox和Safari 中`section`和*`article`上下文中`h1`元素的字体大小和边距。 */ h1 { font-size: 2em; margin: 0.67em 0; } /* 分组内容 ========================================================================== */ /** * 在IE9-添加正确的display. * 1.在IE中添加正确的display. */ figcaption, figure, main { /* 1 */ display: block; } /** * 在IE8中添加正确的margin. */ figure { margin: 1em 40px; } /** * 1. 在firefox中添加正确的box sizing. * 2. 在 Edge and IE中显示overflow. */ hr { box-sizing: content-box; /* 1 */ height:; /* 1 */ overflow: visible; /* 2 */ } /** * 1. 更正所有浏览器中字体的大小的继承和缩放. * 2. 更正所有浏览器中`em`字体大小. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* 文本级语义 ========================================================================== */ /** * 1. 删除IE10中active link上的灰色背景. * 2. 删除链接下划线在iOS 8+和Safari 8+中的差距。 */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * 删除聚焦链接上的轮廓,即当他们是active或hover时(意见). */ a:active, a:hover { outline-width:; } /** * 1. 删除Firefox 39-中的底部边框。 * 2. 在Chrome,Edge,IE,Opera和Safari中添加正确的文字装饰。 */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * 根据Safari 6中的下一个规则防止重复应用“bolder”。 */ b, strong { font-weight: inherit; } /** * 在Chrome,Edge和Safari中添加正确的font weight。 */ b, strong { font-weight: bolder; } /** * 1. 纠正所有浏览器中字体大小的继承和缩放。 * 2. 在所有浏览器中更正'em'字体大小 */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * 在Android 4.3-中添加正确的字体样式。 */ dfn { font-style: italic; } /** * 在 IE9- 中添加正确的背景和颜色。 */ mark { background-color: #ff0; color: #000; } /** * 在所有浏览器中添加正确的字体大小。 */ small { font-size: 80%; } /** * 所有浏览器中,防止`sub`和`sup`元素影响行高 * */ sub, sup { font-size: 75%; line-height:; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 嵌入内容 ========================================================================== */ /** * 在IE 9-中添加正确的display。 */ audio, video { display: inline-block; } /** * 在iOS 4-7中添加正确的display。 */ audio:not([controls]) { display: none; height:; } /** * 删除IE 10中链接内图像上的边框。 */ img { border-style: none; } /** * 隐藏IE中的overflow. */ svg:not(:root) { overflow: hidden; } /* Form表单 ========================================================================== */ /** * 1. 在所有浏览器中更改字体样式(意见)。 * 2. 删除Firefox和Safari中的边距。 */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin:; /* 2 */ } /** * 在IE中显示overflow。 * 1.在Edge显示overflow。 */ button, input { /* 1 */ overflow: visible; } /** * 删除Edge,Firefox和IE中的文本变换的继承。 * 1.在Firefox中删除文本变换的继承。 */ button, select { /* 1 */ text-transform: none; } /** * 1. 在Android 4防止WebKit的bug:销毁本机`audio`和`video`控件 * 2. 纠正在iOS和Safari中无法创建可点击类型的样式。 */ button, html [type="button"], /* 1 */ [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * 删除Firefox中的内边框和内边距。 */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding:; } /** * 恢复上一个规则未设置的焦点样式。 */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * 更改所有浏览器中的边框,边距和填充(意见)。 */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1.纠正在Edge和IE中的文本换行。 * 2.纠正IE中'fieldset`元素的颜色继承。 * 3.在所有浏览器中删除padding以便开发者在他们清零`fieldset`元素时不会出错。 */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding:; /* 3 */ white-space: normal; /* 1 */ } /** * 1.在IE9-中添加正确的display。 * 2. 在Chrome,Firefox和Opera中添加正确的垂直对齐方式。 */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * 删除IE中的默认垂直滚动条。 */ textarea { overflow: auto; } /** * 1. 在IE 10-中添加正确的box sizing。 * 2. 删除IE 10-中的padding。 */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding:; /* 2 */ } /** * 修正Chrome中增加和减少按钮的游标样式。 */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1.纠正Chrome和Safari中的奇怪外观。 * 2.更正Safari中的outline样式。 */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * 在MacOS中删除Chrome和Safari中的内部padding和取消按钮。 */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1.纠正了在iOS和Safari中无法创建可点击类型的样式。 * 2.在Safari中将字体属性更改为`inherit`。 */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* 互动 ========================================================================== */ /* * 在IE 9-中添加正确的display。 * 1.在Edge,IE和Firefox中添加正确的display。 */ details, /* 1 */ menu { display: block; } /* * 在所有浏览器中添加正确的display。 */ summary { display: list-item; } /* 脚本 ========================================================================== */ /** * 在IE 9-中添加正确的display。 */ canvas { display: inline-block; } /** * 在IE中添加正确的display。 */ template { display: none; } /* 隐藏 ========================================================================== */ /** * 在IE 10-中添加正确的display。 */ [hidden] { display: none; }
从Normalize.css源码中读到的 ==浏览器css兼容问题==:
本地编辑完再更新
*作者注: *部分专有词汇和css属性值未做翻译 *有不恰当之处请联系译者Nirvana-zsy(hnuzsy@hnu.edu.cn) *20170308 *关于转载: *任何人可以进行注明出处转载、分享 *但不可在未经允许的情况下用于商业用途,感谢配合! *详细参见Attribution-NonCommercial 3.0 License(https://creativecommons.org/licenses/by-nc/3.0/)
Normalize.css源码注释翻译&浏览器css兼容问题的理解的更多相关文章
- HashMap源码注释翻译
HashMap.java(JDK1.8) 如有错误翻译的地方,欢迎评论指出. 介绍:对于HashMap及其子类而言,它们采用Hash算法来决定集合中元素的存储位置.当系统开始初始化HashMap时,系 ...
- normalize.css源码解析
什么是normalize.css? 它是为了帮助我们统一各个浏览器的样式和消除bug的css库. 为什么需要normalize.css,有什么好处? 不像一些reset.css,normalize. ...
- 鸿蒙内核源码分析(源码注释篇) | 鸿蒙必定成功,也必然成功 | 百篇博客分析OpenHarmony源码 | v13.02
百篇博客系列篇.本篇为: v13.xx 鸿蒙内核源码分析(源码注释篇) | 鸿蒙必定成功,也必然成功 | 51.c.h .o 几点说明 kernel_liteos_a_note | 中文注解鸿蒙内核 ...
- 如何扒取一个网站的HTML和CSS源码
一个好的前端开发,当看到一个很炫的页面的时候会本着学习的心态,想知道网站的源码.以下内容只是为了大家更好的学习,拒绝抄袭,支持正版. 1 首先我们要有一个chrome浏览器 2 在本地创建相关文件夹 ...
- Qt StyleSheet皮肤css源码
使用方式如下 //设置皮肤样式 static void SetStyle(const QString &styleName) { QFile file(QString(":/imag ...
- 帮助你实现漂亮界面的14套免费的 HTML/CSS 源码
在网络上能找很多免费的 PSD 格式素材,但是很少有 HTML/CSS 界面组件下载.在这篇文章中,收集了14套免费的 HTML/CSS 界面源码分享给前端设计师和开发者们.这些组件包括按钮.滑块.表 ...
- CSS源码之纯css3制作的哆啦a梦图片
本文章向大家介绍一个纯css3制作的哆啦a梦图像,主要巧妙的使用了css3的border-radius属性,需要的朋友介意参考一下本文章的源码. 效果图: 源码 <!doctype html&g ...
- BackboneJS 源码注释
Backbone 作者在源码中做了很好的注释,这里只是锦上添花,补充一些个人的理解而已. // Backbone.js 1.2.3 // (c) 2010-2015 Jeremy Ashkenas, ...
- react源码总览(翻译)
用react也有段时间了, 是时候看看人家源码了. 看源码之前看到官方文档 有这么篇文章介绍其代码结构了, 为了看源码能顺利些, 遂决定将其翻译来看看, 小弟英语也是半瓢水, 好多单词得查词典, 不当 ...
随机推荐
- 走进javascript——类型
ECMAScript语言类型对应于使用ECMAScript语言的ECMAScript程序员直接操作的值.ECMAScript语言类型有以下几种Undefined,Null,Boolean,String ...
- 通过Servlet实现汉字验证码
package com; import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.awt.Gra ...
- matlab笔记(1) 元胞结构cell2mat和num2cell
摘自于:https://zhidao.baidu.com/question/1987862234171281467.html https://www.zybang.com/question/dcb09 ...
- 更快的理解js中循环嵌套
[循环控制语句] break语句:终止本层循环,继续执行循环后面的语句:(当循环有多层时,break只会跳出一层循环) continue语句:跳过本次循环,继续执行下次循环: (对于for循环,con ...
- 学习笔记:javascript内置对象:数组对象
1.数组对象的创建 1.设置一个长度为0的数组 var myarr=new array(); 2.设置一个长度为n的数组 var myarr=new arr(n); 3.声明一个赋值的指定长度 ...
- 【JAVAWEB学习笔记】18_el&jstl&javaee的开发模式
一.EL技术 1.EL 表达式概述 EL(Express Lanuage)表达式可以嵌入在jsp页面内部,减少jsp脚本的编写,EL 出现的目的是要替代jsp页面中脚本的编写. 2.EL从域中取出数据 ...
- win7电脑关机时间长怎么办
最近遇到电脑关机慢的问题,其实电脑是装了ssd的,而且关掉了许多不需要的软件服务,为什么还是会出现关机慢的问题呢?开机是很快的. 所以我做了以下尝试: 1 win + r 运行 regedit 注册表 ...
- 最常用的css垂直居中方法
css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...
- html学习笔记 - table表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 读《深入理解Java虚拟机》
Java虚拟机运行时数据区 对象的创建 Java创建对象,在语言层面上使用new关键字.虚拟机遇到new关键字时,会检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的 ...