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

相关文章
|
22天前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
239 91
|
2天前
|
存储 Web App开发 移动开发
HTML5 Web 存储详解
HTML5 Web存储提供了两种客户端数据存储机制:**Local Storage**和**Session Storage**。Local Storage用于长期存储数据,即使关闭浏览器数据也依然存在,适用于保存用户偏好设置等信息。Session Storage则在标签或窗口关闭时清除数据,适合存储临时信息。两者均提供了简单的API进行数据的存取操作,但需要注意的是,Web存储并非加密存储,不应存放敏感信息。现代浏览器普遍支持Web存储,合理利用这两种存储方式可提升Web应用的用户体验。
|
22天前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
50 28
|
22小时前
|
SQL 存储 移动开发
HTML5 Web SQL 数据库详解
Web SQL 数据库是 HTML5 中的一种本地存储技术,允许在浏览器中使用 SQL 语言操作本地数据,支持离线访问和事务处理,适用于缓存数据和小型应用。然而,其存储容量有限且仅部分现代浏览器支持,标准已不再积极维护,未来可能被 IndexedDB 和 localStorage 等技术取代。使用时需谨慎考虑兼容性和发展前景。
|
22小时前
|
存储 移动开发 缓存
HTML5 Web 存储详解
HTML5 Web 存储包括 `localStorage` 和 `sessionStorage`,前者提供持久存储且无过期时间,后者仅在会话期间有效。两者均支持键值对形式存储数据,容量约为 5-10 MB。`localStorage` 适用于用户偏好设置、登录状态保持及离线应用缓存;`sessionStorage` 则用于临时数据如表单输入。数据以字符串形式存储,可通过 `JSON` 方法处理对象。由于数据存储于本地,不适合存放敏感信息。示例代码展示了如何使用按钮将输入框内容保存至 `localStorage` 并进行清除操作。
WK
|
7天前
|
存储 移动开发 前端开发
HTML5和CSS5有什么区别
HTML5和CSS5在网页设计中扮演不同角色。HTML5是超文本标记语言的第五版,通过新特性如实时更新、跨平台运行及更好的安全性等,定义网页内容和结构。尽管常说CSS5,实际最新的CSS版本包含多个模块如CSS Grid和Flexbox,主要用于控制网页布局和样式,提供强大的选择器、动画支持和响应式设计,与HTML5相辅相成,共同构建现代网页的基础架构。
WK
23 3
|
24天前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
43 19
|
22天前
|
前端开发 JavaScript
【前端web入门第三天】01 css定义和引入方式 四种标签选择器
本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式,包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外,还深入解析了不同种类的选择器:标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景,并提供了实例帮助理解。最后,通过具体的新属性示例,指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。
35 15
|
24天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
33 13
|
21天前
|
前端开发