Macji Pro²⁰¹⁰

Google浏览器一出，满世间都在议论它，包括我的阅读器，全在说它。它是一个非常优秀的浏览器，尤其是多线程，让我们打开多个网页不再受浏览器的限制，更多好处请Google Chrome 漫画中文版

那到底为什么叫Chrome？其实我也不知道，我只听说在做mozilla插件（firefox）中，有个叫 chrome://的。金山词霸上说:

CHROME（铬合金）滤镜使用映射图来生成变化多端的，奇妙醒目的真实金属效果，如黄金 效果、银金属效果、铜金属效果及其它各种金属效果，所谓映射图就是解压缩的TIFF ...

显然这不是我们要的答案。好在 独行 给出解释：

最早是用在计算机游戏设计上面，人们会说游戏里一些人物造型很“炫”，就是好看不中用，就管这种“炫”的设计叫Chrome，它原意是铬，可能因为铬都闪闪发光？后来就被科普成代表GUI Graphic User Interface了，都可以叫Chrome，再后来，用在浏览器设计上面，就是说浏览器视窗（window）周边的框，也包括上面的导航条，都叫chrome，象一个金属的框。

用chrome打开任何一个网站，然后再其网站搜索后，再在地址栏键入该网站域名按TAB，将自动搜索该网站内容，貌似chrome很强悍，但在它的地址栏里输入" %: "，却立马崩溃，不知道为什么。另外它自带的几个开发者工具，不怎么好用。

大家都知道它是基于webkit的。有人已经写了它所支持的css选择器。http://www.evotech.net/blog/2008/09/google-chrome-browser-css-selector-support/，该网站也列出了chrome的css hack，当然能用在Safari。hedgerwow以前也列过一个Safari hack，当然chrome也能用。。挖挖。绕啊。

@media screen and (-webkit-min-device-pixel-ratio:0){
	.your_own_selector{
		color:red;
	}
}

我一直呼吁尊重浏览器，少用hack，可是为解决IE特殊情况，难免要用到一点点hack。我们在动态添加CSS，习惯在head里添加一个style元素，在这元素里增加css内容。

var addCSS = function(cssText, doc) {
		doc = doc || document;
		var styleEl = doc.createElement("style");
		styleEl.type = "text/css";
		if (styleEl.styleSheet) {
			styleEl.styleSheet.cssText = cssText;
		} else {
			styleEl.appendChild(doc.createTextNode(cssText));
		}
		doc.getElementsByTagName("head")[0].appendChild(styleEl);
	}

虽然这样写没有错，可是我们的IE在这种情况下，不认hack和important，也就是说IE会忽略所有无关的字符（_color:#fff; !@#$%^&colo:000;r），非要增加一个hack，我们只能通过判断浏览器是否是IE，然后给IE增加特定的CSS。

换一种思路，假如我们直接给CSS样式表增加CSS呢？try

var addCSS = function(selector, cssText) {
	var styles = document.styleSheets[0];//获取css样式表
	var rules = styles.cssRules || styles.rules;
	if (styles.insertRule)//W3C方式
		styles.insertRule(selector + "{" + cssText + "}", rules.length);
	else if(styles.addRule)//IE方式
		styles.addRule(selector, cssText, rules.length);
}

//假如我们已经有一个H1
(function() {
    var _css = "{color:#f60!important; color:#000; _color:#369;}";
	addCSS("h1", _css);
})();

YES，就这么简单，你可能觉得这样写不好，是，我们最需要的是权衡。

update:先创建，再添加就可以了。by 秦歌

var addCSS = function(cssText, doc) {
		doc = doc || document;
		var styleEl = doc.createElement("style");
		styleEl.type = "text/css";
        doc.getElementsByTagName("head")[0].appendChild(styleEl);//选创建
		if (styleEl.styleSheet) {//再添加css规则
			styleEl.styleSheet.cssText = cssText;
		} else {
			styleEl.appendChild(doc.createTextNode(cssText));
		}
	}