前言

不是图书控的我,鬼迷心窍的一心想做一本更加真实的网络书

从来没有试过冰糖橙子的我,神魂颠倒的取了诡异的博客名

断断续续,拖拖延延的做很久,墨迹了个半成品

总而言之2011,冰糖橙子将会更加努力

目录

WEBP

2 Comments

WEBP是什么呢?
WEBP 是google推出的意图改变web图片JPG、PNG、GIF三分天下局势的一种图片格式。它不仅支持无损或有损压缩、alpha通道,还支持动画演示。在同画质的情况下,webp格式图片占用体积相较于jpg图片大约减少40%,相较于无损png图片大约减少30%。具不完全统计,互联网流量中60%都产生于图片,如果能用上webp格式,网站的访问速度将会大大提升。

兼容及使用

目前,移动端Android4.0以上、PC端chorme 10+(14 ~ 16 有渲染bug)、opera 11+ 、safri均支持webp格式图片。firefox曾经拒绝支持webp,今年也重启了关于webp第二次讨论https://bugzilla.mozilla.org/show_bug.cgi?id=856375 ( 第一次讨论:地址 ),大家可以关注到里面的进度,safri也开始支持webm,相信webp也会在不久的将来得到支持,好的东西始终是会被大家接纳的。

目前要实现全浏览器兼容,虽然可以引入flash,但引入成本太高而且转为flash之后图片不能再操作,缺少灵活性,同时又会占用过多的CPU。因此,目前可行的解决方法只能是同时提供两套图片。

1.服务端方式服务端就只能通过UA信息来判断 可参考:https://github.com/igrigorik/webp-detect ,针对不同浏览器提供不同文件。

继续阅读:WEBP

chrome 27+ 的 SCSS调试

No Comments>>

Chrome在更新到27后,之前的SCSS的debug info就不显示,刚开始还以为是更新后默认恢复了开启的试验选项,各种把 启用开发者工具实验Support for Sass 开了又关,关了又开,怎么也木有效果。

终于找到这个的解决办法:http://snugug.com/musings/debugging-sass-source-maps

原来Chrome27+只支持Source Maps,Source Map是一个JSON文件,而它包含了代码转换前后的位置信息:

1.确保开启除了原有的Support for Sass 再开启Enable source maps

继续阅读:chrome 27+ 的 SCSS调试

Chrome扩展fight look

1 Comment

记得有一天我和锤锤在实验室看喵扑,看到一张倒立拍摄的图片,两个人都不约而同地扭转脖子去看,脖子都扭疼了,还是不能看清楚照片主角长什么样,就设想要是有这么一个可以扭转图片的小工具就太好了。刚好现在在家闲,看了一下chrome的API,做了这么一个扩展工具fight look。

安装fight look(前题是使用的google浏览器,听说FF现在也能用chrome的扩展所以在兼容上也作了FF的考虑)。

fight look

继续阅读:Chrome扩展fight look

阅读设置

书本模式 传统模式

开启 关闭

开启 关闭