看了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,如需转载请自行联系原作者