原由

之所以想自己动手打造一款路由器，很大一部分原因是因为市面上大部分的浏览器大多不靠谱，大品牌要么配置太弱要么价格太贵，国产要么不稳定要么各种广告劫持；同时自己动手还能解决一些你懂的需求

效果图

以下方案仅限于浏览器环境！

浏览器内置的方法 atob, btoa 仅能处理 utf-8 编码的 ascii 字符，不能直接作用于 Unicode 字符串，所以需要搞定 utf-8 编码，解码：

1
2
3
4
5
6
7
8

// utf-8 encode, decode
function encode_utf8(s) {
    return unescape(encodeURIComponent(s));
}

function decode_utf8(s) {
    return decodeURIComponent(escape(s));
}

来源：http://ecmanaut.blogspot.jp/2006/07/encoding-decoding-utf8-in-javascript.html
另：关于URL编码

然后 base64 自然就有了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// base64, encode, decode
function base64Encode(str) {
    return btoa(unescape(encodeURIComponent(str)));
}

function base64Decode(str) {
    return decodeURIComponent(escape(atob(str)));
}

// utf-8 encode, decode
function encode_utf8(s) {
    return unescape(encodeURIComponent(s));
}

function decode_utf8(s) {
    return decodeURIComponent(escape(s));
}

兼容情况如下：

Win32

• Firefox 1.5.0.6
• Firefox 1.5.0.4
• Internet Explorer 6.0.2900.2180

• Opera 9.0.8502

  MacOS

• Camino 2006061318 (1.0.2)

• Firefox 1.5.0.4
• Safari 2.0.4 (419.3)
  当然，依然存在可能失败的情况。
  具体请参考 https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

在响应式布局中我们常用用一下代码来处理图片的自适应宽度

1

img{ height: auto; max-width: 100%;}

不过对于视频，这个貌似就有心无力了，不过这难不倒我们，
根据CSS规范，margin 和 padding 在接受百分比值时，其上下值为相对于元素的宽度，于是就有了以下代码：

1
2
3
4
5
6
7
8

.video{
	height: 0; overflow: hidden; position: relative;
    padding-bottom: 56.25%; /* 16:9 */
}
.video video, .video iframe{
	height: 100%; width: 100%;
	position: absolute; left: 0; top: 0;
}

效果可见：DEMO页面

我们经常用 margin:0 auto 来实现水平居中，而一直认为 margin:auto 不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS：

1
2
3
4
5

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

其兼容情况为：Modern & IE8+
原理&DEMO： 英文 中文

一时兴起，发布一款Chrome插件（扩展），“二维码小助手”
Chrome Store地址：https://chrome.google.com/webstore/detail/%E4%BA%8C%E7%BB%B4%E7%A0%81%E5%B0%8F%E5%8A%A9%E6%89%8B/acdfkjjfbghehjbojgnmjijpbgahmhee

放两张截图：

欢迎拍砖，请轻拍；如有BUG或者意见请在评论区留言，我会及时修正。

今天在调一个Applet上传组件，调试IE11时又差点踩坑里了，typeof window.ActiveXObject返回undefined了。。。

但是window.ActiveXObject === undefined又是不成立的。。。

以后靠谱的检测需要换成window.ActiveXObject === undefined，客官可以见DEMO页和本人WIN7 IE11下测试结果：

DEMO页面

1
2
3
4
5
6
7
8
9

navigator.appName; //Netscape
navigator.userAgent; //Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
typeof window.ActiveXObject; //undefined
typeof window.ActiveXObject === "undefined"; //true
!!window.ActiveXObject; //false
window.ActiveXObject === undefined; //false
window.ActiveXObject === void 0; //false
window.ActiveXObject == undefined; //true
window.ActiveXObject == void 0; //true

另外在http://www.guokr.com/post/449426/看到IE11将navigator.appName改成Netscape了，引用页面中一句：“IE 10是最后一个appName叫做Microsoft Internet Explorer的网页浏览器了，突然好悲伤。。。”

说到CSS背景半透明，各位CSSer肯定都不陌生，写过页面的大部分都干过这个事情，尤其是CSS2时代走过来的。

老题新解，现在已经步入CSS3时代了，对于处理CSS背景半透明应该已经不是很难的事了，不过请不要忘了咱在天朝，IE6的份额依旧不少， 查看份额。

不扯，入正题，先看完整DEMO：

opacity + filter:alpha

大部分情况下我们做背景透明都是这么写的，代码简单，写起来也方便；不过大部分情况是需要多增加一个标签，因为这么写会连文字一起透明

1

.opacity .test{ background:#fff; opacity:.4; filter:Alpha(opacity=40);}

Rgba + filter:progid:DXImageTransform.Microsoft.Gradient

首先说说background:rgab/hsla，这两个新的颜色函数都能定义alpha通道值，然后可以使得背景半透明，甚至还可以使用CSS3gradient的渐变函数，生成更为复杂的背景，具体请自行谷歌；

在CSS2后面某个时候，有童鞋发现了filter:progid:DXImageTransform.Microsoft.GradientIE下能通过渐变滤镜去模拟背景透明，而不用文字透明

当然，有利必然有弊，这么写，代码略长，写起来麻烦：

IE滤镜采用AARRGGBB（16进制）进行排列，AA位值也为 00-FF，也就是说10进制需要转成16进制

计算规则 10进制值*256/100然后再转16进制，就是说如果设置0.4的透明度0.4*256/100 = 102.4转16进制为66

1

.rgba .test{ background:rgba(255,255,255,.4); background:none\9; filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#66FFFFFF,endColorStr=#66FFFFFF);}

Rgba with last-child

上面背景透明的实现已经是本文的核心部分，但是如果你够细心，会发现此效果在IE9下透明度明显不对，

IE9当background:rgba和filter同时使用时，会出现两个效果叠加，

不过我们可以用:last-child巧妙修复；因IE6不支持 :first/last-child伪类，IE7,8-仅支持:first-child伪类，IE9+全部支持

1
2

.rgba_with_lastchild .test{ background:none; filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#66FFFFFF,endColorStr=#66FFFFFF);}
.rgba_with_lastchild .test:last-child{ background:rgba(255,255,255,.4); filter:none;}

当看到此处的时候，应该本文应该是能结尾了，因为上面的效果在各个浏览器下已经接近完美了，不过还有个不得不说的密码

Filter with overflow

IE7- 当使用滤镜时，大部分情况会使得元素具有 overflow:hidden 特性，具体请见DEMO最后

全文完，欢迎拍砖。

最后在放一次DEMO地址

上午看到司徒正美发的博文，《javascript 的位操作符转换推断》，看的时候自己也觉得推断的挺好的；不过刚好下午写了一个团购倒计时页面，同事拿过去用之后，发现时间过长会出现倒计时不走的情况，伪代码如下

1
2
3
4
5
6

var timer, timeout = ~~elem.getAttribute('data-timeout');
if(timeout > 0){
	timer = startTimeout(timeout, function(queue){
		//...
	});
}

其中的~~elem.getAttribute('data-timeout')（elem.getAttribute('data-timeout')|0，效果相同）就是偷懒的方式去强制转整型，其类似的等价于parseInt(elem.getAttribute('data-timeout'),10)||0，以前一直认为是等价的，但是现在只能说是类似等价。

但是同事输出的数值为：2703986000，在断点调试时，发现没有进if也就是说转换或的数值小于0了，为了验证做了如下测试：

1
2
3
4
5
6
7
8
9
10
11

~~'2703986000'; //-1590981296

'2703986000' | 0; //-1590981296

parseInt('2703986000'); //2703986000

~~'-15909812967'; //1270056217

'-15909812967' | 0; //1270056217

parseInt('-15909812967', 10); //-15909812967

测试发现位运算强制转整型有边界值，而且边界值小于Number.MAX_VALUE，并且大于Number.MIN_VALUE，所以当在处理大数值的时候，使用位运算是有风险的；

然后又做部分测试，求了一下位运算的边界值（对位运算不了解，可能与平台也有关系）

1
2
3
4
5
6
7

~~'2147483647'; //2147483647

~~'2147483648'; //-2147483648

~~'-2147483648'; //-2147483648

~~'-2147483649'; //2147483647

其实仔细看的话，上面还是有规律的；涉及到位运算，不对之处请拍砖！

事出自然有因，本文也是如此，雅安，加油！

相信最近不少站长和技术在度娘谷歌“CSS 网页 灰色”

本来觉得这类的介绍网上已经很多了，不想再插一脚了，不过今天忽然有朋友又向我问起，自以为自己很了解的情况下给了几个方案：

1. 堪称完美级

   整站换图片，不过就是工作量稍大，还得换回来，要是有会员上传的图就更麻烦了（明显调侃）

2. 纯CSS实现

   IE：filter

   Chrome：filter

   效果很不错，实现也简单，不过 FF, OPERA,SAFARI 不支持， 手机端就更不行了

3. HTML5 filereader实现去色功能

   效果良好，而且有不错类库实现了

   代码量稍大，不过低版本浏览器全挂掉

4. 结合前面两点

   filter - 略

   grayscale.js - http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers

   缺点：

   如果页面图片量很大，图片加载时间很很长，页面可能会出现闪屏

   然后，JS本来效率就偏低，所以处理大量图片，自然页面会卡

然后在自己小得意的时候，朋友发过来一段（说是同事给的）：

1
2
3
4
5

html{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter:gray;
    -webkit-filter: grayscale(100%);
}

乍一看，虽然让我想起了还有SVG这么个东西可以使，不过估计也就IE和Chrome行吧，印象中真没记得FF有支持filter，然后打开FF测试了下，还真可以。

然后自己也动手去谷歌了下，才想上面的代码出处应该是在这里：http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html

后面又发现在stackoverflow上也有讨论：http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css

然后又找了些资料，总结方案如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

html{
	/*
	* SVG，不建议单独SVG文件
	* 会增加一次请求，如果支持SVG基本data:基本也就没压力了，如下
	* SVG文件：http://www.laoshu133.cn/test/grayscale.svg
	*/
	/* filter: url(grayscale.svg#grayscale); */
	/*
	* 有哥们研究说SVG的支持情况如下：
	* http://www.fettblog.eu/blog/2012/06/11/forcing-chrome-to-print-all-pages-in-grayscale/
	* SVG version for IE10, Chrome 17, FF3.5, Safari 5.2 and Opera 11.6 -- does not, need to be prefixed. See below
	* 不过我测试了下IE10(WIN7&WIN8)都不支持，所以基本兼容情况如下：
	* Chorme 25/26不支持，手上没有更低版本的Chorme测试
	* FF3.5+
	*/
	filter:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImdyYXlzY2FsZSI+PGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAuMzMzMyAwLjMzMzMgMC4zMzMzIDAgMCAwLjMzMzMgMC4zMzMzIDAuMzMzMyAwIDAgMC4zMzMzIDAuMzMzMyAwLjMzMzMgMCAwIDAgMCAwIDEgMCIvPjwvZmlsdGVyPjwvc3ZnPg==#grayscale);
	/* Webkit only, Chrome & Safari 6+ */
	-webkit-filter:grayscale(100%);
	/* future-proof */
	filter:grayscale(100%);
	/* IE4-8 and 9 (deprecated). */
	filter:gray;
}

从上面注释基本可以看出对于IE10和低版本Opera CSS处理基本就是没折了；

以上代码使用时属性顺序不能调换；

以上选择器建议html或作用于html上，否则在IE下可能会看到部分元素依旧彩色，当然IE9无论怎样都处理的不是很好

说了这么多，我们来实践下：

来张美女看效果：

到了这里，在找资料的过程还发现一个Future-filter的测试页，可以看看未来的filter，下面还有”Filtered Video“ ^O^

http://davidwalsh.name/demo/css-filters.php

OK，上面说的都是CSS解决方案，我前面还说了有JS的解决方案；主要说下grayscale.js的，如果自己去写原生JS解决，看后可以自己动手试试

项目地址：http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/

首先，grayscale.js不是兼容所有浏览器，看其主页的标题：《“Grayscaling” in non-IE browsers》 ，解决方案并不适应于IE，至少是低版本的IE

然后DEMO效果在此：http://james.padolsey.com/demos/grayscale

最后来grayscale.js的用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var el = document.getElementById( 'myEl' );
grayscale( el );

// Alternatively, pass a DOM collection
// (all elements will get "grayscaled")
grayscale( document.getElementsByTagName('div') );

//可作用于jQuery
// Even works with jQuery collections:
grayscale( $('div') );
//To reset an element (back to its original colourful state) you must call grayscale.reset() and pass whatever elements you want reset:
grayscale.reset( el );
// reset() also accepts DOM/jQuery collections
grayscale.reset( $('div') );

//预处理，主要用于大图片
//The ‘prepare’ function, as discussed earlier, should be called when there’s a large image to process or even if there are several smaller images. Be aware that larger images will take quite a while to process (just a 300×300 PNG takes about 3 seconds in ‘prepare’ mode).
grayscale.prepare( document.getElementById('myEl') );
// Also accepts DOM/jQuery collections
grayscale.prepare( $('.gall_img') );

来演示一下：

1

grayscale(document.body);

来张美女看效果：

参考：

• http://davidwalsh.name/css-filters
• http://www.fettblog.eu/blog/2012/06/11/forcing-chrome-to-print-all-pages-in-grayscale/
• http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css
• http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html
• http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/