以前常说：Web2.0！结果2.0时代直接就来了。如今在Google 的代领下，Html5正慢慢走进人们的视线，You/to/be就是很好的例子。我一直是一个爱折腾代码级别的 SEO 技巧的 IT，觉得网页的宗旨嘛：不仅要人类看了优美，也要 Spider 看了优雅。
于是Html5 语意化标签就成了“众矢之的”，呵呵，下面带来本文的主角，HTML5 & CSS3 WordPress 主题一枚。至于HTML5标签语法神马的就不说了，感兴趣的同学直接下载看手册吧->HTML5手册 & CSS3.0手册。
该主题是由 @Ethan 设计和编写，我呢，作为全程监工，负责各种挑刺，发现超爱干这活。
—————-
名称：yoTheme V1.0 （话说看到什么1.0版本，就觉得跟内测，封测一样。。无名的兴奋）
下载&发布页：WordPress模板 yoTheme v1.0 发布
支持：FF3+|Chrome5+|Safari 4+|Opera 9+|IE 9 (奇怪了，那IE6/7/8支持么？且接着往下看。)
—————-
众所周知，HTML5 最显著的特点就是多了许多新标签，一方面大大加强了语义化的能力，另一方面使得诸多旧版浏览器不识别页面标签了。
怎样解决这种兼容性问题呢？怎样让HTML5 支持 IE 呢？这里提出3中方法：
1. User Agent判别法
既然 IE6/7/8 | FF3- | chrome – 等等低版本浏览器不能识别属于HTML5的新标签，我们可以对这些浏览器进行侦测，向其输出普通的HTML4 标签，例如：用 <DIV> 替代 <article> 等标签。如下：- <?php
- $ua = $_SERVER['HTTP_USER_AGENT'];
- function htmlUA($html4,$html5) {
- global $ua;
- if (strstr($ua,'MSIE 8.0')||strstr($ua,'MSIE 7.0')||strstr($ua,'MSIE 6.0')||strstr($ua,'Firefox/3')||strstr($ua,'Firefox/2')||strstr($ua,'Opera')) {
- $html = 4;
- }else {$html = 5;}
- }
- ?>
2. Javascrip IE hack法 （淘宝网的做法）- <html>
- <head>
- <style type="text/css">
- article { color:red; }
- </style>
- <script type="text/javascript">document.createElement("article");</script>
- </head>
- <body>
- <artical> 自力博客 | zlz.im </artical>
- </body>
- </html>
当然，完成上面的hack后，最后还要在 CSS 文件中给这些新标签定义 display:block; 的属性，如下：
section,article,aside,header,footer,nav,dialog,figure{display:block;}
3.Mode（去掉括号）rnizr库HTML5特效检查
Mode（删除括号）rnizr 就是为HTML5而生的——它是一个检测浏览器对HTML5和CSS3特性支持的JS库，用法简单且有效，这里就不重复劳动了，见蓝色理想->传送门
至此，html5 就能在所有浏览器上兼容运行了，这就是我拿到 @Ethan 的这个新主题后内测时研究的成果，继续观望，坐等 yoTheme V1.1 Release。LOL~~~无尽的折腾。。无尽的乐趣。 |
发表于 2011-7-14 14:24:42
