CSS 해킹

저는 항상 CSS 해킹에 대해 매우 편협하고 편견을 갖고 있었습니다. 하지만 잘 작성된 코드에서는 이러한 "악한 방법"을 사용해서는 안 된다고 생각했습니다. 그러나 최근 제품 릴리스에서 발생한 작은 문제로 인해 머리가 아팠습니다. 마침내 정보를 확인한 후 CSS 해킹을 사용하면 쉽게 해결할 수 있다는 것이 밝혀졌지만 마법의 IE를 처리하려면 이러한 도구를 사용해야 합니다.

CSS 해킹이란 무엇입니까

브라우저마다 또는 동일한 브라우저의 버전마다 CSS 구문 분석에 대한 이해가 다르기 때문에 생성된 페이지에 일관되지 않은 효과가 발생하고 브라우저에 따라 CSS를 작성합니다. 코드를 CSS 해킹이라고 합니다.

일반적으로 사용되는 CSS 핵, CSS 내부 핵, 선택기 핵, HTML 헤더 참조 세 가지가 있으며 그 중 첫 번째가 가장 일반적으로 사용됩니다.

CSS 내부 해킹

심각한 CSS는 이렇게 작성합니다

nbsp;html>
    
        <title>Test</title>
        <style>
            .test            {
                background-color:green;
            }
        </style>
    
    
        <p></p>
    

이러한 코드는 현재 일반적으로 사용되는 모든 브라우저에서 작동합니다. 결과는 다음과 같아야 합니다

그러나 이와 같은 일반적인 작성 방법은 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 내부 해킹의 기본 원칙은 간단하고 이해하기 쉽지만 실제 CSS 해킹은 그 이상입니다. 왜냐하면 불멸의 IE6과 그 다양한 이상한 형제 버전이 있기 때문입니다.

CSS 내부 해킹 구문은 다음과 같습니다. 선택자{?property:value?;} 위 코드는 속성 이름 앞에 해킹을 표시합니다. 🎜 >

*background-color:green;

속성 앞에 "*"를 추가하면 IE6 및 7에만 적용됩니다. 다른 버전의 IE 및 최신 브라우저에서는 이 지침을 무시합니다(특별 지침 없음, 이 글 전체 핵은 DOCTYPE을 선언한 문서의 효과를 참조)

-background-color:green;

속성 앞에 "-"가 붙는데 이는 IE6에서만 인식되며, 뒤에 몇 가지 해킹이 있습니다

background-color:green!important;

속성 값 뒤에 "!important"를 추가하는 작성 방법은 IE6의 다른 버전과 최신 브라우저에서만 인식할 수 있습니다. 인식할 뿐만 아니라 "+", "

	IE6	IE7	IE8	IE9	IE10	现代浏览器
*
+
-
!important
\9
\0
\9\0

这样就清楚多了吧。如果只想给上面的test p在IE访问的时候加绿色背景，就可以这么写

background-color:green\9;

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

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

选择器hack

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

	IE6	IE7	IE8	IE9	IE10	现代浏览器
*html
*+html
:root

针对IE9的hack可以这么写

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

HTML头部引用

HTML头部引用就比较特殊了，类似于程序语句，只能使用在HTML文件里，而不能在CSS文件中使用，并且只有在IE浏览器下才能执行，这个代码在非IE浏览下非单不是执行该条件下的定义，而是当做注释视而不见。

<link><link><link>

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;

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

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

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

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

更多CSS hack 相关文章请关注PHP中文网！