CSS 与 HTML5 响应式图片

 随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢?

什么是响应式图片?

响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费。同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片。

CSS3 响应式图片

对于很多 IOS 开发者来说可能已经不太陌生了,为了适配 Retina 屏幕,传统的 CSS3 实现方式是通过加载一张宽高分别放大两倍的图片,然后通过 Media Queries 使背景图片尺寸减小一倍「background-size:50% 50%;」,例如:

.mod .hd h3 {
    background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */
}

/* ------------- Retina ------------- */
@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
       only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 之前 */
       only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */
       only screen and (min-resolution: 240dpi), /* 标准 */
       only screen and (min-resolution: 2dppx) /* 标准 */
{
.mod .hd h3{
    background-image:url(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png);
    background-size: 105px 155px;
}
}

两张图片的对比效果:

在制作@2x图片时需要注意一些问题:

如果类似上图一样是纯文字内容的图片,不要直接从大图片缩放为小图片,这样文字效果会有些失真,这是 Photoshop 渲染的问题。应该调整字号,再重新排版。可以直接看看:一淘首页 的效果。

蓝框内是直接缩放图片大小的效果,红框内是把字号从32号改成16号的效果。

CSS3 Media Queries 中用来定义设备分辨率的是 resolution 媒体特性,同时派生出两个媒体特性,分别是 「min-resolution」和 「max-resolution」。该规范中规定:若查询 Non-Square Pixels (专业术语,指高度与宽度不等的像素,可以理解为「非正方形像素」。计算机屏幕上及高清晰度视频信号中的像素是正方形的(像素宽高比为 1:1)。标准清晰度数码视频信号中的像素都不是正方形的。例如:NTSC制式的像素高度大于宽度,而PAL制式的像素宽度则大于高度。)设备,在「min-resolution」查询中指定的值必须与最稀疏尺寸进行比较,在「max-resolution」查询中必须与最密集尺寸进行比较。对于「resolution」(没有「min-」或「max-」前缀)从不查询 Non-Square Pixels 设备。另外在 CSS image Level 3「image-resolution」属性中定义了一些单位,比如「dppx」,各浏览器支持情况如下:

 

特性 Chrome Firefox (Gecko) IE Opera Safari (WebKit)
基本特性 不支持「1」「4」 3.5 (1.9.1) 「2」 9 9.5 不支持 「1」「4」
dppx 「4」 16.0 未知 12.10「3」 「4」

 

需要注意几点:

  1. 「-o-min-device-pixel-ratio」的取值是分数比如「2 /3」,Demo,详见:Opera Dev 的文章
  2. Firefox 16 之前版本是「min–moz-device-pixel-ratio」,min 后面有两个「-」。
  3. 1dppx 相当于 96dpi。

显而易见,通过 Media Queries 来实现「响应式图片」还是很麻烦,CSS 代码的可维护性不高,有一些 hack 的味道。我们更期望一种原生的语法来选择不同的图片,值得庆幸的是 CSS Image Level 4 中就实现了这种原生语法的「image-set」。

「image-set」语法:

<image-set> = image-set( [ <image-set-decl>, ]* [ <image-set-decl> | <color>] )
<image-set-decl> = [ <image> | <string> ] <resolution>

那么上面的例子我们可以改为:

background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */
background-image: -webkit-image-set(
    url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png) 1x,
    url(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png) 2x);/* Retina */

这里的单位「x」等同于「dppx」,将来是否统一还有待进一步讨论。注意 Webkit 目前只实现了 url() 形式的取值,color、*-gradient() 等暂不支持,而且「x」取负值似乎也是合法的。

以下是一些常见移动设备的「min-device-pixel-ratio」值:

-webkit-min-device-pixel-ratio: 1.0

  • 所有非 Retina 的 Mac
  • 所有非 Retina 的 iOS 设备
  • Acer Iconia A500
  • Samsung Galaxy Tab 10.1
  • Samsung Galaxy S
  • 其他设备

-webkit-min-device-pixel-ratio: 1.3

  • Google Nexus 7

-webkit-min-device-pixel-ratio: 1.5

  • Google Nexus S
  • Samsung Galaxy S II
  • HTC Desire
  • HTC Incredible S
  • HTC Velocity
  • HTC Sensation

-webkit-min-device-pixel-ratio: 2.0

  • iPhone 4
  • iPhone 4S
  • iPhone 5
  • iPad (3rd generation)
  • iPad 4
  • 所有 Retina displays 的 Mac
  • Google Galaxy Nexus
  • Google Nexus 4
  • Google Nexus 10
  • Samsung Galaxy S III
  • Samsung Galaxy Note II
  • Sony Xperia S
  • HTC One X

-webkit-min-device-pixel-ratio: 3.0

  • HTC Butterfly
  • Sony Xperia S

HTML5 响应式图片

CSS「image-set」 解决了背景图片的响应式问题,但是 HTML中的 img 元素怎么办呢?正当我一筹莫展的时候,2011年11月 @brucel 提出了HTML5 的一个解决草案:

<picture alt="">
<source src=hires.png media="min-width:800px">
<source src=midres.png media="min-width:480px">
<source src=lores.png>
<!-- 不支持的浏览器降级处理 -->
<img src=midres.png alt="">
</picture>

于此同时,其他的一些想法如雨后春笋般涌现出来,于是 W3C 社区讨论组 Responsive Images Community Group  应运而生。最新的规范在这里:http://picture.responsiveimages.org/ (W3C http://www.w3.org/TR/html-picture-element/)。截止本文发布时间,最近一次更新是 2013年4月24日,规范示例:

<picture width="500" height="500">
<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<img src="small-1.jpg" alt="">
<p>Accessible text</p>
</picture>

可以看到这里的「srcset」属性类似「image-set」,通常情况下,「srcset」里面的资源是具有 fallback 特性的,也就是说第一个图片资源无法加载的时候可以跳过加载后面的备用资源。

但是 Apple 的 eoconnor 提出的方案是这样的:

<img src="foo-lores.jpg"
    srcset="foo-hires.jpg 2x, 
    foo-superduperhires.jpg 6.5x"
    alt="decent alt text for foo.">

诚然,任何一个新标准的提出,都会存在各种不同的声音,这是好事,作为网页的最终开发者其实并不太关心实现语法。有任何问题大家也可以直接到 HTML5 中文兴趣小组参与讨论。

小结

本来想把新年的第一篇文章写的欢乐一些,不过貌似没啥槽点。HTML5 响应式图片的草案还刚刚开始,但是前景还是很美好的。目前我们能做的就是在CSS 中使用「image-set」属性值,因为目前大部分 Retina 屏幕的设备的浏览器都是基于 Webkit 内核的,如果有特殊的需求可以使用 Media Queries。

非常感谢 kenny 对本文排版细节提出的 14 条建议,本文排版遵循:

  • 使用繁体中文引号 「」代替简体中文「“”」引号;
  • 中英文混排时英文首尾各加一个空格。

一丝

2013-1-15

最后更新:2013-4-28

转载请注明原文地址:http://www.iyunlu.com/view/Front-end/70.html

CSS3Animation案例分享、动画手册、动画工具

CSS3动画参考

随着浏览器对CSS3动画的支持越来越好(IE除外,IE10用户量还非常的少),以前很多只能用flash或者javascript实现的动画效果,现在用CSS3动画也能部分的实现了。作为一个前端攻城狮,我们有足够的理由去使用CSS3动画让用户有更好的体验。

关于使用

「案例分享」集合了诸多CSS3动画相关但不仅限于CSS3动画的项目案例,均来自网友提供,可以在这里查阅相关DEMO或查找灵感,点击跳转至原目标站点。如果您有更好的URL,恳请提交。

「动画手册」保持以往的查阅习惯,保留语法、说明、属性取值、实例和兼容性说明,希望在实践中能便捷。

「动画工具」在手册资料的基础上,加上智能的在线调试、演示预览、导出代码等功能。目前包括“变形与过渡”、“自定义动画”与“动画库预设”。
“自定义动画”提供多个层与帧的设想,同时调试与设计。

动画工具[Tool] – CSS3动画参考by Tencent ECD | DMDC

CSS3动画案例分享:http://ecd.tencent.com/css3/index.html
CSS3动画参考手册:http://ecd.tencent.com/css3/guide.html
CSS3动画制作工具:http://ecd.tencent.com/css3/tools.html

20个最新的 CSS3 和 HTML5 工具

1. Sencha Animator
用标准的网页技术打造超炫的动画,Senchar Animator使用CSS3来打造动态的文字和图片,流畅的变换,阴影,渐变等效果。

2. CSS LINT 
这个工具可以帮你找出你CSS中的问题。不光是语法错误,它还能指出你的代码写的不合理的地方,或者不高效的地方。

3. Normalize.css
Normalize.css 是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一。

4. Spritemapper
Spritemapper 是一个组合不同图片并生成 CSS 位置代码的工具。

5. holmes.css
这个CSS可以帮你找出你网页中写的不标准的HTML代码。

6. prefixMyCSS
这个工具可以帮你的CSS代码添加前缀。

7. Sprite Cow
这个工具可以帮助你创建CSS Sprite。

8. Patternizer
这个工具可以帮助你创建复杂条纹图案的CSS。

9. Prefixr
这个工具可以帮助你创建跨浏览器的CSS代码。输入你的CSS代码,然后勾选一些选项,它就会生成各个浏览器兼容的CSS给你。

10. Patternify
这个工具是一个简单的CSS生成器。你可以直接在它的网页上画出你想要的样式,然后它就会生成相应的CSS给你。

11. CSS Shapes
这个工具可以帮你用纯CSS来生成各种图形。

12. Initializr
这个工具可以帮助你生成一个标准的HTML5网页模板,然后你可以基于这个模板完成你的网页。

13. Gury
Gury 可以帮助你创建基于 Canvas 的动画。

14. oCanvas
oCanvas 可以帮助你很容易的在 HTML5 的 Canvas 标签上创建对象,并且创建这些对象的动画。

15. Modernizr
Modernizr 是一个利用 JS 和 CSS 来检测浏览器说支持功能的小工具。

16. Response JS
Response JS 是一个轻量级的 jQuery 插件,用来创建高性能的支持移动设备的网站。它提供了一套语法用来根据不同的环境动态替换HTML代码。例如根据屏幕大小,动态的替换img标签的src地址。

17. Mercury Editor
这是一个全功能的 HTML5 编辑器,可以帮助你的团队在浏览器中编辑文档。

18. Sugar
Sugar 是一个JavaScript库。它扩展了现有的JS对象的方法,让你可以用更少的代码做更多的事情。

19. Buzz
Buzz 是一个用于操作HTML5音频标签的JavaScript library 。它是一个没有用到其它JavaScript框架独立Library。并拥有丰富的API可以用来管理这个音频标签提供的所有功能。支持的功能包括播放、 暂停、停止、循环和音量控、取得音频信息、判断音频类型是否支持、可同时处理多个音频文件。还可以取得播放结束、错误产生或音量变化等事件。

20. Recurly.js
Recurly.js 是另一个 JS 实现的表单美化插件。