前段开发

user-select介绍

前端观察 - 星期日, 01/15/2012 - 08:20

之前在《CSS的未来：一些试验性CSS属性》中有提到user-select这个属性，最近整理的时候有遇到，所以详细的了解了下，这里简单的介绍下。

这是在css3 UI规范中新增的一个功能，用来控制内容的可选择性。

用法： 1 user-select:value; 值：

auto——默认值，用户可以选中元素中的内容
none——用户不能选择元素中的任何内容
text——用户可以选择元素中的文本
element——文本可选，但仅限元素的边界内(只有IE和FF支持)
all——在编辑器内，如果双击/上下文点击发生在子元素上，改值的最高级祖先元素将被选中。
-moz-none——firefox私有，元素和子元素的文本将不可选，但是，子元素可以通过text重设回可选。

.selectDemo{ background-color:#eee; padding:20px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } 实例——用鼠标拖动或双击下面的文字试下：前端观察是一个纯粹的前端技术分享网站，本站的目的是为前端技术人员提供所需的资讯及资源。
向来中国的前端开发领域，就像一盘散沙一样，每个人每个站都各自为营，高手就像就像天空的星星一样多，但是他们的成就却很少广为传播，初学者却苦于在大海一样的设计中寻找自己的参考。
所以本站首先将是挖掘，挖掘国内优秀的原创设计及内容，加以高度的整理。
相信你在这里能够发现自己需要的东西，同时也希望各位能提供一些好的内容给我们。浏览器支持

目前，只有Gecko和webkit支持该属性，包括基本上所有版本的Firefox/Chrome/Safari，IE10中也将支持该属性。当然，各个浏览器都必须加上私有前缀。Opera尚不支持。

结语

这个属性，在之前是被用来保护网站的内容，不被用户复制和转载，从而保护资讯的版权，但是这样却对普通用户的用户体验造成了伤害，而且，并不能真正的保护页面中的内容，这对前端开发人员来说，很容易搞定的吧？ …XD

现在，HTML5蒸蒸日上，很多网站或者web app会使用到Drag and Drop技术，user-select正好在一些情境中可以用到。

当然，技术是为人服务的，怎么用都可以，但是，伤害用户体验的产品，最终是得不到用户的吧。。。

分类: 前端设计

Mozilla Boot to Gecko简介和展望

前端观察 - 星期五, 01/13/2012 - 06:22

1月7日，Mozilla中国去的工程师在深圳腾讯大厦举办了Firefox新版本体验活动，其中一个话题是关于Mozilla Boot to Gecko项目的，之前我也只是简单的听说，没有深入了解，听了来自台湾的James的分享之后，感觉是，好期待啊！

因为这还是个进行中的项目，实际的资料也不是很多，我这里也只是简单的介绍下，详细的内容等今年Q1或者Q2吧，预计到时候会有实质性的进展。

简介：

设备启动后直接进入浏览器(Firefox的内核Gecko)
完全支持HTML5
基于Android底层，嗯，Linux 内核+驱动层，仅此而已
UI和所有功能都用Gecko实现
也就是说，浏览器可以完全访问和控制设备的硬件！
基于上一点，Mozilla在和W3C device APIs工作组编写一些需要用到的api，比如：电池状态、短信、联系人、电话、媒体捕获(摄像头、话筒等)、网络信息、处理器、各种传感器等。

也就是说，B2G是一个基于浏览器的操作系统，你可以在它上面打电话、发短信、视频聊天、玩各种游戏，而这些功能，都是用HTML5来实现的。。。

显然，这是一个类似Chrome OS的项目，只是B2G针对移动终端，而Chrome OS目前还只是在上网本。。。

展望：

是的，最关键的是W3C的各种Device APIs，它们是B2G的基础，但是，也可能会让B2G死掉，因为，后面很容易就会有Boot to Webkit、Boot to Trident、Boot to Presto，甚至会有Boot to QQ。。。真的这样的话，Mozilla就又成先驱先烈了，悲催～～

当然，即便没有这些 Boot to xxx，我们也可以在移动终端的浏览器中实现所有B2G中的功能，你可以在浏览器里面打开Google contact然后直接打电话发短信，打开web QQ直接和好友视频(现在webqq的视频聊天功能还需要插件支持，而且不支持mobile)。。。

web app真正的春天，就要来了吗？

分类: 前端设计

-webkit-filter是神马？

前端观察 - 星期五, 12/23/2011 - 07:52

这两天有看到国外网站纷纷介绍-webkit-filter，开始很迷惑，丫是想要学IE吗？今天看了下，和IE的滤镜没一毛关系啊，而且，效果很赞！

这些滤镜效果最初是用于SVG的，W3C引入到CSS中，然后制定了CSS Filter Effects 1.0，现在webkit率先支持了它。

现在规范中支持的效果有：

grayscale 灰度
sepia 褐色
saturate 饱和度
hue-rotate 色相旋转
invert 反色
opacity 透明度
brightness 亮度
contrast 对比度
blur 模糊
drop-shadow 阴影

嗯，有些和CSS3重复了，不过，具体要怎么用还要看具体情况，至少我们可以用不同的方法实现同样的效果——比如透明度。

用法是标准的CSS写法：

-webkit-filter: blur(2px);

然后，Eric Bidelman写了一个demo，可以很方便的查看各种效果。但是考虑到某网站因为不明原因在国内无法访问，我将该demo页面简单的翻译了下，放到这边给大家预览，请猛击查看。

请注意，改滤镜目前只有最新的webkit nightly版本和Chrome 18.0.976以上版本才支持，所以你需要下载一个最新的版本来体验～～我用的是webkit nightly。

现在，让我们看一下一些简单的效果吧：

原图

模糊

50%灰度

100%灰度

50%褐色

100%褐色

50%亮度

100%亮度

色相

反色

饱和度

对比度

嗯，我们在手机端的各种特效如lomo、日系等，也可以在页面简单实现一些了，配合css3内阴影、遮罩、渐变等，相信不必instagram等差多少。

ps:sepia的翻译貌似有点儿问题，求专业指点。

分类: 前端设计

新版 Firefox 体验活动[深圳站]

前端观察 - 星期一, 12/19/2011 - 03:20

Firefox中国区的新版firefox体验活动，已经在国内几个城市举办过了，我去参加了11月份的广州站，很有收获的说。2012年1月7日，深圳站也将举行了～～

活动时间：2012年1月7日（下午1:30pm – 5:00pm）

活动地点：深圳市南山区高薪中一路腾讯大厦2楼多功能厅

活动内容：

Firefox 及移动版新特性演示
HTML 5特性介绍
Javascript 开发技巧

另外，据说这次还会有专门介绍Mozilla最新的B2G技术，这个好期待～～

总之，作为前端和针对移动设备的开发者，能够直接听到/看到Firefox官方的技术介绍和讲座，是个很不错的机会吧，貌似会上会有各种礼物赠送大家不要错过哦～～

报名传送门：新版 Firefox 体验活动[深圳站]

分类: 前端设计

HTML特殊字符大全

前端观察 - 星期三, 12/14/2011 - 06:59

HTML的特殊字符我们并不常用，但是有的时候却要在页面中用到这些字符，甚至有时候还需要用这些字符来实现某种特殊的视觉效果。现在，国外的设计师Neal Chester整理了一份很全的特殊字符集，我觉得这很赞～～，共享出来供大家查阅吧。

使用方法：

这些字符属于unicode字符集，所以，你的文档需要声明为UTF-8；
下面符号列表的后面有两列编号，它们并不太一样，第一列是用于HTML的，你需要在前面加上&#符号；
第二列可以用于CSS文件中，但是需要用反斜杠\转义；
第二列也可以用于JavaScript，和CSS用法一样，不过要用\u来转义。

需要主意的是：

有的字符在不同的浏览器下表现不太一样；比如小雪人 ☃ 在Firefox和Chrome下不太一样，钻石 ◆ 在IE下要比Chrome下要大一点儿；
有的字符在某个浏览器下不会显示；当然原因并不是字符代码的问题，而是浏览器的bug，比如，–在Chrome下。。。
但是，98%的字符都能在所有浏览器下正常显示的，不过如果你真的要使用，最好仔细在各个浏览器下验证一番。
经测试这些字符在Android/iOS等智能终端的识别度比较差，所以，使用的时候要特别注意移动浏览器～～

各种箭头 b.character{display:inline-block;width:2em;font-size:1.5em;} .character_list li em{margin:0 1em;display:inline-block;width:3em}

⇠ 8672 21E0
⇢ 8674 21E2
⇡ 8673 21E1
⇣ 8675 21E3
↞ 8606 219E
↠ 8608 21A0
↟ 8607 219F
↡ 8609 21A1
← 8592 2190
→ 8594 2192
↑ 8593 2191
↓ 8595 2193
↔ 8596 2194
↕ 8597 2195
⇄ 8644 21C4
⇅ 8645 21C5
↢ 8610 21A2
↣ 8611 21A3
⇞ 8670 21DE
⇟ 8671 21DF
↫ 8619 21AB
↬ 8620 21AC
⇜ 8668 21DC
⇝ 8669 21DD
↚ 8602 219A
↛ 8603 219B
↮ 8622 21AE
↭ 8621 21AD

形状

⇦ 8678 21E6
⇨ 8680 21E8
⇧ 8679 21E7
⇩ 8681 21E9
↷ 8631 21B7
↶ 8630 21B6
↻ 8635 21BB
↺ 8634 21BA
⟳ 10227 27F3
⟲ 10226 27F2
⟰ 10224 27F0
⟱ 10225 27F1
↵ 8629 21B5
↯ 8623 21AF
⇵ 8693 21F5

向右的箭头

➔ 10132 2794
➙ 10137 2799
➨ 10152 27A8
➲ 10162 27B2
➜ 10140 279C
➞ 10142 279E
➟ 10143 279F
➠ 10144 27A0
➤ 10148 27A4
➥ 10149 27A5
➦ 10150 27A6
➧ 10151 27A7
➵ 10165 27B5
➸ 10168 27B8
➼ 10172 27BC
➽ 10173 27BD
➺ 10170 27BA
➳ 10163 27B3
➾ 10174 27BE

基本形状

▲ 9650 25B2
► 9658 25BA
▼ 9660 25BC
◄ 9668 25C4
❤ 10084 2764
✈ 9992 2708
★ 9733 2605
✦ 10022 2726
☀ 9728 2600
◆ 9670 25C6
◈ 9672 25C8
▣ 9635 25A3

标点

« 171 00AB
» 187 00BB
‹ 139 008B
› 155 009B
“ 8220 201C
” 8221 201D
‘ 8216 2018
’ 8217 2019
• 8226 2022
◦ 9702 25E6
¡ 161 00A1
¿ 191 00BF
℅ 8453 2105
№ 8470 2116
& 38 0026
@ 64 0040
℞ 8478 211E
℃ 8451 2103
℉ 8457 2109
° 176 00B0
| 124 007C
¦ 166 00A6
– 8211 2013
— 8212 2014
… 8230 2026
¶ 182 00B6
∼ 8764 223C
≠ 8800 2260

法律符号

® 174 00AE
© 169 00A9
℗ 8471 2117
™ 153 0099
℠ 8480 2120

货币

$ 36 0024
¢ 162 00A2
£ 163 00A3
¤ 164 00A4
€ 8364 20AC
¥ 165 00A5
₱ 8369 20B1
₹ 8377 20B9

数学

½ 189 00BD
¼ 188 00BC
¾ 190 00BE
⅓ 8531 2153
⅔ 8532 2154
⅛ 8539 215B
⅜ 8540 215C
⅝ 8541 215D
‰ 8240 2030
% 37 0025
< 60 003C
> 62 003E

音乐符号

♩ 9833 2669
♪ 9834 266A
♫ 9835 266B
♬ 9836 266C
♭ 9837 266D
♯ 9839 266F

对号、错号

160 00A0
☐ 9744 2610
☑ 9745 2611
☒ 9746 2612
✓ 10003 2713
✔ 10004 2714
✕ 10005 10005
✖ 10006 2716
✗ 10007 2717
✘ 10008 2718

十字

☨ 9768 2628
☩ 9769 2629
✝ 10013 271D
✞ 10014 271E
✟ 10015 271F
✠ 10016 2720
✚ 10010 271A
† 8224 2020
✢ 10018 2722
✤ 10020 2724
✣ 10019 2723
✥ 10021 2725

星星、星号、雪花

★ 9733 2605
✭ 10029 272D
✮ 10030 272E
☆ 9734 2606
✪ 10026 272A
✡ 10017 2721
✯ 10031 272F
✵ 10037 2735
✶ 10038 2736
✸ 10040 2738
✹ 10041 2739
✺ 10042 273A
✱ 10033 2731
✲ 10034 2732
✴ 10036 2734
✳ 10035 2733
✻ 10043 273B
✽ 10045 273D
❋ 10059 274B
❆ 10054 2746
❄ 10052 2744
❅ 10053 2745

杂项

☻ 9787 263B
☺ 9786 263A
☹ 9785 2639
✉ 9993 2709
☎ 9742 260E
☏ 9743 260F
✆ 9990 2706
� 65533 FFFD
☁ 9729 2601
☂ 9730 2602
❄ 10052 2744
☃ 9731 2603
❈ 10056 2748
✿ 10047 273F
❀ 10048 2740
❁ 10049 2741
☘ 9752 2618
❦ 10086 2766
☕ 9749 9749
❂ 10050 2742
☥ 9765 2625
☮ 9774 262E
☯ 9775 262F
☪ 9770 262A
☤ 9764 2624
✄ 9988 2704
✂ 9986 2702
☸ 9784 2638
⚓ 9875 2693
☣ 9763 2623
⚠ 9888 26A0
⚡ 9889 26A1
☢ 9762 2622
♻ 9851 267B
♿ 9855 267F
☠ 9760 2620

手型、铅笔、笔

☜ 9756 261C
☞ 9758 261E
☝ 9757 261D
☟ 9759 261F
✌ 9996 270C
✍ 9997 270D
✎ 9998 270E
✐ 10000 2710
✏ 9999 270F
✑ 10001 2711
✒ 10002 2712

天空、植物

☽ 9789 263D
☾ 9790 263E
♂ 9794 2642
♀ 9792 2640
☿ 9791 263F
♁ 9793 2641
♃ 9795 2643
♄ 9796 2644
♅ 9797 2645
♆ 9798 2646
♇ 9799 2647

星座

♈ 9800 2648
♉ 9801 2649
♊ 9802 264A
♋ 9803 264B
♌ 9804 264C
♍ 9805 264D
♎ 9806 264E
♏ 9807 264F
♑ 9809 2651
♒ 9810 2652
♓ 9811 2653

象棋，扑克牌

♚ 9818 265A
♛ 9819 265B
♜ 9820 265C
♝ 9821 265D
♞ 9822 265E
♟ 9823 265F
♔ 9812 2654
♕ 9813 2655
♖ 9814 2656
♗ 9815 2657
♘ 9816 2658
♙ 9817 2659
♠ 9824 2660
♣ 9827 2663
♥ 9829 2665
♦ 9830 2666
♤ 9828 2664
♧ 9831 2667
♡ 9825 2661
♢ 9826 2662

希腊字母

Α 913 0391
Β 914 0392
Γ 915 0393
Δ 916 0394
Ε 917 0395
Ζ 918 0396
Η 919 0397
Θ 920 0398
Ι 921 0399
Κ 922 039A
Λ 923 039B
Μ 924 039C
Ν 925 039D
Ξ 926 039E
Ο 927 039F
Π 928 03A0
Ρ 929 03A1
Σ 931 03A3
Τ 932 03A4
Υ 933 03A5
Φ 934 03A6
Χ 935 03A7
Ψ 936 03A8
Ω 937 03A9

分类: 前端设计

animate.css 一些常用的CSS3动画效果

前端观察 - 星期一, 12/12/2011 - 23:23

大家已经开始在项目中使用一些CSS3动画效果了吧，这让网站在高端浏览器上看起来很上流。animate.css是一个老外做的各种CSS3动画的合集，比较全，也很炫，大家可以参考学习一下。

项目主页：http://daneden.me/animate/
自定义下载样式：http://daneden.me/animate/build/
git地址：https://github.com/daneden/animate.css

分类: 前端设计

Opera 11.60发布，更好的支持HTML5

前端观察 - 星期三, 12/07/2011 - 01:36

Firefox加快了版本的更新速度，其实，Opera也一直没有停止前进的步伐，而且，版本号策略相对来说更稳重一些～～最新版11.60发布了，然后增加了一些令人心动的特性～～

HTML5 parser
Opera 11.60采用了名为Ragnarök 的解释器，能够更好的渲染错误的标签，据说可以解决20%的网站兼容问题。
HTML custom protocol和content handler
支持HTML自定义协议和内容处理，比如mailto和tel属性以及特定的MIME类型。具体看这里。
完整支持ES 5.1
更好的支持HTML5 video
支持muted、preload、buffered和seekable属性。
支持发散渐变
终于支持css3 radial gradient了
支持rem单位
box-shadow修正
开始支持box-shadow的inset参数，用来实现内阴影的效果。
开始支持CSS4 image-rendering属性
是的，你没有看错，是css4，其实webkit和gecko早支持了。。。用来优化图片的渲染
终于支持microdata了

其实这些特性是计划在12.0中发布的，但是据说硬件加速功能可能会比较耗时间，于是11.60仅仅是一个过渡版本。。。

好吧，我个人一直没有用Opera的原因是，龙飞真的太慢太慢太慢了——opera的调试器Dragonfly，是谁开始喊它龙飞的？

分类: 前端设计

85个很赞的响应式网页设计

前端观察 - 星期二, 11/01/2011 - 13:29

整理自：85 Amazing Showcase of Responsive Web Design
中文原文：85个很赞的响应式网页设计
请尊重版权，转载请注明来源，多谢！

上一篇中我们了解了一下响应式网页设计是什么，现在趁热打铁，来欣赏一些国外的一些很赞的响应式网页设计，看看他们是如何实现对PC端浏览器和移动终端的全面支持的。

想要查看效果很简单，打开这些页面，然后缩放浏览器窗口就可以了——当然，要用chrome/safari/firefox/opera等浏览器，IE请绕道～～

当然，如果你有发现国内有好的类似设计，欢迎推荐！

Teixido

Miekd

Pgrady

51bits

Glitch

Naomi Atkinson Design

Colly

8Faces

Lanyrd

Lapse

See Sparkbox

Design made in Germany Magazine 5

Ribot

分类: 前端设计

响应式网页设计

前端观察 - 星期二, 11/01/2011 - 12:36

这个话题最近很火爆，我也一直在关注，响应式网页设计和移动互联网密切相关，并因移动终端的丰富和普及而兴盛，并且是一个颇具争议的话题，我今天将和大家探讨下。

上周写了个简单的ppt在组内大概介绍了下，感兴趣的话可以先看下这个PPT。

移动互联网的现状和未来

在说到这个话题前，我们先看下网页设计和前端开发的现状：

全球有超过53亿手机用户（包括传统手机）
国内3G用户超过1亿
iPhone4手机在2010年出货量超过3000万部；
iPhone 4S上市前3天卖掉400万部；
Android手机每天激活超过50万部；
iPad出货量已经超过2.5亿部；
预计到2015年，移动互联网的数据流量将超越桌面端的流量。
。。。

嗯，大家也许已经开始注意到，自己和身边的朋友也都越来越多的用上了iPhone或者android手机或平板——一两年前我们预料的移动互联网时代即将来临，现在已然实现了——我们正处在移动互联网快速发展的时代——已经不再是起步阶段了。

那么，什么是响应式网页设计？

响应式网页设计是Ethan Marcotte在去年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的！

或许大家之前会注意到，有很多知名网站都推出了iPhone或针对智能手机的专门网站，比如3g.qq.com、m.taobao.com、ipad.xxx.com等等。。。甚至前端观察之前也尝试过用wordpress插件实现m.qianduan.net的移动网站。

那么问题就来了——我们要为每一个设备做一个单独的网站吗？来让网站在每个设备中得到相应的视觉风格和操作体验？

这样势必就要增加很多的工作量，而且很多还是重复的。

我们在做页面的时候，一般很强调模块化的概念，我们要求一个合格的模块要能够“可扩展、无侵染”，它要能够用在任何地方都能够正常的显示。响应式网页设计与此类似——网站在任何设备中都能够正常适配，而不用为每个设备单独做个子网站！

但是，产品经理和设计师可能还是会要求网站在各个浏览器里面表现要一模一样，甚至要像素还原——WTF！不同的浏览器本身的功能、行为和处理方式都不一样，为什么要表现完全一样？！

let the browser flow…

怎么做？

其实响应式网页的实现很简单，都是大家熟悉的技术。

media query(媒体查询)

因为现在主流的智能终端都是基于iOS和Android的，而它们自带的浏览器都是基于webkit内核，所以我们可以完全使用viewport属性和media query技术实现网站的响应性：

后面的initial-scale表示初始缩放，maximum-scale表示最大缩放比例，1意味着不能进行缩放。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 /* for 240 px width screen */ @media only screen and (max-device-width:240px){ selector{ } } /* for 360px width screen */ @media only screen and (min-device-width:241px) and (max-device-width:360px){ selector{ } } /* for 480 px width screen */ @media only screen (min-device-width:361px)and (max-device-width:480px){ selector{ } }

当然依靠屏幕宽度来进行适配是最简单的方法，media query有很多参数可以使用比如orientation、aspect-ratio等，不太了解的可以查看这篇详细的介绍。

其实，media query是响应式网页设计中被用到最多的技术。

fluid grid(流体网格)

很多项目都在使用网格技术(或者叫栅格)，前几年960.gs很流行，但是随着屏幕分辨率的普遍提升，它已经不太适合当前需求了，于是最近几年fluid grid开始逐渐多了起来，这种技术其实也很简单，只是将格栅的单位由px变成%，用百分比来控制页面每列的宽度，从而实现宽度的自适应。

使用流体网格的网站能够根据屏幕宽度自动调整页面中每列的宽度，从而保证页面的完整展现和基本功能。这也是一种不错的方法。

flex box

flex box是css3中的新技术，它很强大，可以实现很多我们之前无法想象的自适应布局。

有时我们希望网站能够以webapp的外观呈现给手机用户，flexbox是个不二的选择。

比如，要实现这样的简单结构：

它很像一个app的结构，头部和底部固定，中间高度自适应，用flexbox可以简单实现：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 .flex_wrap{ height:100%; display: box; display: -moz-box; display: -webkit-box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; } .flex_bd{ box-flex: 1; -moz-box-flex: 1; -webkit-box-flex:1; background:#E7E7E7; overflow-y:auto; } .flex_hd{ background:#16364C; height:30px; line-height:30px; text-align:center; color:#FFF; font-weight:700; font-family:14px; } .flex_ft{ background:green; height:30px; line-height:30px; text-align:right; }

HTML代码：

1 2 3 4 5 6 7 8 9 10 11 12 <div class="flex_wrap"> <div class="flex_hd">前端观察</div> <div class="flex_bd"> <p>这里是主内容区</p> <p>这里是主内容区</p> </div> <div class="flex_ft"> <a href="http://www.qianduan.net/about" title="关于我们">关于我们</a> <a href="http://www.qianduan.net/copyright" title="版权声明">版权声明</a> <a href="http://www.qianduan.net/sitemap" title="网站地图">网站地图</a> </div> </div>

虽然这里还会有点儿问题，比如主内容区域内容太多会被隐藏掉，因为android webkit和iOS 5之前的mobile safari均不支持overflow:scroll属性，但是这个问题还是很好解决的，比如在里面嵌套一个子容器，用js来给定个高度并使用定位来实现滚动条从而完整展示内容，或者直接使用iscroll等js库来实现。好消息是，iOS5中safari开始支持overflow:scroll了。

不足之处

如果你关注网站性能之类的话，可能已经发现了一些问题：

加载很多不需要的资源，比如多余的图片和样式内容
带宽限制
移动终端的内存和CPU限制
图片大小和屏幕大小不匹配

嗯，任何一个方案都不是完美的，但也不会很糟糕。下面我们会提到一些可行的优化方案：

HTML5本地存储

对于支持HTML5 appcache /manifest特性的浏览器，我们可以将一些不常改动的静态资源存储到本地，比如css文件，css中用到的图片，以及一些js文件等：

1 2 3 4 5 6 7 8 9 10 CACHE MANIFEST NETWORK: /* CACHE: img/bg.jpg img/days.otf slideshow.js slideshow.css classList.js

然后将文件保存为manifest格式，并在HTML标签中引入即可：

这样，用户在第一次访问的时候会慢一点儿，但是后续访问会很快，3G网络中也能为用户节省带宽。

移动设备优先

一种新的设计流程是，先为移动设备设计界面，然后将PC端作为一个扩展。

这样做的好处是显而易见的，移动终端不会加载多余的资源，也不会因为PC端的样式而重绘页面，同时也不会影响PC端的表现。

流体图片(fluid image)

页面中的图片有时会比手机/平板的屏幕（viewport）宽，这样会将页面容器撑开，但是移动浏览器又不能scroll，结果图片被切掉一部分，然后还会有一部分内容被隐藏掉，用户看不到。

解决这个问题的方法很简单，将img的最大宽度设置成100%就可以了：

img{max-width:100%}

嗯，这里的前提是，没有给img标签设置宽度和高度，否则显示会有问题。另外不建议直接设置width=”100%”，因为会把小图拉大，模糊显示。

同理，video标签和iframe标签的宽度也可以这样做，而且最好不要使用iframe，宽度是个问题，性能也是一个方面吧。

CSS3 image

这个方法有些惊艳

我们都知道可以用::before和::after伪元素+content属性来动态显示一些内容或者做其它很酷的事情，而且在CSS 2.1中即被支持。不过content属性在CSS 2.1中只能用于这两个伪元素中，而在CSS3中，任何元素都可以使用content属性了，这个方法就是结合css3 的attr属性和HTML自定义属性的功能：

然后用media query来动态赋值：

1 2 3 4 5 6 7 8 9 10 @media (min-device-width:600px) { img[data-src-600px] { content: attr(data-src-600px, url); } } @media (min-device-width:800px) { img[data-src-800px] { content: attr(data-src-800px, url); } }

当然，这种方法也有不足之处，比如PC端宽屏幕需要加载两个图片文件，然后我们也要为此准备多张图片文件等。

pre标签

有的网站，比如，像前端观察这样的技术博客，会用pre来显示源代码，而浏览器对pre标签默认设置white-space:pre，这样，代码就不会换行，从而撑开子容器，造成内容被隐藏的问题：

右边的文字被隐藏掉了。

解决方法很简单：

pre{ white-space:pre-wrap word-wrap: break-word; word-break: break-all;/*如果要兼容IE，可以加上这句，连续字母断行的问题伤不起啊。。。。*/ }

当然，不只是pre标签，关键是white-space和word-break属性的值。

嗯，主要的技术和技巧其实就这些，大家不会陌生。下面是一些比较有用的工具什么的：

响应式网页设计工具与资源

国外在响应式网页设计上已经走的很远了，已经有很多工具和资源供我们参考和使用：

CSS 框架

实用工具

Respond.js，让IE6-8支持meidia query
Responsive Design Testing 简单而方便的测试网站的响应性的工具，输入网址即可看到网站在不同分辨率下的表现
Resize My Browser 缩放浏览器工具，不过不支持chrome和opera浏览器
Media Query Bookmarklet 顾名思义，这是一个关于media query的书签工具
ProtoFluid 在线查看和调试网站对移动终端兼容性的工具，很赞
ScreenFly 和ProtoFluid类似
responsivepx 更直观的测试网站对不同分辨率的适配性

争论和总结

响应式网页设计被提出以来，争论就不断，其实核心问题只有两个个：太多的资源请求和有限的终端支持之间的矛盾、响应式的网页设计和移动终端在用户体验和视觉风格上的差异。前者不能容忍在弱小的手机/平板上通过龟速的3G/2G网络来加载一个笨重的PC端页面，而后者纠结响应式网站不像手机网站。

我的想法是，具体问题具体分析，比如，强内容的网站，完全可以尝试响应式网站，而重视觉和功能的网站，则可以尝试建立一个独立的移动网站。

另外，显然，响应式网页设计的大部分技术，是可以用在WebApp开发中的。

最后，欢迎各种吐槽、各种批评、各种建议、各种发散、以及各种新观点新技术～～欢迎发表评论～～

PS：如果你手上有android/iPhone，可以直接访问下前端观察。 :)

参考文章：

分类: 前端设计

[图表]移动互联网的现状和趋势

前端观察 - 星期二, 10/25/2011 - 02:02

国外网站webhostingbuzz发布了最近的移动互联网的现状和未来趋势的图表，很全面，值得一看。

移动互联网是未来的趋势，前端开发们需要跟上了。

html5和css3的时代已经到来，但对于移动互联网，它们显然并不是全部，我们需要了解和做的要更多。

PS：本来想要翻译一下，发现都是些常见的单词，不认识的翻下词典哈，不懂的可以留言来问～～

来源：http://www.webhostingbuzz.com/blog/2011/10/19/mobile-internet-trends/

分类: 前端设计

iPhone 4S 浏览器性能预览

前端观察 - 星期五, 10/21/2011 - 06:27

iPhone 4S已经正式发售，虽然在国内还只能是水货，但是显然已经国外的同行已经开始研究它能给我们带来的改变了，而我们关注的，依然是浏览器～～

iPhone 4S硬件主要升级CPU和GPU，而这些给升级也为浏览器性能带来了很大的提升：

Apple iPad iPhone 4 iPad 2 iPhone 4S SoC A4 A5 处理器 1 GHz ARM Cortex-A8 (单核) 800 MHz ARM Cortex-A8 (单核) 1 GHz ARM Cortex-A9 (双核) 800 MHz ARM Cortex-A9 (双核) 内存 256 MB LP-DDR (单通道) 512 MB LP-DDR (单通道) 512 MB LP-DDR2 (双通道) 图形 PowerVR SGX535 (单核) PowerVR SGX545MP2 (双核) L1 缓存

(指令/数据) 32 KB / 32 KB 32 KB / 32 KB L2 缓存 640 KB 1 MB JavaScript 性能

硬件升级带来的直接结果就是，在SunSpider测试中，iPhone 4S性能提升很大：

SunSpider JS Benchmark iPhone 4
iOS 4.3 iPhone 4
iOS 5 iPhone 4S

iOS 5 UIWebView 10,044 12,101

(慢20%) 8,955 (比iPhone 4快26% , 总提高11%) MobileSafari 4,052 3,574

(快12%) 2,215 (比iPhone 4快38%, 总提高46%) Home-Screen Pages 10,528 4,551

(快57%) 2,227 (比iPhone 4快52%, 总提高79%)

嗯，最大的亮点还是Home-Screen Page，也就是webapp，提升了4倍多。。。而UIWebView真的限制很大，其实，android上的WebView组件也很搓。。。

渲染性能

iOS5的GPU加速功能很给力，加上GPU硬件本身的提升，在iPhone 4S上表现很赞：

Device / OS FPS iPhone 4 iOS 4.3 2 FPS iPhone 4 iOS 5 40 FPS iPhone 4S iOS 5 60 FPS

有没有HTML5/CSS3能力被解放的感觉？我们可以尝试更丰富的视觉表现了。

页面加载时间

测试人员在iPhone4/iPhone4+iOS5和iPhone4S上测试了Alexa中排名前500的网站的页面加载时间，反复测试，发现iPhone 4S平均加载速度提高了13%，而只有60%的页面速度有明显提升，其它到没有太大的差异。这可能是因为JavaScript性能的提升，而页面中用到的JS越多，提升越明显，而用的少的则表现并不明显。

结语

这里我想说的和上一篇文章《iOS 5中safari带来的新特性》是一致的，WebApp会带来更好的性能，基于UIWebView的Native APP则继续承受各种限制。虽然现在说WebApp的春天来了可能为时尚早，但是显然是一个很大的鼓舞。

内容整理自：iPhone 4S Browser Performance Review

分类: 前端设计

前段开发

资源导航