HTML5特性支持列表

最新推荐文章于 2022-07-15 20:41:16 发布

weixin_33828101

最新推荐文章于 2022-07-15 20:41:16 发布

阅读量181

点赞数

文章标签： javascript 数据库 php ViewUI

不厚道地把外国的一个HTML5检测程序扒过来：

HTML5 支持列表

HTML5支持列表

STR=supports.style( css-feature ); STR|BOL == "O"|"Ms"|"Khtml"|"Webkit"|"Moz"|"" + css-feature || false STR=supports.value( css-feature , css-value ); STR|BOL == ("-" + "o"|"ms"|"khtml"|"webkit"|"moz" + "-" || "") + css-value || false BOL=supports.vml(); BOL=supports.svg(); BOL=supports.svg( svg-feature ); BOL=supports.select(); BOL=supports.window( html5-feature ); BOL=supports.navig( special-feature ); BOL=supports.attr( element-type, attribute-name ); BOL=supports.func( element-type, function-name ); BOL=supports.canvas( context ); BOL=supports.canvas( context, canvas-feature ); BOL=supports.input( input-type ); BOL=supports.input( input-type, input-attribute ); BOL=supports.event( event-name ); BOL=supports.event( event-name, html-element ); BOL=supports.element( element-type ); BOL=supports.element( element-type, boolean ); BOL=supports.audio(); STR=supports.audio( mime-type, codec ); STR|BOL == ("probably"|"maybe") || false BOL=supports.video(); STR=supports.video( mime-type, codec ); STR|BOL == ("probably"|"maybe") || false STR=supports.engine; STR == "O"|"Ms"|"Khtml"|"Webkit"|"Moz"|"" FLT=supports.version; STR=supports.released; "css-feature" must be written in DOM syntax! The DOM syntax of CSS properties: Remove the hyphen and write the first letter of the word behind the hyphen in upper case. Example: background-color becomes backgroundColor

运行代码

http://www.netzgesta.de/dev/supports/

<!DOCTYPE html>  <html manifest="/html5/src/slides_manifest.php"> <head> <title>HTML5 演示</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://www.google.com/jsapi?key=ABQIAAAAGZS52uH39TNjCjLz-_MCpBS9ieF7McfPBdBLD0DK1lzJkbnz6hRwB-hdWKiRKoq7EkQVO1Jtsz2s4A"></script> <script>google.load("maps", "2");</script> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-8522782-1"); pageTracker._setDomainName(".directguo.com"); pageTracker._trackPageview(); } catch(err) {}</script>  <style> .notes { display: none; } .stroke { -webkit-text-stroke-color: red; -webkit-text-stroke-width: 1px; -moz-text-stroke-color: red; -moz-text-stroke-width: 1px; } body { font: 14px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; background: #778; padding: 0; margin: 0; overflow: hidden; } div.presentation { position: absolute; width: 100%; display: table-cell; vertical-align: middle; height: 100%; background: inherit; } div.slides { width: 100%; height: 100%; overflow: hidden; left: 0; top: 0; position: absolute; display: block; -webkit-transition: -webkit-transform 2s ease-in-out; -moz-transition: -moz-transform 2s ease-in-out; } div.slide { display: none; position: absolute; overflow: hidden; width: 900px; height: 700px; left: 50%; top: 50%; margin-top: -350px; background: -webkit-gradient(linear, left bottom, left top, from(#bbd), to(#fff)); -webkit-transition: margin 0.25s ease-in-out; background-color: #eee; background: -moz-linear-gradient(left bottom, #bbd, #fff); -moz-transition: margin 0.25s ease-in-out; } div.slide:nth-child(even) { border-top-left-radius: 20px; -moz-border-radius-topleft: 20px; border-bottom-right-radius: 20px; -moz-border-radius-bottomright: 20px; } div.slide:nth-child(odd) { border-top-right-radius: 20px; -moz-border-radius-topright: 20px; border-bottom-left-radius: 20px; -moz-border-radius-bottomleft: 20px; } div.slide p { font-size: 20px; } section.intro p { font-size: 35px; } button { font-size: 20px; } .summary { font-size: 30px; } .bullets { font-size: 40px; } .slide.far-past { display: block; margin-left: -2400px; } .slide.past { display: block; margin-left: -1400px; } .slide.current { display: block; margin-left: -450px; } .slide.future { display: block; margin-left: 500px; } .slide.far-future { display: block; margin-left: 1500px; } body.three-d div.presentation { /*background: -webkit-gradient(radial, 50% 50%, 10, 50% 50%, 1000, from(#333), to(#000)); */ } body.three-d div.slides { -webkit-transform: translateX(50px) scale(0.8) rotateY(10deg); -moz-transform: translateX(50px) scale(0.8) rotateY(10deg); } /* Content */ @font-face { font-family: 'Junction'; src: url(src/Junction02.otf); } @font-face { font-family: 'LeagueGothic'; src: url(src/LeagueGothic.otf); } header { font-family: 'Junction'; font-weight: normal; font-size: 50px; letter-spacing: -.05em; color: white; color: black; text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px; position: absolute; left: 30px; top: 25px; margin: 0; padding: 0; } .intro h1 { color: black; padding: 0; margin: 0; letter-spacing: -2px; font-size: 96px; } .intro h2 { color: black; font-family: 'LeagueGothic'; padding: 0; margin: 0; margin-top: -5px; font-size: 68px; letter-spacing: -1px; } h1 { display: inline; font-size: 100%; font-weight: normal; padding: 0; margin: 0; } h2 { font-family: 'Junction'; color: black; font-size: 20px; margin-left: 20px; margin-top: 50px; } h2:first-child { margin-top: 0; } section { font-family: 'Junction'; font-size: 50px; color: #3f3f3f; text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px; margin-left: 30px; margin-right: 30px; margin-top: 100px; display: block; overflow: hidden; } a { color: inherit; display: inline-block; text-decoration: none; line-height: 110%; border-bottom: 2px solid #3f3f3f; } #wmap a { line-height: 100%; border-bottom: none; } section.left { float: left; width: 390px; } section.small { font-size: 24px; } section.small ul { margin: 0 0 0 15px; padding: 0; } section.small li { padding-bottom: 0; } h2 { padding: 0; margin: 15px 0 5px 0; /* font-family: GG240;*/ } section.center { line-height: 180%; text-align: center; display: table-cell; vertical-align: middle; height: 700px; width: 900px; } pre { text-align: left; font-size: 16px; font-family: Monaco, Courier; padding-bottom: 10px; padding: 10px 20px; background: rgba(255, 0, 0, 0.05); border-radius: 8px; border: 1px solid rgba(255, 0, 0, 0.2); } .two-column { -webkit-column-count: 2; -moz-column-count: 2; } pre select { font-size: 16px; font-family: Monaco, Courier; border: 1px solid #c61800; } input { font-size: 16px; font-family: Helvetica; padding: 3px; } input[type="range"] { width: 100%; } button { font-family: Verdana; } button.large { font-size: 32px; } pre b { font-weight: normal; color: #c61800; text-shadow: #c61800 0 0 1px; /*letter-spacing: -1px;*/ } pre em { font-weight: normal; font-style: normal; color: #18a600; text-shadow: #18a600 0 0 1px; } pre input[type="range"] { height: 6px; cursor: pointer; width: auto; } example { font-size: 16px; display: block; padding: 10px 20px; color: black; background: rgba(255, 255, 255, 0.4); border-radius: 8px; margin-bottom: 10px; border: 1px solid rgba(0, 0, 0, 0.2); } video { border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.2); } .css, .js, .html, .key { font-family: 'Junction'; color: black; display: inline-block; padding: 6px 10px 3px 10px; font-size: 25px; line-height: 30px; text-shadow: none; letter-spacing: 0; bottom: 10px; position: relative; border-radius: 10px; -moz-border-radius: 10px; background: white; box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; } :not(header) > .css, :not(header) > .js, :not(header) > .html, :not(header) > .key { margin: 0 5px; bottom: 4px; } .css { background: -webkit-gradient(linear, left top, left bottom, from(#ff4), to(#ffa)); background-color: #ff4; background: -moz-linear-gradient(left top, #ff4, #ffa); } .js { background: -webkit-gradient(linear, left top, left bottom, from(#4f4), to(#afa)); background-color: #4f4; background: -moz-linear-gradient(left top, #4f4, #afa); } .html { background: -webkit-gradient(linear, left top, left bottom, from(#e88), to(#fee)); background-color: #e88; background: -moz-linear-gradient(left top, #e88, #fee); } li { list-style: none; padding: 10px 0; } .summary li::before, .bullets li::before { content: '· '; } info { display: block; font-size: 50%; text-align: center; } </style> </head><body> <div class="presentation"> <div class="slides"> <div class="slide"> <section class="center intro"> <p>本演示文档是一个HTML5的站点</p> <p>按 <span class="key">→</span> 键进入下一页 </p> <p style="font-size: 25px">请使用<a href="http://www.google.com/chrome/">Google Chrome</a>浏览。在演示中遇到问题？阅读 <a href="disclaimer.html">免责声明</a></p> </section> </div> <div class="slide"> <section class="center intro"> <hgroup> <h1> HTML5* </h1> <h2> Web 开发进入新时代 </h2> </hgroup> <p style="font-size: 16px">*包括另外一些新一代网络开发技术</p> </section> </div> <div class="slide"> <header>Web技术大致的时间轴</header> <section> <style> span.year { display: inline-block; text-align: right; width: 120px; letter-spacing: -2px; padding-right: 10px; } hr { visibility: hidden; padding: 0; margin: 0 0 -20px 0; } </style> <ul> <span class="year">1991</span> <span class="html">HTML</span> <br /> <span class="year">1994</span> <span class="html">HTML 2</span> <br /> <span class="year">1996</span> <span class="css">CSS 1</span> + <span class="js">JavaScript</span> <br /> <span class="year">1997</span> <span class="html">HTML 4</span> <br /> <span class="year">1998</span> <span class="css">CSS 2</span> <br /> <span class="year">2000</span> <span class="html">XHTML 1</span> <br /> <span class="year"><em class="stroke">2002</em></span> <span class="css">使用DIV+CSS进行网页布局</span> <br /> <span class="year"><em class="stroke">2005</em></span> <span class="js">AJAX</span> <br /> <span class="year"><em class="stroke">2009</em></span> <span class="html">HTML 5</span> </ul> </section> </div> <div class="slide"> <section class="center"> HTML5 ~= <span class="html">HTML</span> + <span class="css">CSS</span> + <span class="js">JS APIs</span> </section> </div> <div class="slide"> <section class="center"> <h1> <span class="js">JS APIs</span> </h1> </section> </div> <div class="slide"> <header><span class='js'>JS APIs</span> <h1>新的选择器</h1></header> <section> <h2> 通过 class 定位元素 (DOM API) </h2> <pre>var el = document.getElementById('section1'); el.focus(); var els = document.getElementsByTagName('div'); els[0].focus(); var els = document.<b>getElementsByClassName</b>('section'); els[0].focus();</pre> <h2> 通过类似 css 选择器的语法定位元素 (Selectors API) </h2> <pre>var els = document.<b>querySelectorAll</b>("ul li:nth-child(odd)"); var els = document.<b>querySelectorAll</b>("table.test > tr > td"); </pre> </section> </div> <div class="slide"> <style type="text/css" media="screen"> #ta { width: 300px; height: 150px; } </style> <header><span class="js">JS APIs</span> <h1>本地储存 - Web Storage </h1></header> <section> <pre> // use localStorage for persistent storage // use sessionStorage for per tab storage textarea.addEventListener('keyup', function () { window.<b>localStorage</b>['value'] = area.value; window.<b>localStorage</b>['timestamp'] = (new Date()).getTime(); }, false); textarea.value = window.<b>localStorage</b>['value']; </pre> <br /> <p>例子: 在客户端保存Email草稿 ,即使浏览器崩溃了数据也不会丢失。</p> <textarea id="ta"></textarea>  <script type="text/javascript" charset="utf-8"> var area = document.querySelector('#ta'); // place content from previous edit if (!area.value) { area.value = window.localStorage.getItem('value'); } // your content will be saved locally area.addEventListener('keyup', function () { window.localStorage.setItem('value', area.value); window.localStorage.setItem('timestamp', (new Date()).getTime()); }, false); // updateLog(); // setInterval(updateLog, 5000); // show time every 5 seconds function updateLog() { var delta = 0; if (window.localStorage.getItem('value')) { delta = ((new Date()).getTime() - (new Date()).setTime(window.localStorage.getItem('timestamp'))) / 1000; document.querySelector("#ta_log").innerHTML = 'last saved: ' + delta + 's ago'; } else { area.value = 'Type your text here...'; } } </script> </section> </div> <div class="slide"> <header><span class="js">JS APIs</span> <h1>本地数据库 - Web SQL Database</h1></header> <section> <pre>var db = window.<b>openDatabase</b>("Database Name", "Database Version"); db.<b>transaction</b>(function(tx) { tx.<b>executeSql</b>(<em>"SELECT * FROM test"</em>, [], successCallback, errorCallback); }); </pre> <div style="text-align: center"> <style> .record-list li:nth-child(odd) { background-color: #eee; } .record-list li:nth-child(even) { background-color: #ddd; } #db_results { font-size: 20px; max-height: 150px; overflow: auto; text-align: left; } </style> <ul class="record-list" id="db_results"></ul> <div id="db-log"></div> <input type="text" id="todoitem" /> <button οnclick="newRecord()">新建记录</button> <button οnclick="createTable()">建立数据表</button> <button οnclick="dropTable()">删除数据表</button> <p>Chrome中查看生成的数据库: 开发人员 > 开发人员工具 > Storage</p> </div> <script> var db; var log = document.getElementById('db-log'); db = openDatabase("DBTest", "1.0", "HTML5 Database API example", 200000); showRecords(); document.getElementById('db_results').addEventListener('click', function(e) { e.preventDefault(); }, false); function onError(tx, error) { log.innerHTML += '<p>' + error.message + '</p>'; } // select all records and display them function showRecords() { document.getElementById('db_results').innerHTML = ''; db.transaction(function(tx) { tx.executeSql("SELECT * FROM Table1Test", [], function(tx, result) { for (var i = 0, item = null; i < result.rows.length; i++) { item = result.rows.item(i); document.getElementById('db_results').innerHTML += '<li><span contenteditable="true" οnkeyup="updateRecord('+item['id']+', this)">'+ item['text'] + '</span> <a href="#" οnclick="deleteRecord('+item['id']+')">[Delete]</a></li>'; } }); }); } function createTable() { db.transaction(function(tx) { tx.executeSql("CREATE TABLE Table1Test (id REAL UNIQUE, text TEXT)", [], function(tx) { log.innerHTML = '<p>Table1Test created!</p>' }, onError); }); } // add record with random values function newRecord() { var num = Math.round(Math.random() * 10000); // random data db.transaction(function(tx) { tx.executeSql("INSERT INTO Table1Test (id, text) VALUES (?, ?)", [num, document.querySelector('#todoitem').value], function(tx, result) { log.innerHTML = ''; showRecords(); }, onError); }); } function updateRecord(id, textEl) { db.transaction(function(tx) { tx.executeSql("UPDATE Table1Test SET text = ? WHERE id = ?", [textEl.innerHTML, id], null, onError); }); } function deleteRecord(id) { db.transaction(function(tx) { tx.executeSql("DELETE FROM Table1Test WHERE id=?", [id], function(tx, result) { showRecords() }, onError); }); } // delete table from db function dropTable() { db.transaction(function(tx) { tx.executeSql("DROP TABLE Table1Test", [], function(tx) { showRecords() }, onError); }); } </script> </section> </div> <div class="slide"> <header><span class="js">JS APIs</span> <h1>文件缓存 - Application Cache API</h1></header> <section> <pre><html <b>manifest="cache-manifest"</b>> window.<b>applicationCache</b>.addEventListener(<em>'checking'</em>, updateCacheStatus, false); </pre> <pre>CACHE MANIFEST # version 1 CACHE: /html5/src/refresh.png /html5/src/logic.js /html5/src/style.css /html5/src/background.png </pre> <p style="padding-top: 20px; text-align: center;">试试断开你的网络连接，然后刷新! <img src="/html5/src/refresh.png" /></p> </section> </div> <div class="slide"> <header><span class="js">JS APIs</span> <h1>让程序在后台运行 - Web Workers</h1></header> <section> <pre>main.js: var worker = new <b>Worker</b>(‘extra_work.js'); worker.<b>onmessage</b> = function (event) { alert(event.data); }; extra_work.js: // do some work; when done post message. <b>postMessage</b>(some_data); </pre> <script src="/html5/src/webworkers/points.js" type="text/javascript" charset="utf-8"></script> <script src="/html5/src/webworkers/annealing.js" type="text/javascript" charset="utf-8"></script>  <div id="w_wrapper"> <div id="wmap" style="height: 200px"></div>  <button id="find_route_y">用Workers查询航线</button> <button