Seateng Blog » WEB前端开发

chrome高亮输入框颜色调整

Seateng — Thu, 23 Jun 2011 03:18:49 +0000

input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
outline: 2px solid #6FA1D9 !important;
-webkit-box-shadow:0px 0px 5px #6FA1D9 !important;
}

input[type="checkbox"]:focus,input[type="submit"]:focus,input[type="reset"]:focus, input[type="radio"]:focus {
outline: 1px solid #6FA1D9 !important;
}

参考：
http://www.douban.com/group/topic/13291053/
http://fis.io/firefox-input-area-highlighting.html

用YUI Compressor自动化压缩优化

Seateng — Wed, 29 Apr 2009 08:34:15 +0000

负责的一个WEB项目，发布生产版本时为了优化服务器流量和客户端加载速度，每次都要手动压缩一些CSS和JS文件，十分烦人。今天得闲写了几个简单的脚本，整合在一起把整个发布过程自动化了。抄了一段压缩CSS的脚本放上来，JS文件压缩思路相仿，其他过程略。

#!/bin/sh
#检查路径参数是否存在
if [ 0 = $# ]
then
    echo "Usage: $0 Minify CSS Source Dir"
    exit
fi
#判断目录是否存在
if [ ! -d $1 ]
then
    echo "$1 : No such Directory"
    exit
fi

#压缩CSS文件
for I in `find $1 -type f -name "*.css"`
do
    echo $I
    java -jar /opt/yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar --charset utf-8 --type css $I -o $I
done

参考:
YUI Compressor 主页

IE8 3月20日正式发布

Seateng — Fri, 20 Mar 2009 10:37:38 +0000

IE8浏览器于北京时间3月20日零时正式发布。
各大媒体头版头条，争相介绍IE8的新特性。其中一个特性是IE8 增加了对W3C Selector API的支持，Javascript 增加了两个函数 querySelector() 和 querySelectorAll() 。听都都引用了这个例子：

<html>
  <body>
    <div><div><span>InnerSpan</span></div></div>
    <div><span class="myClass">ClassSpan</span></div>
    <script type="text/javascript">
      alert(document.querySelector("div div span").innerHTML);
      alert(document.querySelector("span.myClass").innerHTML);
    </script>
   </body>
</html>

当你真的把这段代码，Ctrl-C Ctrl-V运行的时候你会发现IE8直接提示JS错误。不是IE8已经支持querySelector()和querySelectorAll了吗？
原来IE8少了DOCTYPE定义就不认这两函数了。

Jquery的强大之处正是这种Selector的写法，如果各浏览器都能实现W3C Selector API，作为Javascript的一个基本特性，那么提高性能的同时也方便了Javascript的开发者。反过来Jquery如果整合了内建的Selector，到时候在支持W3C Selector API的浏览器上将如虎添翼，性能提高的同时还能省去一大部分核心代码。

根据Robert Biggs 在blog上发布的性能测试报告，我们可以看到 IE8内建的Selector性能比Jquery快了近100倍。

几个框架的测试结果如下：
全部Selector跑完
IE8: 924ms
Ext 2.0: 41823ms
Jquery 1.2.3: 97696ms
Prototype 1.6.0.2: 230289ms

注：IE8+ Firefox3.1+ Safari 3.1+都支持W3C Selector API。

另外IE8在向后兼容上也费尽心机。多了个兼容模式的按钮不说。
还可以通过在页面head上加个：

1	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

让IE8自动用IE7兼容模式解析。如果你的应用不想针对IE8调整，那么在你的页面上加上这段试试。

对于UE（User Experience）来说，新版本浏览器的发布最需要关心的莫过于兼容的问题，大部分的前端开发主要考虑IE6 IE7 Firefox 兼容，从IE8正式发布的那刻起IE8便加入了主要兼容行列。前端开发要兼容的浏览器越多，成本越大这是毋庸置疑的事实。浏览器之战爽了大家苦了UE Developer。。。

IE8兼容模式和兼容IE7的可以看IEBlog的上的这两篇文章:
Compatibility and IE8
Introducing IE=EmulateIE7