关于 html class=”no-js”的使用

栏目: Html · 发布时间: 4年前

内容简介:最近有些朋友问到:为什么我的网页 code 有其实,这个Modernizr 是一个 javascript 库,检查你的游览器是否支持 CSS3 或者 HTML5 的特性而自动添加一些类名(class)到 <html> 并 替换掉原来的 .no-js(简单来说,Modernizr 就是一个CSS3/HTML5 的测试器,你需要测试什么,这可以到它的官方网站配置,选择自己需要测试的元素)。

最近有些朋友问到:为什么我的网页 code 有 class="no-js"

<!DOCTYPE html>
<html dir="ltr" lang="en-US" class="no-js">
<head>
<meta charset="utf-8">

其实,这个 no-js 是配合  Modernizr 一起使用的类名(class)

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

Modernizr 是一个 javascript 库,检查你的游览器是否支持 CSS3 或者 HTML5 的特性而自动添加一些类名(class)到 <html> 并 替换掉原来的 .no-js(简单来说,Modernizr 就是一个CSS3/HTML5 的测试器,你需要测试什么,这可以到它的官方网站配置,选择自己需要测试的元素)。

还有让你的游览器支持 HTML5 中的新的标签,例如: <nav>, <header>, <footer> 和  <figure>

Modernizr 官方网站: http://modernizr.com/

IE8 例子

<html class=" js no-flexbox no-canvas no-canvastext no-webgl no-touch no-geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent no-video no-audio localstorage sessionstorage no-webworkers no-applicationcache no-svg no-inlinesvg no-smil no-svgclippaths" lang="zh">

可以看到,IE8 不支持很多 CSS3。以 no 开头的,都是不支持。

如何使用:

0、在 </head> 关闭前加载 Modernizr。(这是个独立的 js 库,跟jQuery 没关系,没有jQuery 也可以使用。)

<script src="/js/modernizr-2.5.3.min.js"></script>
</head>

1、如果你的游览器没启用 javascript,当然 html 中的 class=”no-js” 是没改变的,我们可以用这个 class 来提示用户启用 javascript。

<!DOCTYPE html>
<html dir="ltr" lang="en-US" class="no-js"><!-- html 需要添加 no-js 这个class -->

2、除了侦查游览器是否用了 javascript,还可以玩其他的东西,类似 IE hack。譬如 IE8 不支持 box-shadow,我们可以指定这个 div 使用背景图片让它看起来有暗影。

/* 是否支持 JavaScript */

/* 默认支持JS,所以就隐藏这个提示 */
.please-enable-js {
    display:none;
}
/* 不支持 JS 就显示用户需要启用JS */
html.no-js .please-enable-js {
    display:block;
}



/* 是否支持 css 渐变*/
.glossy {
    /* 默认设计使用css渐变 */
    background-image: linear-gradient(top, #555, #333);
}
.no-cssgradients .glossy {
    /* 不支持css渐变的就是用图片,这样不会损坏原本的设计 */
    background-image: url("images/glossybutton.png");
}

使用 Modernizr 中的 javascript 方式侦查一些 HTML5 元素

if (Modernizr.canvas){
   // 如果游览器支持 HTML canvas,就运行这些代码
} else {
   // 不支持就运行这写代码
}

更多侦查在 Modernizr test: http://modernizr.github.com/Modernizr/test/index.html

Modernizr 是一款很好的工具,让设计者更好控制他的设计。如果你只用一点点或许没用完全用上它的功能,这样太浪费了,你还是使用 html5shiv 吧。

更新 #1

可以在游览器 console 里输入 Modernizr ,也可以看到测试的结果(结果是布尔值)。(当然你要加载这个 Modernizr 的 javascript 才能用)

更新 #2 – 关于 html5shiv 误解

1、html5shiv 只是个 javascript 库,只有一个功能,就是让 Internet Explorer 6-8 支持 HTML5 的标签,例如 article,section,aside,video 等等……

2、Modernizr 默认包含了这个库

3、使用 html5shiv,配合 conditional comment。你也不想支持的游览器加载多余的东西吧(IE9+ 是支持 HTML5的):

<!--[if lt IE 9]>
    <script src="assets/js/html5shiv.js"></script>
<![endif]-->

以上所述就是小编给大家介绍的《关于 html class=”no-js”的使用》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

游戏编程中的人工智能技术

游戏编程中的人工智能技术

布克兰德 / 吴祖增 / 清华大学出版社 / 2006-5 / 39.0

《游戏编程中的人工智能技术》是人工智能游戏编程的一本指南性读物,介绍在游戏开发中怎样应用遗传算法和人工神经网络来创建电脑游戏中所需要的人工智能。书中包含了许多实用例子,所有例子的完整源码和可执行程序都能在随书附带的光盘上找到。光盘中还有不少其他方面的游戏开发资料和一个赛车游戏演示软件。 《游戏编程中的人工智能技术》适合遗传算法和人工神经网络等人工智能技术的各行业人员,特别是要实际动手做应用开......一起来看看 《游戏编程中的人工智能技术》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具