响应式增强安顿

2015/03/18 · CSS,
HTML5,
JavaScript ·
响应式,
设计

本文由 伯乐在线 –
fzr
翻译，黄利民
校稿。未经许可，禁止转发！
英文出处：24ways.org。欢迎加入翻译组。

24ways
在那10年中曾经日渐变得强大了。在因特网历史中那已是一个千古永远的了。回顾一下在那段时光里大家见证所有变更：Ajax的起来，移动设备的新增，前端开发工具不可预感的前景。

工具和技能来来往往，兴起衰落，但在过去的十年中有一件事于自身而言是一贯尚未变动的：渐进式增强。

渐进式增强不是一门技术。它更像是一种沉思方式。渐进式增强鼓励你去思考网页所提供的为主意义，而不是去想一个已成功网页如何突显的细微难点。所以渐进式增强允许你以更抽象的办法考虑要旨功能，而不是纠结于网页在科学的宽屏设备上的佳绩图景。

若是您曾经确定要拉长的骨干职能是如何–向购物栏中添加一件货物，宣布一条信息，分享一张图纸–然后您可以以一种最简便易行的措施贯彻该意义。那平时也意味要从美好的老式的HTML入手。你所急需的一般性只是链接和表格。然后，只要你早就使得该焦点职能为主工作，你就可以起头对越来越多现代浏览器压实作用以逐步提供更好的用户体验。

以那种措施行事的补益不仅仅是你的网页可以在旧式浏览器中劳作（即使只是骨干能运作）。它还是能确保如若在现在的浏览器中冒出的小毛病不至于酿成大祸。

人们对渐进式增强存在一个误解，认为渐进式增强就是花时间解决旧式浏览器，但是谜底却反倒。将基本功效投入使用并不会费用太久。而且只要你已经到位那有些做事，你就可以随心所欲地去测试新型最好的浏览器技术，脑中的意识是不怕它们现在还不可能被广泛辅助，也未曾难题，因为您曾经把最有限支撑的东西投入使用了。

对待Web发展的关键在于意识到不会有最终的接口—可能会有不少唯有一线差异但会借助于自由时刻任意用户的质量和容量的接口。网站不必要在每一个浏览器中都一模一样。

真正掌握了那几个就是一个庞大地前进。你可以把日子开支在为更加多浏览器提供最好经验的同时确保能在其余建立办事的地点落实宗旨作用，而不是大力使你的网站在距离巨大的浏览器中一模一样。

同意我以一个简约的事例来抒发：导航。

率先步：焦点职能

要是我们现在有一个关于圣诞节12天欢庆的概括网站，一天一个页面。那个宗旨功效也分外清楚了：

1、精通其中擅自一天。
2、从一天到另一天浏览。

首个职能可以因此将文件用头条，段落以及具有常用的HTML结构化标签组装起来完毕。第一个则通过一多元的超链接完毕。
那么现在导航列表最符合放在何地呢？个人而言，我是一个跳转到页脚导航格局的粉丝。那个格局先放网页内容，其次才是导航。页面顶部有一个饱含href属性的总是指向导航的竹签。

XHTML

<a class=”control” href=”#menu”>Menu</a> … <nav
id=”menu” role=”navigation”>… <a class=”control”
href=”#top”>Dismiss</a></nav>

1 2 3 4 5

<a class="control" href="#menu">Menu</a> …   <nav id="menu" role="navigation">… <a class="control" href="#top">Dismiss</a></nav>

翻开页脚超链导航方式的言传身教。

鉴于只有超链接，这几个格局也只是在互连网初兴时期能在每一个浏览器上干活。Web浏览器要做的只是显示超链接（正如名字所示）。

其次步：增强型布局

在小显示屏设备上，比如移动电话，页脚链接形式是一个一定简单的解决办法。一旦有越多的屏幕空间可应用时，就可以使用CSS将导航重新定位在情节之上。我可以安装position属性为absolute,使用弹性布局盒，或者设置display属性为table。

CSS

@media all and (min-width: 35em) { .control { display: none; } body {
display: table; } [role=”navigation”] { display: table-caption;
columns: 6 15em; } }

1 2 3 4 5 6 7 8 9 10 11 12

@media all and (min-width: 35em) {   .control {     display: none;   }   body {     display: table;   }   [role="navigation"] {     display: table-caption;     columns: 6 15em;   } }

翻开宽屏样式的言传身教。

第三步：增强！

是的。现在我早已足以为所有人提供基本效率了，而且对宽屏也有非常不错的响应风格设计。到那边自己可以告一段落脚步了，但渐进式增强的实际上优点却是我还平昔不水到渠成的。从这时初始，我得以疯狂地为当代浏览器添加各类奇怪的优化效能，而不用担心不可以为旧式浏览器提供退路—退路曾经准备好了。

事实上我想为小屏幕的设备提供一个美好的屏外画布。下边是自身的筹划：

1、 将导航放置在主内容上面。
2、 监听伪类为.control的链接是不是被点击并拦截其反应。
3、 当这么些链接被点击后，为本位body切换赋予伪类.active。
4、 要是伪类.active存在，将内容滑出以显示导航。

上边是固定内容和导航的CSS代码：

CSS

@media all and (max-width: 35em) { [role=”main”] { transition: all
.25s; width: 100%; position: absolute; z-index: 2; top: 0; right: 0; }
[role=”navigation”] { width: 75%; position: absolute; z-index: 1; top:
0; right: 0; } .active [role=”main”] { transform: translateX(-75%); }
}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

@media all and (max-width: 35em) {   [role="main"] {     transition: all .25s;     width: 100%;     position: absolute;     z-index: 2;     top: 0;     right: 0;   }   [role="navigation"] {     width: 75%;     position: absolute;     z-index: 1;     top: 0;     right: 0;   }   .active [role="main"] {     transform: translateX(-75%);   } }

在自身的JavaScript代码中，我将会监听伪类.control链接上的别样点击事件，然后据此为主导body切换赋予伪类.active。

JavaScript

(function (win, doc) { ‘use strict’; var linkclass = ‘control’,
activeclass = ‘active’, toggleClassName = function (element,
toggleClass) { var reg = new RegExp(‘(s|^)’ + toggleClass + ‘(s|$)’); if
(!element.className.match(reg)) { element.className += ‘ ‘ +
toggleClass; } else { element.className = element.className.replace(reg,
”); } }, navListener = function (ev) { ev = ev || win.event; var target
= ev.target || ev.srcElement; if (target.className.indexOf(linkclass)
!== -1) { ev.preventDefault(); toggleClassName(doc.body, activeclass); }
}; doc.addEventListener(‘click’, navListener, false); }(this,
this.document));

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

(function (win, doc) {   ‘use strict’;   var linkclass = ‘control’,     activeclass = ‘active’,     toggleClassName = function (element, toggleClass) {       var reg = new RegExp(‘(s|^)’ + toggleClass + ‘(s|$)’);       if (!element.className.match(reg)) {         element.className += ‘ ‘ + toggleClass;       } else {         element.className = element.className.replace(reg, ”);       }     },     navListener = function (ev) {       ev = ev || win.event;       var target = ev.target || ev.srcElement;       if (target.className.indexOf(linkclass) !== -1) {         ev.preventDefault();         toggleClassName(doc.body, activeclass);       }     };   doc.addEventListener(‘click’, navListener, false); }(this, this.document));

自家一度准备妥当了，是吧？哪有那么快！

CSS3与页面布局学习笔记（一）——概要、拔取器、特殊性与刻度单位，css3上学笔记

web前端开发者最最注的内容是七个：HTML、CSS与JavaScript，他们分别在分裂地点发挥自己的成效，HTML完结页面结构，CSS达成页面的表现与作风，JavaScript完结部分客户端的成效与工作。当然内容与用户资源也是无法忽视的。尽量不要跨职分范围使用，有点“SRP单一义务”的意思，如字体大小应该是CSS控制的，就不该使用HTML标签落成，即使CSS能一举成功的标题尽量不要用JavaScript达成。

javascript和css完毕垂直方向自适应的三角形提醒菜单

那是一个比较简单实用的食谱，最重点的是她不要求引用jQuery库。菜单在笔直方向上能做到自适应，当主菜单靠近顶部，子菜单将会在底下，当主菜单靠近底部，子菜单在上头。运用Modernizr的下手检测成效，大家得以让子菜单的响应在pc上是hover，而在触摸设备上是点击。例子中还出现说法了何等在步长比较窄的场馆下怎么着调整布局。分享一个最好用的UI前端框架！

html代码：

.代码

1. • • • Home
   • • • • Veggie made
   • • • Sorrel desert
     • • Raisin kakadu
     • • Plum salsify
     • • Bok choy celtuce
     • • Onion endive
     • • Bitterleaf
     • • Sea lettuce
   • • • • Pepper tatsoi
   • • • Brussels sprout
     • • Kakadu lemon
     • • Juice green
     • • Wine fruit
     • • Garlic mint
     • • Zucchini garnish
     • • Sea lettuce
   • • • • Sweet melon
   • • • Sorrel desert
     • • Raisin kakadu
     • • Plum salsify
     • • Bok choy celtuce
     • • Onion endive
     • • Bitterleaf
   • • 前端UI分享

   css代码分享一个最好用的UI前端框架！

   .代码

   1. /* Iconfont made with icomoon.com */
   2. @font-face {
   3. font-family: ‘cbp-tmicons’;
   4. src:url(‘../fonts/tmicons/cbp-tmicons.eot’);
   5. src:url(‘../fonts/tmicons/cbp-tmicons.eot?#iefix’)
      format(’embedded-opentype’),
   6. url(‘../fonts/tmicons/cbp-tmicons.woff’) format(‘woff’),
   7. url(‘../fonts/tmicons/cbp-tmicons.ttf’) format(‘truetype’),
   8. url(‘../fonts/tmicons/cbp-tmicons.svg#cbp-tmicons’)
      format(‘svg’);
   9. font-weight: normal;
   10. font-style: normal;
   11. }
   12. 1. /* reset list style */
   13. .cbp-tm-menu,
   14. .cbp-tm-menu ul {
   15. list-style: none;
   16. }
   17. 1. /* set menu position; change here to set to relative or
          float, etc. */
   18. .cbp-tm-menu {
   19. display: block;
   20. position: absolute;
   21. z-index: 1000;
   22. bottom: 0;
   23. width: 100%;
   24. background: #47a3da;
   25. text-align: right;
   26. padding: 0 2em;
   27. margin: 0;
   28. text-transform: capitalize;
   29. }
   30. 1. /*css3就学笔记，响应式增强统筹。 first level menu items */
   31. .cbp-tm-menu > li {
   32. display: inline-block;
   33. margin: 0 2.6em;
   34. position: relative;
   35. }
   36. 1. .cbp-tm-menu > li > a {
   37. line-height: 4em;
   38. padding: 0 0.3em;
   39. font-size: 1.2em;
   40. display: block;
   41. color: #fff;
   42. }

   43. 前端UI分享 .代码

       1. .no-touch .cbp-tm-menu > li > a:hover,
       2. .no-touch .cbp-tm-menu > li > a:active {
       3. color: #02639d;
       4. }
       5. 1. /* sumbenu with transitions */
       6. .cbp-tm-submenu {
       7. position: absolute;
       8. display: block;
       9. visibility: hidden;
       10. opacity: 0;
       11. padding: 0;
       12. text-align: left;
       13. pointer-events: none;
       14. -webkit-transition: visibility 0s, opacity 0s;
       15. -moz-transition: visibility 0s, opacity 0s;
       16. transition: visibility 0s, opacity 0s;
       17. }
       18. 1. .cbp-tm-show .cbp-tm-submenu {
       19. width: 16em;
       20. left: 50%;
       21. margin: 0 0 0 -8em;
       22. opacity: 1;
       23. visibility: visible;
       24. pointer-events: auto;
       25. -webkit-transition: visibility 0s, opacity 0.3s;
       26. -moz-transition: visibility 0s, opacity 0.3s;
       27. transition: visibility 0s, opacity 0.3s;
       28. }
       29. 1. .cbp-tm-show-above .cbp-tm-submenu {
       30. bottom: 100%;
       31. padding-bottom: 10px;
       32. }
       33. 1. .cbp-tm-show-below .cbp-tm-submenu {
       34. top: 100%;
       35. padding-top: 10px;
       36. }
       37. 1. /* extreme cases: not enough space on the sides */
       38. .cbp-tm-nospace-right .cbp-tm-submenu {
       39. right: 0;
       40. left: auto;
       41. }
       42. 1. .cbp-tm-nospace-left .cbp-tm-submenu {
       43. left: 0;
       44. }

       45. 前端UI分享 .代码

           1. /* last menu item has to fit on the screen */
           2. .cbp-tm-menu > li:last-child .cbp-tm-submenu {
           3. right: 0;
           4. }
           5. 1. /*
           6. arrow: depending on where the menu will be shown, we set
           7. the right position for the arrow
           8. */
           9. 1. .cbp-tm-submenu:after {
           10. border: solid transparent;
           11. content: ” “;
           12. height: 0;
           13. width: 0;
           14. position: absolute;
           15. pointer-events: none;
           16. }
           17. 1. .cbp-tm-show-above .cbp-tm-submenu:after {
           18. top: 100%;
           19. margin-top: -10px;
           20. }
           21. 1. .cbp-tm-show-below .cbp-tm-submenu:after {
           22. bottom: 100%;
           23. margin-bottom: -10px;
           24. }
           25. 1. .cbp-tm-submenu:after {
           26. border-color: transparent;
           27. border-width: 16px;
           28. margin-left: -16px;
           29. left: 50%;
           30. }
           31. 1. .cbp-tm-show-above .cbp-tm-submenu:after {
           32. border-top-color: #fff;
           33. }
           34. 1. 金沙注册送58，.cbp-tm-show-below .cbp-tm-submenu:after {
           35. border-bottom-color: #fff;
           36. }
           37. 1. .cbp-tm-submenu > li {
           38. display: block;
           39. background: #fff;
           40. }
           41. 1. .cbp-tm-submenu > li > a {
           42. padding: 5px 2.3em 5px 0.6em; /* top/bottom paddings in
               ’em’ cause a tiny “jump” in Chrome on Win */
           43. display: block;
           44. font-size: 1.2em;
           45. position: relative;
           46. color: #47a3da;
           47. border: 4px solid #fff;
           48. -webkit-transition: all 0.2s;
           49. -moz-transition: all 0.2s;
           50. transition: all 0.2s;
           51. }
           52. 1. .no-touch .cbp-tm-submenu > li > a:hover,
           53. .no-touch .cbp-tm-submenu > li > a:active {
           54. color: #fff;
           55. background: #47a3da;
           56. }
           57. 1. /* the icons (main level menu icon and sublevel
                  icons) */
           58. .cbp-tm-submenu li a:before,
           59. .cbp-tm-menu > li > a:before {
           60. font-family: ‘cbp-tmicons’;
           61. speak: none;
           62. font-style: normal;
           63. font-weight: normal;
           64. font-variant: normal;
           65. text-transform: none;
           66. line-height: 1;
           67. vertical-align: middle;
           68. margin-right: 0.6em;
           69. -webkit-font-smoothing: antialiased;
           70. }

           71. 前端UI分享 .代码

               1. .cbp-tm-submenu li a:before {
               2. position: absolute;
               3. top: 50%;
               4. margin-top: -0.5em;
               5. right: 0.5em;
               6. }
               7. 1. .cbp-tm-menu > li >
                     a:not(:only-child):before {
               8. content: “\f0c9”;
               9. font-size: 60%;
               10. opacity: 0.3;
               11. }
               12. 1. .cbp-tm-icon-archive:before {
               13. content: “\e002”;
               14. }
               15. 1. .cbp-tm-icon-cog:before {
               16. content: “\e003”;
               17. }
               18. 1. .cbp-tm-icon-users:before {
               19. content: “\e004”;
               20. }
               21. 1. .cbp-tm-icon-earth:before {
               22. content: “\e005”;
               23. }
               24. 1. .cbp-tm-icon-location:before {
               25. content: “\e006”;
               26. }
               27. 1. .cbp-tm-icon-mobile:before {
               28. content: “\e007”;
               29. }
               30. 1. .cbp-tm-icon-screen:before {
               31. content: “\e008”;
               32. }
               33. 1. .cbp-tm-icon-mail:before {
               34. content: “\e009”;
               35. }
               36. 1. .cbp-tm-icon-contract:before {
               37. content: “\e00a”;
               38. }
               39. 1. .cbp-tm-icon-pencil:before {
               40. content: “\e00b”;
               41. }
               42. 1. .cbp-tm-icon-article:before {
               43. content: “\e00c”;
               44. }
               45. 1. .cbp-tm-icon-clock:before {
               46. content: “\e00d”;
               47. }
               48. 1. .cbp-tm-icon-videos:before {
               49. content: “\e00e”;
               50. }
               51. 1. .cbp-tm-icon-pictures:before {
               52. content: “\e00f”;
               53. }
               54. 1. .cbp-tm-icon-link:before {
               55. content: “\e010”;
               56. }
               57. 1. .cbp-tm-icon-refresh:before {
               58. content: “\e011”;
               59. }
               60. 1. .cbp-tm-icon-help:before {
               61. content: “\e012”;
               62. }
               63. 1. /* Media Queries */
               64. @media screen and (max-width: 55.6875em) {
               65. .cbp-tm-menu {
               66. font-size: 80%;
               67. }
               68. }

               69. 前端UI分享 .代码

                   1. @media screen and (max-height: 25.25em), screen
                      and (max-width: 44.3125em) {
                   2. 1. 3. .cbp-tm-menu {
                   3. font-size: 100%;
                   4. position: relative;
                   5. text-align: center;
                   6. padding: 0;
                   7. top: auto;
                   8. }
                   9. 1. 11. .cbp-tm-menu > li {
                   10. display: block;
                   11. margin: 0;
                   12. border-bottom: 4px solid #3793ca;
                   13. }
                   14. 1. 17. .cbp-tm-menu > li:first-child {
                   15. border-top: 4px solid #3793ca;
                   16. }
                   17. 1. 21. li.cbp-tm-show > a,
                   18. .no-touch .cbp-tm-menu > li > a:hover,
                   19. .no-touch .cbp-tm-menu > li > a:active {
                   20. color: #fff;
                   21. background: #02639d;
                   22. }
                   23. 1. 28. .cbp-tm-submenu {
                   24. position: relative;
                   25. display: none;
                   26. width: 100%;
                   27. }
                   28. 1. 34. .cbp-tm-submenu > li {
                   29. padding: 0;
                   30. }
                   31. 1. 38. .cbp-tm-submenu > li > a {
                   32. padding: 0.6em 2.3em 0.6em 0.6em;
                   33. border: none;
                   34. border-bottom: 2px solid #6fbbe9;
                   35. }
                   36. 1. 44. .cbp-tm-submenu:after {
                   37. display: none;
                   38. }
                   39. 1. 48. .cbp-tm-menu .cbp-tm-show .cbp-tm-submenu {
                   40. display: block;
                   41. width: 100%;
                   42. left: 0;
                   43. margin: 0;
                   44. padding: 0;
                   45. bottom: auto;
                   46. top: auto;
                   47. }
                   48. 1. 58. }

                       javascript代码

                       .代码

                       1. 1. /**
                          2. * cbpTooltipMenu.js v1.0.0
                          3. *
                          4. *
                          5. * Licensed under the MIT license.
                          6. *

                          7. *
                          8. * Copyright 2013, Codrops
                          9. *
                          10. */
                          11. ;( function( window ) {
                          12. 13. ‘use strict’;
                          14. 15. var document = window.document,
                          16. docElem = document.documentElement;
                          17. 18. function extend( a, b ) {
                          19. for( var key in b ) {
                          20. if( b.hasOwnProperty( key ) ) {
                          21. a[key] = b[key];
                          22. }
                          23. }
                          24. return a;
                          25. }
                          26. 27. // from

                          28. function getViewportH() {
                          29. var client = docElem[‘clientHeight’],
                          30. inner = window[‘innerHeight’];
                          31. if( client < inner )
                          32. return inner;
                          33. else
                          34. return client;
                          35. }
                          36. 37. //

                          38. function getOffset( el ) {
                          39. return el.getBoundingClientRect();
                          40. }
                          41. 42. //

                          43. function isMouseLeaveOrEnter(e, handler) {
                          44. if (e.type != ‘mouseout’ && e.type !=
                          ‘mouseover’) return false;
                          45. var reltg = e.relatedTarget ?
                          e.relatedTarget :
                          46. e.type == ‘mouseout’ ? e.toElement :
                          e.fromElement;
                          47. while (reltg && reltg != handler) reltg =
                          reltg.parentNode;
                          48. return (reltg != handler);
                          49. }
                          50. 51. function cbpTooltipMenu( el, options ) {
                          52. this.el = el;
                          53. this.options = extend( this.defaults,
                          options );
                          54. this._init();
                          55. }
                          56. 前端UI分享 .代码
                          1. cbpTooltipMenu.prototype = {
                          2. defaults : {
                          3. // add a timeout to avoid the menu to
                          open instantly
                          4. delayMenu : 100
                          5. },
                          6. _init : function() {
                          7. this.touch = Modernizr.touch;
                          8. this.menuItems =
                          document.querySelectorAll( ‘#’ +
                          this.el.id + ‘ > li’ );
                          9. this._initEvents();
                          10. },
                          11. _initEvents : function() {
                          12. 13. var self = this;
                          14. 15. Array.prototype.slice.call(
                          this.menuItems ).forEach( function( el,
                          i ) {
                          16. var trigger = el.querySelector( ‘a’ );
                          17. if( self.touch ) {
                          18. trigger.addEventListener( ‘click’,
                          function( ev ) { self._handleClick(
                          this, ev ); } );
                          19. }
                          20. else {
                          21. trigger.addEventListener( ‘click’,
                          function( ev ) {
                          22. if( this.parentNode.querySelector(
                          ‘ul.cbp-tm-submenu’ ) ) {
                          23. ev.preventDefault();
                          24. }
                          25. } );
                          26. el.addEventListener( ‘mouseover’,
                          function(ev) { if( isMouseLeaveOrEnter(
                          ev, this ) ) self._openMenu( this ); }
                          );
                          27. el.addEventListener( ‘mouseout’,
                          function(ev) { if( isMouseLeaveOrEnter(
                          ev, this ) ) self._closeMenu( this ); }
                          );
                          28. }
                          29. } );
                          30. 31. },
                          32. _openMenu : function( el ) {
                          33. 34. var self = this;
                          35. clearTimeout( this.omtimeout );
                          36. this.omtimeout = setTimeout( function()
                          {
                          37. var submenu = el.querySelector(
                          ‘ul.cbp-tm-submenu’ );
                          38. 39. if( submenu ) {
                          40. el.className = ‘cbp-tm-show’;
                          41. if( self._positionMenu( el ) === ‘top’
                          ) {
                          42. el.className += ‘ cbp-tm-show-above’;
                          43. }
                          44. else {
                          45. el.className += ‘ cbp-tm-show-below’;
                          46. }
                          47. }
                          48. }, this.touch ? 0 :
                          this.options.delayMenu );
                          49. 50. },
                          51. _closeMenu : function( el ) {
                          52. 53. clearTimeout( this.omtimeout );
                          54. 55. var submenu = el.querySelector(
                          ‘ul.cbp-tm-submenu’ );
                          56. 57. if( submenu ) {
                          58. // based on

                          59. el.className = el.className.replace(new
                          RegExp(“(^|\\s+)” + “cbp-tm-show” +
                          “(\\s+|$)”), ‘ ‘);
                          60. el.className = el.className.replace(new
                          RegExp(“(^|\\s+)” +
                          “cbp-tm-show-below” + “(\\s+|$)”), ‘
                          ‘);
                          61. el.className = el.className.replace(new
                          RegExp(“(^|\\s+)” +
                          “cbp-tm-show-above” + “(\\s+|$)”), ‘
                          ‘);
                          62. }
                          63. 64. },
                          65. _handleClick : function( el, ev ) {
                          66. var item = el.parentNode,
                          67. items = Array.prototype.slice.call(
                          this.menuItems ),
                          68. submenu = item.querySelector(
                          ‘ul.cbp-tm-submenu’ )
                          69. 70. // first close any opened one..
                          71. if( this.current && items.indexOf( item
                          ) !== this.current ) {
                          72. this._closeMenu( this.el.children[
                          this.current ] );
                          73. this.el.children[ this.current
                          ].querySelector( ‘ul.cbp-tm-submenu’
                          ).setAttribute( ‘data-open’, ‘false’ );
                          74. }
                          75. 76. if( submenu ) {
                          77. ev.preventDefault();
                          78. 79. var isOpen = submenu.getAttribute(
                          ‘data-open’ );
                          80. 81. if( isOpen === ‘true’ ) {
                          82. this._closeMenu( item );
                          83. submenu.setAttribute( ‘data-open’,
                          ‘false’ );
                          84. }
                          85. else {
                          86. this._openMenu( item );
                          87. this.current = items.indexOf( item );
                          88. submenu.setAttribute( ‘data-open’,
                          ‘true’ );
                          89. }
                          90. }
                          91. 92. },
                          93. arget=”_blank”
                          href=”
                          94. 95. _positionMenu : function( el ) {
                          96. // checking where’s more space left in
                          the viewport: above or below the element
                          97. var vH = getViewportH(),
                          98. ot = getOffset(el),
                          99. spaceUp = ot.top ,
                          100. spaceDown = vH – spaceUp –
                          el.offsetHeight;
                          101. 102. return ( spaceDown <= spaceUp ?
                          ‘top’ : ‘bottom’ );
                          103. }
                          104. }
                          105. 106. // add to global namespace
                          107. window.cbpTooltipMenu = cbpTooltipMenu;
                          108. 109. window );

                          那是一个相比简单实用的食谱，最重点的是她不需求引用jQuery库。菜单在笔直方向上能做…

点评：纵然近年来的主流浏览器已经已毕了过多的HTML5新特色，可是不少开发者根本就没留神到那个更精简，也很有用的API，本连串作品介绍这一个接口API，同时也期待能鼓励越来越多开发者去追究那一个还不有名的API

业内符合测试

自家借使在本人的代码中已经落实add伊芙ntListener函数。那并不是一个安全的如果。因为JavaScript不像HTML或CSS那样具有容错性。借使您接纳了一个浏览器无法识其余HTML元素或质量，或是使用了一个浏览器不可以知道的CSS接纳器，属性或是值，那都不是大难点。浏览器会忽略掉它无法识其他东西：既不会抛出错误也不会停下解析文件。

JavaScript就分歧了。倘若您的JavaScript代码有不当，又或者使用了一个浏览器不可能辨其他JavaScript函数或品质，浏览器会抛出错误，而且会截止解析文件。这就是干吗JavaScript中特征在应用以前务要求测试。那也注解将中央功用看重于JavaScript是丰裕不安全的。

就自我而言，我索要测试add伊夫ntListener函数的存在性：

JavaScript

(function (win, doc) { if (!win.addEventListener) { return; } … var
enhanceclass = ‘cutsthemustard’; doc.documentElement.className += ‘ ‘ +
enhanceclass; }(this, this.document));

1 2 3 4 5 6 7 8

(function (win, doc) {   if (!win.addEventListener) {     return;   }   …   var enhanceclass = ‘cutsthemustard’;   doc.documentElement.className += ‘ ‘ + enhanceclass; }(this, this.document));

BBC的大牛们称那种特性测试为标准符合测试。假如一个浏览器通过了该测试，它就完毕了专业，所以它就收获了抓实品质。即便一个浏览器没能达到标准，它就不曾提升的属性。那也不算什么坏事，记住，网站不需要在种种浏览器中都表现的如出一辙。

自己期待确保自己的离线画布样式只可以利用于符合标准的浏览器。我会选用JavaScript为文档添加一个伪类.cutsthemustard：

JavaScript

(function (win, doc) { if (!win.addEventListener) { return; } … var
enhanceclass = ‘cutsthemustard’; doc.documentElement.className += ‘ ‘ +
enhanceclass; }(this, this.document));

1 2 3 4 5 6 7 8

(function (win, doc) {   if (!win.addEventListener) {     return;   }   …   var enhanceclass = ‘cutsthemustard’;   doc.documentElement.className += ‘ ‘ + enhanceclass; }(this, this.document));

今天本身可以行使已存在的类名来调整自己的CSS：

CSS

@media all and (max-width: 35em) { .cutsthemustard [role=”main”] {
transition: all .25s; width: 100%; position: absolute; z-index: 2; top:
0; right: 0; } .cutsthemustard [role=”navigation”] { width: 75%;
position: absolute; z-index: 1; top: 0; right: 0; } .cutsthemustard
.active [role=”main”] { transform: translateX(-75%); } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

@media all and (max-width: 35em) {   .cutsthemustard [role="main"] {     transition: all .25s;     width: 100%;     position: absolute;     z-index: 2;     top: 0;     right: 0;   }   .cutsthemustard [role="navigation"] {     width: 75%;     position: absolute;     z-index: 1;     top: 0;     right: 0;   }   .cutsthemustard .active [role="main"] {     transform: translateX(-75%);   } }

查阅符合标准的增强型离线画布导航演示。记住，那只适用于小屏幕，所以你可能会须求将浏览器窗口压扁。

一、CSS3概要

CSS（Cascading Style
Sheet）是层叠样式表的情致，CSS3就是在CSS2.1的根基回升级的CSS新本子，属于HTML5的一局地。它可以有效地对页面的布局、字体、颜色、背景、动画和其余功用落实。CSS3是CSS技术的升官版本，CSS3语言开发是通向模块化发展的。之前的业内作为一个模块实在是太庞大而且相比较复杂，所以，把它表明为一些小的模块，越来越多新的模块也被参加进来。这一个模块包罗：
盒子模型、列表模块、超链接格局 、语言模块 、背景和边框 、文字特效
、多栏布局等。

原稿地址：5 HTML5 APIs You Didn’t Know Existed
初稿日期： 二〇一〇年0七月27日
翻译日期： 二〇一三年四月7日
当人们看到或者说出”HTML5″那个词的时候，估量最少有一半之上的人，会联想到她既是一个癫狂而又充满魅力的尤物，同时也是一只好把您搞得焦头烂额的独角兽，这能怪大家这么些开发者吗？
我们注意到那个基础的Api停滞发展了如此遥远的光阴(大致是1999-2009)，以至于像”placeholder”那样基础的一个外加成效，也要费用大家不短的大运来处理。
固然如今的主流浏览器已经落到实处了很多的HTML5新特点，但是过多开发者根本就没留神到那一个更精简，也很有用的API。
本连串小说介绍那些接口API，同时也愿意能砥砺愈多开发者去探索那么些还不盛名的API。
Element.classList
本条特性已经发布了好几年，通过classList,大家可以通过JavaScript来决定底层css的class属性.
代码如下：

进步所有！

那仅仅是一个针锋相相比较不难的例证，但它表达了渐进式增强背后的缅怀：只要您曾经为所有人提供了主导作用，就可以随意为现代浏览器扩大最流行的增强品质。

渐进式增强并不代表你必须为所有人都提供平等的效应—恰恰相反。那也是干吗要求赶紧确定你的宗旨功用是何许，而且有限支撑这几个基本职能能够被多数骨干技巧提供完结。在那几个点的基本功上，你可以随心所欲添加更加多的不属于重点职务的特征。你可以在能支撑更加多特点的浏览器上相应的增进越多的性质，比如CSS的卡通片效果，JavaScript的固化功用以及HTML中新的输入框类型。

正如我所说的，渐进式增强不是一门技术。它是一种构思格局。若是您早就上马运用那种思考情势，你就曾经准备好了直面接下去的十年了。

赞 1 收藏
评论

1.1、特点

代码如下:

关于小编：fzr

微博：@fzr-fzr）
个人主页 ·
我的篇章 ·
26

1.2、效果演示

纯CSS3画出小黄人并落实动画效果

HTML页面：

<!DOCTYPE
html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>drawLittleHuang</title> <link
rel=”stylesheet” type=”text/css” href=”drawLittleHuang.css”>
</head> <body> <div class=”wrapper”><!– 容器
–> <div class=”littleH”><!– 小黄人 –> <div
class=”bodyH”><!– 身体 –> <div class=”trousers”><!–
裤子 –> <div class=”condoleBelt”><!– 吊带 –> <div
class=”left”></div> <div class=”right”></div>
</div> <div class=”trousers_top”></div><!–
裤子卓越的矩形部分 –> <div class=”pocket”></div><!–
裤袋 –> <!– 三条线 –> <span
class=”line_left”></span> <span
class=”line_right”></span> <span
class=”line_bottom”></span> </div> </div> <div
class=”hair”><!– 头发 –> <span
class=”left_hair_one”></span> <span
class=”left_hair_two”></span> </div> <div
class=”eyes”><!– 眼睛 –> <div class=”leftEye”><!–
左眼 –> <div class=”left_blackEye”> <div
class=”left_white”></div> </div> </div> <div
class=”rightEye”><!– 右眼 –> <div
class=”right_blackEye”> <div class=”right_white”></div>
</div> </div> </div> <div class=”mouse”><!–
嘴巴 –> <div class=”mouse_shape”></div> </div>
<div class=”hands”><!– 双手 –> <div
class=”leftHand”></div> <div
class=”rightHand”></div> </div> <div
class=”feet”><!– 双脚 –> <div
class=”left_foot”></div> <div
class=”right_foot”></div> </div> <div
class=”groundShadow”></div><!– 脚底阴影 –> </div>
</div> </body> </html> View Code

CSS样式：

@charset
“utf-8″; body{ margin: 0; padding:0; } .wrapper{ width: 300px;
margin:100px auto; } .litteH{ position: relative; } .bodyH{ position:
absolute; width: 240px; height: 400px; border:5px solid #000;
border-radius: 115px; background: rgb(249,217,70); overflow: hidden;
z-index: 2; } .bodyH .condoleBelt{ position: absolute; } .bodyH
.condoleBelt .left, .bodyH .condoleBelt .right{ width: 100px; height:
16px; border:5px solid #000; background: rgb(32,116,160); position:
absolute; top:-90px; left:-35px; z-index: 2;
-webkit-transform:rotate(45deg); } .bodyH .condoleBelt .left{ top:-88px;
left:165px; -webkit-transform:rotate(-45deg); } .bodyH .condoleBelt
.left:after, .bodyH .condoleBelt .right:after{ content: ”; width: 8px;
height: 8px; border-radius: 50%; background: #000; position: absolute;
top:4px; left:88px; } .bodyH .condoleBelt .left:after{ left:5px; }
.bodyH .trousers{ position: absolute; bottom: 0; width: 100%; height:
100px; border-top: 6px solid #000; background: rgb(32,116,160); }
.trousers_top{ width: 160px; height: 60px; border:6px solid #000;
border-bottom: none; border-radius: 0 0 5px 5px; background:
rgb(32,116,160); position: absolute; bottom: 100px; left:34px; }
.pocket{ width: 60px; height: 45px; border:6px solid #000;
border-radius: 0px 0px 25px 25px; position: absolute; bottom:65px;
left:84px; } .line_right{ width: 30px; height: 30px;
border-bottom-left-radius: 100px; border-bottom:6px solid #000;
border-left:6px solid #000; position: absolute; left: 0; bottom:60px;
-webkit-transform:rotate(-75deg); } .line_left{ width: 30px; height:
30px; border-bottom-right-radius: 100px; border-bottom:6px solid #000;
border-right:6px solid #000; position: absolute; right: 0; bottom:63px;
-webkit-transform:rotate(75deg); } .line_bottom{ height: 40px;
border:3px solid #000; border-radius: 3px; position: absolute;
left:118px; bottom: 0px; } .hair{ position: relative; }
.left_hair_one{ width: 130px; height: 100px; border-radius: 50%;
border-top:8px solid #000; position: absolute; left:17px; top:-17px;
-webkit-transform:rotate(27deg); -webkit-animation: lefthair 2s
ease-in-out infinite; } @-webkit-keyframes lefthair{ 0%,25%,31%,100%{ }
30%{ -webkit-transform: rotate(31deg) translate3d(-3px,-1px,0); } }
.left_hair_two{ width: 80px; height: 80px; border-radius: 50%;
border-top:6px solid #000; position: absolute; left:45px; top:-10px;
-webkit-transform:rotate(15deg); } .eyes{ position: relative; z-index:
3; } .eyes .leftEye,.eyes .rightEye{ width: 85px; height: 85px;
border-radius: 50%; border:6px solid #000; background: #fff; position:
absolute; top:60px; left: 27px; } .eyes .leftEye{ left: 124px; } .eyes
.leftEye .left_blackEye, .eyes .rightEye .right_blackEye{ width: 40px;
height: 40px; border-radius: 50%; background: #000; position: absolute;
top:24px; left:22px; -webkit-animation: blackeye 5s ease-in infinite; }
@-webkit-keyframes blackeye{ 0%,20%,50%,70%,100%{ -webkit-transform:
translateX(0px); } 30%,40%{ -webkit-transform: translateX(15px); }
80%,90%{ -webkit-transform: translateX(-15px); } } .eyes .leftEye
.left_blackEye .left_white, .eyes .rightEye .right_blackEye
.right_white{ width: 20px; height: 20px; border-radius: 50%;
background: #fff; position: absolute; top:7px; left:17px;
-webkit-animation: whiteeye 5s ease-in-out infinite; }
@-webkit-keyframes whiteeye{ 0%,20%,50%,70%,100%{ -webkit-transform:
translateX(0px); } 30%,40%{ -webkit-transform: translate3d(3px,4px,0); }
80%,90%{ -webkit-transform: translate3d(-15px,4px,0); } } .eyes .leftEye
.left_blackEye .left_white{ top:4px; left:17px; } .eyes
.leftEye:after, .eyes .rightEye:after{ content: ”; width: 28px; height:
18px; background: #000; position: absolute; left:-30px; top:37px;
-webkit-transform:skewX(20deg) rotate(7deg); } .eyes .leftEye:after{
left:89px; top:37px; -webkit-transform:skewX(-20deg) rotate(-7deg); }
.mouse{ position: relative; } .mouse .mouse_shape{ width: 55px; height:
35px; border:5px solid #000; border-bottom-left-radius: 30px;
background: #fff; position: absolute; top:175px; left:98px; z-index: 3;
-webkit-transform:rotate(-35deg); -webkit-animation: mouse 5s
ease-in-out infinite; } @-webkit-keyframes mouse{ 40%,43%{ width: 45px;
height: 25px; top:180px; } 0%,35%,48%,100%{ width: 55px; height: 35px;
top:175px; -webkit-transform:rotate(-35deg); } } .mouse
.mouse_shape:after{ content: ”; width: 70px; height: 32px;
border-bottom:5px solid #000; border-radius:35px 26px 5px 5px;
background: rgb(249,217,70); position: absolute; top:-16px; left:3px;
-webkit-transform:rotate(34deg); -webkit-animation: mouse_mask 5s
ease-in-out infinite; } @-webkit-keyframes mouse_mask{ 40%,43%{ width:
60.5px; top:-19.3px; left:1.5px; } 0%,35%,48%,100%{ width: 70px;
top:-16px; left:3px; -webkit-transform:rotate(33deg); } } .hands{
position: relative; } .hands .leftHand, .hands .rightHand{ width: 80px;
height: 80px; border:6px solid #000; border-radius: 25px; background:
rgb(249,217,70); position: absolute; top:220px; left:-23px;
-webkit-transform:rotate(40deg); -webkit-animation:rightHand .8s
ease-in-out infinite; } @-webkit-keyframes rightHand{ 0%,50%,100%{
-webkit-transform: rotate(40deg); } 30%{ -webkit-transform:
rotate(37deg) translateX(1px); } } .hands .leftHand{ left:182px;
top:220px; -webkit-transform:rotate(-40deg); -webkit-animation:leftHand
.8s ease-in-out infinite; } @-webkit-keyframes leftHand{ 0%,50%,100%{
-webkit-transform: rotate(-40deg); } 80%{ -webkit-transform:
rotate(-37deg) translateX(-1px); } } .hands .leftHand:after, .hands
.rightHand:after{ content: ”; width: 6px; border:3px solid #000;
border-radius: 3px; position: absolute; left:13px; top:50px;
-webkit-transform:rotate(90deg); } .hands .leftHand:after{ left:53px;
top:50px; -webkit-transform:rotate(-90deg); } .feet{ position: relative;
} .feet .left_foot, .feet .right_foot{ width: 36px; height: 50px;
border-bottom-right-radius: 6px; border-bottom-left-radius: 9px;
background: #000; position: absolute; top: 406px; left:88px;
-webkit-transform-origin: right top; -webkit-animation: rightfoot .8s
ease-in-out infinite; } @-webkit-keyframes rightfoot{ 0%,50%,100%{
-webkit-transform: rotate(0deg); } 80%{ -webkit-transform:
rotate(10deg); } } .feet .left_foot{ border-bottom-right-radius: 9px;
border-bottom-left-radius: 6px; left:130px; -webkit-transform-origin:
left top; -webkit-animation: leftfoot .8s ease-in-out infinite; }
@-webkit-keyframes leftfoot{ 0%,50%,100%{ -webkit-transform:
rotate(0deg); } 30%{ -webkit-transform: rotate(-10deg); } } .feet
.left_foot:after, .feet .right_foot:after{ content: ”; width: 60px;
height: 35px; border-radius: 20px 10px 21px 15px; background: #000;
position: absolute; left:-36px; top:14.4px;
-webkit-transform:rotate(5deg); } .feet .left_foot:after{
border-radius: 10px 20px 15px 21px; left:13px;
-webkit-transform:rotate(-5deg); } .groundShadow{ width: 200px; height:
2px; border-radius: 50%; background: rgba(0,0,0,0.3); box-shadow: 0 0
2px 4px rgba(0,0,0,0.3); position: relative; top: 455px; left:25px; }
View Code

 

相册演示的代码可以在演示中下载到。

// 使用classList属性(Dom元素,css类名)
function toggleClassList(element,cName){
// 1. classList API
// 切换类,有则移除，没有则增进
if(element.classList.toggle){
element.classList.toggle(cName);
return true;
}
// !!! 其实，本函数 toggleClassList 借使帮忙的话，
// 那么上面的代码就不会被实施，此处仅作示范,请灵活利用
// 2. classList API
// element 的class属性是不是包括 hide 那个CSS类
var hasHide = element.classList.contains(cName);
//
if(hasHide){
// 3. classList API
// 移除hide类
element.classList.remove(cName);
} else {
// 4. classList API
// 添加hide类
element.classList.add(cName);
}
return true;
};

1.3、协理文档与上学

高于的帮忙文档是最好的求学资料，CSS2的帮助，十分详尽：

CSS3的帮衬文档：

 

点击下载辅助文档

ContextMenu API
经测试chrome28不管用。。。
新的API，ContextMenu 是极好的接口：
此接口允许你很简单地添加菜单项到浏览器的上下文菜单(右键菜单)，而不是去覆盖浏览器的默认右键菜单。
亟需注意的是，你最好使用js脚本来动态的开创菜单contextmenu，那样可防止止页面禁用JS脚本的情事
下出现多余的HTML代码。
代码如下：

二、选择器

在选取CSS时我们首先要做的作业是找到元素，在写相应的体制，在CSS2.1中最常使用的是二种选拔器：

a)、ID选择器：以#始发，引用时行使id，如id=”div1″

#div1

{

   color:red;

}

b)、类选取器：以.先河，使用class属性引用，可以有八个，如class=”cls1 cls2
cls3″

.cls1

{

   background-color:#99ccff;

}

c)、标签选用器：以标签名称起首，如p,span,div,*

div span

{

   font-size:14px;

}

自然还有如伪类接纳，a:hover，a:link，a:visted，a:active。

在CSS3中新增了无数的选拔器，假使我们会jQuery，jQuery中大部采用器在CSS3中都可以直接使用。

代码如下:

1.1、基础的选用器

辛酉革命字体中选用器的分别是：p.info的情趣是p元素中务必有class=”info”属性将被增选，p
.info是挑选后代元素，示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选择器</title>
        <style type="text/css">
            p.info{
                color: red;
            }
            p .info{
                color: blue;
            }
        </style>
    </head>
    <body>
        <h2>选择器</h2>
        <p class="info">p1</p>
        <p>
                span1
                <p>p3</p>
        </p>
    </body>
</html>

 运行结果：

<div class=”hide”>
<!– contextmenu 指定了动用哪个上下文菜单。 –>
<!– !!!不明了怎么，我的浏览器上那些配置不起作用。 –>
<section contextmenu=”mymenu”
style=”min-height:100px;min-height:200px;background:#999;”>
<h1>点击此区域查看菜单</h1>
<!–
为了代码结构的显然，把menu元素放到了要拔取的元素内部，其实你也能够放置外部的其余地方:
–>
<!– 添加菜单,至于图片图标，请自己安装。add the menu –>
<menu type=”context” id=”mymenu”>
<menuitem label=”刷新页面” onclick=”window.location.reload();”
icon=”;
<menu label=”分享到…”
icon=”;
<menuitem label=”和讯天涯论坛”
icon=””
onclick=”window.location.href=’;
<menuitem label=”腾讯今日头条”
icon=””
onclick=”window.location.href=’;
</menu>
</menu>
</section>
</div>

1.2、组合选拔器

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组合选择器</title>
        <style type="text/css">
             #div1 span
             {
                 color: red;
             }
        </style>
    </head>
    <body>
        <h2>组合选择器</h2>
        <div id="div1">
            span1
            <div id="div2">
                span2
            </div>
        </div>
        span3
    </body>
</html>

运行结果：

 示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组合选择器</title>
        <style type="text/css">
             #div1 > span
             {
                 color: red;
             }
        </style>
    </head>
    <body>
        <h2>组合选择器</h2>
        <div id="div1">
            span1
            <div id="div2">
                span2
            </div>
        </div>
        span3
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组合选择器</title>
        <style type="text/css">
             #div1 + span
             {
                 color: red;
             }
        </style>
    </head>
    <body>
        <h2>组合选择器</h2>
        <div id="div1">
            span1
            <div id="div2">
                span2
            </div>
        </div>
        span3
        span4
    </body>
</html>

Element.dataset
数据集(dataset) API 允许开发者对DOM元素设置(set)和取得(get) 以 data-
前缀初始的属性值。
代码如下：

1.3、属性拔取器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style type="text/css">
            div[id][class~=cls1] {
                background: lightgreen;
            }
        </style>
    </head>
    <body>
        <h2>组合选择器</h2>
        span0
        <div id="div1" class="cls1">
            div1
        </div>
        <div id="div2" class="cls1 cls2">
            div2
        </div>
    </body>

</html>

 运行结果：

代码如下:

1.4、伪类

 示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪类</title>
        <style type="text/css">
           td:first-child
           {
                 background: lightcoral;
           }
        </style>
    </head>
    <body>
        <h2>组合选择器</h2>
        <table border="1" width="100%">
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
        </table>
        <hr />
        <table border="1" width="100%">
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
        </table>
    </body>

</html>

 运行结果：

 陶冶：完毕隔行换色，当鼠标悬停在每一行上时高亮呈现为香艳，按下时高亮红色。

        <style type="text/css">
           tr:nth-child(2n+1){
                background:lightblue;
           }
           tr:hover{
               background: yellow;
           }
           tr:active{
               background: orangered;
           }
        </style>

<div id=”intro” data-website=”www.csdn.net” data-id=”551996458″
data-my-name=”铁锚”
data-blog-url=”;

1.5、伪元素

正式的伪元素应该选用::，但单:也行，只是为着同盟。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪类</title>
        <style type="text/css">
            a::before {
                content: "网站";
                display: inline-block;
                background: red;
                color: white;
            }
        </style>
    </head>
    <body>
        <h2>伪元素</h2>
        <a href="http://www.baidu.com">百度</a>
        <a href="http://best.cnblogs.com">博客园</a>
    </body>
</html>

运转结果：

代码如下:

三、特殊性（优先级）

a)、同品种，同级其余样式后者先于前者
b)、ID > 类样式 > 标签 > *
c)、内联>ID选取器>伪类>属性接纳器>类选用器>标签采用器>通用拔取器(*)>继承的体裁
d)、具体 > 泛化的，特殊性即css优先级
e)、近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表)

内嵌样式：内嵌在要素中，<span><!DOCTYPE html> <html>
<head> <meta charset=”UTF-8″>
<title>优先级</title> <style type=”text/css”> * {
color: yellow; } p { color: red !important; } .cls1 { color: deeppink; }
.cls2{ color: blueviolet; } #p1{ color:blue; } </style>
</head> <body> <div> <p id=”p1″ class=”cls2 cls1″
style=”color:#ccc”>p1</p> <span>span1</span>
</div> </body> </html>

运作结果：

function testDataset(){
//
var intro = document.getElementById(“intro”);
// 注意那么些不是 id属性哦，是 data-id 的值
var id = intro.dataset.id;
// data-website
var website = intro.dataset.website;
// data-blog-url,驼峰命名法..
var blogUrl = intro.dataset.blogUrl;
// data-my-name
var myName = intro.dataset.myName;
//
var msg = “qq:”+id
+”,website:”+website
+”,blogUrl:”+blogUrl
+”,myName:”+myName
;
//
warn(msg);
};

3.2、计算特殊性值

important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性选取 >
伪对象 > 继承 > 通配符
权重、特殊性计算法：
CSS样式接纳器分为4个级次，a、b、c、d
1.万一体制是行内样式（通过Style=“”定义），那么a=1，1,0,0,0
2.b为ID选拔器的总额 0,1,0,0
3.c为属性选拔器，伪类接纳器和class类采用器的多寡。0,0,1,0

4.d为标签、伪元素选取器的数目 0,0,0,1

5.!important 权重最高，比 inline style 还要高

 比如结果为：1093比1100，按位相比，从左到右，只要一位领先则即刻胜出，否则继续比较。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>优先级</title>
        <style type="text/css">
            html body #div1
            {
                background: red;
            }

            .cls1 #div1{  
                background: blue;
            }
        </style>
    </head>
    <body>
        <div class="cls1">
            <div id="div1">div1
            </div>
            <div id="div2">div2
            </div>
        </div>
    </body>
</html>

运行结果：

因为html body #div1的独特性值为：0102，而.cls1
#div1的出色性值为0110，后者胜出。

尚无怎么好说的，和classList一样，简单却实用。(想一想，是不是改变了后台和前台JS的一点交互以及解耦？)
window.postMessage API
IE8 已经支持 postMessage API 好几年了，此API允许window 和iframe
元素之间相互传送音讯。
跨域援救啊。 代码如下：

四、刻度

在CSS中刻度是用来安装元素尺寸的单位。

分外规值0可以简单单位。例如：margin:0px可以写成margin:0
部分特性可能同意有负长度值，或者有自然的限量限定。若是不扶助负长度值，那应该变换来可以被接济的近年的一个长度值。
长度单位包蕴计算：相对单位和相对单位。
周旋长度单位包蕴有： em, ex, ch, rem, vw, vh, vmax, vmin
纯属长度单位蕴涵有： cm, mm, q, in, pt, pc, px

 

代码如下:

4.1、相对长度单位

1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

// From window or frame on domain 1, send a message to the iframe which
hosts another domain
var iframeWindow = document.getElementById(“iframe”).contentWindow;
iframeWindow.postMessage(“Hello from the first window!”);
// From inside the iframe on different host, receive message
window.addEventListener(“message”, function(event) {
// Make sure we trust the sending domain
if(event.origin == “”) {
// Log out the message
console.log(event.data);
// Send a message back
event.source.postMessage(“Hello back!”);
}
]);
// message 只允许string 类型的数据，可是你可以行使 JSON.stringify 以及
JSON.parse 传递更加多有含义的音讯。

4.2、文本相对长度单位

em
相对长度单位。相对于如今目的内文本的书体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默许字体尺寸。(相对父元素的字体大小倍数)
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 1em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }

浏览器的默许字体大小为16像素，浏览器默许样式也称之为user agent
stylesheet，就是拥有浏览器内置的默许样式，多数是足以被改动的，但chrome不可能直接修改，可以被用户样式覆盖。

演示代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>em与rem</title>
        <style type="text/css">
            #div2{
                background: blue;
                height: 5em;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                Hello em
            </div>
        </div>
    </body>
</html>

结果：

div2的惊人为80px，是因为user agent
stylesheet默许样式中字体大小为16px，按照这些规则我们得以手动修改字体大小，div2的冲天将发生变化。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>em与rem</title>
        <style type="text/css">
            #div1 {
                font-size: 20px;
            }
            #div2 {
                color: white;
                background: blue;
                height: 5em;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                Hello em
            </div>
        </div>
    </body>
</html>

结果：

rem

rem是CSS3新增的一个针锋相对单位（root
em，根em），相对于根元素(即html元素)font-size统计值的翻番
只相对于根元素的尺寸
rem（font size of the root
element）是指相对于根元素的字体大小的单位。简单的讲它就是一个针锋相对单位。看到rem大家自然会想起em单位，em（font
size of the
element）是指相对于父元素的字体大小的单位。它们之间实际很一般，只但是一个盘算的条条框框是凭借根元素一个是凭借父元素计算。（相对是的HTML元素的书体大，默认16px）

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>em与rem</title>
        <style type="text/css">
            #div1 {
                font-size: 20px;
            }
            #div2 {
                color: white;
                background: blue;
                height: 5rem;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                Hello em
            </div>
        </div>
    </body>
</html>

 

运行结果：

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>em与rem</title>
        <style type="text/css">
            html {
                font-size: 10px;
            }
            body {
                font-size: 16px;
            }
            #div1 {
                font-size: 20px;
            }
            #div2 {
                color: white;
                background: blue;
                height: 5rem;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                Hello em
            </div>
        </div>
    </body>
</html>

结果：

按理说中度为5*10px=50像素高度，但此处为60，是因为chrome浏览器限制了细微字体大小为12px，从上图可以观察。

autofocus Attribute
autofocus 属性确保当页面加载后，给定的 BUTTON,INPUT或者 TEXTAREA
元素可以自行获取主旨。

4.3、Web App与Rem

为了促成简单的响应式布局，可以行使html元素中字体的轻重缓急与显示屏间的比率设置font-size的值完成当显示器分辨率变化时让要素也变更，在此从前的tmall就使用那种措施，示例如下：

示例一：

<!DOCTYPE
html> <html> <head> <meta charset=”UTF-8″>
<title>rem phone test</title> <!– 描述：视口 –>
<meta name=”viewport” content=”user-scalable=no, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0″> <style> html { height:
100%; width: 100%; font-family: ‘Heiti SC’, ‘Microsoft YaHei’;
font-size: 20px; overflow: hidden; outline: 0; -webkit-text-size-adjust:
none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; } body {
height: 100%; margin: 0; overflow: hidden; -webkit-user-select: none;
/*裁撤用户采用*/ width: 100%; } header, footer { width: 100%;
line-height: 1.5rem; font-size: 1rem; color: #000; border: 1px solid
#ccc; text-align: center; background-color: #ccc; } .bd { margin-top:
1rem; margin-bottom: .5rem; margin-right: -.5rem; font-size: 0; }
.bd:after { clear: both; } .box { width: 5rem; height: 5rem; display:
inline-block; margin-right: .5rem; margin-bottom: .5rem; } .blue-box {
background-color: #06c; } .org-box { background-color: #1fc195; }
</style> </head> <body>
<header>我是尾部</header> <div class=”bd”> <div
class=”box blue-box”></div> <div class=”box
org-box”></div> <div class=”box blue-box”></div>
<div class=”box org-box”></div> <div class=”box
blue-box”></div> <div class=”box org-box”></div>
<div class=”box blue-box”></div> <div class=”box
org-box”></div> <div class=”box blue-box”></div>
<div class=”box org-box”></div> <div class=”box
blue-box”></div> <div class=”box org-box”></div>
<div class=”box blue-box”></div> <div class=”box
org-box”></div> <div class=”box blue-box”></div>
<div class=”box org-box”></div> <div class=”box
blue-box”></div> <div class=”box org-box”></div>
<div class=”box blue-box”></div> <div class=”box
org-box”></div> <div class=”box blue-box”></div>
<div class=”box org-box”></div> <div class=”box
blue-box”></div> <div class=”box org-box”></div>
</div> <footer>我是页脚</footer> <script> /*
;(function(win){ win.alert(“Hello IIEF”); })(window); */
//定义一个方式并实施 (function(doc, win) { //得到文档的根节点html var
docEl = doc.documentElement;
//即使window中留存orientationchange对象，则取orientationchange,否则取resize
//为了事件绑定 resizeEvt = ‘orientationchange’ in win ?
‘orientationchange’ : ‘resize’; //定义一个措施，重新总括font-size大小
var recalc = function() { //页面的宽度 var clientWidth =
docEl.clientWidth; //即使没有大幅度则脱离 if (!clientWidth) return;
//重新计算font-size大小，假定320的升幅时字体大小为20;，当页面变化时再一次安装字体大小
docEl.style.fontSize = 20 * (clientWidth / 320) + ‘px’; };
//倘诺浏览器不辅助添加事件监听则截至 if (!doc.add伊夫ntListener) return;
//添加事件监听，指定事件处理函数的一代或阶段(boolean)true表示在抓获事件实施，false表示冒泡时执行
win.add伊夫ntListener(resizeEvt, recalc, false);
//当Dom树加载成功时实施计算，DOMContentLoaded事件要在window.onload此前实施
doc.add伊夫ntListener(‘DOMContentLoaded’, recalc, false); })(document,
window); </script> </body> </html> View Code

运作结果：

 

示例二：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>web app 与rem</title>
        <style type="text/css">
            html {
                font-size: 20px;
            }
            body {
                font-size: 16px;
            }
            #div2 {
                color: white;
                background: blue;
                height: 3rem;
                width: 3rem;
                font-size: .7rem;
            }
        </style>
    </head>

    <body>
        <div id="div2">
            Hello rem
        </div>
        <script type="text/javascript">
            function resize() {
                var w = document.documentElement.clientWidth;
                document.documentElement.style.fontSize = w * 20 / 290 + "px";
            }
            window.onresize =resize;

            resize();
        </script>
    </body>

</html>

 

运转结果：

 

变屏幕变宽时元素大小也跟着产生变化，但此处并不曾考虑中度，但为响应式布局与hack提供了思路。

代码如下:

五、示例与扶持下载

 援救文档与示范下载

参照：

web前端开发者最最注的内容是多少个：HTML、CSS与JavaScri…

<input autofocus=”autofocus” />
<button autofocus=”autofocus”>Hi!</button>
<textarea autofocus=”autofocus”></textarea>

autofocus 属性主要用在简约的输入页面，详情请参考：autofocus 属性
各浏览器厂商对这几个API的支撑度各分化，所以在选择此前最好检测一下包容性，花一些日子来读书方面所列出的API，您将会对他们询问和摆布更加多。
一对的测试代码如下：

代码如下:

<!DOCTYPE html>
<html>
<head>
<title>5个你不知晓的 HTML5 API接口演示 </title>
<meta name=”Generator” content=”EditPlus”>
<meta name=”Author”
content=”[email protected]”>
<meta name=”Description”
content=”original=;
<style>
.hide{ display:none}
.poplayer{ z-index:999; position:absolute;background-color:#fff;
top:0px;left:0px;overflow: hidden;width:100%;height:100%;opacity:1;}
.close{ top:3px; right:10px;position:absolute;}
</style>
<script>
// 展现警告音讯
function warn(msg){
warn = warn || “一个不敢问津警告!”;
if(window.console){
console.warn(msg);
} else {
alert(msg);
}
};
// 使用classList属性(Dom元素,css类名)
function toggleClassList(element,cName){
// 1. classList API
// 切换类,有则移除，没有则增进
if(element.classList.toggle){
element.classList.toggle(cName);
return true;
}
// !!! 其实，本函数 toggleClassList 如若支持的话，
// 那么下边的代码就不会被执行，此处仅作示范,请灵活利用
// 2. classList API
// element 的class属性是还是不是包罗 hide 这一个CSS类
var hasHide = element.classList.contains(cName);
//
if(hasHide){
// 3. classList API
// 移除hide类
element.classList.remove(cName);
} else {
// 4. classList API
// 添加hide类
element.classList.add(cName);
}
return true;
};
// 使用className属性(Dom元素,css类名)
function toggleClassName(element,cName){
var className = element.className || “”;
// 去掉首尾的空白
cName = cName.replace(/^\s*|\s*$/g,””);
// cName 中间即使带有空白字符，则失利.
如若要美观处理，可以拆分为数组，单个处理
var blankReg = /\s+/;
if(blankReg.test(cName)){
warn(“‘”+cName+”‘中间含有空白字符”);
return false;
}
// 正则， \b 代表可知接二连三字符的界线，可以那样领会:
// “hide2 hide hide myname” 那么，
// hide2 的光景各有一个虚构的\b ,hide 前后也有，
// 可是 hi 和 de之间则没有。
// g 表示单行全局
//var rep = /\bhide\b/g;
var rep = new RegExp(“\\b” + cName + “\\b”, “g”);
if(rep.test(className)){
className = className.replace(rep,””);
} else {
className += ” “+cName;
}
// 替换新className。
element.className = className;
return true;
};
// 函数，切换(元素id，className)
function toggleClass(elementId,cName){
// 获取一个DOM元素
var element = document.getElementById(elementId);
// 假诺不设有元素
if(!element){
warn(“id为”+elementId+”的要素不存在”);
return false;
}
if(!element.classList){
warn(“id为”+elementId+”的要素不帮忙classList属性，将使用其余手段来兑现”);
return toggleClassName(element,cName);
} else {
return toggleClassList(element,cName);
}
};
function testDataset(){
//
var intro = document.getElementById(“intro”);
// 注意那么些不是 id属性哦，是 data-id 的值
var id = intro.dataset.id;
// data-website
var website = intro.dataset.website;
// data-blog-url,驼峰命名法..
var blogUrl = intro.dataset.blogUrl;
// data-my-name
var myName = intro.dataset.myName;
//
var msg = “qq:”+id
+”,website:”+website
+”,blogUrl:”+blogUrl
+”,myName:”+myName
;
//
warn(msg);
};
// dom加载后 执行
window.addEventListener(“DOMContentLoaded”, function() {
var open = document.getElementById(“open”);
var close = document.getElementById(“close”);
open.addEventListener(“click”,function(){
//
toggleClass(“diary2″,”hide”);
toggleClass(“loading”,”hide”);
});
close.addEventListener(“click”,function(){
//
toggleClass(“diary2″,”hide”);
toggleClass(“loading”,”hide”);
});
//
testDataset();
}, false);
</script>
</head>
<body>
<div>
<div id=”diary2″ class=”diary poplayer hide”>
<a href=”javascript:void(0)” _fcksavedurl=””javascript:void(0)””
id=”close”>关闭</a>
<div id=”loading” class=”loading hide” style=”z-index:1; position:
absolute; left: 40%; top: 30%; width: 104px; height: 104px;opacity:
0.5;background: #000000;border: 0px solid #000000;border-radius:
10px;-webkit-border-radius: 10px;”>
<img src=””
alt=””
style=”position:absolute; left:26px; top:10px;width: 50px;height:
50px;border-radius: 10px;-webkit-border-radius: 10px;”>
<div class=”loadingtext” style=”position:absolute;left: 12px;top:
76px;color: #ffffff;”>正在加载中</div>
</div>
</div>
<div>
<a href=”javascript:void(0)” id=”open”>打开</a>
</div>
</div>
<div class=”hide”>
<!– contextmenu 指定了运用哪个上下文菜单。 –>
<!– !!!不明了为啥，我的浏览器上这些配置不起功效。 –>
<section contextmenu=”mymenu”
style=”min-height:100px;min-height:200px;background:#999;”>
<h1>点击此区域查看菜单</h1>
<!–
为了代码结构的原原本本，把menu元素放到了要使用的因素内部，其实你也得以停放外部的其他地点:
–>
<!– 添加菜单,至于图片图标，请自己安装。add the menu –>
<menu type=”context” id=”mymenu”>
<menuitem label=”刷新页面” onclick=”window.location.reload();”
icon=”;
<menu label=”分享到…”
icon=”;
<menuitem label=”腾讯网腾讯网”
icon=””
onclick=”window.location.href=’;
<menuitem label=”腾讯今日头条”
icon=””
onclick=”window.location.href=’;
</menu>
</menu>
</section>
</div>
<div id=”intro” data-website=”www.csdn.net” data-id=”551996458″
data-my-name=”铁锚”
data-blog-url=”;
</body>
</html>