zoukankan
html css js c++ java
HTML5特性支持列表
不厚道地把外国的一个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> <!-- Copyright 2010 Google Inc. All rights reserved. Original slides: Marcin Wichary (mwichary@google.com) Modifications: Ernest Delgado (ernestd@google.com) --> <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> <!-- <link type="text/css" href="./src/scrollbar.css" rel="stylesheet"> --> <style> .notes { display: none; } .stroke { -webkit-text-stroke-color: red; -webkit-text-stroke- 1px; -moz-text-stroke-color: red; -moz-text-stroke- 1px; } body { font: 14px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; background: #778; padding: 0; margin: 0; overflow: hidden; } div.presentation { position: absolute; 100%; display: table-cell; vertical-align: middle; height: 100%; background: inherit; } div.slides { 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; 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; 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; 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"] { 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; 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; 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 { 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> <!-- <div id="ta_log"></div> --> <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 onclick="newRecord()">新建记录</button> <button onclick="createTable()">建立数据表</button> <button onclick="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" onkeyup="updateRecord('+item['id']+', this)">'+ item['text'] + '</span> <a href="#" onclick="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> <!-- <input type="button" value="Find primes with Workers" onClick="findPrimesYes()"> <input type="button" value="Find primes without Workers (it will freeze your browser)" onClick="findPrimesNo()"> The highest prime number discovered so far is: <div id="result"></div> <script type="text/javascript"> function findPrimesNo() { var n = 1; search: while (true) { n += 1; for (var i = 2; i <= Math.sqrt(n); i += 1) if (n % i == 0) document.getElementById('result').textContent = n; continue search; // found a prime! } } function findPrimesYes() { var worker = new Worker('/html5/src/webworkers/prime.js'); worker.onmessage = function (event) { document.getElementById('result').textContent = event.data; }; } </script> --> <div id="w_wrapper"> <div id="wmap" style="height: 200px"></div> <!-- <div style="position: absolute; top: 20px; left: 200px;" id="groundContainer"></div> --> <button id="find_route_y">用Workers查询航线</button> <button
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
查看全文
相关阅读:
实用的DBHelper帮助类
无刷新分页技术
Android回部古剑之ViewFlipper之仙人指路
Android玉石短剑之GridView之精挑细选
构建门户之利刃Liferay Portal系统架构
Android回部古剑之ViewFlipper之翻来覆去
Android凝碧剑之CalendarView之万年历
自己动手写Web容器之TomJetty之四:静态页面起步
Android白虹剑之EditView之非法输入
AssetBundle压缩/内部结构/下载和加载
原文地址:https://www.cnblogs.com/rubylouvre/p/1722983.html
最新文章
在 ASP.NET 中执行 URL 重写
Update SPListItem using Web Service
AD操作时异常:该服务器不愿意处理该请求。 (异常来自 HRESULT:0x80072035)
The Behavior version of the Forest is 0 it must be 2 or greater to perform a domain rename: 该服务器不愿意处理该请求。 :8245
TF54000: Cannot update data because the server clock may have been set incorrectly. Contact your Team Foundation Server Administ
SharePoint 2007中 利用ListViewWebpart 和DataViewWebpart 跨站点 调用列表或者文档库
关于图象闪烁的问题
彻底删除域控制器里面元数据
VS 2005模板丢失找回的办法
Charles的功能(web)
热门文章
Linux的基础操作
Charles的安装
shell脚本
接口和协议
Charles的功能(App)
缺陷报告的八大要素
Linux环境部署
Charles的证书下载(web)
Postman接口测试
无刷新验证插入的数据是否存在
Copyright © 2011-2022 走看看