用js自动化的测验了Jason Grigsby的用例,尽大概从最根特性的主题材料询问它在帮大家做怎么着

澳门新葡8455最新网站 3

HTML和CSS代码如下:

如果你觉得这些测试结果有任何错误的地方,欢迎在评论中提出,然后这些测试用例Tim都在GitHub上开源了,感兴趣的话可以fork下。。。

3、配置gulpfile.js

3.1、基本使用

JavaScript

 

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer');

gulp.task('testAutoFx', function () {
    gulp.src('src/css/index.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'Android >= 4.0'],
            cascade: true, //是否美化属性值 默认:true 像这样:
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            remove:true //是否去掉不必要的前缀 默认:true
        }))
        .pipe(gulp.dest('dist/css'));
});

 

3.2、gulp-autoprefixer的browsers参数详解
(传送门):

● last 2 versions: 主流浏览器的最新两个版本

● last 1 Chrome versions: 谷歌浏览器的最新版本

● last 2 Explorer versions: IE的最新两个版本

● last 3 Safari versions: 苹果浏览器最新三个版本

● Firefox >= 20: 火狐浏览器的版本大于或等于20

● iOS 7: IOS7版本

● Firefox ESR: 最新ESR版本的火狐

● > 5%: 全球统计有超过5%的使用率

3.3、发现上面规律了吗,相信这不难看出,接下来说说各浏览器的标识:

Android for Android WebView.

BlackBerry or bb for Blackberry browser.

Chrome for Google Chrome.

Firefox or ff for Mozilla Firefox.

Explorer or ie for Internet Explorer.

iOS or ios_saf for iOS Safari.

Opera for Opera.

Safari for desktop Safari.

OperaMobile or op_mob for Opera Mobile.

OperaMini or op_mini for Opera Mini.

ChromeAndroid or and_chr

FirefoxAndroid or and_ff for Firefox for Android.

ExplorerMobile or ie_mob for Internet Explorer Mobile.

html与body 元素

CSS

/** * 1. Set default font family to sans-serif. * 2. Prevent iOS and
IE text size adjust after device orientation change, * without
disabling user zoom. */ html { font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%;
/* 2 */ }

1
2
3
4
5
6
7
8
9
10
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS and IE text size adjust after device orientation change,
*    without disabling user zoom.
*/
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
  1. 设置全局的字体为sans-serif,关于中文字体的设置可参考 Amaze
    UI
  2. 防止 iOS 横屏字号放大,同时保证在PC上 zoom 功能正常

第2个问题场景是这样,苹果IOS设备调整后会自动调整文字的大小,按照苹果的意图是为了提升用户体验,比如竖屏状态下是14px,转换为横屏时就变成了20px,把text-size-adjust:100%就不会调整字体大小了。

澳门新葡8455最新网站,如果把值设置为'text-size-adjust:none',那么就会导致用户无法放大缩小字体了。

CSS

/** * Remove default margin. */ body { margin: 0; }

1
2
3
4
5
6
7
/**
* Remove default margin.
*/
 
body {
  margin: 0;
}
  • 修复浏览器默认边距,统一效果

Android 2.1+请求Blackberry +请求Chrome Mobile请求Fennec 请求Firefox
请求IE请求iOS 请求Opera 请求Opera Mini 不请求Opera Mobile
不请求RockMelt请求Safari 请求结论测试二:背景图片display:none

本测试中,一个div元素在浏览器宽度大于601px时被设置一个背景图片,然后在浏览器宽度小于600px时被设置为另一个背景图片。HTML和CSS代码如下:

原文地址:

群组元素 Grouping content

CSS

/** * Address margin not present in IE 8/9 and Safari. */ figure {
margin: 1em 40px; }

1
2
3
4
5
6
7
/**
* Address margin not present in IE 8/9 and Safari.
*/
 
figure {
  margin: 1em 40px;
}
  • 修复 IE 8/9、Safari中margin失效

figure 是HTML5的新标签,用做文档插图,但它在 IE 8/9 and Safari
中的默认margin失效,这里做了统一设置。

CSS

/** * Address differences between Firefox and other browsers. */ hr
{ box-sizing: content-box; height: 0; }

1
2
3
4
5
6
7
8
/**
* Address differences between Firefox and other browsers.
*/
 
hr {
  box-sizing: content-box;
  height: 0;
}
  • 修正 Firefox 和其他浏览器之间的差异

在 Firefox 中,hr元素的默认样式很多,和其它浏览器主要的差异有两点:
1.设置了height2px;
2.box-sizingborder-box;
此样式对这两个问题进行重置,进行统一

CSS

/** * Contain overflow in all browsers. */ pre { overflow: auto; }

1
2
3
4
5
6
7
/**
* Contain overflow in all browsers.
*/
 
pre {
  overflow: auto;
}
  • 标签设置滚动条,内容溢出时出现

大部分浏览器的preoverflow的时候会直接溢出去,这里加上overflow:auto让它出现滚动条

CSS

/** * Address odd `em`-unit font size rendering in all browsers.
*/ code, kbd, pre, samp { font-family: monospace, monospace; font-size:
1em; }

1
2
3
4
5
6
7
8
9
10
11
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
 
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
  • 用于修复 Safari 5 和 Chrome 中奇怪的字体设置,统一字体样式,

测试七:层叠覆盖高分辨率

1

12345678910

#test4 {background-image:url('images/test4-desktop.png');width:200px;height:75px;}@media all and  {#test4 {background-image:url('images/test4-mobile.png');}}

简介:

使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀。使用她我们可以很潇洒地写代码,不必考虑各浏览器兼容前缀。【特别是开发移动端页面时,就能充分体现它的优势。例如兼容性不太好的flex布局。】

语义化文本标签 Text-level semantics

CSS

/** * Address styling not present in IE 8/9/10/11, Safari, and
Chrome. */ abbr[title] { border-bottom: 1px dotted; }

1
2
3
4
5
6
7
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
 
abbr[title] {
  border-bottom: 1px dotted;
}
  • 修正abbr元素在 Firefox 外其他浏览器没有下划线的问题

语义abbr标签是表示简称或缩写,自身的title属性是完整版,但是此标签在Firefox下默认有下边框,而其他浏览器中没有,这里统一了样式。

CSS

/** * Address style set to `bolder` in Firefox 4+, Safari, and
Chrome. */ b, strong { font-weight: bold; }

1
2
3
4
5
6
7
8
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
 
b,
strong {
  font-weight: bold;
}
  • Firefox3+,Safari4/5 和 Chrome 中统一设置为粗体

Firefox 3+, Safari 和 Chrome
bstrong设置的属性是bolder,而不是bold,这里统一了样式。

CSS

/** * Address styling not present in Safari and Chrome. */ dfn {
font-style: italic; }

1
2
3
4
5
6
7
/**
* Address styling not present in Safari and Chrome.
*/
 
dfn {
  font-style: italic;
}
  • 修正 Safari5 和 Chrome 中没有样式的问题

dfn 标签可标记那些对特殊术语或短语的定义,在Safari
和Chrome 里不是斜体,在这里统一了样式。

CSS

/** * Address variable `h1` font-size and margin within `section`
and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 {
font-size: 2em; margin: 0.67em 0; }

1
2
3
4
5
6
7
8
9
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
 
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
  • 修复 Firefox 4+,Safari 5 和 Chrome
    sectionarticle内的h1字体大小

CSS

/** * Address styling not present in IE 8/9. */ mark { background:
#ff0; color: #000; }

1
2
3
4
5
6
7
8
/**
* Address styling not present in IE 8/9.
*/
 
mark {
  background: #ff0;
  color: #000;
}
  • 修复 IE 6/9, Safari 5 和 Chrome中样式不呈现的问题

mark标签用来突出显示部分文本,设置后会有一个高亮背景,但是此标签是HTML5中的新标签,在低版本浏览器并不识别,所以需要重置样式。

CSS

/** * Address inconsistent and variable font size in all browsers.
*/ small { font-size: 80%; }

1
2
3
4
5
6
7
/**
* Address inconsistent and variable font size in all browsers.
*/
 
small {
  font-size: 80%;
}
  • 在所有浏览器中统一small的字体大小

small标签在 HTML 4.01 就已经存在,HTML5
中增强了它的寓意,表示旁注信息,不过此标签在各个浏览器中呈现的字体大小不一样,在这里做了统一

CSS

/** * Prevent `sub` and `sup` affecting `line-height` in all
browsers. */ sub, sup { font-size: 75%; line-height: 0; position:
relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom:
-0.25em; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
 
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
 
sup {
  top: -0.5em;
}
 
sub {
  bottom: -0.25em;
}
  • 防止所有浏览器中的subsup影响行高

supsub两个标签是用来表示上标和下标,据HTML标准中对smallsubsup的大小要求都是smaller,但是如上所示normalize.csssmall设的是80%,而subsup却是75%,所以为了保持一致,且不影响其他元素的行高,把两者的line-height设为0,然后设置它的垂直以baseline开始,设置topbottom手动设置两者偏移量

本测试尝试通过对img标签的父级元素使用display:none来隐藏图片。HTML和CSS代码如下:

测试结果

4、执行任务

4.1、命令提示符执行:gulp testAutoFx

HTML5 元素 display definitions

CSS

/** * Correct `block` display not defined for any HTML5 element in
IE 8/9. * Correct `block` display not defined for `details` or
`summary` in IE 10/11 * and Firefox. * Correct `block` display not
defined for `main` in IE 11. */ article, aside, details, figcaption,
figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
 
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
  • 修复 IE 8/9,HTML5新元素不能正确显示的问题,定义为block的元素
  • 修复 IE 10/11,details 和 summary 定义为 block 的元素
  • 修复 IE 11,main定义为 block 的元素

这个问题想必大家都已经非常清楚,当低版本浏览器遇到不识别的元素时,会默认把他们当成内联元素(inline),这里重新定义成为block元素。

CSS

/** * 1. Correct `inline-block` display not defined in IE 8/9. *

  1. Normalize vertical alignment of `progress` in Chrome, Firefox, and
    Opera. */ audio, canvas, progress, video { display: inline-block; /* 1
    */ vertical-align: baseline; /* 2 */ }
1
2
3
4
5
6
7
8
9
10
11
12
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
 
audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}
  1. 修复 IE 8/9,HTML5新元素不能正确显示的问题,定义为inline-block元素
  2. 修复Chrome, Firefox, 和Opera的progress元素没有以baseline垂直对齐

progress是HTML5的新标签,可以定义进度条,但是它Chrome, Firefox,
和Opera并没有已baseline垂直对齐。

CSS

/** * Prevent modern browsers from displaying `audio` without
controls. * Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }

1
2
3
4
5
6
7
8
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
  display: none;
  height: 0;
}
  • 对不支持controls属性的浏览器,audio元素给以隐藏
  • 移除iOS5设备中多余的高度

在IE8之前的浏览器是不支持controls属性,这里的办法是直接隐藏该元素

CSS

/** * Address `[hidden]` styling not present in IE 8/9/10. *
Hide the `template` element in IE 8/9/10/11, Safari, and Firefox <

  1. */ [hidden], template { display: none; }
1
2
3
4
5
6
7
8
9
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
*/
 
[hidden],
template {
  display: none;
}
  • 修复 IE 7/8/9,Firefox 3 和 Safari 4 中hidden属性不起作用的问题
  • 在 IE,Safari,Firefox 22- 中隐藏template元素

hidden是HTML5的新元素,可以对元素进行隐藏,但是低版本浏览器并不会识别它,这里统一做了样式。

template标签用于HTML模板,大家应该都是用过HTML模版开发页面,这个标签是按照实际需求添加的,但是模板又不能在界面上显示,所以这里统一了样式,兼容旧浏览器。

浏览器

结果和测试一一样:除了Opera mini和Opera
Mobile和Firefox,所有浏览器都会下载图片。

2、本地安装gulp-autoprefixer

2.1、github:

2.2、安装:命令提示符执行 cnpm install gulp-autoprefixer --save-dev

2.3、注意:没有安装cnpm请使用 npm install gulp-autoprefixer --save-dev。 什么是cnpm,如何安装?

2.4、说明:--save-dev 保存配置信息至 package.json 的 devDependencies
节点。为什么要保存至package.json?

澳门新葡8455最新网站 1

关于CSS Reset那些事(2):Normalize.css 源码解读

2015/08/02 · CSS · CSS
Reset,
Normalize.css

原文出处: Alsiso   

@mediaalland{#test5{background-image:url('images/test5-desktop.png');width:200px;height:75px;}}@mediaalland{#test5{background-image:url('images/test5-mobile.png');width:200px;height:75px;}}

媒体查询现在最大的用处就是响应式设计了,神飞翻译这篇文章也是因为最近在思考响应式设计的效率问题。通过这些测试结果,我们在实现响应式设计的网站时,最好先处理移动设备,然后再向高分辨率设备升级。然后使用图片等外部资源的选择器,一定要写到媒体查询中去。

5、结束语

5.1、本文有任何错误,或有任何疑问,欢迎留言说明。

 

内嵌元素 Embedded content

CSS

/** * Remove border when inside `a` element in IE 8/9/10. */ img {
border: 0; }

1
2
3
4
5
6
7
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
 
img {
  border: 0;
}
  • 去除 IE6-9 和 Firefox 3 中a内部img元素默认的边框

在旧版本的浏览器中,图片默认会有一个奇丑无比的蓝色边框,这这里进行清除,统一样式。

CSS

/** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) {
overflow: hidden; }

1
2
3
4
5
6
7
/**
* Correct overflow not hidden in IE 9/10/11.
*/
 
svg:not(:root) {
  overflow: hidden;
}
  • 修复 IE9 中的overflow的怪异表现

测试结果

1

123456789101112131415

#test7 {background-image:url('images/test7-lowres.png');width:200px;height:75px;}@media only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (-moz-min-device-pixel-ratio: 1.5),only screen and (-o-min-device-pixel-ratio: 3/2),only screen and (min-device-pixel-ratio: 1.5) {#test7 {background-image:url('images/test7-highres.png');width:200px;height:75px;}}

1、安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件

1.1、gulp基本使用还未掌握?请参看: gulp详细入门教程

1.2、本示例目录结构如下:

澳门新葡8455最新网站 2

Normalize 源码解读

前面讲到的分模块解读,就是先黏贴一段源码,然后根据官方提供的注释进行翻译整理,尽可能提供案例解析,然后再次进行整理总结,如果你有疑问,可以留言一起交流。

源码地址:https://github.com/necolas/normalize.css/blob/master/normalize.css
源码版本:v3.0.3

Android 2.1+请求Blackberry +请求Chrome Mobile请求Fennec 请求Firefox
不请求IE请求iOS 请求Opera 请求Opera Mini 不请求Opera Mobile
不请求RockMelt请求Safari 请求Silk请求结论

推荐
如果你要隐藏一张内容图片,display:none是无效的,所以我推荐使用javascript方案或者服务器端实现;
如果你要隐藏一张背景图片,最好的方法是隐藏其父级元素。如果你不方便这样做,那就用一个层叠样式覆盖掉它吧,然后将设置background-image:none;
如果你要切换多张图片,就把他们全部用media query定义吧。
关于响应式设计的思考

链接 Links

CSS

/** * Remove the gray background color from active links in IE 10.
*/ a { background-color: transparent; }

1
2
3
4
5
6
7
/**
* Remove the gray background color from active links in IE 10.
*/
 
a {
  background-color: transparent;
}
  • 去掉 IE 10+ 点击链接时的灰色背景

CSS

/** * Improve readability of focused elements when they are also in
an * active/hover state. */ a:active, a:hover { outline: 0; }

1
2
3
4
5
6
7
8
9
/**
* Improve readability of focused elements when they are also in an
* active/hover state.
*/
 
a:active,
a:hover {
  outline: 0;
}
  • 去掉点击时的outline焦点框,同时保证使用键盘可以显示焦点框,这个操作针对所有浏览器

我会避免使用这种方法。尽管环境在改善,但是在Android市场中占主导地位的Android
2.x版本依然会像Fennec和Kindle一样同时下载两个图片。三者中,尤其因为Android,我会推荐寻找别的方案。

浏览器

前言

上一章节介绍了CSS
Reset的历史,最后对Normalize.css做了简单的了解,所以从这节开始对源码进行注释翻译与解读,尽可能从最根本性的问题了解它在帮我们做什么?

回顾:关于CSS Reset 那些事(一)之
历史演变与Normalize.css

#test3div{background-image:url('images/test3.png');width:200px;height:75px;}@mediaalland{#test3{display:none;}}

为了安全,这个方案可以多测试一些。看起来这种方法在绝大多数情况下是可用的。但是不幸的是,貌似Android
2.x会同时下载两个图片如果设备像素比大于或等于1.5时(或者你在media
query中设置的别的任何值)
。所以,在本例中,如果你使用了一个高分辨率的Android
2.x的设备,会比较苦逼。。。

总结

此章节我们对Normalize.css中设置的
html与body元素,HTML5元素,链接,语义化文本,内嵌元素,群组元素
的源码进行详细的解读,发现正如其说的一样,它不仅仅帮我们修复了浏览器的默认bug,还保留了许多标签的默认值,尤其是语义化标签,坚持他们存在的意义。

由于源码部分过长,所以对于源码的解析会分为两节,下一节我们继续来介绍:

表单:表单往往存在很多问题,如常见的各种不继承问题,这这里都会得到修复
表格:表格的默认边距和边框真的很丑,需要修复修复

下一节会完成所有模块对normalize.css源码解读,届时会整理一份normalize-zh.css中文注释的版本上传至Github,供大家参考使用,敬请期待…

1 赞 收藏
评论

澳门新葡8455最新网站 3

为了安全,这个方案可以多测试一些。看起来这种方法在绝大多数情况下是可用的。但是不幸的是,貌似Android
2.x会同时下载两个图片如果设备像素比大于或等于1.5时(或者你在media
query中设置的别的任何值)
。所以,在本例中,如果你使用了一个高分辨率的Android
2.x的设备,会比较苦逼。。。

本测试和测试二类似,但是使用了max-device-width来替代max-width。HTML和CSS代码如下:

#test6{background-image:url('images/test6.png');width:200px;height:75px;}@mediaalland(max-device-width:600px){#test6{display:none;}}

测试结果

这次更多的浏览器一起玩了。但是,Fennec一如既往得不能自已。Android
2.x比较怪异。它会同时请求两个图片——但只有在屏幕宽度大于600px匹配到min-width时才这样。这种行为貌似在Android
3.0版本中被改进了。这是件诡异的事情,我很好奇它为什么会这样。其 实,有个好消息。Jason Grigsby
说他的对本例的测试结果和我的不太一样。所以我又在一些Android
2.x机器上跑了一下这个测试。结论是,我最初的测试结果不太正确,Android
2.x表现很好,我最初测试的那个平台有问题。这不仅仅对于开发者来说是个好消息,对我本人来说更是恢复了对人类的信心。。。。。。。

本例中,一个div被给到一个背景图片。然后,通过使用min-device-pixel-ratio属性,如果比例大于1.5,一个新的背景图片将会被用到。

同时请求

比设置display:none好一些,这种方法的结果有点儿乱:

浏览器

测试四:背景图片层叠

#test7{background-image:url('images/test7-lowres.png');width:200px;height:75px;}@mediaonlyscreenand(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(-moz-min-device-pixel-ratio:1.5),onlyscreenand(-o-min-device-pixel-ratio:3/2),onlyscreenand(min-device-pixel-ratio:1.5){#test7{background-image:url('images/test7-highres.png');width:200px;height:75px;}}
1

12345678

#test2 {background-image:url;width:200px;height:75px;}@media all and  {#test2 {display:none;}}

浏览器

在本例中,div被设置了background-image。如果屏幕宽度小于600px,div就被设置为display:none。HTML和CSS代码如下:

相关文章

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图