IE10 的一些前端有关的特性

IE10 已经出来了很久一段时间了,整理一下有关的特性,方便日后查阅使用。

IE10 的 hack

.ie{
color:red;          /* for all browsers*/
_color:green;       /* hack for IE6*/
*color:black;       /* hack for IE6 IE7*/
color:white\9;      /* hack for IE6+(IE6 IE7 IE8 IE9 IE10)*/
color:yellow\0;     /* hack for IE8+(IE8 IE9 IE10)*/
color:orange\9\0;   /* hack for IE9+(IE9 IE10)*/
}

暂时还没有比较好的 hack 方式,使用一些另类的方法可以实现,但是不太好。此外,IE10 不再支持 IE 条件注释了。也就是说,面对下面的代码,IE10 会直接像其他浏览器那样忽略:

至于为什么,可能是因为微软对 IE10 已经拥有足够的自信,可以做到跟普通正常浏览器效果差不多,不再需要单独的 hack 了吧。

详细的了解 IE10 的更多细节和特性以及新技术,可以观看 MSDN 上的 IE10 develop 部分:http://msdn.microsoft.com/en-us/ie/aa740473

(未完,会继续发现添加。。)

Emmet 常用的高级功能

Emmet 的功能不仅仅局限在快速生成标记语言结构或者生成 CSS 代码,它还具有很多常用的前端相关的功能,下面就来介绍几个比较常用的功能。

生成 Lorem Ipsum

Lorem Ipsum 表示一段随机看不懂的文字。Lorem Ipsum 的文字让人看不懂,这样才能忽略内容的含义而专注内容的排版,作为测试数据填充用的。使用 Emmet 生成 Lorem Ipsum 文本非常简单,只需要使用 lorem这一条命令即可,敲击 Tab 键之后,就会生成如下一段文字:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, dolor, aperiam ab repellendus blanditiis eum exercitationem. Quae, reprehenderit repellat impedit asperiores consequatur? Illum quos magnam odit omnis recusandae natus similique.

Emmet 的 lorem 命令不仅仅只有输出这么一段文字这样一个简单的功能,它既然作为测试数据,可以加上参数指定要输出的字符数量。例如,我们如果想输出一个十个单词的 h1 标题,我们就可以使用如下命令 h1>lorem10 。但是这项功能对于使用中文的网页测试来说,好像没有多大用处,毕竟中文和英语单词的排版是不同的。

跳转编辑区域

写代码一般要用到两只手,有时候需要跳转到别的代码段等,你可以使用键盘方向键也可以使用鼠标。但是这都有缺陷,使用键盘方向键移动太慢了,而且需要按住 shift 键和方向键选中代码;使用鼠标的话,手就必须离开键盘,来回也会浪费一些时间。而 Emmet 提供了一个很实用的功能,就是整块的跳转。

为了方便理解,先看一下官方的 Demo 动画。这个功能,使用 Shift+Ctrl+.Shift+Ctrl+, 分别向下或者向上移动,选取的是一整块,先从标签开始,再是整个属性,再是属性值。这样,比键盘的方向键移动高效多了。

增加图片的尺寸大小

有时候,我们需要给 <img> 标签增加对应的 width、height 属性来表示图片的大小或者给通过 background-image 属性引用的背景图片一个尺寸大小。通常的做法是看一下图片的尺寸,然后加上,而现在,你只需要将光标移动到代码段,摁下 Ctrl+U 即可让 Emmet 自动读取图片的尺寸添加上。前提条件是图片比较存在并且正确引用进来了。

如果是针对 <img> 标签的,会在后面加上 width、height 属性,如果是 background 引入的,会在下面加上 width、height 的 CSS 属性。可以看一下官方的 Demo 。但是这里有个问题,官方的 Demo 中,实现这个功能的快捷键是 Shift+Ctrl+U 但实际使用中,这个快捷键不起作用。关于 Emmet 的 Mac、Win 下的快捷键,以这个页面上的为准:https://github.com/sergeche/emmet-sublime#available-actions

更新 CSS 的属性值

我们在写 CSS 的时候,有时候为了 hack 写很多带有前缀的属性。例如:

-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);

如果我们突然想修改一下旋转的角度值,那么我们就需要依次修改或者按住 Ctrl 多个选中进行修改。使用 Emmet 的话,就方便多了,我们只需要修改其中一个,然后摁下 Shift+Ctrl+R 键即可更新其他的相关属性值。

将图片资源转换成 data url 形式

data url 图片具有很多优点,在某些情况下比较实用,但是将图片转换成 data url 格式就比较麻烦了,得使用一些工具。而在 Emmet 中,将光标移动到 background: url() 中的图片位置的地方,按下Ctrl+’ 即可将图片编码成 data url 格式。当然,前提条件是图片资源引用正确。

除此之外,Emmet 还有一些其他的诸如快速跳转、计算等等常用功能,在这里只是介绍了几个更常用的功能,有兴趣的朋友可以打开Emmet Action 的官方文档看一下 Demo,这里不再赘述。

使用 Emmet 提高编写 CSS 的效率

在前面,潜行者 m 介绍了 Emmet 的功能如何使用 Emmet 来生成 HTML 代码,这次再来讲解一下如何使用 Emmet 提高 CSS 编写效率。

首先,Sublime Text 2 已经提供了比较强大的 CSS 样式所写方法来提高 CSS 编写效率。例如编写 position: absolute; 这一个属性,我们只需要输入 posa 这四个字母即可。它会弹出缩写样式的提示:

Sublime text 2 快速生成 CSS 代码

你不妨在编写 CSS 的时候,留意一下 ST2 提供了哪些属性的缩写方法,这样就可以提高一定的效率了。但是 Emmet 提供了更多的功能,请往下看。

简写属性和属性值

如果你想生成 width:100px; 你只需要输入 w100 就可以了,因为 Emmet 的默认设置 w 是 width 的缩写,后面紧跟的数字就是属性值。默认的属性值单位是 px ,你可以在值的后面紧跟字符生成单位,可以是任意字符。例如,w100foo 会生成 width:100foo; 这样一条语句。你同样也可以简写属性单位,如果你紧跟属性值后面的字符是 p ,那么将会生成 width:100%; 这样的语句,其中 p 表示百分比单位。与此类似的还有:e → em; x → ex。

例如 margin 这样的属性,可能并不是一个属性值,生成多个属性值需要用横杠(-)连接两个属性值,因为 Emmet 的指令中是不允许空格的。例如使用 m10-20 这条命令可以生成 margin: 10px 20px; 这样一条语句。如果你想生成负值,多加一条横杠即可。需要注意的是,如果你对每个属性都指定了单位,那么不需要使用横杠分割。例如使用 m10ff20ff 这条命令可以生成 margin: 10ff 20ff; 这条语句,如果你在 20ff 前面加了横杠的话,20ff 就会变成负值了。

如果你想一次生成多条语句,可以使用 ‘+’ 连接两条语句,例如使用 h10p+m5e 可以生成 height: 10%;margin: 5em; 这两条语句。

颜色值也是可以快速生成的,例如 c#3color: #333;,更复杂一点的,使用 <code>bd5#0s 可以生成 border: 5px #000 solid; 这样一句。下面是规则:

#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00

生成 !important 这条语句也当然很简单,只需要一个 ‘!’ 就可以了。

增加额外的选项

使用 @f 即可生成 CSS3 中的 font-face 的代码结构:

@font-face {
font-family:;
src:url();
}

但是这个结构太简单,不包含一些其他的 font-face 的属性,诸如 background-image、 border-radius、 font、@font-face、 text-outline、 text-shadow 等属性,我们可以在生成的时候输入 ‘+’ 生成增强的结构,例如我们可以输入 @f+ 命令,即可输出选项增强版的 font-face 结构:

@font-face {
font-family: ‘FontName’;
src: url(‘FileName.eot’);
src: url(‘FileName.eot?#iefix’) format(‘embedded-opentype’),
url(‘FileName.woff’) format(‘woff’),
url(‘FileName.ttf’) format(‘truetype’),
url(‘FileName.svg#FontName’) format(‘svg’);
font-style: normal;
font-weight: normal;
}

增加实验性前缀(Vendor Prefixes)

CSS3 等现在还没有出正式的 W3C 规范,但是很多浏览器已经实现了对应的功能,仅作为测试只用,所以在属性前面加上自己独特的实验性前缀,不同的浏览器只会识别带有自己规定前缀的样式。然而为了实现兼容性,我们不得不编写大量的冗余代码,而且要加上对应的前缀。使用 Emmet 可以快速生成带有前缀的 CSS3 属性。

ST2 已经内置了一些常见的需要实验性前缀的 CSS3 属性,例如输入 trf 会弹出提示,然后敲击回车键即可生成。而 Emmet 增强了这个功能。在任意字符前面加上一条横杠(-),即可生成该属性的带前缀代码,例如输入 -foo-css,会生成:

-webkit-foo-css: ;
 -moz-foo-css: ;
 -ms-foo-css: ;
 -o-foo-css: ;
 foo-css: ;

虽然 foo-css 并不是什么属性,但是照样可以生成。此外,你还可以详细的控制具体生成哪几个浏览器前缀或者先后顺序,使用 -wm-trf 即可生成:

-webkit-transform: ;
 -moz-transform: ;
 transform: ;

可想而知,w 就是 webkit 前缀的缩写,m 是 moz 前缀缩写,s 是 ms 前缀缩写,o 就是 opera 浏览器前缀的缩写。如果使用 -osmw-abc 即可生成:

-o-abc: ;
 -ms-abc: ;
 -moz-abc: ;
 -webkit-abc: ;
 abc: ;

生成渐变背景

CSS3 中新增加了一条属性 linear-gradient 使用这个属性可以直接制作出渐变的效果。但是这个属性的参数比较复杂,而且需要添加实验性前缀,无疑需要生成大量代码。而在 Emmet 中使用 lg() 指令即可快速生成,例如:使用 <code>lg(left, #fff 50%, #000) 可以直接生成:

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
 background-image: -webkit-linear-gradient(left, #fff 50%, #000);
 background-image: -moz-linear-gradient(left, #fff 50%, #000);
 background-image: -o-linear-gradient(left, #fff 50%, #000);
 background-image: linear-gradient(left, #fff 50%, #000);

直接帮你生成好了浏览器前缀。

Emmet 的还有一些其他的强大功能,将在后面继续讲解介绍,尽请关注。

Emmet 生成 HTML 的语法

在上篇文章前端开发神器 Emmet 介绍中,我简单的介绍了一下 Emmet ,并且用了一句指令迅速生成了一大片 HTML 代码。本文,就会介绍 Emmet 的 HTML 语法,看完之后,你就会看懂并且写出那句代码了。

现在,打开你的 ST2 然后新建一个 HTML 文档,跟着文章,即时输入对应的指令然后亲自尝试一下!

生成 HTML 文档初始结构

HTML 文档的初始结构,就是包括 doctype、html、head、body 以及 meta 等内容。你只需要输入一个 “!” 就可以生成一个 HTML5 的标准文档初始结构,你没有看错,输入一个感叹号(当然是英文符号),然后摁下 TAB 键,就会发现生成了下面的结构:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>
这就是一个 HTML5 的标准结构,也是默认的 HTML 结构。如果你想生成 HTML4 的过渡型结构,那么输入指令 `html:xt` 即可生成如下结构:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>
Emmet 会自动把 doctype 给你补全了,怎么样,这样的功能会不会让你动心?简单总结一下常用的 HTML 结构指令: * `html:5` `或者 !` 生成 HTML5 结构 * `html:xt` 生成 HTML4 过渡型 * `html:4s` 生成 HTML4 严格型 ## 生成带有 id 、class 的 HTML 标签 Emmet 的语法有点类似 CSS 的语法,生成 id 为 aaa 的 div 标签,我们只需要编写下面指令:
#aaa
Emmet 默认的标签为 div ,如果我们不给出标签名称的话,默认就生成 div 标签。如果编写一个 class 为 bbb 的 span 标签,我们需要编写下面指令:
span.bbb
然后就生成了对应的结构。同理,如果想要编写一个 id 为 ccc 的 class 为 ddd 的 ul 标签,我们可以这样写:
ul#ccc.ddd
很简单吧?比你用手写 id 、class 方便多了吧 ## 生成后代:> 大于号表示后面要生成的内容是当前标签的后代。例如我要生成一个无序列表,而且被 class 为 aaa 的 div 包裹,那么可以使用下面指令:
div.aaa>ul>li
可以生成如下的结构:
<div>
    <ul>
        <li></li>
    </ul>
</div>

生成兄弟:+

上面是生成下级元素,如果想要生成平级的元素,就需要使用 + 号。例如下面指令:

div+p+bq`
就可以生成如下的 HTML 结构:

`<div></div>
<p></p>
<blockquote></blockquote>`

生成上级元素:^

上级 (Climb-up)元素是什么意思呢?前面咱们说过了生成下级元素的符号“>”,当使用 div>ul>li 的指令之后,再继续写下去,那么后续内容都是在 li 下级的。如果我想编写一个跟 ul 平级的 span 标签,那么我需要先用 “^” 提升一下层次。例如:

div>ul>li^span
就会生成如下结构:
<div>
    <ul>
        <li></li>
    </ul>
    <span></span>
</div>
如果我想相对与 div 生成一个平级元素,那么就再上升一个层次,多用一个“^”符号:
div>ul>li^^span

重复生成多份:*

特别是一个无序列表,ul 下面的 li 肯定不只是一份,通常要生成很多个 li 标签。那么我们可以直接在 li 后面 * 上一些数字:

ul>li*5
这样就直接生成五个项目的无序列表了。如果想要生成多份其他结构,方法类似。 ## 生成分组:() 用括号进行分组,这样可以更加明确要生成的结构,特别是层次关系,例如:
`div>(header>ul>li*2>a)+footer>p`
这样很明显就可以看出层次关系和并列关系,生成如下结构:
`<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>`
此外,分组还可以很方便的结合上面说的 “*” 符号生成重复结构:
`(div>dl>(dt+dd)*3)+footer>p`
生成结构:
`<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>`

生成自定义属性:[attr]

a 标签中往往需要附带 href 属性和 title 属性,如果我们想生成一个 href 为 “http://www.qianxingzhem.com” ,title 为“潜行者m 博客”的 a 标签,可以这样写:

a[href="http://www.qianxingzhem.com" title="潜行者m 博客"]
其他标签和属性都类似。 ## 对生成内容编号:$ 例如无序列表,我想为五个个 li 增加一个 class 属性值 item1 ,然后依次递增从 1-5,那么就需要使用 $ 符号:
`ul>li.item$*5`
这样就生成了如下结构:
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>
$ 就表示一位数字,只出现一个的话,就从1开始。如果出现多个,就从0开始。如果我想生成三位数的序号,那么要写三个 $:
`ul>li.item$$$*5`
输出:
`<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>`
只能这样单调的生成序号?对于强大的 Emmet 来说,肯定不会会了,我们也可以在 $ 后面增加 @- 来实现倒序排列:
`ul>li.item$@-*5`
生成如下结构:
`<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>`
同样,我们也可以使用 @N 指定开始的序号:
`ul>li.item$@3*5`
这样就会从 3 开始排序,生成如下代码:
`<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>`
配合上面倒序输出,可以这样写:
`ul>li.item$@-3*5`
生成的就是以 3 为底倒序:
`<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>`

生成文本内容:{}

上面讲解了如何生成 HTML 标签,那里面的内容呢?当然也可以生成了:

a[href="http://www.qianxingzhem.com"]{点击这里到 潜行者m 的博客}

这样就生成了一个到我博客的超链接了。在生成内容的时候,特别要注意前后的符号关系,虽然 a>{Click me} 和 a{Click me} 生成的结构是相同的,但是加上其他的内容就不一定了,例如:

`<!– a{click}+b{here} –>
<a href=””>click</a><b>here</b>

<!– a>{click}+b{here} –>
<a href=””>click<b>here</b></a>`
这样就生成了完全不同的结构,注意这些小细节哦。

不要有空格

在写指令的时候,你可能为了代码的可读性,使用一些空格什么的排版一下。这就会导致代码无法使用。例如下面这句:

`(header > ul.nav > li*5) + footer

而去掉空格之后,就可以正常执行生成结构了。HTML 语法部分说完了,现在回头看看第一篇文字,你是否已经看懂了那一串指令?下一篇将会讲解快速编写 CSS 的技巧。

前端开发神器 Emmet 介绍

在前端开发的过程中,一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等。于是,就有了 Emmet,它可以极大的提高代码编写的效率,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发。

你可能听说过一款强大的功能相似的工具:Zen Coding,那个比较老了,而现在的 Emmet 则是 Zen Coding 的升级版,由 Zen Coding 的原作者进行开发等。

Emmet 严格意义上来说,并不是一款软件或者工具,它是一款编辑器插件,必须要基于某个编辑器使用。目前它支持如下编辑器:

在 Sublime text 2 中安装 Emmet

Sbulime text 2 安装插件肯定要通过 Package Control 这个插件了,如果你还没有安装这个插件,抓紧先去安装一下吧。安装完成之后,我们摁下“shift + ctrl + p”呼出面板,输入“pci”即可锁定“Package Control:Install Package”这个功能,回车之后就可以看到一个列表,我们继续输入“emmet”即可找到这个插件,回车之后等待一会就安装完成了。

sublime text 2 安装 emmet

开始使用 Emmet

Emmet 可以快速的编写 HTML、CSS 以及实现其他的功能。它根据当前文件的解析模式来判断要使用 HTML 语法还是 CSS 语法来解析。例如当前文件的后缀为 .html 那 Sublime text 2 就会用 HTML 的解析模式来解析高亮这个文件,Emmet 遇到里面的指令就会根据 HTML 的语法把它编译成 HTML 结构。如果是在一个 .c 的 C 语言 文件中,你写出来的用于编译 HTML 指令就不会被 Emmet 识别编译。

此外,在没有后缀的文件中,你可以摁下“shift + ctrl + p”呼出面板,输入“seth”就可以设置当前文件的解析模式为 HTML 。了解这些之后,下面我们来见证强大的 Emmet 。

如果让你编写下面的这个 HTML 结构,你需要多长时间?

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

然而,这一切你只需要编写下面这一句按照 Emmet 语法写出来的语句,然后用 Emmet 编译一下,就可以生成了!

#page>div.logo+ul#navigation>li*5>a{Item $}

我们把它复制到 Sublime text 2 中已经打开的 HTML 文件中,这时候紧跟着敲击一下 TAB 键,见证奇迹的时刻到来了。

怎么样?很神奇吧,仅仅写一行代码,就可以生成这么一个复杂的 HTML 结构,而且还可以生成对应的 class 、id 和有序号的内容。而且 Emmet 的语法很简单,虽然你现在可能还看不懂,后面的系列教程会详细讲解它的语法,你现在只需要知道 Emmet 的工作流程:打开 HTML 或 CSS 文件->按语法编写指令->摁下 TAB 键->生成!

在 Sublime Text 2 中使用 SFTP 插件快速编辑远程服务器文件

Sublime Text 2 本身并不强大,但是它方便使用插件扩展功能,所以变得很强大。今天 潜行者 m 介绍一个很实用的插件 SFTP ,可以大大提高前端工作效率。

常见的工作流程

有时候修改一些网站上的文件,通常是下面这样的流程:使用 FTP/SFTP 连接到远程服务器 -> 下载要修改的文件 -> 使用 ST2 修改文件 -> 保存然后拖进 FTP 中 -> 刷新网站。

很明显这样的工作流程效率很低,特别是你修改一句代码的时候,为了即时生效,也需要重复切换几个窗口重复这个过程。于是就有了 SFTP 这个插件。

它主要功能就是通过 FTP/SFTP 连接远程服务器并获取文件列表,可以选择下载编辑、重命名、删除等等操作,点下载编辑之后,可以打开这个文件进行修改。修改完成之后,保存一下会自动上传到远程的服务器上面。

使用这个插件之后,工作流程就变成了:使用 SFTP 插件打开文件 -> 使用 ST2 编辑修改文件 -> 保存文件 -> 刷新页面。效率提升了至少一倍以上,下面就来介绍一下具体的使用方法。

SFTP 使用方法

先要安装这个插件,打开 Sublime Text 2 ,摁下 shift + ctrl + p 键,呼出面板,使用 Package Control 这个插件安装。输入 “pci” 敲击回车,再输入 “sftp” 即可安装这个插件。安装完之后,就要开始配置服务器使用了。

第一步:配置 FTP/SFTP 服务器信息

安装完插件之后,找到 “文件” 菜单,找到 “SFTP/FTP” 选项,点击配置:

在 SFTP 中配置远程服务器信息

点击之后,会弹出一个新的窗口,这是一个配置文件

SFTP 中服务器的配置参数

一般就是配置一下我箭头所指的四个参数,包括连接方式、服务器地址、用户名、密码等。如果你的服务器还有其他配置,你也可以对照注释设置一下。一般为了方便,还会设置一下“路径”,这样直接可以看到想要修改的文件列表。

配置完成之后,我们保存,然后输入一个名字作为标识。

第二步:连接服务器获取文件列表

还是点击 “文件” 选择 “SFTP/FTP” 中的查看服务器列表

使用 SFTP 连接远程服务器

会弹出刚刚配置好的服务器,我们可以点击需要连接的 FTP 服务器,这时候就链接上了并且弹出文件列表

SFTP 连接服务器获取文件列表

这时候点击一个文件,就可以弹出一些选项

使用 SFTP 操作远程文件

就可以根据你自己的需要,对文件编辑、重命名什么的了。点击编辑之后,会在本地打开,然后可以修改。摁下 ctrl + s 保存文件的时候,就会自动上传文件。

如果需要查看服务器上的别的文件,或者需要更多的功能,可以直接在当前文件中右击,选择 “SFTP/FTP” 就会弹出更多选项可以使用,没法截图所以不再赘述。更多的功能,就交给你自己探索了!

让浏览者禁用响应式布局界面

  • 原文:Letting users disable responsive layout
  • 作者:456 Berea Street 翻译者:潜行者m
  • 版权声明:版权归原作者所有,翻译仅作学习交流目的!
    响应式网站设计(Responsive Web Design)使用强大的媒体查询(media querie)让网站可以根据浏览者的浏览设备分辨率进行样式调整。但是,这样也产生了一个问题:有些人并不希望网站的外观在不同的浏览设备中发生改变。因为改变了之后,可能会让人产生疑问,认为自己在访问另一个网站。

虽然我不认为这会影响一大批人,但是绝大多数人肯定不懂响应式网站设计。如果有个人在电脑、平板电脑或者智能手机上访问同一个网站结果发现外观效果不同,他可能会感到很困惑。Bruce Lawson 在文章 Turning off responsive web design 中就提到了一个真实的例子。

一个同事也提到了另一个案例,响应式布局并没有很完美的客户端支持。客户经常提到布局问题等等。试想一下,如果你收到了一个邮件提到的是关于你用电脑访问看到的外观或内容,那么你用平板或者智能手机可能看不到相同的外观或者内容。当然,这种情况可能不多,但是这时候如果有一个可以切换或者关掉响应式布局的功能就好多了。

尽管这个功能不会让很多人受益,但是做这么个功能也并不是很复杂的事情。所以我在一些项目中增加了这个功能,现在想跟大家分享一下。这个方法跟 Adrian Roselli 写的 Letting Mobile Users See Desktop View of RWD Site 这篇文章中的很相似。这个功能不是很复杂,更不是什么革命性的改进,但是可以通过很多方法来实现。

如何命名响应式布局开关

有必要讨论一下怎么在网页中称呼这个功能。通常的名字是:查看桌面版布局、桌面版、完整版。而我称呼它为:查看固定宽度下的布局(当切换之后变成“查看弹性宽度下的布局”)。我并不确定这样可以帮助用户明白之间的异同,但是我认为这比起“桌面端”和“手机端”来说,描述的更加准确。有些人的浏览器窗口可能比 960px 还窄,也可能比 1200px 窄,或者是他们自己拖动设置的大小,虽然满足了媒体查询中定义的宽度,但是能在网页中显示“切换成桌面版”?

HTML 和 CSS 代码

我做了一个 Disable responsive layout 演示页面来展示效果。如果你打开了这个页面,并且调整你的浏览器窗口小于 960px ,一个就跟超链接似的开关就会显示出来,点击就可以切换。我觉得只有在媒体查询工作的时候才显示这个切换开关——如果响应式布局没有被触发,那切换个毛啊。

我选择直接把这个切换链接写进 HTML 中,而不是使用 JavaScript 临时生成。这是因为我使用后台(可以是任何后台语言,本文中使用 PHP 做演示)来处理 cookie ,这样就可以记录你是否选择了禁用响应式布局。

在前面的 demo 页面中,写入了如下的 HTML 结构,你可以自己定义:

&lt;div id="toggle"&gt;
    &lt;a href="?fixedwidth=1"&gt;Switch to fixed width layout&lt;/a&gt;
&lt;/div&gt;`</pre>
使用 CSS 让其隐藏,不要写进媒体查询中:
<pre>`#toggle {
    display:none;
}
.fixed #toggle {
    display:block;
}`</pre>
为了方便切换,我们增加了 fixed 类。这样切换的时候,只需要对 html 对象加上 fixed 类就可以了。如果 html 对象中有这个类,就说明用户已经禁用了响应式布局,所以需要显示开关,方便他们再次启用。

下面 CSS 片段包含进媒体查询中:
<pre>`@media only screen and (max-width:960px) {

    #toggle {
        display:block;
    }

}`</pre>
上面代码实现当宽度小于 960px 的时候,触发媒体查询功能显示这个开关。如果用户已经禁用了响应式布局,上面代码将不会被加载(实现方法见下文)。

如果你的媒体查询 CSS 文件没有在一个单独的文件,要实现这个功能,可能需要做的更多工作。你可以在媒体查询的规则前面加上前缀 html:not(.fixed) 或者不使用媒体查询创建单独的文件。

##  JavaScript 代码

如果媒体查询的 CSS 代码被禁用,你要确保与响应式布局无关的 JavaScript 和 CSS 代码也被禁用。为了达到这个目的,你可以将下面的脚本放在单独的文件中,你也可以使用这种方法处理对应的 CSS (使用 PHP 处理),不加载这个文件。如果你没有分割成单独的文件,那么就通过检查 HTML 元素中是否有 fixed 这个类名在启用响应式布局功能脚本:
<pre>`&lt;script&gt;
if ( !document.documentElement.className.match(/(\\s|^)fixed(\\s|$)/) ) {
    // Responsive scripts go here, likely with additional checks
    // for viewport width, media query support etc.
}
&lt;/script&gt;`</pre>

##  PHP 代码

在本文 Demo 中,我使用 PHP 来处理 cookie 和提供切换响应式布局的功能。你可以使用 JavaScript 来实现这样的功能,但是这样在禁用 JavaScript 的客户端无法生效。毕竟这不是很关键的功能,如果你选择使用 JavaScript 请记住如果客户端不支持 JavaScript 的时候,也要显示出一个可以看到的链接。

下面就是一个简单的 HTML 结构和必须的 PHP 代码:
<pre>`&lt;?php
    $fixedwidth = '';
    //检查是否有 $fixedwidth 这个变量,然后获取
    if ( isset($_GET['fixedwidth']) &amp;&amp; ($_GET['fixedwidth'] != "") ) {
        $fixedwidth = $_GET['fixedwidth'];
    }
    //检查是否有对应的 cookie 内容
    if ( isset($_COOKIE['fixedwidth']) ) {
        if ( $fixedwidth == '0' ) {
            // 如果值为 0 就清除 cookie
            setcookie('fixedwidth', '', time() - 60, '/');
        } else {
            // 如果值不为零,就获取
            $fixedwidth = '1';
        }
    } else if ( $fixedwidth == '1') {
        // 浏览者想要禁用响应式布局功能,设置一个 cookie
        $expires = 60 * 60 * 24 * 60 + time(); 
        setcookie('fixedwidth', '1', $expires, '/');
    }
?&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en" &lt;?php if ($fixedwidth == '1') { echo 'class="fixed"'; } ?&gt;&gt;
&lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;Document title&lt;/title&gt;
&lt;?php
// 只在响应式布局可用的时候插入 meta[name="viewport"] 对象
if ( $fixedwidth != '1' ): ?&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
&lt;?php endif; ?&gt;
    &lt;link rel="stylesheet" href="main.css" /&gt;
&lt;?php
// 只在响应式布局可用的时候,插入 CSS 文件
if ( $fixedwidth != '1' ): ?&gt;
    &lt;link rel="stylesheet" href="mq.css" /&gt;
&lt;?php endif; ?&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Document title&lt;/h1&gt;
    &lt;div id="toggle"&gt;
&lt;?php
// Responsive is disabled, so insert a switch to flexible width
if ( $fixedwidth == '1' ): ?&gt;
        &lt;a href="&lt;?php echo $_SERVER["SCRIPT_NAME"] ?&gt;?fixedwidth=0"&gt;Switch to flexible width layout&lt;/a&gt;
&lt;?php
// Responsive is not disabled, so insert a switch to fixed width
else: ?&gt;
        &lt;a href="&lt;?php echo $_SERVER["SCRIPT_NAME"] ?&gt;?fixedwidth=1"&gt;Switch to fixed width layout&lt;/a&gt;
&lt;?php endif; ?&gt;
    &lt;/div&gt;
    &lt;script&gt;
    if ( !document.documentElement.className.match(/(\\s|^)fixed(\\s|$)/) ) {
        // Responsive scripts go here
    }
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

上面的 PHP 代码肯定能进一步改进,这里只是抛砖引玉给你一个思路,你可以自己编写更符合你要求的代码。

这个功能应该在客户端中吗?

你可能会产生浏览器是否应该增加切换响应式布局功能的疑问。浏览器可能需要禁止他们自身对媒体查询的支持,而是通过网站的设置来默认显示“全尺寸”或者“桌面版”。这就是为什么我个人喜好直接开发网站,但是其他开发者却相反的先使用媒体查询功能开发“手机端”的网站,然后再开发“桌面端”布局。

如果你使用媒体查询为老的浏览器隐藏 CSS3 的功能,这也会产生问题。一个浏览器的禁用媒体查询的功能,可能会禁用所有的媒体查询中的代码,这样会产生很多布局的问题。

所以,这个功能应该交给咱们 Web 开发者来做。如果你需要这个功能,上面提供了一个不错的思路。

译者总结

禁用响应式布局确实是一个必要的功能。Bruce Lawson 在 Turning off responsive web design 这篇文章中,提到了一个小故事。说他的父亲在用手机访问一个网站的时候,发现跟电脑访问时不一样,而怀疑自己是不是在访问想访问的网站,然后关掉了。

潜行者m 曾经使用平板和智能手机做过测试,虽然智能设备上的浏览器通常可以设置“使用什么样的客户端模式(桌面、手机)来访问网站”,但是响应式布局使用的媒体查询技术,直接根据设备的参数等进行改变,不会因为客户端的代理模式(User-Agent)。特别是使用手机想要看到网站的桌面版效果,就很难实现了。

通过 JavaScript 来实现这个功能也非常简单,但是使用 PHP 更加有优势。这样可以减少不必要的 CSS 、JS 文件的引入,增强前端性能。但是 PHP 的移植性不太好。所以也可以考虑使用 JavaScript 来实现。

如果想要你的网站更加完善,如果使用了响应式布局的设计,最好加上一个禁用选项。

使用预加载提速你的网站

  • 原文:Speed Up Your Site Using Prefetching
  • 原作者:Jon Fox 译者:潜行者m
  • 版权声明:版权归原作者所有,翻译仅供学习使用,内容有修改,转载请先开启节操模式,保留上面信息。
    预加载(prefetching)这个东西很好理解。我们都知道浏览器可能会在渲染之前需要一些资源。预加载不仅仅提前告诉浏览器这个页面或者可能用到的资源,而且还通常提前保存这个资源到浏览器的缓存,这样就可以以非阻塞的方式请求、下载对应资源提高效率。

有很多方法可以实现预加载,但是这里有三种比较简单实用的方法。

DNS 预加载

DNS 是将域名转换成服务器 IP 地址的协议。DNS 的解析速度通常是非常快的一般在 100ms 以内,但是因为 DNS 解析要发生在任何对服务器的请求之前,这样会造成一个级联效应(cascade effect),这样就会增加页面加载的时间。浏览器解析页面或者 session 的时候会访问静态文件加速服务器的域名,会使用诸如 images.mydomin.com 等域名来加载静态文件。有些浏览器支持 meta 标签可以提前声明这些需要用到的静态加速服务器域名,这样浏览器就可以预先解析它们,调用资源直接通过解析后的 IP ,不需要再进行 DNS 解析。写法如下:

<link href=”//my.domain.com” rel=”dns-prefetch” />
<link href=”http://my.domain.com/" rel=”prefetch” /> <!– IE9+ –>

增加了这个标签之后,支持它的浏览器将会提前进行域名的 DNS 解析,而不用等待请求资源的时候再去解析它。这项技术一般用在浏览者有可能去的页面,提前对页面进行 DNS 的预加载。Chrome、Firefox 和 IE9+ 支持这个功能。

即使看上去只是节省了几百毫秒而已,但是合计起来也是不少的时间。它是一种安全的优化方法同时很容易实现。我很好奇有多少网站使用了这项技术,我打开了 Alexa 排名前 100K 的网站。但是只有 552 个网站(使用率 0.55%)正确的使用了 DNS 预加载技术。这么简单的技术应该被更多的网站使用。

资源预加载

在现在的网站中,网页的大小很大程度上取决于网页中图片的大小。如果提前请求并且下载这些图片,可以有明显的提速效果。大多数情况下,网页作者知道一个图片什么时候需要加载这样就不需要提前在浏览器中声明,例如使用 ajax 或者浏览者浏览页面时触发的一些事件来加载一个图片。资源预加载就是提前让浏览器加载图片、脚本、样式或者其他资源。不仅仅用于加载图片,可以让所有类型的资源提前被缓存在浏览器的缓存中。

这项技术是最久远古老和最经常使用的,抱歉,我无法给出具体的统计数字。仍然有很多网站没有正确的使用这项技术,然而仅仅预加载几张图片就可以制造巨大的用户体验差异。

页面预加载、预渲染

页面预加载就像资源预加载,不同的是页面预加载提前加载了它本身。这项技术首先在 Firefox 浏览器中可以使用。你可以使用下面的标签来测试一下别的浏览器看看这个页面(或者相关资源)能否被提前加载:

    <link href=”/my-next-page.htm” rel=”prefetch” />

不同于预渲染,浏览器不仅仅会下载这个页面,而且还会把这个页面需要用到的资源一块下载下来。通常在内存中渲染这个页面(不会被浏览者看到)这样当请求这个页面的时候就可以很快显示在浏览者面前。预渲染最先在 chrome 中可以使用。你可以在页面中添加下面标签来实现预渲染:

    <link href=”http://mydomain.com/my-next-page.htm" rel=”prerender” />

这项技术在目前非常有争议,在其他技术中也很有风险。预渲染的那个页面必须非常确定是浏览者即将浏览的页面。比较常见的例子是 Google 搜索,它将会预渲染页第一个返回页面。在 Alexa 排行榜前 100K 个站点中,我只发现了 95 个使用这项技术的例子。即使这项技术还不是很成熟也无法适应所有需求,但是我认为很多网站应该用一下来提升用户体验。

争议

预加载一直是有争议的话题。很多人们认为它没有效果而且在浪费宽带。而且它还用到一些不重要的客户端的资源(尤其是很多手机设备)。此外值得一提的是,预加载、预渲染页面可能会导致一些浏览者统计和访问日志记录的问题,因为系统不知道浏览者是否真正访问过这个页面还是通过预加载请求的。

总结

尽管有一些问题,但是预加载还是有很大优势的。请求的速度我们一般无法控制,所以把资源提前尽可能多的放入缓存是我们解决问题的方法。当用户在等待请求的时候,成本太高了,我们可以使用这些技术大大的提升性能。如果你还没有做这些,建议你去应用这些技术到你的网站上。结果可能不一样,所以你可以使用专业工具(例如:Torbit)来检查预加载技术帮你做了多少。

在页面中添加滚动一定距离后跟随滚动模块的方法和注意事项

现在在网页中,经常可以看到一些滚动跟随模块。比较常见的两种场景:

  1. 页面滚动到了导航条位置,然后导航条就固定到页面顶端,跟随滚动
  2. 边栏高度不如正文高,滚动到边栏末端,出现一个跟随页面的滚动的边栏模块
    本文就是来介绍如何实现这个效果,并且解决这个效果带来的一些问题。

实现的基本原理

固定到页面的某个位置,并且跟随页面滚动,实际上就是用到了一个 CSS 中的 position 属性值 fixed。对 HTML 对象指定 position 属性为 fixed 之后,这个对象就会保证位置不变,跟随页面滚动。但是这个属性在早期的 IE 浏览器中是不支持的,有很多 hack 方法,在这里不再赘述。

那么,要想实现 滚动一定距离 之后,某个模块跟随页面滚动,要做的就是用 Javascript 来监控页面的滚动事件,判断滚动距离是否达到目标位置,然后对要跟随滚动的模块修改 position 属性为 fixed。当然,也可以提前做好一个滚动跟随模块,用 display 属性隐藏起来,等滚动到了一定距离,取消显示。至于怎么出现和出现什么内容,就看你自己的需求了。用 jQuery 监控方法如下:

$(window).scroll(function(){
if ($(window).scrollTop()>64){
$(“#menu”).css({position:”fixed”,left:”0px”,top:”0px”});
}else{
$(“#menu”).css({position: “relative”});
}
});

这里,对 window 对象使用 jQuery 的 scroll 方法,用来监控滚动事件。当页面滚动的时候,就会触发定义的函数。函数的功能也比较简单,使用 scrollTop 方法来获取当前网页滚动的位置距离页面顶部多高(单位 px),然后用 if 语句判断,当滚动距离页面顶端超过 64px 之后,就对 id 为 menu 的模块修改 CSS 样式,让它跟随页面滚动。当小于这个高度的时候,再修改回去。

虽然功能比较简陋,但大体的原理就是这样,更多具体的效果,请自由发挥。

两个跟随滚动插件

神说,这么好的效果应该做成插件,于是就有了插件。这里简单的介绍两款基于 jQuery 的插件:Sidebar FollowScroll Follow

这是 mg12 写的一个小插件,代码比较少,功能也比较简单,所以使用起来就比较方便。看名字就可以知道,主要用于边栏模块的跟随滚动。代码页比较少,有兴趣的同学可以看一下。

Sidebar Follow官方主页和使用说明

Scroll Follow

这是个比较老功能比较强大的插件,可以实现各种你想要的跟随滚动效果。具体的下载地址和使用方法,也不再赘述了。

Scroll Follow官方主页和使用说明

添加跟随滚动模块的注意事项

本文介绍的技术其实没有什么技术含量,写本文的最主要的目的,是想介绍下面这两个注意事项。

尽量少的使用

再好的功能,也要适度使用。屏幕的空间本来就有限,加上一个很高的导航条,再加上左下角、右下角的广告,右边再来个边栏跟随,这样的页面你如何才能专注的看正文内容?所以要尽量多的留出浏览者阅读的空间,适度的补充内容,尽量保证页面的整洁。才能有一个比较好的用户体验。

设置合理的结构防止页面塌陷

这个问题才是本文的重点,网上很多采用这个效果的页面都中了这个问题。先来看看问题演示 demo

塌陷的具体问题效果很明显,就是下面的内容突然跑上去了,产生了回流(reflow)。回流简单的说,就是当你页面中某个部分突然消失了,浏览器就需要重新渲染网页的内容。潜行者M的 Demo 页面由于结构比较简单,所以具体效果只是内容突然上去而已。但是对于结构比较复杂、代码比较多的网站来说,一旦出现回流,浏览器就要重新计算渲染,页面就会卡一下子。如果浏览者的电脑配置比较低,甚至会卡一下电脑。如果浏览者的浏览器版本比较低,可能会导致页面错乱。

事关用户体验的问题,是不能容忍的。问题的原因,就是突然改变了相关结构的 CSS 属性导致。就本例而言,原来的导航条 position 属性是 relative ,在页面中占据一定空间。突然改成了 fixed 脱离了文档流,自然浏览器要把原来位置补上,重新渲染。

所以,在设计页面跟随滚动模块之前,一定要考虑到这个细节。最好设置比较好的 HTML 结构,撑起来。也可以在要滚动的模块外面包裹一层结构,用来占位。也可以在一开始,就让滚动模块脱离文档流。潜行者M的建议是,最好专门设置一个用来滚动的模块,先隐藏,然后触发显示。

用 jQuery 制作一个简单的遮罩弹窗效果教程

客户的网站上突然需要一个遮罩弹窗效果,也可以称作暗箱之类的,具体效果就是网页中背景变成半透明,然后在屏幕中间出现一个菜单之类的东西。这种效果在网上很常见,例如:QQ空间浏览相册等。这种效果的好处就是,可以让用户聚焦到弹出的菜单中。

神说,有代码的文章,应该有个 Demo ,于是就有了 Demo

HTML 结构

首先先来分析一下这个过程:触发某个事件(例如点击按钮),然后出现一个背景遮罩上面还有一个内容层。触发的按钮,我在这里用 div 来代替,并且使用 click 点击事件来演示。那么我们的 HTML 结构就很明确了。

 <div class="click">点击这里</div>
 <div class="click1">效果增强版的</div>
 <div class="bg"></div>
 <div class="content">这里是正文内容</div>

CSS 代码

对于遮罩效果的 CSS 代码是最关键的。遮罩用到了两个 div ,一个作为背景,要覆盖整个网页,另一个是内容显示层,通常要居中处理。

.bg{display:none;position:fixed;width:100%;height:100%;background:#000;z-index:2;top:0;left:0;opacity:0.7;}
.content{display:none;width:500px;height:300px;position:fixed;top:50%;margin-top:-150px;background:#fff;z-index:3;left:50%;margin-left:-250px;}

简单解释一下,首先要隐藏起来,之后用 jQuery 触发显示。之后指定 position 的属性为 fixed,因为这样,才能激活 top 、left 、bottom 、right 、z-index这些属性,同时可以设置 width 、height 为 100% 来实现覆盖整个网页。通常情况下,一般用 absolute 属性值来实现这种效果,因为它的兼容性更好。但是在实际应用当中,当页面很长,往下滚动的时候,使用 absolute 遮罩层也会跟随滚动。对于内容层来说,比较简单,指定宽度和高度用负边距来使其居中显示。

特别要注意一点,背景层的半透明使用的是 opacity 属性,因为使用这个属性可以更好的用 jQuery 来控制。但是 fixed 、opacity 都是早期 IE 浏览器不支持的。

jQuery 代码

分析一下遮罩的交互操作,无非就是点击弹出,然后点击一下遮罩,消失。那么就直接对 CSS 进行操作即可。

   $(function(){
$(‘.click’).click(function(){
$(‘.bg’).css({‘display’:’block’});
$(‘.content’).css({‘display’:’block’});
});
$(‘.bg’).click(function(){
$(‘.bg’).css({‘display’:’none’});
$(‘.content’).css({‘display’:’none’});
});
});

这里直接使用 CSS 方法,当点击的时候改变 display 属性,此外还有很多实现方法,不再赘述。完成这些,当我们点击“点击这里”之后,就可以看到效果了。

更多技巧和方法

更平缓的显示

点击之后,突然出现并不是一个好方法。所以我又增加了一个按钮,点击之后通过 fadeIn、fadeOut 方法来控制渐隐。

 $(‘.click1’).click(function(){
$(‘.bg’).fadeIn(200);
$(‘.content’).fadeIn(400);
});
$(‘.bg’).click(function(){
$(‘.bg’).fadeOut(800);
$(‘.content’).fadeOut(800);
});

这样简单的方法,就增强了用户体验。当然,还有一些更高级的效果可以实现。

其他的实现方法

现在的方法确实足够简单,但是兼容性不够好,对于早期的 IE 浏览器不兼容。通常的做法是这样的:用 Javascript 获取整个网页的高度、宽度,赋值给遮罩层,这样即使打开遮罩滚动网页,也不会出现没有遮罩的地方。具体的代码和实现方式,请看这篇文章:简单的jQuery弹出遮罩层

差不多就是这样吧,至于内容层的展示之类的,就靠你根据具体内容自由发挥了。