关于HTML5 boilerplate 的一些笔记

时间 2019-11-12

标签关于 html5 html boilerplate 一些笔记栏目 HTML5 繁體版

原文原文链接

最近在研究HTML5 boilerplate的模版，以此为线索能够有条理地学习一些前端的best practice，好过在W3C的文档汪洋里大海捞针……啊哈哈哈……javascript

Modernizer探测到浏览器启用了js的时候会将.no-js替换成.js，这样在CSS里能够为禁用js或者启用js的浏览器添加额外的规则，像这样css

.no-js xx {
    /* Some CSS code for browsers with js disabled */
}

算是对没有if-else的CSS的一种workaround。其余lt-ie*的类也是同理。html

用于让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

旧版的HTML5 boilerplate还带了chrome=1这个值，是为了让有Google Chrome Frame这个插件的IE能够用上chrome的特性和JS引擎，可是这个插件已经退役了，因此新版的HTML5 boilerplate也去掉了这个值。java

注意这段代码过不了W3C提供的validation，固然也能够义正词严地无视它啊哈哈哈。若是实在是很在乎，能够用.htaccess，参考这个讨论，或者直接在服务器代码里发送这个header（好比端口不是80又想兼容IE的）。ios

为iOS从safari放置到桌面的web app设置图标：Configuring Web Applicationsgit

关于favicon，通常最好用ico（一些旧版的浏览器不支持png= =），还有一些逗比浏览器（e.g.360）只肯使用网站根目录下的favicon.ico（连端口都不能有），这些点要注意。github

参考：web

为了防止被利用不正确的编码进行攻击（好比IE会猜到用utf-7），必定要声明charset，并且要放在HTML文件的前1024byte（参考HTML5标准），最好放在title的前面（参考Google Dcotype）

width=device-width, initial-scale=1通常会在移动端浏览器下取得比较好的效果（尤为是在有响应式设计的时候。不设的话一般移动端的浏览器会按电脑屏幕的尺寸绘图，一打开网页长得跟个PC版的略缩图同样……）

注意如今维护的normalize.cssv3对IE只支持到IE8，IE6~7须要已经再也不维护的normalize.cssv1（不过想用HTML5的就不会考虑照顾这些低版本IE了吧2333）

源代码的注释也是学习各浏览器兼容性的好材料。

里面自带了一大堆helper class以及一些opinionated的默认值（e.g.默认文本颜色设为#222而不是比较刺眼的纯黑），另外设置了一堆打印格式和用于设置隐藏的样式。

颇有名的处理浏览器新特性兼容性的JS库，略复杂，参考官网便可

用来放各类插件（包括jQuery插件）。里面有一段代码是用来防止一些逗比浏览器没有console致使报错的，运行完后这类浏览器会多出一个windows.console，里面的各类各样的方法（e.g. window.console.log）都是空函数，这样被调用不会有任何效果可是也不会报错。

追记： 昨晚刚看到这个，今天就遇到了…………没按F12前的IE9就是没有console的。若是遇到IE里javascript失效，按了F12以后又生效，就能够删掉使用console的地方或者将这段代码放到开头的js里。（固然更好的作法就是用工具清理一遍代码后再用于测试233）

使用Initializr便可

为了让浏览器对不一样的协议（https/http）载入不一样的文件，这样不会有烦人的提示跑出来，参考The Protocol-relative URL

在挖官方文档和相关连接的时候偶然发现了这个好东西：WebpageTest，能够检测不一样地点里多种浏览器（包括部分移动端浏览器）下页面载入的性能与网络IO，这样就能够为一些没有开发者工具的浏览器作profiling啦~

一些web开发小知识的集合，原来的地址已经挂了，不过在google code上存着镜像：Google Doctype的镜像