We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
前段时间 HTML5 规范已经定稿,不知道是颠覆还是昙花一现。不管怎样,建立起规范总是好事,接下来让市场来决定。
<section>
<nav>
<menu>
<header>
<footer>
<article>
<canvas>
<audio>
<video>
HTML5 尚未普及,有很多浏览器不支持,我们可以使用 Modernizr, Modernizr 是一个开源的 JavaScript 库,利用其富特性检测功能。可对 HTML5 文档进行更好的控制。
Modernizr 不会给浏览器添加不支持的特性,能做的是为你提供一些不同的 CSS 类名以及特性检测(feature-detection)属性。
添加 Modernizr 之后,它会修改 <html> 的 class 属性,基于可用的 html5 特性添加额外的类名。要使用 Modernizr 编写文档,通常都要给<html> 添加一个 no-js 类,利用这个类可以在浏览器不支持 JavaScript 的情况下应用 CSS 样式:
<html>
.no-js selector { style porperties }
然后, Modernizr 会检测浏览器可能支持的各种特性,并相应地添加类名 feature 或 no-feature,例如:<html class="canvas">或<html class="no-canvas">。根据这些类名, 可在 CSS 中 定义相应的增强和退化版本,改善用户体验。
<html class="canvas">
<html class="no-canvas">
.multiplebgs article p { /* 为支持多背景浏览器编写的样式*/ } .no-multiplebgs article p { /* 为不支持多背景浏览器编写的后备样式*/ }
Modernizr 库还提供了 JavaScript 特性检测对象,可在 DOM 脚本中直接使用:
if (!Modernizr.inputtypes.date) { createDatePicker(document.getElementById('birthday')); }
Modernizr 还可以帮助旧式浏览器处理 HTML5 新元素 如 <section>、<nav>、<menu>、<header>、<footer>、<article> 等。为使用这些新元素,只需要指定它们为块状元素:
article,aside,footer,header,hgroup,nav,section { display: block; }
唯一的特例是 IE 必须用 JavaScript 创建未知元素:
document.createElement("article");
Modernizr.js 可在 http://modernizr.com/ 下载。记住一定要把此脚本放在<head> 元素中。这样可以在加载其他标记之前先加载它,以便它在文档呈现之前能够创建好新的 HTML5 元素.
<head>
<Canvas> 元素可动态创建和操作图形推向。
<Canvas>
<canvas id="draw-in-me" width="120" height="40"> <p>Powerd By HTML5 canvas</p> </canvas>
使用 <Canvas> 画一个圆角小黑盒子,带有2像素宽的白色描边 效果。
function draw() { var canvas = document.getElementById("draw-in-me"); if (canvas.getContext) { var ctx = canvas.getContent('2d'); ctx.beginPath(); ctx.moveTo(120.0,32.0); ctx.bezierCurveTo(120.0,36.4,116.4,40.0,112.0,40.0); ctx.lineTo(8.0,40.0); ctx.bezierCurveTo(3.6,40.0,0.0,36.4,0.0,32.0); ctx.lineTo(0.0,8.0); ctx.bezierCurveTo(0.0,3.6,3.6,0.0,8.0,0.0); ctx.lineTo(120.0,32.0); ctx.closePath(); ctx.fill(); ctx.lineWidth = 2.0; ctx.strokeStyle = "rgb(255,255,255)"; ctx.stroke(); } } window.onload = draw;
todo 缺个彩色图像变为灰色图像的例子。
有了 <Canvas> ,就可以在浏览器窗口绘制任何对象、任何像素了。当然,还能通过它来操作图像,或者创建令人眼花缭乱的界面元素。值得注意的<Canvas>和 Flash 不具备可访问性。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
HTML5
前段时间 HTML5 规范已经定稿,不知道是颠覆还是昙花一现。不管怎样,建立起规范总是好事,接下来让市场来决定。
HTML5 带来了哪些新的变化
<section>
、<nav>
、<menu>
、<header>
、<footer>
、<article>
等,更加语义化,利于SEO;<canvas>
、<audio>
、<video>
。Modernizr
HTML5 尚未普及,有很多浏览器不支持,我们可以使用 Modernizr, Modernizr 是一个开源的 JavaScript 库,利用其富特性检测功能。可对 HTML5 文档进行更好的控制。
Modernizr 不会给浏览器添加不支持的特性,能做的是为你提供一些不同的 CSS 类名以及特性检测(feature-detection)属性。
添加 Modernizr 之后,它会修改
<html>
的 class 属性,基于可用的 html5 特性添加额外的类名。要使用 Modernizr 编写文档,通常都要给<html>
添加一个 no-js 类,利用这个类可以在浏览器不支持 JavaScript 的情况下应用 CSS 样式:然后, Modernizr 会检测浏览器可能支持的各种特性,并相应地添加类名 feature 或 no-feature,例如:
<html class="canvas">
或<html class="no-canvas">
。根据这些类名, 可在 CSS 中 定义相应的增强和退化版本,改善用户体验。Modernizr 库还提供了 JavaScript 特性检测对象,可在 DOM 脚本中直接使用:
Modernizr 还可以帮助旧式浏览器处理 HTML5 新元素 如
<section>
、<nav>
、<menu>
、<header>
、<footer>
、<article>
等。为使用这些新元素,只需要指定它们为块状元素:唯一的特例是 IE 必须用 JavaScript 创建未知元素:
Modernizr.js 可在 http://modernizr.com/ 下载。记住一定要把此脚本放在
<head>
元素中。这样可以在加载其他标记之前先加载它,以便它在文档呈现之前能够创建好新的 HTML5 元素.Canvas
<Canvas>
元素可动态创建和操作图形推向。使用
<Canvas>
画一个圆角小黑盒子,带有2像素宽的白色描边效果。
todo 缺个彩色图像变为灰色图像的例子。
有了
<Canvas>
,就可以在浏览器窗口绘制任何对象、任何像素了。当然,还能通过它来操作图像,或者创建令人眼花缭乱的界面元素。值得注意的<Canvas>
和 Flash 不具备可访问性。The text was updated successfully, but these errors were encountered: