一个html使用两个js class,关于 html class=”no-js”的使用
最近有些朋友问到:为什么我的网页 code 有class="no-js"
?
其实,这个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)到 并 替换掉原来的 .no-js(简单来说,Modernizr 就是一个CSS3/HTML5 的测试器,你需要测试什么,这可以到它的官方网站配置,选择自己需要测试的元素)。
还有让你的游览器支持 HTML 5 中的新的标签,例如:, ,
和
IE8 例子
可以看到,IE8 不支持很多 CSS3。以no
开头的,都是不支持。
如何使用:
0、在
关闭前加载 Modernizr。(这是个独立的 js 库,跟 jQuery 没关系,没有jQuery 也可以使用。)
1、如果你的游览器没启用 javascript,当然 html 中的 class=”no-js” 是没改变的,我们可以用这个 class 来提示用户启用 javascript。
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 是一款很好的工具,让设计者更好控制他的设计。如果你只用一点点或许没用完全用上它的功能,这样太浪费了,你还是使用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的):
一个html使用两个js class,关于 html class=”no-js”的使用相关推荐
- java提交数据到另一个页面_JS实现把一个页面层数据传递到另一个页面的两种方式...
由于之前面试,被问到过此问题,所以今天特意整理了一下.由于自己技术水平有限,若存在错误,欢迎提出批评. 本博客整理了两种方式从一个页面层向另一个页面层传递参数. 一. 通过cookie方式 1. 传递 ...
- 【网站】一个空间放两个网站,且不用子目录绑定域名的方法
一个空间绑定两个域名的办法操作 很多空间支持多域名绑定,但是不支持子目录绑定,这时我们就可以考虑如下几种方法来实现一个空间放多个域名站点的方法,只是其他站点都需要在一个目录下大开,但这毫不影响搜索引擎 ...
- vue项目跨域的问题(一个项目对接两个不同的域名、端口接口导致跨域,最好的办法是后端解决)
vue项目跨域的问题前端解决方法(一个项目对接两个不同的域名.端口接口导致跨域,最好的办法是后端解决) 前端解决方法: ①打开config文件---->index.js文件,找到 proxyTa ...
- 写一个静态HTML页面,直接写HTML代码和用JS动态生成代码,哪种方式要好
如果写一个静态HTML页面,直接写HTML代码和用JS动态生成代码,哪种方式要好点?为什么? 不考虑人力因素(手写HTML太费时间排除),请从读取和解析或者其他的角度分析.谢谢 添加评论 分享 按投票 ...
- html div左中右布局,求助css。 一个div包含两个div,左右布局,左边css宽30%,右边div宽70%。高度均自...
求助css. 一个div包含两个div,左右布局,左边css宽30%,右边div宽70%.高度均自以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让 ...
- phpstudy一个域名配置两个网站(一个是thinkphp5,一个是原生php)
phpstudy一个域名配置两个网站(一个是thinkphp5,一个是原生php) 一.总结 一句话总结:把原生php的网站直接放到thinkphp5的public目录下可以解决以stem.aaaa. ...
- [问题解决]不使用PWM调速系统,彻底解决一个L298N带动两个电机却转速不同的问题
[问题解决]不使用PWM调速系统,彻底解决一个L298N带动两个电机却转速不同的问题 参考文章: (1)[问题解决]不使用PWM调速系统,彻底解决一个L298N带动两个电机却转速不同的问题 (2)ht ...
- android 多个dialog 交替显示,Android如何在一个AlertDialog中一个接一个地显示两个ListViews...
我有两个列表.一个列表显示可用列表中的所有可用项目(lv_available_items)和仅次要项目(lv_selected_items).我还希望该选定列表最多占用显示的50%,因此我使用属性&q ...
- html js 做的小游戏,用js做一个小游戏平台 (一)
记得上班写代码时,我们技术总监总说是要先"设计",那就先"设计"吧. ps:我是新手大家多多见谅. .网页游戏区域.就是说需要知道游戏在网页上的区域,如下: 在 ...
最新文章
- Tensorflow 变量的共享
- 使用OpenVINO遇到No name 'IENetwork' in module 'openvino.inference_engine'解决
- 七牛云——对象存储私有空间下载凭证认证失败401[“error“:“download token auth failed“]解决方案
- 反思代码优化点:trycatch 验证类 封装用户变量
- Python数据类型判断常遇到的坑
- 第1章 策略模式【StrategyPattern】
- Hibernate单表开发步骤
- 速打微补丁!这个越权文件读取漏洞影响 Windows OS
- 解决nuxt.js新建项目报错的问题
- 高效的JavaScript
- vm14远程连接服务器,VisualVM 远程连接服务器
- 初中节点法分析电路_初三物理电路图解题思路:电路简化原理
- 对位藏头诗 ——《集异璧之大成 》
- C#学习之IntPtr类型
- 源发行版17需要目标发行版17
- win10连接虚拟机ftp服务器配置,win10虚拟机ftp服务器
- 简单服务端和客户端的开发
- English-人事部翻译资格认证
- 3D游戏建模真的很累吗?前景怎么样?需要什么基础?
- 如何用计算机算三角函数的度分秒,用计算器算三角函数!!!怎样输入度分秒!!!
热门文章
- sip java_An Introduction to the JAIN SIP API | Oracle 中国
- 2022年河南最新建筑八大员(劳务员)模拟考试题库及答案
- 计算机电子表格三维簇状柱形图怎么设置,Excel中怎么制作柱形对比图【excel表格数据生成柱形图】...
- Power bi 3.4 簇状柱形图
- vue2.0 IE11兼容模式
- 我是如何利用业余时间写书的?---时间管理
- 15款手机CSS3动画导航特效
- 华为手环4pro能更新鸿蒙,华为手环4 Pro评测:多功能NFC+独立GPS,更专业运动健康管理...
- 华为虚拟home键关闭_华为手环3系列全新上市功能全面升级,标杆级高性价比智能手环!...
- 基于ARM平台下的GPRS/CQT测试系统设计研究