关于HTML5 boilerplate 的一些笔记
最近在研究HTML5 boilerplate的模版,以此为线索可以有条理地学习一些前端的best practice,好过在W3C的文档汪洋里大海捞针……啊哈哈哈……
开头的IE探测与no-js类是什么?
Modernizer探测到浏览器启用了js的时候会将.no-js替换成.js,这样在CSS里可以为禁用js或者启用js的浏览器添加额外的规则,像这样
.no-js xx {
/* Some CSS code for browsers with js disabled */
}
算是对没有if-else的CSS的一种workaround。其他lt-ie*的类也是同理。
参见: What is the purpose of the HTML “no-js” class?
<meta http-equiv="X-UA-Compatible" content="IE=edge">
用于让IE使用可用的最高版本的模式,e.g. IE8用IE8模式,IE9用IE9模式。 参见What's the difference if <meta http-equiv="X-UA-Compatible" content="IE=edge"> exists or not?
旧版的HTML5 boilerplate还带了chrome=1这个值,是为了让有Google Chrome Frame这个插件的IE可以用上chrome的特性和JS引擎,但是这个插件已经退役了,所以新版的HTML5 boilerplate也去掉了这个值。
注意这段代码过不了W3C提供的validation,当然也可以理直气壮地无视它啊哈哈哈。如果实在是很在意,可以用.htaccess,参考这个讨论,或者直接在服务器代码里发送这个header(比如端口不是80又想兼容IE的)。
关于favicon
为iOS从safari放置到桌面的web app设置图标:Configuring Web Applications
关于favicon,一般最好用ico(一些旧版的浏览器不支持png= =),还有一些逗比浏览器(e.g.360)只肯使用网站根目录下的favicon.ico(连端口都不能有),这些点要注意。
参考:
charset放在哪里
为了防止被利用不正确的编码进行攻击(比如IE会猜到用utf-7),一定要声明charset,而且要放在HTML文件的前1024byte(参考HTML5标准),最好放在title的前面(参考Google Dcotype)
viewport
width=device-width, initial-scale=1一般会在移动端浏览器下取得比较好的效果(尤其是在有响应式设计的时候。不设的话通常移动端的浏览器会按电脑屏幕的尺寸绘图,一打开网页长得跟个PC版的略缩图一样……)
normalize.css
注意现在维护的normalize.cssv3对IE只支持到IE8,IE6~7需要已经不再维护的normalize.cssv1(不过想用HTML5的就不会考虑照顾这些低版本IE了吧2333)
源代码的注释也是学习各浏览器兼容性的好材料。
main.css
里面自带了一大堆helper class以及一些opinionated的默认值(e.g.默认文本颜色设为#222而不是比较刺眼的纯黑),另外设置了一堆打印格式和用于设置隐藏的样式。
modernizr
很有名的处理浏览器新特性兼容性的JS库,略复杂,参考官网即可
plugins.js
用来放各种插件(包括jQuery插件)。里面有一段代码是用来防止一些逗比浏览器没有console导致报错的,运行完后这类浏览器会多出一个windows.console,里面的各种各样的方法(e.g. window.console.log)都是空函数,这样被调用不会有任何效果但是也不会报错。
追记: 昨晚刚看到这个,今天就遇到了…………没按F12前的IE9就是没有console的。如果遇到IE里javascript失效,按了F12之后又生效,就可以删掉使用console的地方或者将这段代码放到开头的js里。(当然更好的做法就是用工具清理一遍代码后再用于测试233)
怎样同时使用HTML5 boilerplate与bootstrap
使用Initializr即可
参考:Is Bootstrap a complement or an alternative to HTML5 Boilerplate or viceversa?
引用外站文件的时候为什么用//做协议
为了让浏览器对不同的协议(https/http)载入不同的文件,这样不会有烦人的提示跑出来,参考The Protocol-relative URL
WebpageTest
在挖官方文档和相关链接的时候偶然发现了这个好东西:WebpageTest,可以检测不同地点里多种浏览器(包括部分移动端浏览器)下页面载入的性能与网络IO,这样就可以为一些没有开发者工具的浏览器做profiling啦~
Google Doctype
一些web开发小知识的集合,原来的地址已经挂了,不过在google code上存着镜像:Google Doctype的镜像
关于HTML5 boilerplate 的一些笔记的更多相关文章
- HTML5 Boilerplate笔记(3)
HTML5 Boilerplate项目网址:https://github.com/h5bp/html5-boilerplate
- HTML5 Boilerplate笔记(2)(转)
最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用. 一:HTML5 ...
- HTML5 boilerplate 笔记(转)
最近在研究HTML5 boilerplate的模版,以此为线索可以有条理地学习一些前端的best practice,好过在W3C的文档汪洋里大海捞针……啊哈哈哈…… 开头的IE探测与no-js类是什么 ...
- HTML5 Boilerplate - 让页面有个好的开始
最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用. 一:HTML5 ...
- HTML模块化:使用HTML5 Boilerplate模板
HTML5 Boilerplate 是一个由 Paul Irish(Google Chrome 开发人员.jQuery 项目成员.Modernizr 作者.yayQuery 播客主持人)主导的“前端开 ...
- HTML5 Boilerplate
time: 2016-10-20 20:00 HTML5 Boilerplate(H5BP)是一个由 Paul Irish(Google Chrome 开发人员.jQuery 项目成员.Moderni ...
- 【整理】HTML5游戏开发学习笔记(5)- 猜谜游戏
距上次学习笔记已有一个多月过去了,期间由于新项目赶进度,以致该学习计划给打断,十分惭愧.书本中的第六章的例子相对比较简单.所以很快就完成. 1.预备知识html5中video标签的熟悉 2.实现思路对 ...
- HTML5移动开发学习笔记之Canvas基础
1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...
- html5和css3学习笔记
HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核; app(applicatin):应用; native app:原生的app sadsadsadad 单标签可以省略结尾标记 ...
随机推荐
- 【arc080F】Prime Flip
Portal --> arc080_f Solution 这题的话..差分套路题(算吗?反正就是想到差分就很好想了qwq) (但是问题就是我不会这种套路啊qwq题解原话是:&quo ...
- python基础----再看property、描述符(__get__,__set__,__delete__)
一.再看property 一个静态属性property ...
- HDU3400 三分套三分
题意 就是给你两条线段AB , CD ,一个人在AB以速度p跑,在CD上以q跑, 在其他地方跑速度是r.问你从A到D最少的时间. 三分AB ,然后再三分CD ,模板题目,这题卡精度 eps不能少 #i ...
- Mybatis批量删除之Error code 1064, SQL state 42000;
(一)小小的一次记载. (二):最近的项目都是使用MyBatis,批量新增自己都会写了,但是一次批量删除可把我给折腾了下,写法网上都有,但是照着做就是不行,最后问公司的人,问网友才得到答案,那就是jd ...
- 拓扑排序 最大字典序+优先队列 BZOJ 4010
http://www.lydsy.com/JudgeOnline/problem.php?id=4010 4010: [HNOI2015]菜肴制作 Time Limit: 5 Sec Memory ...
- 优美的代码:do...while(0)
1.背景 最近再看一个开源代码的时候,看到很多宏经常这么写的: #define XXX do{\ ...\ }) 一眼看到的时候就知道这一份代码执行一次,那么do...while还有什么意义呢?在查阅 ...
- Ubuntu无法进入图形界面的解决办法
Ubuntu无法进入图形界面的解决办法 Ubuntu系统启动,输入用户密码后,屏幕显示彩色背景,但是始终不能进入图形界面. 如果你也遇到过这种情况,可以参照以下方法解决(在 ubuntu14.04 验 ...
- [php]apache虚拟主机配置
1.所谓虚拟主机的配置,即url与磁盘目录的绑定 2.在httpd.conf中查询Virtual host,发现有注释说明需要在conf/extra/httpd-vhosts.conf中进行配置. 3 ...
- 【Hadoop】用web查看hadoop运行状态
博文已转移,请借一步说话.http://www.daniubiji.cn/archives/621 上一篇文章(去博客园),我们安装完hadoop,下面我们从视觉上看看hadoop怎么玩的. 我们可以 ...
- 【BZOJ4870】组合数问题(计数DP,快速幂)
题意: 1 ≤ n ≤ 10^9, 0 ≤ r < k ≤ 50, 2 ≤ p ≤ 2^30 − 1 思路:From http://blog.csdn.net/qq_33229466/artic ...