【译】条件注释( conditional comment)

原文(译者在原文基础上添加了部分内容):https://css-tricks.com/how-to-create-an-ie-only-stylesheet/

参考:微软官方文档:About conditional comments(强烈建议亲自看一下微软官方文档)

这篇文章更新自一篇旧文(原来是 2007 年 9 月 24 日)。我只是想扩展这篇旧文并解释得更清楚一些。

原文中有两个术语:条件注释conditional comment(貌似这个更加符合其意义)、条件样式表conditional stylesheet

如果你愿意阅读这篇博客,那么你 99% 是在 IE 上有过烦躁到抓头发的经历。But if you are worth your salt as a CSS coder,你应该可以处理这种问题。我的观点是:即使不使用 hack,你也可以处理 IE 抛给你的任何问题。hack 是危险的,因为 hack 基于非标准的漏洞,你无法预测这些 hack 在未来的浏览器上会表现成什么样子。处理 IE 问题的首选工具是条件样式表(conditional stylesheet)。IE 提供了注释标签,支持指定特定的版本(从更低版本一直到 IE 8),也支持一次性指定多个版本(高于greater than某个版本或低于less than某个版本)(译者注:这篇文章是 2010年 1 月 20 日写的)。

1. 为什么使用条件样式表(conditional stylesheet)?

  • You got problems, they need fixin'
  • Keeps your code hack-free and valid(让你的代码免于使用 hack 方法,并在未来的浏览器中保持有效)
  • Keeps your main stylesheet clean(让你的主样式表保持纯净)
  • Perfectly acceptable technique, sanctioned by Microsoft(这是完全可以接受的技术,是微软认可的)

记住,这些条件样式表不仅仅可以用于 CSS,你可以用来加载 JavaScript,甚至可以在网站的内容中用来显示特殊的 仅用于 IE 的信息。

2. 代码

这 与所有其他的常规外联 CSS 文件一样 放在 <head> 标签中。你应该很熟悉它的开始标签和结束标签,它们只是常规的 HTML 注释。然后就是,中括号里的 ifIE,它们的意思很明显了吧,不用我多说了。需要注意的语法是:! 代表 not,所以 !IE 表示 not IEgt 表示 greater thangte 表示 greater than or equallt 表示 less thanlte 表示 less than or equal

注意:IE 10 及以上版本不支持条件注释(conditional comment)

针对所有版本的 IE(Target ALL VERSIONS of IE)

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

针对除了 IE 之外的所有浏览器(Target everything EXCEPT IE)

<!--[if !IE]><!-->
    <link rel="stylesheet" type="text/css" href="not-ie.css" />
 <!--<![endif]-->

只针对 IE 7(Target IE 7 ONLY)

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

只针对 IE 6(Target IE 6 ONLY)

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

只针对 IE 5(Target IE 5 ONLY)

<!--[if IE 5]>
    <link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

只针对 IE 5.5(Target IE 5.5 ONLY)

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

针对 IE 6 以及更低版本(Target IE 6 and LOWER)

<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

针对 IE 7 以及更低版本(Target IE 7 and LOWER)

<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
<!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

针对 IE 8 以及更低版本(Target IE 8 and LOWER)

<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

针对 IE 6 以及更高版本(Target IE 6 and HIGHER)

<!--[if gt IE 5.5]>
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
<!--[if gte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

针对 IE 7 以及更高版本(Target IE 7 and HIGHER)

<!--[if gt IE 6]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
<!--[if gte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

针对 IE 8 以及更高版本(Target IE 8 and HIGHER)

<!--[if gt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

3. 针对 IE 10(Target IE 10)

参见这里

条件注释在 IE 10 中消失了。这是好事儿。IE 10 是一个非常好的浏览器。功能检测(feature detection)是几乎所有方案中最好的一种方案。但如果你发现有一些样式需要针对 IE 10,该怎么办呢?我想你将不得不面对这种情况。

通过一小段 JavaScript 代码就可以把客户端(User Agent)添加到 <html> 元素:

var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

IE 10 的客户端字符串(User Agent string) 为:

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

这将导致:

<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">

然后你就可以像下面这样书写样式:

html[data-useragent*='MSIE 10.0'] h1 {
  color: blue;
}

4. 反对条件样式表的观点

我们不应该需要它们。它们违背了 web 标准的精神。

5. 支持条件样式表的观点

虽然它们违背了 web 标准的精神,但我们确实需要它们。

6. 其他资源


7. 实际应用

打算抛弃 IE 8,但希望 IE 8 及更低版本 的用户在浏览本站时,可以得到一个体验更好的不兼容提示,发现这个网站(http://www.uhouzz.com/)使用了条件注释的方法,所以学习了。

Paste_Image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,629评论 1 92
  • 问题 一、如何调试 IE 浏览器? 使用高版本的ie控制台查看盒模型 低版本ie使用border:1px soli...
    吴晗君阅读 381评论 0 1
  • 1.什么是 CSS hack 不同厂家的浏览器,或者同一厂商的不同版本的浏览器对css的解析认识可能存在差别,因此...
    molly的红草帽阅读 194评论 0 0
  • 什么是 CSS hack CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什...
    怎么昵称阅读 354评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,100评论 18 139