【疯狂的菊花系列】全CSS3制作Loading动画
话说上三回，我们用css3的animation让png图片动起来了。
但是美中不足的是，还要画一张图片。如果要求做几个不同大小的菊花，或者要换个颜色，又或者要不同的地方用不同的颜色和大小的菊花，得找到原图(psd之类的)再导出一个不同的size，个人感觉蛋疼死了。
这次咱们用css3来画那几个点，让它能大能小能色，嘿嘿~~(邪恶了)。
先看看效果吧，用鼠标左键狠狠的砸这里。
菊花上有12个点，我们用12个span标签来做，宽高使用百分比，用来自适应外层容器的变化，圆角设置为100%，就可以保证显示成一个圆了。
接下来的事情就比较痛苦，需要一个个摆到正确的......
【疯狂的菊花系列】Canvas绘制Loading动画
上回说到用png图片来做帧动画，总的来说也没什么大问题，但是画个菊花，按固定角度旋转N次做图实在是蛋疼。
既然怎么样都要画个菊花，那不如就用canvas来画算了。对于不支持canvas的浏览器，可以用svg，原理都差不多。
这个canvas动画的原理跟帧动画也类似，先绘制第一帧的画面，然后擦掉，接着绘制第二帧，以此循环。时间间隔短的话看上去就变成动画了。
具体解释请看代码，有足够的注释，或者也可以点这里看看结果。canvas的api说明可以在这里找到。
window.onload = function(){
var canvas = document.getElem......
【疯狂的菊花系列】制作PNG帧动画Loading
话说上回说到使用css3的animation来制止png格式的菊花，但是目前之后新版的firefox和webkit核心浏览器才支持该动画，那其他浏览器也想用png动画怎么办呢?
这就要提到帧动画的概念了，会flash的都知道，adobe flash软件里有个时间轴和帧的概念，具体解释我就不说了，可以自己google。其原理是事先把一个动画的所有动作的话出来，然后在不同的时间点显示不同的动作，切换的快的话看上去就动起来了。
制作菊花，要先准备一张包含所有菊花状态的图，就像下面这张:
用一个固定大小的窗口显示这张图，定时移动图片的位置，就能让它动起来了。简单的代码......
完美实现溢出文本省略
文本溢出展示省略号的需求经常都会用到，而对于新式的浏览器，这完全不是问题，因为css3里面已经有实现text-overflow：ellipsis，但是最新w3c文档中却移除了这个属性，即使这样，也有不少浏览器实现了这个特性。其浏览器支持情况如下：
Browser
Version
IE
6+
Firefox
-
Opera
11.0+
Safari
3.0+
Chrome
1.0+
可以看到，只有firefox和opera11以下的版本不支持这个浏览器，以此也可以放心大胆的用了。但是遇到要求高的产品经理时（╮(╯_╰)╭），就不得不考虑firefo......
判断浏览器是否支持指定CSS属性
现在css3出来了， 添加了许多新特性，但由于并未全部浏览器都实现了这些特性，使用起来不太顺畅。因此，就想在使用的时候进行判断，如果有这个属性并且支持这种值，就css实现， 否者就用js实现。
比较明显的例子就是text-overflow这个属性，text-flow：clip是大部分浏览器都支持的，而text-flow：ellipsis则在firefox和10.6版本以下opera上工作不了，让人相当头疼。
废话少说，判断的代码如下：
var element = document.createElement('div');
if('textOverf......
【疯狂的菊花系列】使用CSS3制作PNG Loading图
Loading图，也就是俗称的菊花，大部分网站都会用到，而一般情况用的都是gif动画，但是gif能保存的颜色太少，导致有渐变的图导出来后有毛边，很不美观。
不过随着html5和css3的出炉，我们终于可以把loading做的更加美观啦。
之前用png制作loading动画并不是没有，但是需要使用js以及制作一张包含所有动作的png图片(就像跑马灯一样)，咱不熟ps，画起来相当吃力。
而在html5/css3的带领下，我们又有了两个新的方法: canvas和css动画。
但是我是相当讨厌用js代替css本身就可以实现的功能，而且本人觉得在cavas上画图太累( 这......
子节点的margin溢出问题
我们知道，css margin是会合并的，有时会导致一些布局问题。
事实上margin还有存在一个溢出的问题： 当其父节点没设置宽高的时候，子节点的margin超出父节点而存在，会导致父节点的left/top产生了偏移，导致position:absolute的节点定位不准确。
我们先看下面这个例子:
more
<!DOCTYPE html>
<html>
<head>
<title>Margin Overflow Test</title>
<meta http-equiv="Content-typ......
富文本兼容性问题归纳(ubuntu)
周五在ubuntu上测了一下重构后的富文本，发现依然存在一个bug： 开启了中文输入法的话， 输入框就监听不到按钮事件了。
这个问题在webqq的聊天框一直存在着，也有很多用户投诉，具体表现为： 切换到中文输入法(ibus or other)，输入一段内容后，第一次按下回车键可以发送消息, 之后的回车键都变成输入框的换行了。
花了一个中午排查了下，总算找到原因了：
在ubuntu上面，切换到中文输入法的时候，只有第一次按下的keydown/keyup事件会被抛出，之后都keydown和keyup事件都会被输入法接收且不会冒泡，因此输入框没办法对按钮作出响应。这个行为跟用......
高度超过4096像素的元素边框消失
一个游戏群里的同事提到一个Bug，在他的页面里，实际内容是超过了6000px的，而且给包含内容的容器加了个border: 1px dotted #fff，这时在chrome中就发现左右边框消失了!!!
如果你的是chrome，点击这里查看demo。这个问题相当诡异，如下:
改成2px，border出来了!
改成solid，又出来了!
高度低于4096，呃，又出来了...不过还是少了一些点，改成4095就很正常了...
暂时还没有找到解决办法，chrome处理超过2的40次方之后的数字溢出了，chromium的项目里已经看到有人提了bug，但是到目前为止(chr......
富文本兼容性问题归纳(win)
上周抽空把去年写的富文本重写了一下，封装成基本UI组件，就可以在聊天框之外的地方复用了。个人觉得富文本是个兼容问题最多的模块之一，尤其是文档也没几个，把mozilla的api文档和IE的dom api关于selection和range的看了一个遍，一个个试，总算找到勉强能用的方法。
其实之前的富文本代码太乱，而且还有不少bug，只是产品经理不给时间改，O__O"…
这个富文本没有用iframe来做输入框，原因有二:
iframe是所有dom节点中消耗性能最大的，开多几个ie6/7就会卡到不行了;
因为webqq是多窗口聊天的，当光标点击到输入框时，ifram......