0
揭秘 HTML5 和 CSS3 鲁超伍 | Adam http://adamlu.com/ http://twitter.com/adamlu
关于我 <ul><li>网名 Adam ,热爱互联网, 2004 年开始接触前端方面的东西,多年互联网前端开发经验,见证了前端开发这个行业的兴起。 </li></ul><ul><li>现就职于淘宝网北京 UED (前端开发工程师),花名空雁。 ...
网站标准的简单历史 2001-2006 XHTML 1 Content CSS2.1 Presentation
网站标准的简单历史 <ul><li>WHATWG ? </li></ul><ul><ul><li>Web Hypertext Application Technology Working Group </li></ul></ul><ul><li...
网站标准的简单历史 200 7 - Present HTML 5 Content CSS3 Presentation
HTML5 HTML5 DEMO
HTML 发展历史 1998 2000 2002 2004 2007 HTML 4.0 XHTML1 XHTML2 WHATG HTML 5
支持 HTML5 的浏览器 <ul><li>Opera 9.5+ </li></ul><ul><ul><li>Cross-document messaging </li></ul></ul><ul><ul><li>Server-sent eve...
支持 HTML5 的浏览器 <ul><li>FireFox 3.1+ </li></ul><ul><ul><li>offline storage and canvas </li></ul></ul><ul><ul><li>Geolocation...
HTML5 技术概览 <ul><li>HTML5 新增和移除的元素 </li></ul><ul><li>HTML5 基本布局 </li></ul><ul><li>HTML5 对表单的支持 </li></ul><ul><li>HTML5 DOM ...
HTML5 新增的元素 <ul><li>多媒体及交互式元素 </li></ul><ul><ul><li>video ,  audio... </li></ul></ul><ul><ul><li>details ,  menu , c omman...
HTML5 移除的元素 <ul><li>移除的元素 </li></ul><ul><ul><li>font, center, strike, big, s, u, acronym, applet, dir ... </li></ul></ul><...
HTML5 基本布局 HTML4 HTML5 <! DOCTYPE  html> <htm lang  = &quot;en&quot;> <head> <meta  charset  = &quot;utf-8&quot;> <title>H...
HTML5 对表单的支持 <ul><li>新的控件类型 </li></ul><ul><ul><li><input type=&quot;url | email |d ate |tel|search|datetime|date|month|wee...
<ul><li><form action='/register'  enctype=&quot;application/x-www-form+xml&quot;  method=&quot;post&quot;>  </li></ul><ul>...
http://adamlu.com/Demo/Speech/Demo/form-html5.html
HTML5 DOM 变化 <ul><li>getElementsByClassName </li></ul><ul><li>Selector API </li></ul><ul><ul><li>document.querySelector() ...
HTML5 的 Javascript APIs Web Forms2.0 Messaging Offline Applications History API Video&Audio Drag&Drop Undo Canvas Editable...
Video & Audio <ul><li><video height=&quot;280&quot; width=&quot;498&quot;  poster =&quot;border.png&quot; id=&quot;video&q...
Canvas <ul><li><canvas> 是一个新的 HTML 元素,这个元素可以被 Script 语言 ( 通常是 JavaScript) 用来绘制图形。例如可以用它来画图、合成图象、或做简单的 ( 和不那么简单的 ) 动画。 </li...
Drag&Drop <ul><li>拖拽事件 : dragstart, dragend, dragenter, dragleave, dragover, drag, drop </li></ul><ul><li><div draggable=&...
Web Workers <ul><li>让 Javascript 多线程,可以在后台做很多工作而不会阻断当前的浏览器 </li></ul><ul><li>var w = new Worker('worker.js'); w.onmessage ...
Web Workers <ul><li>//worker.js </li></ul><ul><li>importScripts('xhr.js', 'db.js'); </li></ul><ul><li>onmessage = function...
Geolocation navigator .geolocation .getCurrentPosition(  success,  error);
Application Cache <ul><li><html  manifest = &quot;rubiks.manifest&quot; > </li></ul><ul><li>rubiks.manifest </li></ul><ul>...
Storage <ul><li>database storage( 客户端数据库 SQLite) </li></ul><ul><li>WebKit 中已经实现 </li></ul><ul><li>var database = openDatab...
Storage <ul><li>key/val 存储 () </li></ul><ul><ul><li>sessionStorage(window based) </li></ul></ul><ul><ul><li>localStorage(d...
Cross-Document Messaging <ul><li>.postMessage (message, targetOrigin ) </li></ul><ul><li>.onMessage(event) </li></ul><ul><...
http://ishtml5readyyet.com/   2022?
CSS3 CSS3 DEMO
CSS 的发展历史 1996 1998 2001 CSS1.0 CSS2.0 CSS3.0 Cascading Style Sheets
支持 CSS3 的浏览器 http://adamlu.com/Demo/Speech/Demo/CSS-Browser-Support.png
CSS3 技术概况 <ul><li>选择器 </li></ul><ul><li>布局 </li></ul><ul><li>样式 </li></ul><ul><li>动画 </li></ul><ul><li>其它 </li></ul>
CSS3- 选择器 <ul><li>属性选择器 </li></ul><ul><ul><li>a[href$='.pdf'], a[href^='mailto'], a[class*=‘item’] </li></ul></ul><ul><li>...
CSS3- 样式 <ul><li>圆角 </li></ul><ul><ul><li>border-radius: 3px </li></ul></ul><ul><ul><li>-moz-border-radius-topleft </li></...
CSS3- 样式 <ul><li>边框背景 </li></ul><ul><ul><li>border-image: url(border.png) 27 27 27 27 round round; </li></ul></ul><ul><li>...
CSS3- 样式 <ul><li>透明 </li></ul><ul><ul><li>opacity: 0.5; </li></ul></ul><ul><li>RGBA </li></ul><ul><ul><li>color: rgba(0, 2...
CSS3- 布局 <ul><li>盒模型 </li></ul><ul><ul><li>box-sizing: content-box|border-box; </li></ul></ul><ul><li>网格模型 </li></ul><ul><...
CSS3- 动画 <ul><li>变换 </li></ul><ul><ul><li>transform: rotate(30deg); </li></ul></ul><ul><ul><li>transform: scale(0.5, 2.0);...
CSS3- 其它 <ul><li>媒体查询 </li></ul><ul><ul><li>.entry{color: red;} @media all and {min-width: 100em}{ .entry{color: black;} }...
浏览器前缀 <ul><li>Firefox:  -moz-box-shadow </li></ul><ul><li>Safari:  -webkit-box-shadow </li></ul><ul><li>Opera:  -o-box-sha...
CSS3 应用原则 <ul><li>优雅降级 </li></ul><ul><li>对于不支持 CSS3 的浏览器可以使用 Javascript 来实现 </li></ul><ul><ul><li>如 ie7.js, ie8.js 对 CSS 选...
参考资源 <ul><li>http://zh.wikipedia.org/wiki/HTML_5 </li></ul><ul><li>http://www.whatwg.org/html5/ </li></ul><ul><li>http://d...
Thanks! Q&A Email:  [email_address] MSN: luchaowu@hotmail.com
Upcoming SlideShare
Loading in...5
×

揭秘Html5和Css3 ---- 鲁超伍

14,297

Published on

webrebuild.org北京第一届交流会-悟道WEB标准,揭秘Html5和Css3 ---- 鲁超伍

Published in: Education, Technology
1 Comment
27 Likes
Statistics
Notes
  • 这个PPT做得太没美感了, 不过当笔记看看还可以.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
14,297
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
342
Comments
1
Likes
27
Embeds 0
No embeds

No notes for slide

Transcript of "揭秘Html5和Css3 ---- 鲁超伍"

  1. 1. 揭秘 HTML5 和 CSS3 鲁超伍 | Adam http://adamlu.com/ http://twitter.com/adamlu
  2. 2. 关于我 <ul><li>网名 Adam ,热爱互联网, 2004 年开始接触前端方面的东西,多年互联网前端开发经验,见证了前端开发这个行业的兴起。 </li></ul><ul><li>现就职于淘宝网北京 UED (前端开发工程师),花名空雁。 </li></ul><ul><li>追求卓越,不懈努力,做一个专业的前端开发工程师! </li></ul><ul><li>Stay Hungry, Stay Foolish! </li></ul>
  3. 3. 网站标准的简单历史 2001-2006 XHTML 1 Content CSS2.1 Presentation
  4. 4. 网站标准的简单历史 <ul><li>WHATWG ? </li></ul><ul><ul><li>Web Hypertext Application Technology Working Group </li></ul></ul><ul><li>W3C </li></ul><ul><ul><li>Word Wide Web Consortium </li></ul></ul>2004- Present
  5. 5. 网站标准的简单历史 200 7 - Present HTML 5 Content CSS3 Presentation
  6. 6. HTML5 HTML5 DEMO
  7. 7. HTML 发展历史 1998 2000 2002 2004 2007 HTML 4.0 XHTML1 XHTML2 WHATG HTML 5
  8. 8. 支持 HTML5 的浏览器 <ul><li>Opera 9.5+ </li></ul><ul><ul><li>Cross-document messaging </li></ul></ul><ul><ul><li>Server-sent events </li></ul></ul><ul><ul><li>Web Forms 2.0 </li></ul></ul><ul><ul><li>Canvas and video </li></ul></ul><ul><li>Safari 3.1+ </li></ul><ul><ul><li><video> and <audio> tags </li></ul></ul><ul><ul><li>Offline data storage API </li></ul></ul><ul><ul><li>Webkit(Iphone/Chrome/Android/ Nokia s60/Palm's WebOS) </li></ul></ul>
  9. 9. 支持 HTML5 的浏览器 <ul><li>FireFox 3.1+ </li></ul><ul><ul><li>offline storage and canvas </li></ul></ul><ul><ul><li>Geolocation/Web Workers/ ContentEditable </li></ul></ul><ul><ul><li>Gecko(more HTML5 APIS) </li></ul></ul><ul><li>Internet Explorer 8.0+ </li></ul><ul><ul><li>embed element and contentEditable attribute </li></ul></ul><ul><ul><li>cross-document messaging </li></ul></ul>
  10. 10. HTML5 技术概览 <ul><li>HTML5 新增和移除的元素 </li></ul><ul><li>HTML5 基本布局 </li></ul><ul><li>HTML5 对表单的支持 </li></ul><ul><li>HTML5 DOM 变化 </li></ul><ul><li>HTML5 的 Javascript APIs </li></ul><ul><ul><li>Canvas </li></ul></ul><ul><ul><li>Video/Audio </li></ul></ul><ul><ul><li>Drag&Drop </li></ul></ul><ul><ul><li>Geolocation </li></ul></ul><ul><ul><li>Application Cache </li></ul></ul><ul><ul><li>Database Storage </li></ul></ul><ul><ul><li>X-Document Messaging </li></ul></ul>
  11. 11. HTML5 新增的元素 <ul><li>多媒体及交互式元素 </li></ul><ul><ul><li>video , audio... </li></ul></ul><ul><ul><li>details , menu , c ommand... </li></ul></ul><ul><li>结构元素 </li></ul><ul><ul><li>header , footer, section, article, nav ... </li></ul></ul><ul><li>块级语义及行内元素 </li></ul><ul><ul><li>aside, figure, dialog ... </li></ul></ul><ul><ul><li>time, meter, mark, progress ... </li></ul></ul><ul><li>表单控件 </li></ul><ul><ul><li>email, url, datetime, number, range, color ... </li></ul></ul><ul><li>HTML5 新增的属性 </li></ul><ul><ul><li>contenteditable, contextmenu, data-*, hidden, item, itemprop, subject, role, aria-*, spellcheck, draggable, irrelevant, template , placeholder , autofocus, required, async, manifest ... </li></ul></ul><ul><li>HTML5 新增的事件 </li></ul><ul><ul><li>onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload ... </li></ul></ul>
  12. 12. HTML5 移除的元素 <ul><li>移除的元素 </li></ul><ul><ul><li>font, center, strike, big, s, u, acronym, applet, dir ... </li></ul></ul><ul><li>移除的属性 </li></ul><ul><ul><li>如 a , area , button , input , label , legend 和 textarea 元素的 accesskey 属性 </li></ul></ul><ul><ul><li>如 link 和 a 元素的 rev 和 charset 属性 , link 元素的 target 属性 , td 的 scope 属性, script 元素的 language 属性 , body 元素的 alink , link , text 和 vlink 属性 </li></ul></ul>
  13. 13. HTML5 基本布局 HTML4 HTML5 <! DOCTYPE html> <htm lang = &quot;en&quot;> <head> <meta charset = &quot;utf-8&quot;> <title>HTML5 Demo</title> <body> <header> <h1></h1><h2></h2> </header> <nav> <ul><li></li><li></li></ul> </nav> <section> <article></article> <article></article> </section> <aside></aside> <footer></footer> </body> </html>
  14. 14. HTML5 对表单的支持 <ul><li>新的控件类型 </li></ul><ul><ul><li><input type=&quot;url | email |d ate |tel|search|datetime|date|month|week|datetime-local|number|range|color &quot;>, <select data=&quot;http://domain/getoptions&quot;></select> </li></ul></ul><ul><li>文件上传控件 </li></ul><ul><ul><li><input type=&quot;file&quot; accept = &quot;image/png&quot; /> </li></ul></ul><ul><li>重复的模型 </li></ul><ul><ul><li>add, remove, move-up, move-down </li></ul></ul><ul><li>内建表单验证 </li></ul><ul><ul><li><input type=&quot;email&quot; required />, <input type=&quot;number&quot; min=10 max=100 /> </li></ul></ul><ul><li>XML Submission </li></ul><ul><ul><li>application/x-www-form+xml </li></ul></ul>
  15. 15. <ul><li><form action='/register' enctype=&quot;application/x-www-form+xml&quot; method=&quot;post&quot;> </li></ul><ul><li><p> </li></ul><ul><li><label for='name'>ID( 请使用 Email 注册 )</label> </li></ul><ul><li><input name='name' required type='email' /> </li></ul><ul><li><p> </li></ul><ul><li><label for='password'> 密码 </label> </li></ul><ul><li><input name='password' required type='password' /> </li></ul><ul><li><p> </li></ul><ul><li><label for='birthday'> 出生日期 </label> </li></ul><ul><li><input type='date' name='birthday' /> </li></ul><ul><li><p> </li></ul><ul><li><label for='gender'> 国籍 </label> </li></ul><ul><li><select name='country' data='countries.xml' ></select> </li></ul><ul><li><p> </li></ul><ul><li><label for='photo'> 个性头像 </label> </li></ul><ul><li><input type='file' name='photo' accept='image/*' /> </li></ul><ul><li><table> </li></ul><ul><li><thead> </li></ul><ul><li><td><button type=&quot;add&quot; template=&quot;questionId&quot; >+</button> 保密问题 </td> </li></ul><ul><li><td> 答案 </td> </li></ul><ul><li><td></td> </li></ul><ul><li></thead> </li></ul><ul><li><tr id=&quot;questionId&quot; repeat=&quot;template&quot; repeat-start=&quot;1&quot; repeat-min=&quot;1&quot; repeat-max=&quot;3&quot; > </li></ul><ul><li><td><input type=&quot;text&quot; name=&quot;questions[questionId].q&quot; /></td> </li></ul><ul><li><td><input type=&quot;text&quot; name=&quot;questions[questionId].a&quot; /></td> </li></ul><ul><li><td><button type=&quot;remove&quot;> 删除 </button></td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul><ul><li><p><input type='submit' value='send' class='submit' /></p> </li></ul><ul><li></form> </li></ul>
  16. 16. http://adamlu.com/Demo/Speech/Demo/form-html5.html
  17. 17. HTML5 DOM 变化 <ul><li>getElementsByClassName </li></ul><ul><li>Selector API </li></ul><ul><ul><li>document.querySelector() </li></ul></ul><ul><ul><li>document.querySelectorAll() </li></ul></ul><ul><li>Traversal API </li></ul><ul><ul><li>.nextElementSibling </li></ul></ul><ul><ul><li>.previousElementSibling </li></ul></ul><ul><ul><li>.firstElementChild </li></ul></ul><ul><ul><li>.lastElementChild </li></ul></ul><ul><ul><li>.children </li></ul></ul>
  18. 18. HTML5 的 Javascript APIs Web Forms2.0 Messaging Offline Applications History API Video&Audio Drag&Drop Undo Canvas Editable X-Domain Storage Geolocation Local Database
  19. 19. Video & Audio <ul><li><video height=&quot;280&quot; width=&quot;498&quot; poster =&quot;border.png&quot; id=&quot;video&quot;> <source src =&quot;coldplay.mp4&quot;> </video> </li></ul><ul><li><audio src =&quot;music.oga&quot; controls > <a href=&quot;music.oga&quot;>Download song</a> </audio> </li></ul>
  20. 20. Canvas <ul><li><canvas> 是一个新的 HTML 元素,这个元素可以被 Script 语言 ( 通常是 JavaScript) 用来绘制图形。例如可以用它来画图、合成图象、或做简单的 ( 和不那么简单的 ) 动画。 </li></ul><ul><li>var canvas = document.getElementById(&quot;canvas&quot;), context = canvas.getContext(&quot;2d&quot;); context.fillStyle=&quot;rgb(0,0,200)&quot;; context.fillRect(10, 10, 50, 50); </li></ul><ul><li>context.save(); context.restore(); context.scale(x, y); context.rotate(angle); context.translate(x, y); ...... </li></ul>
  21. 21. Drag&Drop <ul><li>拖拽事件 : dragstart, dragend, dragenter, dragleave, dragover, drag, drop </li></ul><ul><li><div draggable=&quot;true&quot; ondragstart=&quot;dragstartHandler(event)&quot;></div> function dragstartHandler(e){ </li></ul><ul><ul><li>alert('dragstart'); </li></ul></ul><ul><ul><li>} </li></ul></ul>
  22. 22. Web Workers <ul><li>让 Javascript 多线程,可以在后台做很多工作而不会阻断当前的浏览器 </li></ul><ul><li>var w = new Worker('worker.js'); w.onmessage = function(event){ </li></ul><ul><li> alert(event.data); } w.postMessage('run'); </li></ul>
  23. 23. Web Workers <ul><li>//worker.js </li></ul><ul><li>importScripts('xhr.js', 'db.js'); </li></ul><ul><li>onmessage = function(event){ if(event.data == 'run'){ run(); } } </li></ul><ul><li>function run(){ var data = doCrazyNumberCrunch(); postMessage(data); } </li></ul>
  24. 24. Geolocation navigator .geolocation .getCurrentPosition( success, error);
  25. 25. Application Cache <ul><li><html manifest = &quot;rubiks.manifest&quot; > </li></ul><ul><li>rubiks.manifest </li></ul><ul><ul><li>CACHE MANIFEST /demo/rubiks/style.css /demo/rubiks/jquery.min.js /demo/rubiks/rubiks.js #version 15 </li></ul></ul>http://remysharp.com/demo/rubiks
  26. 26. Storage <ul><li>database storage( 客户端数据库 SQLite) </li></ul><ul><li>WebKit 中已经实现 </li></ul><ul><li>var database = openDatabase('db', '1.0'); </li></ul><ul><li>database.executeSql('SELECT * FROM test', function(result){ database.executeSql('DROP TABLE test'); }); </li></ul>
  27. 27. Storage <ul><li>key/val 存储 () </li></ul><ul><ul><li>sessionStorage(window based) </li></ul></ul><ul><ul><li>localStorage(domain based) </li></ul></ul><ul><li>WebKit/IE8/Firefox 3.5 已经实现 </li></ul><ul><li>.setItem(key, value) </li></ul><ul><li>.getItem(key) </li></ul>
  28. 28. Cross-Document Messaging <ul><li>.postMessage (message, targetOrigin ) </li></ul><ul><li>.onMessage(event) </li></ul><ul><ul><li>event.data == message </li></ul></ul><ul><li>document.getElementById('iframe').contentWindow.postMessage('my message' , 'http://adamlu2.com' ); </li></ul><ul><li>window.addEventListener('message', function(e){ if(e.origion !== 'http://adamlu 1 .com'){ return; } alert(e.origion+' said: '+e.data); }, false); </li></ul>
  29. 29. http://ishtml5readyyet.com/ 2022?
  30. 30. CSS3 CSS3 DEMO
  31. 31. CSS 的发展历史 1996 1998 2001 CSS1.0 CSS2.0 CSS3.0 Cascading Style Sheets
  32. 32. 支持 CSS3 的浏览器 http://adamlu.com/Demo/Speech/Demo/CSS-Browser-Support.png
  33. 33. CSS3 技术概况 <ul><li>选择器 </li></ul><ul><li>布局 </li></ul><ul><li>样式 </li></ul><ul><li>动画 </li></ul><ul><li>其它 </li></ul>
  34. 34. CSS3- 选择器 <ul><li>属性选择器 </li></ul><ul><ul><li>a[href$='.pdf'], a[href^='mailto'], a[class*=‘item’] </li></ul></ul><ul><li>兄弟选择器 </li></ul><ul><ul><li>Div~img </li></ul></ul><ul><li>伪类选择器 </li></ul><ul><ul><li>:nth-child(n), :nth-last-child(n), :last-child, :checked, :empty, :only-child, :nth-of-type(odd), :nth-of-type(even) </li></ul></ul>
  35. 35. CSS3- 样式 <ul><li>圆角 </li></ul><ul><ul><li>border-radius: 3px </li></ul></ul><ul><ul><li>-moz-border-radius-topleft </li></ul></ul><ul><ul><li>-webkit-border-top-left-radius </li></ul></ul><ul><li>阴影 </li></ul><ul><ul><li>box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) </li></ul></ul><ul><ul><li>text-shadow: 2px 2px #444, 3px 3px #555 </li></ul></ul><ul><li>自定义字体 </li></ul><ul><ul><li>@font-face{ font-family: Adam, src:url(adam.ttf); } p{font-family:Adam, serif;} </li></ul></ul><ul><li>文本换行 </li></ul><ul><ul><li>word-wrap: normal|break-word </li></ul></ul>
  36. 36. CSS3- 样式 <ul><li>边框背景 </li></ul><ul><ul><li>border-image: url(border.png) 27 27 27 27 round round; </li></ul></ul><ul><li>渐变 </li></ul><ul><ul><li>background: -moz-linear-gradient(20%, center, 30%, center, from(blue), to(yellow)) no-repeat; </li></ul></ul><ul><li>背景 </li></ul><ul><ul><li>background-size: 100px 50px; </li></ul></ul><ul><ul><li>background-origin: content-box|border-box|padding-box; </li></ul></ul><ul><ul><li>background-clip: border-box|padding-box </li></ul></ul>
  37. 37. CSS3- 样式 <ul><li>透明 </li></ul><ul><ul><li>opacity: 0.5; </li></ul></ul><ul><li>RGBA </li></ul><ul><ul><li>color: rgba(0, 255, 0, 0.5); </li></ul></ul><ul><li>HSL/A </li></ul><ul><ul><li>color: hsl(240, 50%, 50%); hsla(240, 50%, 50%, 0.5) </li></ul></ul><ul><li>调整元素尺寸 </li></ul><ul><ul><li>resize: both|horizontal|vertical </li></ul></ul>
  38. 38. CSS3- 布局 <ul><li>盒模型 </li></ul><ul><ul><li>box-sizing: content-box|border-box; </li></ul></ul><ul><li>网格模型 </li></ul><ul><ul><li>column-count: 3; column-width: 13em; column-gap: 1em; column-rule: 1px solid black; </li></ul></ul><ul><li>CSS Table Display </li></ul><ul><ul><li>#content{display: table;} #main{display: table-cell; width:620px; padding-right: 22px;} #side{display: table-cell; width: 300px;} </li></ul></ul><ul><li>Outline </li></ul><ul><ul><li>outline-offset </li></ul></ul>
  39. 39. CSS3- 动画 <ul><li>变换 </li></ul><ul><ul><li>transform: rotate(30deg); </li></ul></ul><ul><ul><li>transform: scale(0.5, 2.0); </li></ul></ul><ul><ul><li>transform: skew(-30deg); </li></ul></ul><ul><ul><li>transform: translate(30px, 0); </li></ul></ul><ul><li>过渡 </li></ul><ul><ul><li>transition: all 1s ease-out ; </li></ul></ul><ul><li>动画 </li></ul><ul><ul><li>animation: greenPulse infinite ease-in-out 3s; </li></ul></ul>
  40. 40. CSS3- 其它 <ul><li>媒体查询 </li></ul><ul><ul><li>.entry{color: red;} @media all and {min-width: 100em}{ .entry{color: black;} } </li></ul></ul><ul><li>语音支持 </li></ul><ul><ul><li>voice-volume, voice-balance, voice-family </li></ul></ul>
  41. 41. 浏览器前缀 <ul><li>Firefox: -moz-box-shadow </li></ul><ul><li>Safari: -webkit-box-shadow </li></ul><ul><li>Opera: -o-box-shadow </li></ul><ul><li>IE: -ms-box-shadow </li></ul>
  42. 42. CSS3 应用原则 <ul><li>优雅降级 </li></ul><ul><li>对于不支持 CSS3 的浏览器可以使用 Javascript 来实现 </li></ul><ul><ul><li>如 ie7.js, ie8.js 对 CSS 选择符的优化 </li></ul></ul><ul><ul><li>如对于不支持 :hover 的 ie6 使用 JS </li></ul></ul><ul><li>在向用户或老板推广新技术的同时也要关注他们的目标与可行性,不能为了技术而技术 </li></ul>
  43. 43. 参考资源 <ul><li>http://zh.wikipedia.org/wiki/HTML_5 </li></ul><ul><li>http://www.whatwg.org/html5/ </li></ul><ul><li>http://dev.w3.org/html5/spec/Overview.html </li></ul><ul><li>http://html5demos.com/ </li></ul><ul><li>http://www.w3.org/TR/html5-diff/ </li></ul><ul><li>http://www.alistapart.com/articles/previewofhtml5 </li></ul><ul><li>https:// developer.mozilla.org/cn/DOM/Storage </li></ul><ul><li>http://www.w3.org/TR/css3-roadmap/ </li></ul><ul><li>http://dev.w3.org/html5 / </li></ul><ul><li>http://dev.w3.org/csswg/ </li></ul><ul><li>http://www.css3.info/modules/ </li></ul>
  44. 44. Thanks! Q&A Email: [email_address] MSN: luchaowu@hotmail.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×