CSSrainbow.cn » Web Roundups

CSS3 和 HTML5 兼容性测试

Rainbow — Thu, 06 May 2010 02:59:13 +0000

引言

你想知道你目前的WEB开发环境对CSS3和HTML5的支持情况和兼容性吗？如果想知道就跟我来，我会给你提供一些CSS3和HTML5的测试工具，来帮助你学习和应用这些新技术。

关于HTML5

HTML5是未来主要的HTML版本,HTML5给我们提供了很多更语义化的结构化的标签。例如，和布局有关的标签就是非常有意义的功能，这种语义化的特性不仅提升了我们网页的质量和语义，并且大量减少了曾经代码中用于CSS必须调用的class和id属性。

更多的HTML5新功能，我们不在这里做具体的阐述。

如果你想体验HTML5的新功能，请看下面的演示文档，几乎包括HTML5所有激动人
心的新功能的简介和DEMO。

中文版演示文档：http://directguo.com/html5/

英文原版：http://apirocks.com/html5/html5.html（需翻墙）

关于CSS3

CSS 技术我们已经并不陌生。而CSS3提供了非常多新途径去改善你的设计工作，且做了不少重要的变化。

CSS 3 新功能

圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa – 加入透明色、文字阴影等等
CSS3 的出现，让代码更简洁、页面结构更合理，性能和效果得到兼顾。

CSS3 和 HTML5 兼容性测试工具

简单的说了那么多，我们可以肯定的认为CSS3 和 HTML5 的组合会成为下一个Web标准，而且越来越多的浏览器开始支持它们的新属性，一向让我们头疼的IE 也要马上推出Internet Explorer 9 ，对CSS3 和 HTML5 也有一定的支持。

有兴趣的可以看一下 IE9 的 Test Drive 。

CSS3 Selectors Test

你想知道您的浏览器对CSS3 Selectors的支持情况吗，只要我们在相应的浏览器中运行此测试套件页面，将自动运行一个小测试，能马上知道您的浏览器是否支持与之相配的CSS Selectors。测试完毕以后，您可以点击每个CSS Selectors来查看结果，其中包括一个小例子，并为每个测试做出解释。因为它在技术上是不可以与某些用户进行交互模拟测试某个或某几个CSS Selectors ，目前只能批量测试 CSS Selectors 。所以这个测试套件不包括以下的选择器测试：:hover, :active, :focus and :selection 。

还等什么! 点击 The CSS3 Selectors test 页面进行测试。

HTML5 Test

你想知道您的浏览器对HTML5的支持情况吗，我们用最直观的测试数据告诉您！

还等什么! 点击 The HTML5 test 页面进行测试。

CSS3 和 HTML5 兼容速查表

FindMeByIP.com 为我们提供了CSS3 和 HTML5 兼容速查表，已经在所有的A级浏览器中测试过，结果非常有趣。

总之，这些丰富的测试工具，为我们的CSS3 + HTML5 的开发和应用带来了方便，不过这些新东西暂时还不能大量的应用到我们的客户项目中，还得需要很长的时间进行过渡，所以我们要三思而后行，以免带来麻烦。

肯定的是，它们是未来WEB标准的主角，早点学习是没错的。我们可以把这些新技术应用到我们的博客或者是Web设计社区中，提前体验和实战。

jQuery vs MooTools 专题系列

Rainbow — Fri, 26 Mar 2010 03:23:23 +0000

学习 MooTools 和 jQuery 也有一段时间了，以前为了选择一个符合自己的JavaScript 库而查看大量的资料，并细心的观察这几个比较流行的库（jQuery, MooTools, Prototype, Dojo, YUI），到底哪个适合我 …… 不用说，你也许猜得到了我选择的是以MooTools 为主jQuery 为辅的学习方案。好东西虽然不可兼得，但可以互补。从而提高我的JavaScript开发水平。

我这里整理《jQuery vs MooTools 专题系列》的文章，目的不是PK,只是为了推动这两个非常值得学习的库（Libraries），并合理的和高效的应用到我们的工作中。

国内学习MooTools 的人很少，与jQuery相比而言。我还是鼓励大家学习一下MooTools 。所以我才会策划这个《jQuery vs MooTools 专题系列》，以来解惑，增强学习MooTools 的信心。

jQuery 1.4, MooTools 1.2 比较（英文版）
jQuery vs MooTools (多国语言版)
jQuery和MooTools的真正区别（中英版）

jQuery 1.4, MooTools 1.2 比较

Rainbow — Thu, 18 Mar 2010 07:48:36 +0000

2010年1月14日，我在Nettuts网站上看到了《 jQuery 1.4 Released: The 15 New Features you Must Know
》的文章，16号的时候就有中文版的译文了，《[译]jQuery 1.4 发布：15个新特性实例精讲》，我也感受了一下 jQuery 1.4给我们带来的变化。有意思的是我所看到的jQuery1.4的新特性，在MooTools1.2+的版本里早有实现。

我在这里不想jQuery VS MooTools ，也不想为谁公正。很显然我比较喜欢MooTools ,因为它更适合我和我的工作，我也不想重复学习一些东西。我所看到的对jQuery的偏见，其实是大家有目共睹的，jQuery也是明显的（就是jQuery也采用了MooTools的一些特性等等的做法）。然而，当你阅读到这儿的时候我也不是试图去说服你转入到MooTools下当门徒，说jQuery是劣等的，从而抛弃jQuery 。就好像你选择浏览器是IE,操作系统是Windows，汽车是福特，喝的百事可乐。小平爷爷说的好“不管黑猫白猫，抓住老鼠就是好猫”。我只是在这里分享我用MooTools开发的一些想法（其实我有好几个项目就是采用的jQuery开发的）。

无论如何，为了方便自己，我使用jsfiddle 或 mooshell 工具 – 在线可以帮助您编写 html, css 和 javascript，并且可以测试实例。我选择的jsfiddle在线工具来偷懒代码片段的，可以节省一些时间，快速测试，也方便我们快速了解jQuery1.4中令人敬畏的新特性，以及MooTools中更多令人敬畏的东西。

原文来自：jQuery 1.4, MooTools 1.2 Compared

作者与博客：Ryan Florence Blog

Enjoy!

1. Passing Attributes During Element Construction / 传参给 jQuery(…)

jQuery 1.4

jQuery('', {  
 
    id: 'foo',  
 
    css: {  
 
        fontWeight: 700,  
 
        color: 'green'  
 
    },  
 
    click: function(){  
 
        alert('Foo has been clicked!');  
 
    } 
 
});

MooTools (all versions)

new Element('div',{ 
 
  id: 'foo', 
 
  styles: { 
 
    'font-weight': 700, 
 
    color: 'green' 
 
  }, 
 
  events: { 
 
    'click': function(){ 
 
      alert('Foo has been clicked!'); 
 
    } 
 
  } 
 
});

jQuery is looking a lot more moo-ish here by passing an object in rather than chaining everything.

jQuery Shell

MooTools Shell

2. Everything Until! / 直到遇见你…

HTML

<ul id="fruit">  
 
  <li>Apple</li>  
 
  <li>Banana</li>  
 
  <li>Grape</li>  
  <li>Strawberry</li>  
 
  <li>Pear</li>  
 
  <li>Peach</li>  
 
</ul>

jQuery 1.4

1
2
3

jQuery('ul#fruit li:contains(Apple)').nextUntil(':contains(Pear)');
 
// Selects Banana, Grape, Strawberry

MooTools 1.2 + Element.GetUntil Plugin

$$('ul li:contains(Apple)')[0].getAllNextUntil(':contains(Pear)); 
 
// more mooish 
 
$('fruit').getElement('li:contains(Apple)').getAllNextUntil(':contains(Pear));

I thought these new until methods were interesting so I extended MooTools with similar functionality. See my post about Element.GetUntil.

jQuery

MooTools

3. Binding Multiple Events / 绑定多个事件处理器

jQuery 1.4

jQuery('#foo').bind({  
 
    click: function() {  
 
        // do something   
 
    },  
 
    mouseover: function() {  
 
        // do something   
 
    },  
 
    mouseout: function() {  
 
        // do something   
 
    }  
 
});

MooTools (all versions)

$('foo').addEvents({ 
 
  click: function(){ 
 
    // do something 
 
  }, 
 
  mouseenter: function(){ 
 
    // do stuff a bit better than mouseover 
 
  }, 
 
  mouseleave: function(){ 
 
    // do stuff a bit better than mouseout 
 
  } 
 
});

jQuery 1.4 again is looking a lot more like mootools, very nice
because now you can store a handful of events in an object and toss
them around.

Note: “MooTools features mouseenter and mouseleave
because mouseover/mouseout sometimes just don’t not work as expected.
Mouseenter only fires once you enter the element and does not fire
again if your mouse crosses over children of the element.” moootools.net

jQuery

MooTools

4. Per Property Easing / 依属性指定缓动效果

jQuery 1.4

jQuery('#foo').animate({  
 
    left: 500,  
 
    top: [500, 'easeOutBounce']  
 
}, 2000);

MooTools 1.2 + Fx.Transmorph Plugin

Fx.Transmorph is the same thing, different syntax:

1	$('foo').transmorph({height: 100, width: 100}, {width: 'bounce:out'});

MooTools 1.2 + Fx.Flux Plugin

Fx.Flux is unique in that it allows you to define ANY of the
Fx.Morph instructions rather than just the transition. Yes, you can
change the duration, transition, unit, etc.

$('foo').flux({ 
 
    'top':[370, { 
 
        duration: 1500, 
 
        transition:'bounce:out' 
 
    }], 
 
    'left':[370, { 
 
        duration: 3000, 
 
        transition:'cubic:out' 
 
    }] 
 
});

Just Mootools

You’d have to set up multiple Tween / Morph instances. However, this
affords you control over every aspect of the tween (including events),
not just the easing.

var foo = $('foo'); 
 
var fooFx1 = new Fx.Tween(foo,{ 
 
  transition: 'elastic:out', 
 
  duration: 2000, 
 
  onStart: function(){ 
 
    // do something fun 
 
  } 
 
}); 
 
var fooFx2 = new Fx.Morph(foo,{ 
 
  transition: 'sine:in:out', 
 
  duration: 500, 
 
  onComplete: function(){ 
 
    // do something important 
 
  } 
 
}); 
 
fooFx1.start('left',500); 
 
fooFx2.start({'top':500, 'border':'10'});

So yeah, a lot of code. I think jQuery implemented something cool
here and I certainly hope to see a version of Fx.Flux in the mootools
forge. When we all start getting crazy with canvas and svg we’ll want
leaner syntax for animation than the mootools code block above this,
and more control than just the easing in jQuery. Oh, Fx.Flux, yes,
that’s what I’m thinking of.

jQuery

MooTools Fx.Flux

5. Live Events / 更新的 Live 事件！

That’s just another name for event delegation. I’ve got an entire post
on event delegation with mootools. Basic concept, instead of adding the
same events (or as jquery calls it, binding events) on multiple
elements, just add the event to a single parent element and delegate,
or relay the event to the children. Then any dynamically added elements
(inserted via ajax, or otherwise) will have the event.

jQuery 1.4

jQuery('ul#foo li').live('click', function(){  
 
    // do something with this   
 
});

MooTools 1.2 + Element.Delegates

1	$('foo').addEvent('click:relay(li)');

Some very big differences in the two approaches here.

jQuery listens to the entire document for clicks. That feels a
little, erm, less-awesome than it should be. That means every single
click goes ahead and finds out if it was an li inside of foo that was clicked.
MooTools only listens to the element you tell it to.

MooTools is also more clear about what’s going on. You are adding
the event to an element that will relay the event to it’s matched
children. The identical code in MooTools to the jquery example would be:

1	document.addEvent('click:relay(ul#foo > li)');

But don’t ever do that if you don’t have to. Srsly d00d. Don’t get
me wrong, event delegation is one of my favorite toys, so I’m very
excited it’s part of jQuery now, just a bit disappointed I have to
listen to the whole document, he’s going to be a busy man.

Note: Jquery kicks MooTools in the pants when it comes to delegating focusin and focusout. The current implementation of MooTools event delegation doesn’t support the focus and blur methods, but MooTools 2.0 will.

jQuery

MooTools

6. Controlling a Functions Context / 控制函数上下文

In other words, what will this be inside a function? Given this:

var app = {  
 
    config: {  
 
        clickMessage: 'Hi!'  
 
    },  
 
    clickHandler: function() {  
 
        alert(this.config.clickMessage);  
 
    }  
 
}; 
 
 
 
// jQuery 
 
jQuery('a').bind('click', app.clickHandler); // won't work, `this` is the clicked `a` 
 
 
// Mootools 
 
$$('a').addEvent('click', app.clickHandler); // same thing

When an anchor tag is clicked, we want to alert this.config.clickMessage, or ‘Hi!’. Here are the solutions:

jQuery 1.4

jQuery('a').bind( 
 
  'click', 
 
  jQuery.proxy(app, 'clickHandler') 
 
);

MooTools (all versions)

$$('a').addEvent( 
 
  'click', 
 
  app.clickHandler.bind(app) 
 
);

This should have been in jQuery a long time ago. I have a hard time
imagining writing a well structured javascript app without binding, or
proxy-ing (?) as shown in this example. I think the MooTools syntax is
easier as you don’t have to split up the object, just bind it. Things
get a little confusing too with jQuery when you’ve got nested methods
in an object:

var app = {  
 
    config: {  
 
        clickMessage: 'Hi!'  
 
    }, 
 
    clickHandler: function() {  
 
        alert(this.config.clickMessage);  
 
    }, 
 
    nested: { 
 
        keyupHandler: function() {  
 
            alert(this.config.clickMessage);  
 
        } 
 
    }  
 
}; 
 
 
 
jQuery('a').bind({ 
 
  'click': jQuery.proxy(app, 'clickHandler'), 
 
  'keyup': jQuery.proxy(app.nested.keyupHandler, app) // backwards? 
 
} 
 
 
 
// MooTools 
 
$$('a').addEvents({ 
 
  'click': app.clickHandler.bind(app) 
 
  'keyup': app.nested.keyupHandler.bind(app) // coherent 
 
});

Seems really strange to swap the arguments around to accommodate a
nested method. MooTools is much clearer here, just pass in the function
as you would normally, then bind whatever you want.

jQuery

MooTools

7. Delay an animation queue / 动画队列延迟

jQuery

$('#foo') 
 
  .animate({'width': 250}) 
 
  .delay(500) 
 
  .fadeOut() 
 
  .delay(1000) 
 
  .fadeIn();
<em>em>

MooTools 1.2 with Chain.Wait

$('foo') 
 
   .tween('width', 250) 
 
   .pauseFx(500) 
 
   .fade('out') 
 
   .pauseFx(1000) 
 
   .fade('in');

jQuery

MooTools

8. Check if an element has something / 检测元素是否含有特定内容

jQuery 1.4

1	jQuery('div').has('ul');

MooTools 1.2

1	$('div').hasChild('ul');

9. Unwrap an element / 给元素剥皮！

jQuery 1.4

1	jQuery('p').unwrap();

MooTools 1.2

Nuthin’ baked in, but if you find yourself needing to unwrap elements often you could extend Element to handle it.

// include this with your other classes and javascript 
 
Element.implement({ 
 
    unwrap: function(){ 
 
        var parent = this.getParent(); 
 
        parent.getChildren().inject(parent,'before'); 
 
        parent.dispose(); 
 
        return this; 
 
    } 
 
}); 
 
 
 
// now you've got unwrap 
 
$('p').unwrap();

Edit: Thanks to Chee Aun in the comments, he pointed out that I missed text nodes in my solution. Indeed. Check out his gist for a better solution. You would instead target an element to remove rather than a child to oust it’s parent.

jQuery

MooTools

10. Remove elements without deleting data / 移除元素，而不删除数据

jQuery

foo.detach(); // Remove it from the DOM   
 
 
 
// ... do stuff   
 
 
 
foo.appendTo('body'); // Add it back to the DOM

MooTools (all versions)

foo.dispose(); // Remove from the DOM 
 
 
// ... do stuff 
 
 
foo.inject(document.body); // Add it back to the DOM

Again, this was one of those things that surprised me that jquery
didn’t have, especially since jQuery’s focus is the DOM. It’s
especially helpful when you’ve got some heavy duty dom manipulation
going on: pull everything out, manipulate, the browser doesn’t try to
redraw, inject it back into the DOM. Only redraws once.

11. Index enhancements / index(…) 的功能增强

jQuery 1.4

jQuery('li').click(function(){  
 
  alert( jQuery(this).index() ); 
 
  alert( jQuery(this).index('li.other') ); 
 
});

MooTools

var els = $$('li'); 
 
els.addEvent('click',function(){ 
 
    alert(els.indexOf(this)); 
 
    alert($$('li.other').indexOf(this)); 
 
}); 
 
 
 
// more common 
 
$$('li').each(function(element, index){ 
 
  element.addEvent('click',function(){ 
 
    alert(index); 
 
  }); 
 
});

This is clearly more valuable to the jquery coding style. I’ve never used indexOf in mootools, I’m usually in an each loop.

jQuery

MooTools

12. DOM Manipulation accepts functions as arguments / DOM 操纵可接收回调函数

jQuery 1.4

jQuery('li').html(function(i){  
 
    return 'Index of this list item: ' + i;  
 
});

This is actually quite interesting, it’s geared a lot more toward
the coding style of jQuery than mootools, but after talking to Thomas
Aylott about it, we (read: he), came up with this …

MooTools 1.2 with Elements.setEach Plugin

$$('li').setEach('html',function(i){ 
 
  return 'Index of this list item: ' + i; 
 
}); 
 
 
 
// actually, there's a ton you can do with setEach 
 
 
 
function replaceFooWithBar(string){ 
 
    return String(string).replace(/\bfoo\b/g,'bar'); 
 
}; 
 
 
 
// just like jQuery 
 
$$('a').setEach('href', function(currentHref, i){ 
 
    return currentHref + '?foo=bar'; 
 
}); 
 
 
 
// or pass in an array of stuff and it'll do it all
 
// notice how `html` is accessible in the function 
 
$$('a').setEach('html',[ 
 
    "New foo HTML!", 
 
    function(html){ return html + ' appended moar foo!'; }, 
 
    replaceFooWithBar, 
 
    function(html,i){ return html + ' Index is ' + i; } 
 
 
 
]); 
 
 
 
// or set multiple things, in this case, multiple styles 
 
$$('a').setEachStyle({ 
 
    'color': function(currentColor, i) { 
 
        i = i.toString(16); 
 
        return ['#', i, i, i].join(''); 
 
    }, 
 
    'background-color': function(currentColor, i) { 
 
        i = (15 - i).toString(16); 
 
        return ['#', i, i, i].join(''); 
 
    } 
 
});

Radical. Hats off to Thomas Aylott for this 30 minute script.

jQuery

MooTools

13. Determine the Type of Object (sort of) / 判定对象类型

jQuery 1.4

jQuery.isEmptyObject({}); // true   
 
jQuery.isEmptyObject({foo:1}); // false   
 
 
 
jQuery.isPlainObject({}); // true   
 
jQuery.isPlainObject(window); // false    
 
jQuery.isPlainObject(jQuery()); // false

I’m not entirely sure how helpful this is. Seems like if an object
is empty when you iterate over it, nothing happens, is there a reason
to check first? Also, why do I care if it’s {} versus new Object(). I’m genuinely curious, not bashing.

MooTools 1.2

Straight from Keetology: Up the Moo Herd V: Evident Utensil

// JavaScript's typeof operator..  
 
typeof "a";       // 'string'  
 
typeof 1;         // 'number'  
 
typeof {};        // 'object'  
 
typeof [];        // 'object'.. wait, what?  
 
typeof /m/;       // 'object' in some, 'function' in others..  
 
typeof $('id');   // 'object'.. you're not

图片延迟加载，基于MooTools or jQuery

Rainbow — Mon, 15 Mar 2010 09:35:05 +0000

Lazy Load ，是延迟加载的意思。延迟加载可以推迟资源（通常是图像），减少流量，在包含很多大图片长页面中延迟加载图片可以加快页面加载速度。浏览器将会在加载可见图片之后（第一屏就跳转）即进入就绪状态。在某些情况下还可以帮助降低服务器负担。

延迟加载技术，在淘宝（Taobao），腾讯和必应（Bing）等网站上已经应用。

我今天就给大家介绍几个网上比较好的延迟加载插件（Lazy Load Plugin）：

Lazy Load Plugin for MooTools

介绍演示插件下载

Lazy Load Plugin for jQuery

介绍演示插件下载

Lazy Load for JavaScript

介绍演示插件下载

知识扩展：

20个最佳的Lightbox效果收藏，基于MooTools or jQuery

Rainbow — Fri, 12 Mar 2010 02:27:05 +0000

大家都非常喜欢灯箱（Lightbox）效果，灯箱效果应用的地方很广，一直备受关注。人们已经根据原始的Lightbox 效果的启发，已经成功的克隆到所有流行的JavaScript库中了。

本文就是收藏网络上最受欢迎的10个MooTools的Lightbox效果和10个jQuery的Lightbox效果的大集合，也许其中一个Lightbox是你想要的。

原译文来自：Rounding Up the Top 10 jQuery Lightbox Scripts

原译文来自：Rounding Up the Top 10 Mootools Lightbox Scripts

更多的Lightbox : Lightbox 克隆 – 基于主流JavaScript库的Lightbox项目大集合（推荐）

Supported Media: Images

View Demo Download

—- The End —-

10个jQuery过渡效果:移动的元素与样式

Rainbow — Thu, 04 Mar 2010 01:31:01 +0000

围剿 Flash 的不仅有 HTML 5，还有 JavaScript，著名的 JavaScript 框架 jQuery 在运动特效方面已经越来越流畅，有时候你需要点一下右键来确认它不是 Flash。本文介绍了10个非常出色的 jQuery 运动特效，这些效果可以更有效地展示你的内容。

1. 流感导航菜单

下面的导航菜单，当鼠标在上面移动的时候，会很流畅地垂下解释菜单，当你将鼠标在上面快速左右移动的时候，会怀疑这是 Flash。

2. 转花灯

Roundabout 是一个 jQuery 插件，可以将一组 HTML 对象转换为旋转花灯的效果。

3. 拉洋片

拉洋片也许是 jQuery 最拿手的效果了。该效果在遇到 JavaScript 被禁用的场合会自动降级使用。

4. jQuery Quicksand 插件

这个让人赞叹的插件，可以对一组 HTML 对象重新洗牌，效果非常出众。

5. 导航滑块

这种风格的导航已经见于很多站点，鼠标在导航菜单上移动的时候，一个高亮指示条随着鼠标滑动，指示当前的导航位置。

6. 文字的移动纹理

在文字上，显示移动的纹理，效果美轮美奂。原理是，做一个带透明文字的 PNG 图像放在一个容器里，容器的背景放一张图案，用 jQuery 移动容器的背景，很简单，不过，不支持 IE6，因为 IE6 不支持 PNG。

7. jDiv: jQuery 导航 Tab

一个可以显示丰富内容的下拉导航菜单（演示要翻墙）。

8. 基于 CSS3 和 jQuery 的半透明导航系统

鼠标在导航菜单上移动，显示半透明的指示图标。CSS3 做这个实在太容易了。

9. 云台式拉洋片

常规的拉洋片效果要么左到右，要么右到左，或者垂直上下，这个 jQuery 效果可以象云台那样扫镜头。

10. SlideDeck

SlideDeck 是一种新颖的内容展示方式，有点类似 Outlook 的手风琴菜单，但视觉效果和用户体验更好一些。

本文来源：http://devsnippets.com/article/10-jquery-transition-effects.html

中文编译来源：锐商企业CMS 网站内容管理系统官方网站

IE条件注释与CSS Hacks

Rainbow — Tue, 02 Mar 2010 13:15:23 +0000

我们知道，IE6的存在，因其预装于目前市场占有率最大的 Windows XP 操作系统。对于老态龙钟的IE6，说拜拜还需要很长的时间。
IE虽然给我们网页设计师，带来了不少多麻烦，还好，IE条件注释，给我们解决浏览器兼容问题带来了一个很好的方法。

一、什么是IE条件注释？

IE条件注释，顾名思义就是使用IE特有的条件语句来显示代码块。

这些巧妙的逻辑片段只能被IE浏览器所支持，其它的浏览器理解为纯粹的HTML注释，不起任何作用。条件注释在IE5中首次出现，并且得到了Widnows浏览器所有后续版本的支持。IE条件注释及其有效，而且非常容易记住。通过这些技巧，我们可以为基于Windows的IE5、6、7、8添加一些特殊的行为。这样做的好处是，HTML和CSS代码可以通过验证。主要的缺点是这些注释需要放在HTML页面中，而不是放在CSS中。这样，当你不需要这些东西，或者有所更改的时候，就需要维护很多的地方。好处是通过这种方式使用条件注释，可以很轻松的管理项目中的目标浏览器，并使得CSS补丁文件保持独立自由。更重要的是它帮助我们优化了 CSS样式表，保证了主要样式表的干净，这对于大型网站来说就很重要了，也许你还没有感觉到它的可爱之处。

作为有Web标准意识的开发者，我们始终应该首先在大部分现有的兼容标准的浏览器上测试我们的设计，然后再为那些稍作细微修改就能回到正轨的浏览器提供补丁。

二、条件注释使用方法

条件注释属性

gt : greater than，选择条件版本以上版本，不包含条件版本
lt : less than，选择条件版本以下版本，不包含条件版本
gte : greater than or equal，选择条件版本以上版本，包含条件版本
lte : less than or equal，选择条件版本以下版本，包含条件版本
! : 选择条件版本以外所有版本，无论高低

The Code

我们概括性地说明一下你如何使用条件注释，首先，我们应该把你所有的CSS 等CSS文件放在中。条件注释的基本结构和HTML的注释()是一样的。因此，IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。条件注释使用的是HTML的注释结构，因此他们只能使用在HTML文件里，而不能在CSS文件中使用。

CSSrainbow.cn » Web Roundups

CSS3 和 HTML5 兼容性测试

引言

关于HTML5

关于CSS3

CSS3 和 HTML5 兼容性测试工具

CSS3 Selectors Test

HTML5 Test

CSS3 和 HTML5 兼容速查表

相关日志 »

jQuery vs MooTools 专题系列

相关日志 »

jQuery 1.4, MooTools 1.2 比较

1. Passing Attributes During Element Construction / 传参给 jQuery(…)

jQuery 1.4

MooTools (all versions)

jQuery Shell

MooTools Shell

2. Everything Until! / 直到遇见你…

HTML

jQuery 1.4

MooTools 1.2 + Element.GetUntil Plugin

jQuery

MooTools

3. Binding Multiple Events / 绑定多个事件处理器

jQuery 1.4

MooTools (all versions)

jQuery

MooTools

4. Per Property Easing / 依属性指定缓动效果

jQuery 1.4

MooTools 1.2 + Fx.Transmorph Plugin

MooTools 1.2 + Fx.Flux Plugin

Just Mootools

jQuery

MooTools Fx.Flux

5. Live Events / 更新的 Live 事件！

jQuery 1.4

MooTools 1.2 + Element.Delegates

jQuery

MooTools

6. Controlling a Functions Context / 控制函数上下文

jQuery 1.4

MooTools (all versions)

jQuery

MooTools

7. Delay an animation queue / 动画队列延迟

jQuery

MooTools 1.2 with Chain.Wait

jQuery

MooTools

8. Check if an element has something / 检测元素是否含有特定内容

jQuery 1.4

MooTools 1.2

9. Unwrap an element / 给元素剥皮！

jQuery 1.4

MooTools 1.2

jQuery

MooTools

10. Remove elements without deleting data / 移除元素，而不删除数据

jQuery

MooTools (all versions)

11. Index enhancements / index(…) 的功能增强

jQuery 1.4

MooTools

jQuery

MooTools

12. DOM Manipulation accepts functions as arguments / DOM 操纵可接收回调函数

jQuery 1.4

MooTools 1.2 with Elements.setEach Plugin

jQuery

MooTools

13. Determine the Type of Object (sort of) / 判定对象类型

jQuery 1.4

MooTools 1.2

相关日志 »

图片延迟加载，基于MooTools or jQuery

Lazy Load Plugin for MooTools

Lazy Load Plugin for jQuery

Lazy Load for JavaScript

Target ALL VERSIONS of IE（所有的IE可识别）