《响应式web设计》读书笔记（四）HTML5与CSS3

看了HTML5和CSS3相关的章节，老实讲其实我还是挺失望的，并没有看到像媒体查询或是流体布局那样令人激动的东西。更多的是HTML5、CSS3基本知识的介绍。但也不可否认我也有一些收获，下来就总结一下吧。

    让旧版本浏览器支持HTML5

    大家可能都已经见过或者是使用过了，通过使用js脚本，可以让低版本IE支持HTML5新标签。如Remy Sharp写的HTML5 enabling script。其实这种脚步还有个名字呢：腻子脚本（polyfill），指用来弥补老浏览器的缺陷的脚本。如果你去搜索会发现这样的腻子脚本还是挺多的，有的是专门为支持canvas写的，有的则是为支持其他特性写的。为了更好的整理这些腻子脚本，一款更强大的工具出现了：Modernizr（http://www.modernizr.com），它能够基于一系列的测试条件来选择加载更高级的腻子脚本、css文件等。

    如果你是一个新手，还没写过HTML5文档，这里也有一个好东西推荐，HTML5样版文件（http://html5boilerplate.com/），我下载看了看，非常不错。里面包含了已经写好的样版文件可供参考，也包含很多有名的css样式重置等，还有一些实用的工具。有空可以研究一下。

    HTML5全新语义化标签

    这些语义化标签可能大家也见过好多次了，本着踏实淡定的读书原则，这里还是总结一下吧：

    <section>用来定义文档中的一个区域（或节）

    <nav>用来定义主导航区域

    <article>独立的内容片断，像一篇新闻稿或是博客

    <aside>与主内容松散相关的部分，比如侧边栏，广告栏

    <hgroup>用来包裹一组<h1>,<h2>,<h3>标题

    <header>页面头部内容

    <footer>页面底部内容

    <address>联系信息、地址信息

    具体的W3C标准可查看官方介绍：http://www.w3.org/html/wg/drafts/html/master/sections.html

    HTML5视频播放

    首先我们从视频文件的格式谈起，起初HTML5工作组呼吁所有浏览器支持Ogg格式的视频文件，但由于内部的争议，这一标准在最新的规范中被放弃，并且也没有形成统一的标准。（对此表示无语~），所以现在的情况就是各浏览器支持某一套视频和音频格式，如Safari指支持用<video>和<audio>标签播放mp4 / H.264 / AAC媒体文件，firefox和Opera只支持Ogg和WebM格式的。总之一句话，很乱，没有标准。

    那在现在这种情况下，我们能怎么办呢？幸好还有一个缓兵之计，我们可以为媒体文件制作不同的版本，如my.mp4、my.ogv，然后在代码中这么写：

<video>
  <source src="my.ogv" type="video/ogg">
  <source src="my.mp4" type="video/mp4">
  对不起，你的浏览器不支持HTML5视频播放！
</video>

    这样如果浏览器便能自己找到支持的格式并播放。当然弊端也显而易见，你必须准备两份或者更多的视频文件，来满足不同的浏览器。在这里我们要情不自禁的呐喊了，标准啊，快点发布吧。再补充一点，如果你想支持IE8及以下版本播放视频，可以在<source>标签下面再加<object>标签，使用flash来播放视频。

    响应式视频

    如何能让视频也能响应页面的大小变化呢，答案其实很简单：照图片的处理做就行。宽度设为百分比，高度为auto就可以了。另外一点值得一提，那就是在iframe中播放视频，如YouTube的做法；

<iframe width="960" height="720" src="http://www.youtube.com/embed/B1_N28DA3gY" allowfullscreen></iframe>

    在iframe中的视频是无法自适应的。那怎么办呢？用这一款jQuery插件吧：FitVids。需要的可以搜搜。由于无法访问YouTube，我这里没有试验。

    本书后面又讲了一些离线web应用相关的内容，与响应式设计没有任何关系，所以我怀疑作者是拿来凑数的，吐槽一下。HTML5相关的东西就提了这么多。下面来看看CSS3部分的内容吧。

    CSS3为响应式设计带来了什么

    本书作者十分推崇CSS3，认为这是响应式设计的重要内容，那么，CSS3可以为响应式设计做些什么呢？

    先从私有前缀说起

    在CSS3属性未被W3C批注为标准或者是浏览器未完全实现时，各浏览器厂商都会通过私有前缀进行实验性的实现，比如，要做一个10像素的圆角，各浏览器的私有前缀如下：

.round10{
    -khtml-border-radius:10px; /*Konqueror*/
    -rim-border-radius:10px; /*$RIM*/
    -ms-border-radius:10px; /*Microsoft IE*/
    -o-border-radius:10px; /*Opera*/
    -moz-border-radius:10px; /*Firefox*/
    -webkit-border-radius:10px; /*Safari和Chrome*/
    border-radius:10px; /*W3C*/
    }

    我的妈呀，一个圆角要写这么一堆代码！我光写最后一句行不行啊？我是不是喊出了大家的心声呢~
从现在的情况来看，这些现代浏览器都是在某个版本之后才开始支持一些新属性，而且市场上使用各版本浏览器的用户参差不齐。为了能在尽可能多的浏览器上正常显示，这些前缀是不能省的，至少目前是这样。这个时候你可能会想有没有什么工具能完成这样的工作呢？没错，github上什么都有。来看看这一个插件：prefixfree(http://leaverou.github.com/prefixfree),它能在css文件中自动添加前缀，你可以自己决定来添加哪些浏览器的私有前缀。不错吧~这下省心多了。   

    关于响应式字体   

    记得之前在流式布局中提过，为了让字体大小能自适应，我们用em做字体的单位，这样字体大小就可以取一个相对值。这是否是真正的响应式字体呢？其实这充其量只是个伪响应式的，因为这个字体的参照对象是浏览器默认的字体大小，无论浏览器的窗口大小如何调整，这个大小都是不变的。而真正的响应式字体应该是能够随视口的大小进行缩放，就像弹性图片一样。
    在CSS3的字体模块草案中，引入了视口相对字体（http://www.w3.org/TR/css3-values/#viewport-relative-lengths），字体大小的单位可以是vw(视口宽度)、vh（视口高度）、vmax、vmin（视口最小边长，即vw和vh中最小的一个）。这才是真正的响应式字体！你有没有激动呢？反正我是激动了。可惜目前还没有被浏览器广泛支持，只有IE9支持。让我们慢慢等待吧。   

    更多可用的新特性   

    半透明颜色。我们以前在网页中使用颜色的时候都是使用RGB（红绿蓝）体系或是HSL（色相、饱和度、亮度）体系。这两个体系都是无法表示透明度的。当我们想在网页中使用半透明的颜色时，要么使用opacity属性，要么使用半透明图片来完成。使用opacity的弊端是它会把整个元素包括里面的内容都变成半透明的，当你仅仅想要半透明的背景时是无法做到的。使用半透明图片来做背景的话，就没什么问题了。但你付出的代价也是巨大的，就为了一个半透明效果，就使用了一张图片。而且在做响应式网页时还要处理图片的缩放问题，也是相当不爽呀。
    来看看CSS3的新颜色模式吧，RGBA和HSLA。多出来的这个A就是指透明度，取值0~1，这样你就可以在网页中使用任意透明度的颜色了。省去了使用图片了。
    省去图片就是为响应式设计做出了贡献。可以这么说吗？如果可以的话，CSS3将为响应式设计做更多的事情。看看下面的这些新特性：文字阴影、盒阴影、渐变，你甚至可以使用多重渐变来绘图。此处，我将试着来做一个看看。

    就拿我博客的logo开刀吧~我在css中填了如下样式：

#blogTitle h1{margin: 8px 0 0 8px;border-radius: 5px 60px 2px 5px;box-shadow: 4px 4px 8px #FFCB42,-4px -4px 8px #FFCB42;}
#blogTitle h2{clear: left;width: 136px;margin: 6px 0 0 8px;border-radius: 5px 2px 60px 5px;box-shadow: 4px 4px 8px #FFCB42,-4px -4px 8px #FFCB42;}

    主要生效的是圆角和盒阴影，于是，我的logo就华丽丽的变成现在这个样子了。抬头看看左上角~

    可缩放图标。你是不是遇到过这样的情况：网页中有一些小图标，通常只有16*16或是32*32大小。在响应式页面中，它们会随着页面进行缩放，当放大到一定程度时便变模糊了。为了避免模糊你可能会为他们设置固定宽高，但这似乎又不符合响应式页面的要求。有什么办法呢？答案是使用@font-face图标。什么？没听错吧？@font-face不是用来自定义字体的吗？别着急，你可以想想如果把图标定义成字体，那它岂不是可以像字体一样设置大小并且完美缩放。这和响应式设计真是天作之合。就是这个思路，搜索“@font-face图标”你会找到更多答案。另外有个网站提供了不错的@font-face图标，http://fico.lensco.be/   

    就这些了   

    后面一章还讲了CSS3动画，需要单独的一篇文章来记录。今天的到此为止啦~

本文转自吕大豹博客园博客，原文链接：http://www.cnblogs.com/lvdabao/archive/2013/05/26/3100156.html，如需转载请自行联系原作者