《响应式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,如需转载请自行联系原作者

相关文章
|
2天前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
24天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
48 7
|
24天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
32 6
|
24天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
35 5
|
24天前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
27 5
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
47 1
[HTML、CSS]细节与使用经验
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
34 1
[HTML、CSS]知识点
|
1月前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
58 12
|
1月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
126 1
下一篇
DataWorks