原由
之所以想自己动手打造一款路由器,很大一部分原因是因为市面上大部分的浏览器大多不靠谱,大品牌要么配置太弱要么价格太贵,国产要么不稳定要么各种广告劫持;同时自己动手还能解决一些你懂的需求
以下方案仅限于浏览器环境!
浏览器内置的方法 atob, btoa
仅能处理 utf-8 编码的 ascii 字符,不能直接作用于 Unicode 字符串,所以需要搞定 utf-8 编码,解码:
1 | // utf-8 encode, decode |
来源:http://ecmanaut.blogspot.jp/2006/07/encoding-decoding-utf8-in-javascript.html
另:关于URL编码
然后 base64 自然就有了:
1 | // base64, encode, decode |
兼容情况如下:
Opera 9.0.8502
Camino 2006061318 (1.0.2)
grunt-sprite
,由于其配置参数限制目录结构等,不能满足通用项目需求,现重新造轮子发布;background-position
属性image-set
配置高清雪碧图在响应式布局中我们常用用一下代码来处理图片的自适应宽度
1 | img{ height: auto; max-width: 100%;} |
不过对于视频,这个貌似就有心无力了,不过这难不倒我们,
根据CSS规范,margin
和 padding
在接受百分比值时,其上下值为相对于元素的宽度,于是就有了以下代码:
1 | .video{ |
效果可见:DEMO页面
我们经常用 margin:0 auto
来实现水平居中,而一直认为 margin:auto
不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS:
1 | .Absolute-Center { |
一时兴起,发布一款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下测试结果:
1 | navigator.appName; //Netscape |
另外在http://www.guokr.com/post/449426/看到IE11将navigator.appName
改成Netscape
了,引用页面中一句:“IE 10是最后一个appName叫做Microsoft Internet Explorer的网页浏览器了,突然好悲伤。。。”
说到CSS背景半透明,各位CSSer肯定都不陌生,写过页面的大部分都干过这个事情,尤其是CSS2时代走过来的。
老题新解,现在已经步入CSS3时代了,对于处理CSS背景半透明应该已经不是很难的事了,不过请不要忘了咱在天朝,IE6的份额依旧不少, 查看份额。
不扯,入正题,先看完整DEMO:
大部分情况下我们做背景透明都是这么写的,代码简单,写起来也方便;不过大部分情况是需要多增加一个标签,因为这么写会连文字一起透明1
.opacity .test{ background:#fff; opacity:.4; filter:Alpha(opacity=40);}
首先说说background:rgab/hsla
,这两个新的颜色函数都能定义alpha通道值,然后可以使得背景半透明,甚至还可以使用CSS3gradient
的渐变函数,生成更为复杂的背景,具体请自行谷歌;
在CSS2后面某个时候,有童鞋发现了filter:progid:DXImageTransform.Microsoft.Gradient
IE下能通过渐变滤镜去模拟背景透明,而不用文字透明
当然,有利必然有弊,这么写,代码略长,写起来麻烦:
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);}
上面背景透明的实现已经是本文的核心部分,但是如果你够细心,会发现此效果在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;}
当看到此处的时候,应该本文应该是能结尾了,因为上面的效果在各个浏览器下已经接近完美了,不过还有个不得不说的密码
IE7- 当使用滤镜时,大部分情况会使得元素具有 overflow:hidden 特性,具体请见DEMO最后
全文完,欢迎拍砖。
最后在放一次DEMO地址
上午看到司徒正美发的博文,《javascript 的位操作符转换推断》,看的时候自己也觉得推断的挺好的;不过刚好下午写了一个团购倒计时页面,同事拿过去用之后,发现时间过长会出现倒计时不走的情况,伪代码如下1
2
3
4
5
6var 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 网页 灰色”
本来觉得这类的介绍网上已经很多了,不想再插一脚了,不过今天忽然有朋友又向我问起,自以为自己很了解的情况下给了几个方案:
堪称完美级
整站换图片,不过就是工作量稍大,还得换回来,要是有会员上传的图就更麻烦了(明显调侃)
纯CSS实现
IE:filter
Chrome:filter
效果很不错,实现也简单,不过 FF, OPERA,SAFARI 不支持, 手机端就更不行了
HTML5 filereader实现去色功能
效果良好,而且有不错类库实现了
代码量稍大,不过低版本浏览器全挂掉
结合前面两点
filter - 略
grayscale.js - http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers
缺点:
如果页面图片量很大,图片加载时间很很长,页面可能会出现闪屏
然后,JS本来效率就偏低,所以处理大量图片,自然页面会卡
然后在自己小得意的时候,朋友发过来一段(说是同事给的):1
2
3
4
5html{
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
23html{
/*
* 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
20var 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/