Firebug一共有Console,HTML,CSS,Script,DOM,NET六个Tab，今天着重说一下Console的用法。

其实我们对于Console应该非常熟悉，因为这里是Firebug给出各种信息的窗口，而这也正是Console的主要用途，日志记录(Logging)。
除此之外，Console还提供了通过命令行方式来调试Javascript的方法。下面就来学习一下Console的用法。

1、Firefox的日志记录(Logging in Firefox)。

通过Console的记录方法，我们可以不再使用烦人的alert或者document.write方法来进行调试。
Firebug提供了五种日志的类型：

console.log: 记录一行信息，无任何图标提示； console.debug:记录一行信息，带超链接，可以链接到语句调用的地方； console.error():向控制台中写入错误信息，带错误图标显示和高亮代码链接； console.info():向控制台中写入提示信息，带信息图标显示和高亮代码链接； console.warn():向控制台中写入警告信息，带警告图标显示和高亮代码链接；

consle打印字符串支持字符串替换，使用起来就像c里面的printf(“%s”,a),支持的类型包括：

%s string，字符串 %d,%i 整型 %f 浮点 %o 对象

如果使用%o的话，对象就会用绿色的超链接表示出来，单击后会将你带到DOM视图。

2、分组(Grouping)。

如果某一类的信息特别多时，分组就有利于逻辑的划分。
使用上很简单，参见代码。

function consoleGroup(){
var groupname = “Group 1″;
console.group(“Message group %s”, groupname);
console.log(“This is the 1 message in %s”, groupname);
console.log(“This is the 2 message in %s”, groupname);
console.log(“This is the 3 message in %s”, groupname);
console.groupEnd();

goupname = “Group 2″;
console.group(“Message group %s”, goupname);
console.log(“This is the 1 message in %s”, goupname);

var subgroupname = “Sub group 1″;
console.group(“Message group %s”,subgroupname);
console.log(“This is the 1 message in %s”, subgroupname);
console.log(“This is the 2 message in %s”, subgroupname);
console.log(“This is the 3 message in %s”, subgroupname);
console.groupEnd();

console.log(“This is the 2 message in %s”, goupname);
console.groupEnd();
}

3、console.dir和console.dirxml

console.dir可以将一个对象的所有方法和属性打印出来，这个方法无疑是非常有用的，我们不再需要object.toString这样的方 法支持了，只要有firebug，查看对象也变得很轻松同时，我们也可以将页面中的元素作为一个对象打印出来，但是你要小心，因为这将输出众多的信息，可 能你会迷失在繁杂的信息中而找不到自己需要的条目。我们可以通过分组将这些大量的信息放入一个分组中，这样可以在逻辑上更清楚一些。

function consoleDir(){
function Car(){
this.Model = “Old Model”;
this.getManu = function(){
return “Toyota”;
}
}

var objCar = new Car();
console.dir(objCar);
console.dir(zoo);

var groupname = “Css Style”;
console.group(“The button Style”, groupname);
console.dir(document.getElementById(‘consoledir’).style, groupname);
console.groupEnd();
}

console.dirxml 打印出HTML元素的XML表示形式.

4、断言(console.assert())。

console.assert()可以用来判断一个表达式是否正确，如果错误，他就会打印错误信息在控制台窗口中。

5、追踪(console.trace())。

console.trace()是一个非常有趣的功能。我们先来看看官方的解释：打印Javascript执行时刻的堆栈追踪。

这个函数可以打印出程序执行时从起点到终点的路径信息。

比如如果我们想知道某个函数是何时和如何被执行的，我们将console.trace()放在这个函数中，我们就能够的看到这个函数被执行的路径。

这个函数在调试其他人的源代码时非常有用。

6、计时(Timing)。

console.time(timeName)可以用来计时，这个在我们需要知道代码执行效率的时候特别有用，就不用自己造轮子了。

function consoleTime(){
var timeName = “timer1″;
console.time(timeName);
var a = 0;
for(var i = 0; i < 100; i++){
for(var j = 0; j < 100; j++){
// console.log(‘Hello world’);
a = a + 1;
}
}

console.log(“a = %d”, a);
console.timeEnd(timeName);
}

7、Javascript分析器(Javascript Profiler)。

我们可以通过代码console.profile(‘profileName’)或者单击Profiler标签来进行Javascript代码执行 的分析。这个功能有点类似于console.time()，可以帮助我们评估代码的表现，但是能够提供比console.time()更详细的信息。

有三种方法可以调用Javascript profiler。一种是在代码中写入分析脚本，一种是单击profile标签，最后还可以在命令行下输入命令来执行。

执行后，可以看到详细的输出结果，下面对各项进行一些说明：

Function Column：显示调用的函数名称； Call Column：显示调用次数； Percent Column：显示消耗的时间比； Own Time：显示函数内部语句执行的时间，不包括调用其他函数的时间； Time Column：显示函数从开始到结束的执行时间； Avg Column：平均时间。Avg = Own / Call; Min & Max Column：显示最小和最大时间； File Column：函数所在的文件；

8、其他的一些选项。

在Console Tab的最右侧有一个Options的选项，在这里可以自己定义需要显示的错误，其内容很好理解，这里就不多说了。有一点就是Firebug1.3以后， 多了Show Chrome Errors、Show Chrome Message等几个选项，这几个选项还没有验证过其具体的作用，哪位知道的可以共享一下。

[参考资料]

Firebug Tutorial
http://michaelsync.net/2007/09/09/firebug-tutorial-logging-profiling-and-commandline-part-i Firebug Tutorial

http://michaelsync.net/2007/09/10/firebug-tutorial-logging-profiling-and-commandline-part-ii

转载请注明:破洛洛

© 我想网 Akon 所有 , 2011. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

1. *

* {
 margin: 0;
 padding: 0;
}

在提到更先进的选择器之前，为初学者之便，先把常见的选择器解决掉。
星号符会选择页面每个元素。很多开发者用它把所有margin和padding归零。这当然是快捷测试方法。不过我建议你不使用它，它给浏览器带来太多的 负担，这不必要。
通配选择器也可以用到子选择器上。

#container * {
 border: 1px solid black;
}

它会选择#container层中的子元素。不过，也不需要经常用这个技巧。

View Demo

兼容性

• IE6+
• Firefox
• Chrome
• Safari
• Opera

2. #X

#container {
   width: 960px;
   margin: auto;
}

把哈希符号前缀于选择器就成了ID选择器。这是很普通的方法。不过使用之也需要谨慎。先问自己：为了定位元素就绝对需要赋予id？僵硬刻板的id选 择器不能重复使用。如果可能，先试使用标签方法，如html5元素，或者伪类。（不过id选择器的渲染速度是最快的，有得有失，译者注）。

View Demo

兼容性

• IE6+
• Firefox
• Chrome
• Safari
• Opera

3. .X

.error {
  color: red;
}

这是类选择器。ID选择器与类选择器的差别是，后者可以用于多个元素。使用类选择器可以把同样的样式赋予一群元素，相反，id选择器只能作用于特定 的单一元素。

View Demo

兼容性

• IE6+
• Firefox
• Chrome
• Safari
• Opera

4. X Y

li a {
  text-decoration: none;
}

后代选择器是使用很多的选择器。它作用处于X元素内的所有的y元素。不过如果你的选择器像X Y Z A B.error，那你的方法就错了。这开销太大了。（后代选择器的渲染速率不快，特别是在有很长的前缀元素时，译者注）

View Demo

兼容性

• IE6+
• Firefox
• Chrome
• Safari
• Opera

5. X

a { color: red; }
ul { margin-left: 0; }

类型选择器会选择页面中同一类型的标签。比如说ul{…}会选择页面中所有的ul。

View Demo

兼容性

• IE6+
• Firefox
• Chrome
• Safari
• Opera

6. X:visited and X:link

a:link { color: red; }
a:visted { color: purple; }

:link作用于没有访问过的链接，:visited作用于访问过的链接。

View Demo

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

7. X + Y

ul + p {
   color: red;
}

相信选择器只作用于同一父级元素下的第一个元素。例子中的只有紧邻ul中的第一个p的字体会是红色的。

View Demo

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

8. X > Y

div#container > ul {
  border: 1px solid black;
}

X Y和X>Y不同的地方后者只选择X的第一级子元素。例如下面

   <div id="container">
      <ul>
         <li> List Item
           <ul>
              <li> Child </li>
           </ul>
         </li>
         <li> List Item </li>
         <li> List Item </li>
         <li> List Item </li>
      </ul>
   </div>

选择器#container>ul只选择直接位于#container层下的ul,不会作用于li中的ul。

View Demo

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

9. X ~ Y

ul ~ p {
   color: red;
}

这个相邻选择器与X+Y相似，不同的是，ul+p只选择与ul相邻的第一个p,而x~Y选择所有与ul相邻的P。

View Demo

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

10. X[title]

a[title] {
   color: green;
}

一种属性选择器。上例中，只选择带有title属性的链接标签。

View Demo

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

11. X[href="foo"]

a[href="http://net.tutsplus.com"] {
  color: #1f6053; /* nettuts green */
}

T上例中样式只会作用于链接到http://net.tutsplus.com的a标签。其他没有链到这个网址的a标签不会变成绿色。

这个很有用，不过有点死板，也许我想把所有的nettuts.com链接都变成绿色。在这种情况下，可以使用一些表达式。

View Demo

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

12. X[href*="nettuts"]

a[href*="tuts"] {
  color: #1f6053; /* nettuts green */
}

对了，就是这个。href后面加上星号(通配符)使网址出现nettuts的所有链接都变成绿色。比如说 nettuts.com,tutsplus.com。

View Demo

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

13. X[href^="http"]

a[href^="http"] {
   background: url(path/to/external/icon.png) no-repeat;
   padding-left: 10px;
}

有些网站用这个方法在某些链接上加一些图标说明这些链接到其他网站。它经常用于表达式中显示字符串的开始。如果我们想选择那样带有http的a标签 链接，我们可以使用类似上面的CSS。(这不是搜索http://,这不必要，对https://没起作用)。

View Demo

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

14. X[href$=".jpg"]

a[href$=".jpg"] {
   color: red;
}

又一次，我们使用了一个表达式的符号，$,查找字符串的尾部。这个例子中，我们查找所有链接到图片的链接，或许说以.jpg结尾的链接。这当然不对 gif和png格式的起作用。

View Demo

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

15. X[data-*="foo"]

a[data-filetype="image"] {
   color: red;
}

回到第8个（？感觉第8个和这个有点风马牛不相及）；我们怎么补偿不同图片格式：png,jpeg,jpg,gif? 我们可以使用多重选择器，比如：

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
   color: red;
}

回到第8个（？感觉第8个和这个有点风马牛不相及）；我们怎么补偿不同图片格式：png,jpeg,jpg,gif? 我们可以使用多重选择器，比如：

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

在适当的地方加上钩后，我们就可以使用一个标准的属性选择器选择这些标签。

a[data-filetype="image"] {
   color: red;
}

View Demo

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

16. X[foo~="bar"]

 a[data-info~="external"] {
   color: red;
}

a[data-info~="image"] {
   border: 1px solid black;
}

这是一个让人印象深刻的选择器。了解这个技巧的人不多。~符号允许我们选择带有有空白间隔属性的标签。

就像第15个选择器一样，这里，我们可以使用能用间隔符列出需要瓢东东的data-info属性。举例来说，我们给外链些记号吧。

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

在适当地方使用标记，然后就可以选择任何带有这些属性的标签。

/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
   color: red;
}

/* And which contain the value "image" */
a[data-info~="image"] {
  border: 1px solid black;
}

View Demo

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

17. X:checked

input[type=radio]:checked {
   border: 1px solid black;
}

这个伪类选择器只会作用于被选中的用户界面元素(user interface element)，比如说单选按钮，或者复选框。

View Demo

兼容性

• IE9+
• Firefox
• Chrome
• Safari
• Opera

18. X:after

这个伪类和:before一样，主要是用来清除浮动的。不过现在人们都能在它们身上找到新的用法。

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }

.clearfix {
   *display: inline-block;
   _height: 1%;
}

兼容性

• IE8+
• Firefox
• Chrome
• Safari
• Opera

19. X:hover

div:hover {
  background: #e3e3e3;
}

这是一个动态伪类。当元素有鼠标移在其上面时样式就会起作用。一般用于链接。比如a:hover{border-bottom:1px solid black;}(border-bottom:1px solid black;效果比text-decoration:underline;好)。

a:hover {
 border-bottom: 1px solid black;
}

兼容性

• IE6+ (In IE6, :hover must be applied to an anchor element)
• Firefox
• Chrome
• Safari
• Opera

20. X:not(selector)

div:not(#container) {
   color: blue;
}

这个否定伪类非常有用。比如要选择除#container层外的所有层。上面的代码就非常有效。
又比如我要选择除了段落标签外的所有元素(不建议这样做)，可以这样做：

*:not(p) {
  color: green;
}

View Demo

兼容性

• IE9+
• Firefox
• Chrome
• Safari
• Opera

21. X::pseudoElement

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

使用这类伪类(用::指定)可以设计一个元素的一片断，比如说第一行，或者第一个字。需要记住的事，这伪类只能作用于块元素。

选择段落的第一个字符

p::first-letter {
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}

这代码片断先提取页面中的所有段落，然后再查找段落中的第一个字。
这方法经常用于制作报纸风格的页面。

选择段落的第一行

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

View Demo

兼容性

• IE6+
• Firefox
• Chrome
• Safari
• Opera

22. X:nth-child(n)

li:nth-child(3) {
   color: red;
}

过去我们无法从一堆元素中选择具体的几个。nth-child伪类可以解决这种问题。
nth-child接受整数参数，不过它不是基于零开始，如果你要选择列表中的第二个，就使用li:nth-child(2)。
我们还可以使用这个伪类选择几个子类。比如，用li:nth-child(4n)来选择4倍数的列表。

View Demo

兼容性

• IE9+
• Firefox 3.5+
• Chrome
• Safari

23. X:nth-last-child(n)

li:nth-last-child(2) {
   color: red;
}

如果列表项非常多，但只是需要选择倒数第三个。使用li:nth-child(397)不如使用nth-last-child方便。
和上面的用法不一样，nth-last-child是从后面倒着数。

View Demo

兼容性

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

24. X:nth-of-type(n)

ul:nth-of-type(3) {
   border: 1px solid black;
}

选择子类也许不如根据类型选择元素更方便。比如说现在有5个无序列表，但只需选择第三个，这时可以使用ul:nth-of-type(3)。

View Demo

兼容性

• IE9+
• Firefox 3.5+
• Chrome
• Safari

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) {
   border: 1px solid black;
}

对了，我们也可以使用nth-last-of-type选择倒数第几个元素。

兼容性

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

26. X:first-child

ul li:first-child {
   border-top: none;
}

这个结构性伪类选择父级元素的第一个子对象。这个经常用于移除列表的第一个和最后一个元素的边框。

View Demo

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

27. X:last-child

ul > li:last-child {
   color: green;
}

这个伪类选择父级元素的最后一个对象。

例子

用一个简单的例子来说明这样选择器，首先，我们制作一个列表。

标签

  <ul>
     <li> List Item </li>
     <li> List Item </li>
     <li> List Item </li>
  </ul>

很简单的列表

CSS

ul {
 width: 200px;
 background: #292929;
 color: white;
 list-style: none;
 padding-left: 0;
}

li {
 padding: 10px;
 border-bottom: 1px solid black;
 border-top: 1px solid #3c3c3c;
}

设置好背景，去掉ul默认的内边距，再给每个li加上边。

就像图片中显示的一样，我们需要去掉第一个和最后一个的边。这时就可以使用:first-child和:last-child。

li:first-child {
    border-top: none;
}

li:last-child {
   border-bottom: none;
}

View Demo

兼容性

• IE9+
• Firefox
• Chrome
• Safari
• Opera

Yep – IE8 supported :first-child, but not :last-child. Go figure.

28. X:only-child

div p:only-child {
   color: red;
}

确实，这个你可能很少用。不过这个真的很有用。
在下面的例子，只有第一层中的p标签会变色。父级元素下的子类多于一个时这个伪类效果就停止了。

<div><p> My paragraph here. </p></div>
<div>
   <p> Two paragraphs total. </p>
   <p> Two paragraphs total. </p>
</div>

View Demo

兼容性

• IE9+
• Firefox
• Chrome
• Safari
• Opera

29. X:only-of-type

li:only-of-type {
   font-weight: bold;
}

和28个结构性伪类相似，这个伪类只会在父级元素下只有一个子级元素X的情况下起作用。这种情况，你也可以使用ul li，不过这样就会选择所有列表项了。

ul > li:only-of-type {
   font-weight: bold;
}

View Demo

兼容性

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

30. X:first-of-type

first-of-type允许我们选择同级元素的第一个。

一个测试

为便于理解，做个测试。复制下面的标签

<div>
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1 </li>
      <li> List Item 2 </li>
   </ul>

   <ul>
      <li> List Item 3 </li>
      <li> List Item 4 </li>
   </ul>
</div>

现在，尝试去选择list Item 2,当你找到方法或者放弃时，请接着看一下。

办法1

有几种的不同的方法。我们评审其中几个。首先用first-of-type

ul:first-of-type > li:nth-child(2) {
   font-weight: bold;
}

这个代码的意思是，在页面中找到第一个无序列表，然后再找到其直接的子级元素(也就是li)，最后找到第二个li。

方法2

p + ul li:last-child {
   font-weight: bold;
}

在这个例子，先查找与p标签直接相邻的ul标签，然后再找倒数第一个li(也就是第二个li)。

方法3

ul:first-of-type li:nth-last-child(1) {
   font-weight: bold;
}

View Demo

兼容性

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

Windows 7虽然默认采用IE8，不过这款浏览器发布后很久Windows 7才正式上市。实际上，IE9也会早于Windows 8发布。在Windows 7中，用户虽然不能卸载IE8，但是可以关闭该功能，也等同于卸载，不知道Windows 8是不是完全和IE9不相干。

IE 1.0首次提供给Windows 95用户，并由此开始了IE与Windows的捆绑，随后的2.0、3.0……直到IE8，都是如此。

最初的时候，IE也面向Mac平台发布，在IE5之后，微软才决定停止该项目的开发。除了Mac版IE，微软曾经还尝试了UNIX版本，同样也在 IE5之后不再继续提供。


Windows平台上的IE版本

Mac平台上的IE版本

Sun Solaris UNIX平台上的IE版本

HP-UX UNIX平台上的IE版本

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

Apple released Safari 5 in June, introducing official support forbrowser extensions . This move now means that developers have the ability to build add-ons to enhance the overall browsing experience on Safari.

苹果 公司在六月份推出了Safari 5，并官方引入浏览器插件支持。意味着开发者可以通过构建插件加载项来增强Safari的整体浏览体验。

Apple launched its own official Safari Extensions gallery Safari user can appreciate.

苹果在七月底发布了他们官方的Safari插件库（Safari Extensions gallery），展示一些优秀开发 者提交的插件。虽然这个插件库刚刚起步，但是已经有了不少令Safari用户交口称赞的好插件。

As die-hard extension addicts since the first Safari 5 release, we’ve scoured the web to find 15 of our favorites. Click through the gallery for our picks.

作为自Safari 5发布以来狂热的插件痴迷者，我们从网络上收集到最喜爱的15款插件。通过点击浏览相册来看看我们的选择。

The official gallery isn’t the only place to find new and impressive extensions. Both

SafariExtensionson Tumblr and Pimp My Safari feature daily updates and highlight great creations from across the web.

What are some of your favorite Safari web extensions? Let us know!

官方插件库并不是唯一的寻找新奇插件的地方。比如，Tumblr上的 SafariExtensions博 客以及Pimp My Safari，会每天更新及突出介绍网络上又新又好的插件。

告诉我们！你最喜欢的Safari插件是哪些呢？

1. TabLinks

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

@media screen and (-webkit-min-device-pixel-ratio:0) {
     /* Webkit内核兼容CSS*/
}

DEMO:http://www.iwanna.cn/examples/css/hack/webkit_hack.html

@media screen and (-webkit-min-device-pixel-ratio:0) {
     .webkit_color{color:#f00}
	 .webkit_border{border:1px solid #f00;}
	 .webkit_background{background:#f00;}
}

IE、FF都将不会识别定义的颜色、描边、背景。
测试结果如图：

扩展阅读：《CSS HACK：IE6、IE7、Firefox之间的区别及兼容写法》

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

background:orange;*background:blue;

区别IE6与IE7：

background:green !important;background:blue;

区别IE7与FF：

background:orange; *background:green;

区别FF，IE7，IE6：

background:orange;*background:green;_background:blue;
background:orange;*background:green !important;*background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
浏览器优先级别:FF

兼容写法一：
IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
根据上述表达，同一类/ID下的CSS 　hack可写为：

.searchInput {
background-color:#333;/*三者皆可*/
*background-color:#666　!important; /*仅IE7*/
*background-color:#999; /*仅IE6及IE6以下*/
}

一般三者的书写顺序为：FF、IE7、IE6.

兼容写法二：
IE6可识别“_”，而IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可这样书写：

.searchInput {
background-color:#333;/*通用*/
_background-color:#666;/*仅IE6可识别*/
}

兼容写法三：
*+html 与 *html 是IE特有的标签, Firefox 暂不支持。

.searchInput {background-color:#333;}
*html .searchInput {background-color:#666;}/*仅IE6*/
*+html .searchInput {background-color:#555;}/*仅IE7*/

屏蔽IE浏览器：
select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

*:lang(zh) select {font:12px  !important;} /*FF的专用*/
select:empty {font:12px  !important;} /*safari可见*/

IE6可识别：
这里主要是通过CSS注释分开一个属性与值，注释在冒号前。

select { display /*IE6不识别*/:none;}

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

前几天我们报道了五七折的淘宝购物 Chrome 扩展，很多用户在留言中说五七折是抄袭五六折的网站，至于事情真相我完全没有 概念，不过今天五六折也出 Chrome 扩展了，大家可以自由选择了。

PS：有知情人士透露说，五七折的网站是抄袭五六折的，而五六折这个 Chrome 扩展又是抄袭五七折的，真是混乱啊。。。无责任转评，本人不对其真实性负责。

本插件为五六折官方正式版。

【打折原理】

淘宝网商家为了加大商品的销售渠道，建立了一种付费推广机制，在收入中专门预留了一部分给推广者。

五六折网实际上就是让各位买家自己推广自己购买，这样某些商家就会给推广者（也就是您自己）一些推广回报。

这就是隐藏折扣的来源。

【打折步骤】

Step1： 点击商品或店铺页面下方的“生成折扣链接”，输入返现用户名后，再以原价购买商品。
Step2： 收到商品后，确认收货，支付宝放款给商家。
Step3： 第二天早上9点之后，您可以用您的淘宝ID直接登录www.alimama.com查看打折返现。

【咨询与支持】

帮助文档：http://56zhe.com/help.html
新浪微博：http://t.sina.com.cn/zhaonvyou

【媒体报道】

腾讯科技 http://tech.qq.com/a/20100914/000178.htm
网易科技 http://tech.163.com/10/1008/10/6IFE52BK000938EN.html
ShowWeb2.0 http://www.showeb20.com/?p=2969
电脑报 http://t.sina.com.cn/1804573342/Bh0sQ6ddZY

点击这里进入扩展中心下载五六折淘宝折扣查询。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

根据Mozilla的测试，JägerMonkey引擎成绩为350.8ms，Chrome为356.5ms，而Webkit成绩为 369.7ms（得分越低说明浏览器越快）。

不过在V8基准测试中（V8基准测试套件来自Google），Firefox 4并没有超过Chrome，但是也取得了一定进展。在该测试中，JägerMonkey引擎成绩为2145.8ms，落后于 Chrome（1386.2ms），不过走到了Webkit之前（Safari成绩为2490.6ms）。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

这里 XDash 整理总结了 5 个 Xmarks 的替代方案，供大家转移和备份此前托管在 Xmarks 下的资料数据（尽管目前几乎没有哪家的服务像 Xmarks 如此优秀）。

在开始使用其它替代服务之前，首先让我们做好准备工作 ——?导出 Xmarks 书签。

如图所示，用您的用户名密码登录进 Xmarks 网站，选择“工具（Tools）->将书签导出为网页（export bookmarks to HTML）”，将已经保存在 Xmarks 上的书签全部打包导出并保存在本地的一个 .html 文件中。

OK！接下来选择一款适合你的解决方案来折腾：

一、Google Bookmarks （适合 Chrome、Firefox ，提供 Web 版，支持多操作系统平台）

将书签托管在 Google 的云端，是比较稳定可靠的方案（当然这句话放在国内得打个对折）。在线登录 Google Bookmarks 页面后，从左边的侧边栏找到 “Import bookmarks”，将之前导出的 .html 文件导入即可。

如果您使用的是 Chrome 浏览器，那么恭喜您，Chrome 6 以上版本本身已经自带了完美强大的同步功能（请从右上角工具图标->选项->同步->自定义中开启书签同步），可自动将您保存的书签同步保存至个人 Google 账号的 bookmarks 下。

如果您习惯了 Firefox，同样可以通过安装 GMarks （xpi直接下载地址）这个插件来自动同步 Google Bookmarks。

对于其他浏览器用户，或许直接访问 Google Bookmarks 的网页版是最省时省力的吧。

二、Firefox Sync （适合 Firefox 用户，支持多操作系统平台）

再为 Firefox 用户介绍一个强大的插件 —— Firefox Sync。它不仅能同步书签，还能同步密码、设置、访问历史、当前打开书签等，非常强悍，颇有迎头赶上 Xmarks 的架势。

Firefox 4 Beta 本身已经内置了此工具，用户可直接享受。老版本用户则需下载安装此插件。使用前需通过 Email 注册一个账号。

并且它还有适合移动设备访问的APP，例如 iPhone 客户端、N900 Maemo 客户端、其他兼容手机客户端。

三、Sync2It（适合 Safari / IE 用户，支持 Mac / Windows 操作系统平台，需骑墙）

Sync2It 是又一款跨平台支持的小工具。如果您的系统是 Mac，那么它会自动同步 Safari 的书签；如果系统是 Windows，则会自动同步 IE 书签。它还允许您订阅官网上他人共享的书签列表。

可惜，获取和使用此工具，需采用一定骑墙手段。

四、Delicious 和 Diigo（适合 Firefox 和 Chrome，支持多操作系统平台）

与 Google Bookmarks 类似的书签云端存储服务有不少，Delicious 和 Diigo 算是比较知名的两家。二者均有丰富的官方和第三方插件，用于强化浏览器的工具栏、书签栏、扩展等。

其中，Diigo 也提供了导入功能，可导入从 Xmarks 中导出的 .html 文件。然而，Diigo 也处于抽风状态（为神马好用的服务在国内都这个命运）。

对于 Delicious 的忠实用户，推荐 Firefox 和 Chrome 的两个专用插件。

五、使用第三方同步工具（Dropbox、DBank 等）

当然，也不能忘记这个屡试不爽万年通用技巧——第三方同步工具。借助它们，将应用程序的配置文件自动同步于多台电脑，就可实现一处改动，多处自动调整的效果。当然也适用于浏览器的数据资料同步，比如收藏夹、书签等。（可参考此前《如何高效在多个浏览器之间同步使用的5个工具技巧》一文）

这里首推的自然是 Dropbox，性能卓越，支持共享。可惜需要骑墙。国内较为稳定且实用的同步工具有 DBank，同样支持共享，并可将外链批量打包成列表。对于多人团队或是针对不同使用环境有不同书签管理方案的高级用户而言，不失为一种选择。

在多台希望实现同步的电脑上，将您想同步的配置文件丢进 Dropbox / DBank 文件夹中（或者用 mklink 工具进行映射），重复此操作即可。

除上述五种方法外，您还有其他优秀的解决方案推荐吗？欢迎留下您的反馈。（via）

本文由同步控 XDash（新浪微薄：http://t.sina.com.cn/xdash）投递。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

令，IE8下已经支持用getAttribute(“class”)来获取了 。

(二) src=”"在IE下会发出自动请求当前页面所在路径的请求。

(三) 如果页面是GBK，js是utf8引入js的时候 type=”text/javascript” charset=”utf-8″如果javascript后面多了个空格导致IE下页面脚本错误，FF没有这个错误。

(四) 在IE下setAttrbute不支持设置style、事件、对象，可以使用类似.style.display这样的写法来兼容。

(五) js文件是utf-8，css文件是ansi，编码不一致的情况下会有兼容问题。如，会导致在ie6下，设置className失效。

(六) 不同浏览器对属性的大小写敏感问题存在不一致的情况，如IE不敏感。尽量统一成一种写法。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

Last Pass Password Manager （支 持 Firefox，IE，Safari，Chrome）

Last Pass 可以为您加密并保存常用网络服务的密码。你无须再为记忆和管理众多的密码而发愁，只要记住 Last Pass 的密码，剩下的就交给它。Last Pass 还能自动为你的不同电脑生成和同步一组安全性极高的密码，放置他人轻易窥探你多台电脑之间的重要隐私数据。基础版是免费的，高级版每月1美元并提供电话支 持。

Read It Later （支持 Firefox，IE，Chrome，Safari，iPhone）

自从发现后，我便一直在使用的书签管理工具。当遇到感兴趣的文章，又因为手头工作或是周围环境而不能马上阅读，那么点一下 Read It Later，该文章便被自动列入了待阅读（Unread）列表。简单轻量，减少信息焦虑，让你更专注于当前的操作。支持跨平台，甚至可以离线阅读。

Xmarks （支持 Firefox，IE，Chrome，Safari）

公认最强悍的跨浏览器同步工具，可同步书签、收藏、用户资料等信息。曾经的不二之选，可惜前不久 Xmarks 官方刚刚发布了即将停止服务的公告（因资金周转问题，面临倒闭局面）。已经有热心网友为了留住这个服务而组织了网络投票，如果您对它感兴趣，不 妨也来投上一枚支持票（截止本月15日）。

Evernote Web Clipper （支持 Firefox，IE，Chrome，Safari）

Evernote 插件，允许你将浏览时发现的精彩内容（文字、图片、视频等）同步存储到 Evernote， 并自动建立索引、添加标签、使之可被日后搜索。Firefox + Evernote 用户必备。

Adblock Plus （支持 Firefox）

过滤掉恼人的广告， 只“订阅”那些被过滤后的纯净页面。可大幅提高互联网浏览体验。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

但当谷歌几乎将对移动世界的未来全都押在Android之后，它便放缓了“终结在线程序商店”的脚步——在过去的一年里，它 把Android操 作系统的版本从1.5升级到1.6再到2.1和2.2，AndroidMarket的应用程序也增长了将近10倍。而去年7月公布的Chrome OS计划的各种信息和产品细节却全被塞进了黑箱子里。好吧，谷歌最近升级的Chrome 6.0浏览器版本中增添了“地理位置”的功能——这让它终于有一点应用程序的影子了，但有谁会抱着一台笔记本电脑到处查询行车路线和地图？它又能带来多大的价值？

而且，人们发现手机存储卡和内存越来越不够用了：你想登录Twitter，首先需要在应用商店中下载一个Twitter的客户端；如果你同时订阅了《纽约时报》、《GQ》和《环球企业家》三本电子杂志，你就得同时下载三个不同格式的程序……这样的几十甚至上百款应用彼此隔绝、不能跳转和互通、也不能聚合，它们挤在空间狭窄的存储卡和内存里，而你甚至不能通过搜索功能找到它们！

这一切让人们回到了几年前——在GoogleApps应用、Chrome和Firefox等浏览器尚未出现的时候，很多人都曾在一台电脑上同时管理着上百款桌面软件。

可是，终结手机应用程序“史前时代”的使命应该交给谁？正在鼓吹“应用程序是移动互联网未来”的乔布斯不可能；一边宣称“一切应用程序商店都将消亡”而一边对此持续投入的谷歌似乎也难堪此任。可当多年来执着于独立浏览器开发的Opera公司宣称“要让更多的用户通过浏览器使用应用程序”的时候，世界上突然多了另一种选择。

“通过浏览器和网页进行各种操作，包括使用一切应用程序是对每个用户都很有意义的事。”在挪威奥斯陆总部一间狭小的会议室内，Opera首席执行官 Lars Boilesen对《环球企业家》说。

Opera成立于历史上最著名的浏览器厂商——网景(Netscape)全面倾覆的1995年，它也曾遭遇微软Internet Explorer(简称IE)在PC桌面市场近乎掠夺般的侵吞，一度失尽城池。而在智能手机和移动互联网应用普及的“下一轮浪潮”中，Opera终于扳回一局——从2009年开始，Opera的移动版浏览器Opera Mobile和Opera Mini市场份额超过苹果iPhone内置的Safari，日均活跃用户数超过7000万，位居移动浏览器市场第一。目前Opera移动版的全球市场份额大约在25%左右。

在所有提供互联网“入口”的玩家中，Opera甚至成了拥抱新技术标准最激进的代表。当苹果与Adobe围绕Flash的“标准之争”敦促前者终于祭出HTML 5——一种将各种复杂的应用程序开发与实现完全搬到网页界面上的技术标准——的时候，Opera已开发出了支持HTML 5标准并进一步支持WebM视频格式的浏览器Opera10.60，以及移动版的Opera Mobile 10.1。

新标准

Opera为什么会成为HTML 5等一系列新技术标准的激进拥趸？答案是它将改变浏览器的功能甚至外延。

在移动互联网应用趋于普及的今天，“地理位置服务”(LBS，local based service)无疑是最热门的应用：它通过GPS导航获知你的位置并在地图上标注，你可以在地图上“登记”(check in)自己的位置；如果标注的位置越多，或经常出入某个地图上的“场所”(venue)，就能获得更多“奖章”(badge)并认识更多经常出没在同一场所的朋友。目前全球最成功的地理位置服务提供商是Foursquare，在中国它也拥有大量跟进与效仿者(请于Gemag.com.cn查看《完美路线》)。

它们无一例外地入驻了苹果App Store和谷歌Android Market——这也成了它们烦恼的根源。Foursquare在中国的复制者之一“街旁”(jiepang.com)的一位工程师用一张被束缚了手脚的鸟的照片形容这些独立开发商的现状。“我们被乔布斯束住了手脚。”他说。

对“街旁”来说，每当新的功能和应用被添加到现有的产品框架中，他们就必须向苹果App Store提交申请，然后等待短则一周长则一个月的审核。这样用户便无法在第一时间获得产品的更新体验；而对大多数用户而言，他们将不断地收到最新版本的提示，然后频繁地下载更新程序，这已经相当不方便了。

即便如此，他们仍尝试开发了基于HTML 5标准的应用程序——比起大多数手机中下载的应用程序，它占用的内存极小。HTML 5是一种将应用程序基于网页运行的标准化技术，这意味着“街旁”的客户端并非需要在手机本地运行的软件程序，而是一款以独立浏览器方式呈现的高级WAP网页。用户的任何登录和使用行为都在WAP网页上完成，而不是自己的手机上。尽管“街旁”是国内第一款基于HTML 5的地理位置服务工具，但它仍然摆脱不了客户端的外观，也仍然需要进驻应用商店等待苹果(甚至谷歌)的审核。

“这样的程序可能被苹果通过，也可能通不过，我们有的时候还必须得依靠乔布斯。”街旁创始人刘颖对《环球企业家》说。他们希望未来能有更多的用 户通过手机直接访问街旁的Web网页获得地理位置服务—前提是手机浏览器支持HTML 5标准并具备地理位置识别信息。

目前这样的移动浏览器仍十分稀缺。“不过针对Symbian 60系统的Opera Mobile10.1浏览器已经支持了地理位置服务。”刘颖说。

它意味着最热门的地理位置服务基于移动浏览器的应用已成为可能。“现在谈其他的移动浏览器程序应用还早了点，但地理位置功能(Geo-location)是我们的一个突破。”Opera负责移动产品的副总裁Dag Olav Norem对《环球企业家》说。你可以在Opera’s live maps上留下自己的足迹，而各种应用程序开发者也可以基于此开发各种网页上的应用服务。

而在基于移动浏览器的网页下，通过HTML 5技术实现地理位置服务有多难？“只需要一行代码就可以！”街旁的工程师表示。

“相信我，通过HTML 5+CSS+Javascript在网页上写出的程序，完全可以与原生程序媲美。”Opera首席技术官Hakon Wium Lie对《环球企业家》说，“程序人员不需要再基于操作系统底层代码编写程序，而只要基于网络应用编写程序即可，而且它让你的编程变得简单和直观了，我们为什么不支持它？”

与苹果擎起HTML 5的大旗向Flash专利的拥有者Adobe宣战不同——苹果尽管支持更多基于HTML 5的应用出现，但它却未必真心看到一款基于HTML 5标准、融合了地理位置服务甚至更多应用程序的移动浏览器的出现——它甚至可能在未来瓦解苹果精心构筑的“移动应用商店”堡垒。

而Opera正希望这个未来早一点付诸现实：“我们希望更多的程序通过浏览器在网页上得到访问。”Opera首席执行官Lars Boilesen说。这意味着Opera的移动浏览器将可以成为一个基于网页的程序发布和应用平台——它不需要你下载任何程序到手机上，更不需要客户端。它充满了各种插件和网页化的应用，而你可以随时在页面上使用这些音乐、游戏、地理位置和电子媒体的功能。

在世界杯期间，当你打开最新版的Opera移动浏览器，你可以找到用HTML5写成的应用程序“巫巫赛拉”(vuvuzela)：一个可以吹响以支持某些球队的喇叭，而过去类似的程序只能在苹果的App Store中才能被找到。

而Opera在9月10日推出的Opera Devices SDK2.8最新版本，已经可以为电视和其他消费电子制造商用于浏览技术的开发，最大的特点就是支持HTML5格式的影片。

“浏览器并不是设计用来制作应用程序的，但是，HTML5改变了这种情况。”Opera首席技术官Hakon Wium Lie说。而事实上Opera本身就是便于开发者开发插件和应用程序的平台，它甚至推出了作为浏览器附属的网络服务器——Opera Unite，通过网络分享、留言板、媒体播放器和相片分享等一系列功能，让网络开发者基于HTML 5和CSS解放他们的创造力来开发独特的网络服务(请于Gemag.com.cn查看《Opera背水一战》)。

在移动版Opera上，这一切的进程仍稍显迟滞。但Opera的创始人谭咏文(VonTetzchner)甚至认为，到年底就能推出可支持本地存储和程序应用的Opera移动浏览器。

谁的浏览器

但是，别忘了一个最关键的问题——当越来越多的智能手机厂商开始开发自己的浏览器，或因加入了Android阵营而不得不使用其浏览器之 后，Opera还有什么办法巩固甚至占据更多人的智能手机，并扮演那个未来将替代桌面应用程序的“可怕”角色？

当然，它有时还不得不与苹果和谷歌这样的玩家虚与委蛇——直到现在，Opera Mini的每个更新版本还都会上传到谷歌的Android Market中。而在今年2月，Opera Mini居然被苹果App Store的审核者放行，这意味着Opera Mini也可以堂而皇之地被iPhone用户下载使用了。要知道在人们的印象中，苹果绝对不会放行与自己战略和产品发生任何直接竞争的东西。

“人们认为它不能被苹果接受，只是因为没人敢去碰这个钉子而已。”Opera负责移动产品的副总裁Dag Olav Norem对《环球企业家》说，“结果是它被通过了。”不过他也承认，Opera Mini能获得苹果的通过是因为它的运行和存储都在远程的Opera公司服务器上，并不算一款真正在本地运行的浏览器，若是换了完全在人们手机本地运行的Opera Mobile，则多半前途未卜。

这正如同在PC时代，尽管微软通过在Windows操作系统中捆绑IE曾一度垄断大部分的市场份额，但它并无法阻止用户下载其他的浏览器客户端一样——Opera正试图成为越来越多iPhone、黑莓BlackBerry和Android智能手机的“第三方浏览器”，就像Firefox和Chrome在个人电脑上那样。

而这远非Opera的终极目的。“电信运营商已经觉醒了，它们意识到一家公司从操作系统到浏览器到应用商店什么都做是可怕的事。”Opera首席执行官Lars Boilesen对《环球企业家》说，“运营商喜欢iPhone，因为它能带来更多数据流量；但运营商恨App Store，因为它们把钱赚走了，运营商什么都没得到。”

“独立的跨平台浏览器厂商将为运营商导入更多有价值的流量。”Lars Boilesen说。

这意味着Opera将为移动运营商开发定制的手机浏览器，它当然是一种前所未有的模式。尽管运营商无法阻止厂商捆绑自己的手机浏览器，但它完全 可以要求它们定制另外一款运营商的浏览器——比如Opera Mobile或Opera Mini。

至少在北欧和西欧的一部分地区，电信运营商已经将Opera的定制浏览器“据为己有”：一些品牌的定制智能手机中内置了Opera浏览器。2009年9月，这部分“定制浏览器”的用户大约是100万，2010年1月已增至200多万，7月时跃升至500多万。在商业模式上，电信运营商将根据Opera活跃用户数量和他们带来的流量向Opera支付合作费用。

然而这并非仅仅是一种权宜之计的商业合作，Opera浏览器成为移动运营商定制的产品，包藏着它们共同的更大野心。

2010年2月，AT&T、沃达丰、德国电信、NTT DoCoMo甚至中国移动等24家世界级主流电信运营商发起成立“大规模开发社区”(Wholesale Applications Community)，试图穿越2G、3G甚至4G的不同技术标准，以及多个操作系统平台和手机品牌建设统一的应用市场。2009年下半年，以AT&T、西班牙电信、德国电信为中心的团队开始进行有关国际应用程序商店联合体的讨论，而在“大规模开发社区”的运营商结盟完成后，如何真正实现“打通一切”的应用程序世界，成了真正的难题。

于是你终于明白Opera的觊觎和价值所在了：唯有可以横跨各大操作系统、兼容2G、3G甚至4G网络，可以在不同手机型号上适配的移动浏览器才可能成为电信运营商“大规模开发社区”的基础。而一个前所未有庞大的基于浏览器的网络应用程序开发与应用基地也即将诞生，它将第一次局部地改变人们对移动互联网应用的认知——如果主角真的是Opera的话。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

1、YSlow

Yslow，我想明河无需过多介绍了，基本上跟firebug一样，是从事web前端开发的标配。

2、FireCookie

fireCookie主要用于弥补firebug无法查看站点Cookies的缺陷。

3、FirePHP

FirePHP可以让你通过一个简单的php函数，向firebug的控制台输出信息。

4、FireQuery

FireQuery对使用jquery的开发者非常有用，你可以在控制台上输入jquery查询语法，就可以得到完整的结果集。比 如$(“img”)，控制台将打印出所有的img（你点击就可定位到该节点位置）。详细使用说明，参见其官网上的视频。

5、FormBug

顾名思义，专门用于表单调试的工具，你可以使用这个工具看到网页中完整的表单信息。

6、FireRainbow

用于高亮显示js脚本。

7、FirePicker

这个工具用于修改style中的颜色信息时会出现完整的颜色色值表。

8、CSS Usage

专门用于检测你的css脚本的可用性，标红的即没起作用的css样式。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

可以直接用el=replaceHtml(el, newHtml)代替el.innerHTML=newHtml。

速度到底有多大提升，还得测试说话。作者提供了一个测试页面：http://stevenlevithan.com/demo /replaceHtml.html

此方法大大提高了 innerHTML 在 Firefox 和 Safari 上的性能。replaceHtml() 在 Firefox 2.0.0.6 里 destroy 与 replace 的速度各快了 473 倍以及 50 倍。而在 Safari 3.0.3 beta 上则是 create 100 倍，replace 50 倍。

对于 Opera 也依然有性能提高，只是提高幅度没有上面两种浏览器惊人而已，

唯在 IE 中，则原始的 innerHTML 的方法更效率点。

扩展阅读：

《When innerHTML isn’t Fast Enough》| 《innerHTML and DOM Methods》| 原文链接



© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

这篇汇总主要是提供一些CSS不透明的详细介绍，代码示例和解释，以实现这项有用的CSS技术在您的项目中兼容所有浏览器。

关于CSS 透明度，有一点需要注意的是，它虽然使用了很多年，但它一直以来都不是一个标准属性。它是一种非标准技术，应该是CSS3规范的一部分。

1. 旧的Opacity设置

以下代码是Firefox和Safari旧版本所需的透明度设置:

#myElement {-khtml-opacity: .5; -moz-opacity: 0.5;}

-khtml-opacity设置是针对旧版本的Webkit渲染引擎，这种专用属性现在已经过时了，除非你还有需要兼容Safari 1.x.的用户。

第二行使用专用属性 -moz-opacity是 为了兼容Mozilla渲染引擎的早期版本，以及追溯到Netscape Navigator。Firefox 0.9以后就不要求使用-moz-opacity属性，Firefox 3.5（现在使用Gecko引擎）已经不在支持这个属性。

2. 在Firefox, Safari, Chrome和Opera下的CSS透明度

以下代码是除了IE外的所有当前浏览器的最简单，最最新的不透明度设置的CSS语法：

#myElement {opacity: .7;}

上述语法将设置一个元素为70％不透明（或30%透明）。设置opacity:1将使元素不透明，而设置opacity:0将使得元素完全不可见。 你 只要记住“opacity”等同于“不透明”就很容易记住了，opacity值越小就越接近透明。

opacity属性可以精确地小数点后两位，所以值取“.01”和“.02”实际上是不同的，虽然可见度很难被发觉。一般情况下，精确到一位就可以 了，取值如“.3”或“.7”。

3. IE下的CSS透明度

IE下照旧有别于其他浏览器，并且目前也有三个不同版本的IE在广泛使用，透明度设置是不同的，有时需要额外的CSS来控制：

#myElement {filter: alpha(opacity=40);}

上面的CSS使用专用的filter属性来设置IE6-8透明度。对于IE6和IE7需要注意：为了使得透明设置生效，元素必须是“有布局”。一个 元素可以通过使用一些CSS属性来使其被布局，有如width 和 position。关于微软专有的hasLayout属性详情，以及如何触发它，参考这 里。

另外一个设置IE8的CSS透明度的方法语法如下（注意注释中指出的版本）：

#myElement{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);/* 第一行在IE6, IE7和IE8下有效 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /*第二行仅在IE8下有效 */}

第一行代码针对当前所有IE版本，第二行仅针对IE8。

注意两行代码的不同之处：在第二行代码中，在filter属性前跟着-ms-前缀，并且属性值有加引号，这些都是语法所必须的。

说实在，有了如前一个例子中用alpha(opacity=40)的语法来作用于任何版本的IE下的任何有布局的元素之后，我也不确定是否还有必要 用“progid”的方法。

4. 使用JavaScript设置和改变CSS透明度

您可以使用下面的语法访问JavaScript中的CSS opacity 属性：

document.getElementById("myElement").style.opacity = ".4";  // 针对所有现代浏览器
document.getElementById("myElement").style.filter = "alpha(opacity=40)";// 针对IE

上面的代码可以使用行内循环或者其他动态函数递增修改透明度的值。当然，你必须先通过特征检测来决定使用哪一行代码。

5. 使用JQuery设置和改变CSS透明度

直接使用jQuery设置CSS透明度更直观更容易实现，因为在所有浏览器代码都一样，并且你不必担心在IE下元素是否“haslayout”：

$("#myElement").css({opacity:.4 }); // 所有浏览器有效

您也可以使用一下jQuery代码使一个元素动画透明：

$("#myElement").animate({opacity:.4}, 1000, function() { // 动画完成，所有浏览器下有效  });

不管元素的透明度在动画开始时是多少，它都会渐变到透明度为“.4”。动画的速度通过值“1000”设定，动画时间以毫秒为单位。代码中的最后一个 属性是一个可选回调函数，将在动画完成后执行。

如果该元素的透明度在CSS中已经设定为“.4”，那在动画运行的时候，你将不会发觉有任何不同，所以动画开始和最终透明度要有所不同。

6. 通过 RGBA的透明度

另一个CSS3技术只支持部分新的浏览器（Firefox 3+, Opera 10.1+, Chrome 2+,Safari 3.1+），可通过RGBA的alpha通道的方式设定。语法如下：

#rgba { background: rgba(98, 135, 167, .4);}

在上面的定义中，通过RGB（前三个数字）给背景设定颜色，然后最后一个是alpha设置，以执行给定颜色的透明度。这个alpha设置跟 opacity 属性一样，可设定任何0到1的数字，精确得到两位小数点。数字值越大，就越接近完全不透明的颜色。

7. 通过 HSLA的透明度

类似之前的定义，CSS3还允许使用HSLA单独设置颜色和alpha值，HSLA表示Hue（色调）, Saturation（饱和度）, Lightness（亮度）, 和Alpha。以下是HSLA透明的例子：

#hsla {background: hsla(207, 38%, 47%, .4);}

更多关于HSLA颜色的解释，参考这篇来自W3.org的文章。如同RGBA透明度，最后的数字表示透明度设置，跟RGBA起同样的作用。注意 RGBA和HSLA透明度的一个重要的好处是这些透明度设置不会影响到子元素的，但通过opacity属性的方式则会。alpha设置的RGBA和 HSLA只影响背景颜色的透明度，仅此而已。

我希望我能涉及主要的跨浏览器的CSS透明度代码。如果内容有错漏，欢迎随时评论指出，我将乐意作更正或补充。谢谢~

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

顺带一提，Chrome从6.0开始就弃用了前五代默认的淡蓝色皮肤，变成平淡的中性色，想念经典蓝色的Chrome迷可以尝试Classic blue主题。

截图跟传送门在此：

Modern

Adaptive

Vibrant

Inventive

Fresh

Metropolitan

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

Web Developer Mini

方便的网站开发工具

W3C (x)HTML Validator – 0.2

通过三个图标(有效,警告,错误)中的一个在导航栏来显示HTML文档的有效性.

Find PHP Functions

这个扩展帮助发现文件中的ＰＨＰ函数.

Search Drupal

快速的搜索drupal.org和Drupal API

IPcopy

唯一的IP扩展,可以帮助你自动复制你的IP到你的剪贴板,只要按一下.

View Selection Source

通过选择内容,查看源代码.很有用的网站开发工具.

META inspector

一个检查网页里元数据的扩展.

Pendule

Chrome的扩展工发工具.

Lorem Ipsum Generator

一个形成随机的”Lorem Ipsum”文本的扩展.

IE Tab

使用微软ＩＥ显示网页的Chrome标签.

Explain and Send Screenshots

为你捕捉的网页加上解释它的箭头,圆或文字.

windowSizer

一个调整窗口大小的工具.

Resolution Test

帮助开发者测试页面在不同分辨率的显示器上的效果.

Domain Availability Checker

这个扩展可以帮助你检查可用的域名.

SEO and Website Analysis

通过WooRank.com来分析你的SEO和网站的Chrome扩展.

SEO Site Tools

提供Twitter,Facebook,Digg等社交网站的反应.

SitezMeter

提供网站的流量信息,级别和增长速度.

Kuber PageRank Checker

这个SEO工具显示网页的pagerank,Alexa等级等.

PageRank Status

显示当前网页的google的PageRank和Alexa的等级.

Site Information Tool

显示当前页面的信息(PageRank,Alexa,IP信息,服务器响应,whois和其他的SEO参数)

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

传统的桌面端，IE的统治地位仍然无人能及；而在移动端，则呈现出百花齐放的繁荣景象，除了苹果、谷歌、诺基亚等终端厂商，专业浏览器厂商也层出不穷，比如Opera、UCWEB、GO，甚至腾讯也开发了自己的手机浏览器。那么在互联网电视、IPTV平台上呢？在全新的融合时代，浏览器厂商能否成为可覆盖不同终端和应用平台的“全能选手”，将成为其继续拓展商业价值的重要门槛。

全浏览器趋势

集成了越来越多应用功能的浏览器，正在当仁不让地成为互联网入口。由此，全浏览器概念逐渐浮出水面，拉拢聚合终端及应用厂商，提供以浏览器为核心的统一解决方案。谷歌与苹果都在朝这个思路发展，只不过谷歌的理念是开源，苹果的理念是封闭的自循环系统。

从PC到手机再到电视，谷歌始终在扮演一个跨界“潮人”的角色，成为纯技术推动的三网融合代表厂商。谷歌希望将操作系统与浏览器结合起来，为不同终端和应用开发者简化流程。在此思路下，不管是在PC端还是手机端，谷歌目前都可以为相关产业环节提供免费、开源的解决方案。不仅如此，谷歌还正在打造一个全新的技术项目，计划通过互联网来运行所有程序，而用户无需下载，许多程序界面会在浏览器中被重新制造。此外谷歌还有诸多计划涉及改进浏览器的处理速度和绘图能力。

以上动作反映了一个主流趋势：浏览器正越来越像操作系统。浏览器负载下的程序多半需要网络连接，即需要保证所有的设备永远在线，这为谷歌未来像苹果一样参与网络运营商流量分成提供了基础。另一方面，在推出时备受争议的浏览器chrome，如今已经悄然取代苹果safari成为全球第三大浏览器，其6月的全球市场份额达7.24%，且为增长最快的一位。目前，谷歌如果自行打通浏览器与操作系统环节，为产业拥趸提供跨平台的“免费午餐”，无疑将会前途无量。

尽管被谷歌赶下全球浏览器第三名，苹果的Safari依旧不可小觑。凭借其封闭平台，以及正在风靡全球的桌面电脑、iPhone、iPad等终端，苹果的影响力足以撬动内容厂商、应用厂商甚至电信运营商，通过在浏览器上的小动作，打破互联网原有商业价值链。例如最近刚刚推出的Safari5，其内置的RSS阅读器凭借强大的阅读功能正在抢发行商饭碗，通过它用户可以不再被页面当中的广告所困扰，浏览器还可以智能地依据字体大小对内容进行分页。

相比较而言，全球浏览器排名第一的IE似乎并无决策上的转变，依旧沿袭着PC上的思路，因此市场份额逐渐被新锐浏览器侵蚀，特别是在手机端上表现平平。而以开源起家的另一家浏览器厂商Firefox，是由Mozilla基金会(谋智网络)与开源团体共同开发的网页浏览器，在PC端表现不俗，但在最近一两年才推出了手机浏览器。

在这样的大背景下，自诞生开始就以全浏览器厂商自称的Opera显得目标性很强。“只要有屏幕、可以上网的地方，就有Opera。”Opera中国区总经理宋麟曾这样阐述。通过内置在手机、Wii游戏机、机顶盒等嵌入式设备中，Opera会获得授权费用，且还有增值服务中的分成收入。据介绍，目前已经有数十万台中国的电视机机顶盒中，预装了Opera浏览器。

而接下来，方兴未艾的电子书市场会是其下一个要占领的屏幕吗？如何将浏览器铺设到如此繁多的终端上去？这样做有何必要？Opera首席战略执行官RolfAssev告诉记者，已有16年技术研发历史的Opera拥有一套自有的浏览器核心技术，不管是在何种终端上，浏览器内核都是一致的，只需根据不同设备来设计屏幕、分辨率等。另外，也可以利用技术授权的方式，直接将开发工具包提供给用户，让他们根据自己的需求来设计界面。

在商业拓展方面，Opera也算走出了一条自己的路。RolfAssev表示，目前Opera月活跃用户数量约1.3亿。其中一半来自OperaMini用户，约一半来自PC，还有一小部分来自于其他移动设备。在RolfAssev看来，中国移动互联网是非常重要的市场，越来越多的用户通过手机接入互联网。“如果能成为第一次通过手机上网新用户的选择，对我们来说意味着着一个机会。”

中国局

毫无疑问，手机是一个即将爆发而又空间巨大的市场，对浏览器领域而言，手机上网将成为融合时代的一个机会引爆点。

然而，在俄罗斯等东方市场所向披靡的浏览器厂商Opera却在中国遭遇了巨大挑战。凭借强劲的市场推广力度以及对用户习惯的谙熟，中国本土手机浏览器企业UCWEB在市场份额上遥遥领先。同样将手机端作为重要发力点的两家浏览器厂商，其各自定位却很不一样。UCWEB把自己定位于一个信息的提供商和服务提供商，一直发力在内容服务上，甚至可以理解为一个类似门户的概念，侧重内容运营；而对于Opera而言，从1995年到现在，一直将注意力集中在浏览器本身的用户体验上。“我们希望用户自由选择，而不是被我们硬塞进去合作伙伴的内容。”RolfAssev说。

此外，包括腾讯、3G门户等以内容见长的互联网企业也开始做手机浏览器。这些国产浏览器虽然并无太多自主核心技术，但在资源和内容集成上，思路如出一辙，颇有百度集成“hao123”的感觉，通过引导用户手机上网需求来获得广告营收。也正因为如此，这类浏览器公司暂时还看不出拓展多平台的理想，抢占IE鞭长莫及的手机端已经够让他们辛苦了。

值得关注的是百度。据可靠消息称，百度正在启动浏览器计划，号称投资金额巨大，3年将投入50亿元。这不由得让人想起它的老对手谷歌在进入浏览器市场时引发的震动，而凭借在中文搜索市场的老大地位，百度的介入或许也将引发一场变革。谷歌将服务器搬离大陆市场后，百度将成为手机搜索最为主流的合作伙伴，由此可以想见，百度此时要做的浏览器，不会仅仅是基于PC端的，而是跨平台整体解决方案。唯有此，百度才能够真正成为一家具有想象力的公司，完成“框计算”蓝图，与国际搜索巨头谷歌在未来有着相似分量的竞争砝码。

至于腾讯与搜狐，两家同样在浏览器领域虎视眈眈的互联网企业也各有优势。凭借强大的客户端能力，腾讯在中国移动互联网上俨然已是第一品牌，由此带动下的浏览器想象空间无法估量；而搜狗则有着独特的与输入法相关的浏览器开发方式，由于其“云输入法”造就的强大跨平台能力，也使其有望成为未来的多平台浏览器厂商。

当然，革命尚未成功，中国的浏览器市场变局才刚刚开始。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

各浏览器的默认CSS可以在这里http://www.iecss.com/找 到，贪心一下，把这些样式都保存了一份：

1. IE6(下载)
2. IE7(下载)
3. IE8(下载)
4. IE9(下载)
5. Firefox 3.6.3(下载)
6. Webkit (r57042) (下载)
7. Opera 10.51(下载)

当然我们还可以找到更老的一些浏览器默认样式：

• Firebird 0.7
• Firefox 0.8
• Firefox 0.9
• Firefox 2.0.0.6
• Firefox 2.0.0.12
• Firefox 3.0b3
• Firefox 3.0.1
• Firefox 3.0.8
• Flock 0.9.0.2
• Flock 1.2.4
• Flock 1.2.7
• Konqueror 3.2.0
• Mozilla 1.0.1
• Mozilla 1.5
• Navigator 6.1
• Navigator 7.1
• Navigator 8.1
• Navigator 9.0b3
• Safari 3.0.4
• Safari x
• Safari 3.1.2
• SeaMonkey 1.1.2

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

今天，趁着想完美公司的内部样式框架，把HasLayout.net的IE CSS Bug过了一遍。整理中收获了不少东西，一些官方的不足，也根据自己的知识升级了一下。当然，也顺利地升级了框架的一些内容，感觉甚爽。随后，便将一些值 得去看的Bug整理成一个列表，基于Alipay前端伟大的分享精神，分享出来以供团队工友们和大家参考。

同时，由于整理仓促，有些理解和表达不当和其他纰漏在所难免，还请大家帮忙更正。谢谢。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh