CSS滤器
✍ dations ◷ 2025-10-18 15:55:20 #CSS滤器
CSS 滤器是一个编程技术,指根据浏览器的版本、功能来隐藏或显示CSS 标记语言。各浏览器对层叠样式表行为的解释以及W3C标准 的支持不同。有时 CSS 滤镜也用来在多个渲染效果不同的浏览器中取得一致的表现。
此滤镜使用浏览器前缀样式代码,而这些代码会被其它浏览器忽略。所以 -moz-color:red;
定义将在所有 Gecko 浏览器中显示红色,而其它浏览器则为默认颜色。
p { color: #000; /* 段落在忽略下面所有规则的浏览器中显示为黑色 */ -moz-color: #F00; /* 段落在 Gecko 浏览器中显示为红色 */ -webkit-color: #00F; /* 段落在 Webkit 浏览器中显示为蓝色 */ -khtml-color: #0F0; /* 段落在 KHTML 浏览器中显示为绿色 */ -xv-color: #FF0; /* 段落在 Presto 浏览器中显示为黄色 */}
特定浏览器的样式只能定义在忽略它的浏览器的样式定义之后,或者使用!important
标记和无前缀无!important
的样式同时使用。这样有前缀的样式会覆盖无前缀的样式,达到特定浏览器想要的效果。
这个 hack 利用了 Internet Explorer for Mac 的一个和注释解析相关的错误。一段以 */
结束的注释在 IE Mac 下不能被正常关闭,由此哪些需要被 IE Mac 忽略的样式可以置于此注释中。样式之后需要另一段注释代码来关闭 IE Mac 下的注释。
/* IE Mac 下忽略下一条样式 */selector { ...styles... }/* IE Mac 下停止忽略 */
盒模型 hack
称为 "盒模型 hack" 是因为它经常被用来处理 IE盒模型缺陷,这个方法对 Internet Explorer 使用了一个与其它浏览器不同的属性集。IE 在版本6 已经修正了这个盒模型错误,通过在文档中引入一个 文件类型描述‘HTML 规范中必需的’。
#elem { width: ; voice-family: ""}""; voice-family: inherit; width: ;}html>body #elem { width: ;}
第一段 voice-family
语句设为字符串 "}"
,但是 IE 一个解析错误会阻断它为一个单 反斜线 跟着一个闭合 括号,作为样式指令的结尾。选择 voice-family
是因为它不会影响屏幕 样式表 上的表现。第二个使用了html>body
hack 的规则是为了像 Opera 5 那样的也有这个解析错误但没有盒模型错误(同时,支持子选择器)的浏览器。
Internet Explorer 版本 6 以下承认有此前缀的属性(会丢掉此前缀)。所有其它浏览器都会忽略这样的无效属性。因此,有一个 下划线 或 连字符 前缀的属性是仅仅应用到 Internet Explorer 6 以及以下版本。
#elem { width: ; _width: ;}
此 hack 使用了无效的 CSS 和一个正常的 CSS 指令来达到相似的结果。因此有些人不推荐使用它。另一方面此 hack 因不改变选择器而使维护和扩展 CSS 文件变容易。
Internet Explorer 版本 7 以及以下承认非字母数字(除了 下划线 或 连字符)前缀的属性(会丢掉此前缀)。这样的属性对所有其它浏览器都是无效的。因此,一个非字母数字(除了 下划线 或 连字符)前缀的属性,例如一个 星号,是仅仅应用到Internet Explorer 7 以及以下版本。
#elem { width: ; *width: ;}
此 hack 使用了无效的 CSS 和一个正常的 CSS 指令来达到相似的结果。因此有些人不推荐使用它。另一方面此 hack 因不改变选择器而使维护和扩展 CSS 文件变容易。
html
元素是 W3C 标准 DOM 的根元素,但是 Internet Explorer versions 4 到 6 有一个神秘的父级元素。 完全兼容的浏览器会忽略 * html
选择器,而 IE4-6 则正常处理它。这样就提供了一个对这些浏览器适用而其它浏览器会忽略的规则。例如,下面的规则指定了 Internet Explorer 4-6 的文字大小,而不会影响其它浏览器。
* html p {font-size: 5em; }
此 hack 使用了完全有效的 CSS。
尽管 Internet Explorer 7 不再认识经典的星号 HTML hack ,它却引入了一个相似的新的选择器 hack:
*:first-child+html p { font-size: 5em; }
或…
*+html p { font-size: 5em; }
这段代码将会应用到 Internet Explorer 7 ,而不会应用到其它任意浏览器中。注意此 hack 只在 IE7 标准模式下起作用;它在诡异模式下不起作用。此 hack 也支持 Internet Explorer 8 的兼容性视图(IE7 标准模式),但不支持 IE8 标准模式。和星号 HTML hack 一样,此 hack 使用了有效的 CSS。
Internet Explorer 版本 6 以及以下不支持 ‘子选择器’( >
),则样式只应用到所有其它浏览器上。例如下面的规则会使文字颜色在 Firefox 中为蓝色,而不会影响 IE 7 之前的版本。
html > body p { color: blue; }
尽管 IE7 添加了子选择器支持,还是发现了一个变异的 hack 可以将 Internet Explorer 7 也排除在外。当一个空注释跟着子选择器时, IE7 会丢掉后面的规则,就像之前版本的 IE 一样。
html >/**/ body p { color: blue; }
反选伪类 hack
Internet Explorer 8 以及以下不支持 CSS3 :not()
negation pseudo-class (页面存档备份,存于互联网档案馆).Internet Explorer 9 添加了 CSS3 伪类支持,包括反选伪类。
.yourSelector { color: black;} /* 给 IE 的值 */html:not() .yourSelector { color: red;} /* Safari, Opera, Firefox, and IE9+ 的值 */
反选伪类接受任意选择器:类型选择器,通用选择器,属性选择器,类选择器,ID 选择器,或者伪类选择器。(不包括伪元素和反选伪类自身)。设置反选伪类后,所有不匹配的元素都会应用相应样式。
一个变异 hack ,使用 :root
伪类,也不会被 Internet Explorer 8 以及以下版本解析。
CSS3 引入了 :empty 伪类,支持选择没有内容的元素。不过, Gecko 1.8.1 以及以下版本( Firefox 2.0.x 及以下使用)处理 body:empty 不正确,有内容时(通常都会有内容)也被选中。这就可以给 Firefox 2.0.x 及以下版本指定不同的样式规则,而不同于其它使用同样引擎的浏览器。
/* 使 p 元素在 Firefox 2.0.x 及以下版本隐 */body:empty p { display: none;}
此 hack 使用了有效的 CSS。
Internet Explorer 7 及以下版本有一些与设置优先值的 !important 相关的古怪行为。 IE7 和之前版本实际上在 important 位置接受任意字符串且能正常处理,而其它浏览器则会忽略它。这就可以仅仅给这些浏览器指定属性值。
/* 使文字颜色在 IE7 以及以下版本为蓝色,所有其它浏览器中为黑色 */body { color: black; color: blue !ie;}
相似的, IE7 以及之前版本的 !important 声明后也接受非字母数字的字符,而其它浏览器会忽略它。
body { color: black; color: blue !important!;}
上面的 hacks 都使用了无效的 CSS。 Internet Explorer 6 及以下也有一个 !important 相关的问题,在同一个代码块中,当同一个元素的同一个属性,一个有而另一个没有 !important 声明的值时,第一个值应该覆盖第二个值,但 IE6 及以下版本不会。
/* 使文字在IE6 及以下为蓝色 */body { color: black !important; color: blue;}
这个 hack 使用了有效的 CSS。
Internet Explorer 版本 5 到 7 中支持一种私有的能动态改变 CSS 属性的语法,有时也称为一个 CSS 表达式。 动态属性通常和其它 hack 一起使用以填补一些 Internet Explorer 老版本不支持的属性。
div { min-height: 300px; /* 在 IE6 中模拟 min-height */ _height: expression(document.body.clientHeight < 300 ? "300px" : "auto");}
条件注释
主条目:条件注释
条件注释是微软 Internet Explorer 对 HTML 代码中解析的条件语句。
<head> <title>测试</title> <link href="all_browsers.css" rel="stylesheet" type="text/css" /> <!--> <link href="ie_only.css" rel="stylesheet" type="text/css"> <!--> <!--> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <!--> <!--> <!]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<!--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<!--></head>
批评
使用 hacks 隐藏代码经常导致页面在浏览器更新后不正常显示。很多被用来向 IE 6 及以下版本隐藏 CSS 的 hacks 都在 IE 7中失效了,因为 IE 7 支持更多的 CSS 标准。 微软 Internet Explorer 开发团队已经要求人们使用条件注释来代替 hacks。
相关
- 柠檬酸钾柠檬酸钾是一种柠檬酸盐其分子式为K3C6H5O7。它是一种白色,略带吸湿性结晶性粉末。它是无臭,有生理盐水的味道。作为食品添加剂,柠檬酸钾是用来调节酸度与钾营养补充来源。医疗
- 刘和谦刘和谦(1926年9月28日-),生于安徽省合肥市,中华民国海军一级上将、现任中华民国总统府战略顾问。毕业于海军军官学校、海军PG学院(英语:Naval Postgraduate School)、美国海军大学与
- 天链一号04星天链一号04星是中国的第一代中继卫星系统天链一号的第四名成员。北京时间2016年11月22日23时24分,西昌卫星发射中心用“长征三号丙”运载火箭将“天链一号04星”顺利发射升空
- 乘风破浪的姐姐《乘风破浪的姐姐》是2020年中国芒果TV推出的明星女团竞演真人秀节目。节目邀请30位年龄在30岁以上的已出道的女艺人,通过封闭式训练和比赛,最终组成全新女团。本节目由黄晓明
- 猪笼草属文献列表猪笼草属文献列表记录了大部分已发表的猪笼草属著作。其包括了独立出版物和大型分类学专著的一部分,但不包含期刊和杂志内的论文。此表格包含所有作为独立书籍出版的著作:与查
- 姚道刚姚道刚(1997年9月1日-),是一名中国足球运动员,司职中场或后卫。姚道刚出道于武汉卓尔青训系统。2017年全运会代表湖北队担任主力出场。2017年3月1日,重庆力帆宣布与姚道刚正式签订
- 狄恩·史达威尔罗伯特·狄恩·史达威尔(英语:Robert Dean Stockwell,1936年3月5日-),是美国电影和电视剧演员,从影生涯超过70年。在童年时,史达威尔就已和米高梅签约,出演了君子协定(1947)等电影。
- 政治语言学政治语言学(英语:political linguistics)是由语言学和政治学交叉形成的一门新兴语言学分支学科,研究语言和政治之间的共变关系,它与社会语言学和媒体语言学之间有着密切的联系。主要采用的研究方法是话语分析法。在研究政治语言学时,人们可以关注口号、大众传媒、辩论和宣传对说服个人的价值观和身份认同的影响。
- 库恩·贝拉库恩·贝拉(匈牙利语:Kun Béla,1886年2月20日-1939年11月30日),匈牙利共产主义革命家,匈牙利苏维埃共和国的主要创建者和领导者,犹太人。库恩1886年出生于奥匈帝国统治下的特兰西瓦尼亚(今属罗马尼亚)。他在1902年参加了匈牙利社会民主党,是特兰西瓦尼亚地区工人运动的主要领导人之一。1914年,被征入伍参加第一次世界大战,1916年被俄国军队俘虏,关押在托木斯克战俘营。在战俘营中,他成为了一名布尔什维克。1917年底,库恩前往圣彼得堡,同列宁见面。1918年春,库恩组织了俄共(布)匈
- 铆钮尖丽蚌 Wood, 1815 Wood, 1815 Rolle, 1904铆钮尖丽蚌(学名:)为蚌科尖丽蚌属的淡水双壳纲软体动物。贝壳近椭圆形;壳表具备细微绒毛;主体呈黄绿色或棕黑色。贝壳厚重;具有复杂的瘤突;后背嵴具有人字形粗肋;壳内珍珠光泽。主要分布于中国广东、广西以及越南北部。本种栖息于流速较快的大型河流中;常半掩埋于水较深的泥质或卵石河底滤食生活。