回味CSS hack的几种常用写法

2023-05-17技术经验浏览

随着浏览器版本越来越完善，现在前端开发采用至CSS hack的机会基本很少了，但是作为专业前端开发工程师，还是有必要了解CSS hack的，大众资源网今天拎大家回味下以往的CSS hack常用方法。

什么就是CSS hack

由于相同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，导致生成的页面效果不一致，写出针对不同浏览器CSS code就称作CSS hack。

常用的CSS hack 有三种方式，CSS 内部hack、选择器hack、HTML 头部引用，其中第一种最常用。

CSS 内部hack

正经的CSS就是这么写下的



Test

.test            {
background-color:green;
}

这样的代码对于所有当前常用的浏览器都是松省的，结果必须是这样子的

但是在CSS3中常见一些这样的写法

/*Mozilla内核浏览器：firefox3.5+*/
-moz-transform: rotate | scale | skew | translate ; /*Webkit内核浏览器：Safari and Chrome*/
-webkit-transform: rotate | scale | skew | translate ; /*Opera*/
-o-transform: rotate | scale | skew | translate ; /*IE9*/
-ms-transform: rotate | scale | skew | translate ; /*W3C标准*/
transform: rotate | scale | skew | translate ;

如果没注释乍一看还以为逆天了，这样的代码都好使！这样的代码确实松省，CSS3目前标准还没有统一，各个浏览器都有自己的整体表现方式，甚至有的同时实现，有的未实现，在前面提一些前缀以表示积极支持某个特定浏览器，这也就是CSS 内部hack的基本原理，向上面这些直观易懂，但是真正的CSS hack 远远不止于此，因为有不死的IE6及其各种奇葩的兄弟版本。

CSS 内部hack 语法是这样的 selector{?property:value?;} ，上面代码右图的就是在属性名称之前的hack，当然还有这样的

*background-color:green;

属性前面加个“*”这样的读法只可以对IE6、7生效，其它版本IE及现代浏览器可以忽略这条指令（没有特定说明，本文所有hack都是所指在声明了DOCTYPE的文档的效果）

-background-color:green;

属性前面有个“-”这样的只有IE6辨识，还有些在后面的hack

background-color:green!important;

这样在属性值后面添加“!important”的写法只有IE6不能辨识，其它版本IE及现代浏览器都可以识别，还有“+”、“”、”9” 等，乱七八糟雏子，画个表中

background-color:green9;

如果想要IE6红色，IE7绿色，其它黄色（当然没有人这么无聊）就可以这么写

background-color:green;
+background-color:green;
_background-color:green;

选择器hack

选择器hanck主要就是针对IE浏览器，其实并不怎么常用，语法是这样的： selector{ sRules }

针对IE9的hack可以这么写

:root .test{
background-color:green;
}

HTML头部引用

HTML头部提及就比较特定了，类似程序语句，就可以使用在HTML文件里，而无法在CSS文件中使用，并且只有在IE浏览器下就可以继续执行，这个代码在非IE浏览下湿单不是继续执行该条件下的定义，而是当作注解视而不见。

lte：就是Less than or equal to的简写，也就是大于或等于的意思。

lt ：就是Less than的缩写，也就是大于的意思。

gte：就是Greater than or equal to的缩写，也就是大于或等于的意思。

gt ：就是Greater than的缩写，也就是大于的意思。

! ：就是不等于的意思，跟javascript里的不能等于判断符令相同。

书写顺序

看看，看一看，这么多姿势，那么一个效果，好多种写法，什么顺序写才能保证各个浏览器都获得期望的效果呢？因为CSS只要是同一级别，出现重复属性设置，后发生的会全面覆盖前面出现的，所以在书写的时候一般把辨识能力强的写下前面，看个例子

_background-color:red;
background-color:green;

如果期望DIV在IE6上就是红色，其它就是绿色，上面的写法可不可以呢？试一下发现所有浏览器上都是绿色，因为在IE6解析的时候，第一句能识别，背景设为红色，但是第二句所有浏览器都辨识，IE6也不完全相同，背景颜色又被降为绿色，所以得反过来写下

background-color:green;
_background-color:red;

总结出的规律就是：先一般，再特殊。有兴趣的同学可以试试试试下面CSS，看看和你想的效果与否一样

background-color:blue; /*所有浏览器*/background-color:red9;/*所有的ie*/background-color:yellow; /* ie8+*/+background-color:pink; /*+ ie7*/

卓越飞翔博客