본문 바로가기
연구_고민

CSS 핵

by DevG 2008. 7. 1.
Netscape 4 배제하기
<link rel="stylesheet" type="text/css" href="/css/style.css" media="all" />
Netscape 는 media 속성이 screen 이 아닌 경우 외부 스타일시트를 읽지 못하는 버그가 존재함.

Win IE 3~4, Mac IE 4~4.5, Netscape 4 배제하기
@import url("/css/style.css")
Win IE 4, Mac IE 4 는 인용부호가 "가 아니면 읽지 못하는 버그 존재. IE 3과 Netscape 4는 @import 지원하지 않음.

Mac IE 5 배제하기
H1 { /* \*/ color:red; /* */ }
Holly 핵이라 하며, 주석 안의 내용이 적용되지 않음.

Win IE 4~5 배제하기
H1/**/ { color:red; }
셀렉터 뒤에 /**/ 삽입.

Win IE 4~5, Mac IE 4.5~5 배제하기
H1 { color/* */:red; }
속성과 속성값을 구분하는 콜론(:) 앞에 /* */ 삽입.

Win IE 4~6, Mac IE 4, Netscape 4 배제하기
html>body H1 { color:red; }
셀렉터 앞에 html>body 삽입.

Win IE 6 제외시키기
H1 { color /**/:red; }
속성과 속성값을 구분하는 콜론(:) 앞에 스페이스와 /**/ 삽입.

언더스코어 핵 (_)
H1 { _color:red; }
Win IE 4~6 에 적용.

닷핵 (.)
H1 { .color:red; }
속성 앞에 . 삽입. Win IE 6~7 에만 적용. 타 브라우저는 정확히 확인하지 못했습니다.
이 핵에 대해선 계속 확인중인데 블로그스피어나 여타 서적에는 전혀 언급이 없는 이상한 핵(?)입니다.

해시 핵(#)
H1 { #color:red; }
속성 앞에 # 삽입. Win IE 4~6, Mac IE 5, Opera 7, Mozilla계열, Firefox 에 적용.

스타 핵
*HTML H1 { color:red; }
셀렉터 앞에 *html 삽입. Win IE 4~6, Mac IE 4~5 에 적용.

스타7 핵
HTML*H1 { color:red; }
셀렉터 앞에 html* 삽입(공백없이). Win IE 5.5~6, Mac IE 5, Safari 에 적용.

xmlns 속성 핵
HTML[xmlns] H1 { color:red; }
셀렉터 앞에 속성 선택자를 삽입. Mozilla, Firefox, Opera, Safari 등 속성 선택자를 지원하는 브라우저에 적용.

:root 가상클래스 핵
:root H1 { color:red; }
셀렉터 앞에 :root 가상클래스 삽입. Mozilla, Firefox, Mac IE 5, Safari 등 가상클래스를 지원하는 브라우저에 적용.

Tantek 박스모델 핵
H1 {
    width:500px;
    voice-family: ""}"";
    voice-family:inherit;
    width:400px;
}
Tantek Celik 이 고안한 유명한 박스모델 핵. Win IE 4~5, Mac IE 4, Netscape 4 에서는 voice-family 속성 이전의 스타일 적용. 그외의 브라우저는 뒤의 속성 적용.

단순 박스모델 핵
H1 {
    width:500px;
    w\idth:400px; //Win IE 6, Mac IE 5, Mozilla, Opera, Safari
    \width:450px; // only Win IE 5
}

속성의 첫번째, 두번째 글자 사이에 \를 삽입하면 Win IE 6, Mac IE 5, Mozilla, Opera, Safari 에 적용.
추가로 속성의 앞에 \를 삽입하면 Win IE 5 에만 적용.

IE 7, Opera 적용하기
*+html body H1 { color:red; }
셀렉터 앞에 *+html body 삽입. IE 7, Opera 8 이후 버전 적용. Opera를 배제한 IE7 전용으로 하고 싶을 때는 *+html>/**/body 로 Opera 전용 속성 기술.

IE 7 적용하기
*:first-child+html H1 { color:red; }
셀렉터 앞에 *:first-child+html 삽입. IE 7에만 적용되고, 이외의 브라우저는 앞에서 기술한 셀렉터의 속성 적용.

Win IE 5 패스필터
@media tty {
i{content:"";/*" "*/}}; @import '/css/style.css'; {;}/*";}
}/* */


Win IE 5.5 패스필터
@media tty {
i{content:"";/*" "*/}}@m; @import '/css/style.css';/*";}
}/* */


Win IE 6 패스필터(?)
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/css/style.css" media="all" /><![endif]-->

Win IE 7 패스필터(?)
<!--[if gte IE 7]><link rel="stylesheet" type="text/css" href="/css/style.css" media="all" /><![endif]-->

모던브라우저 패스필터 (Win IE 5.5 이하, Mac IE 5, Opera 8 이하, Netscape 4 이하 제외)
@import "null?"{";
@import "/css/style.css";
@import "null?"}"




  Windows Mac OS X Macintosh Other
IE Mz Ns Op iC IE Mz Ns Om Op Sf IE Mz Ns Op Ko
7 6 5.5 5 4 1 7 6 4 8 7 6 5 2 5 1 7 6 4 8 7 6 5 2 5 4 1 7 6 4 6 5 3
  7 6 5.5 5 4 1 7 6 4 8 7 6 5 2 5 1 7 6 4 8 7 6 5 2 5 4 1 7 6 4 6 5 3
IE Mz Ns Op iC IE Mz Ns Om Op Sf IE Mz Ns Op Ko
Windows Mac OS X Macintosh Other
voice-family:"\"}\"";
voice-family:inherit;
property:value;
Y Y N N N Y Y Y N Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y N Y Y Y
p\roperty:value; Y Y N N N Y Y Y N Y Y Y N N Y Y Y Y N Y Y Y N Y Y N Y Y Y N Y N N
/*/*/property:value;/* */ Y Y Y Y Y Y Y Y N Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y
/*/*//*/property:value;/* */ N N N N N N N N Y N N N Y N N N N N N N N N Y N N N N N N Y N Y N
div#test Y Y Y Y Y Y Y Y N Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y
head:first-child+body div Y N N N N Y Y Y N Y Y N N N Y Y Y Y N Y Y N N Y Y N Y Y Y N N N Y
body>div Y N N N N Y Y Y N Y Y Y Y N Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y
html[xmlns] div Y N N N N Y Y Y N Y Y Y Y N N Y Y Y N Y Y Y Y Y N N Y Y Y N Y Y Y
@import 'styles.css' Y Y Y Y N Y Y Y N Y Y Y Y Y N Y Y Y Y Y Y Y Y Y N N Y Y Y N Y Y Y
@import "styles.css" Y Y Y Y N Y Y Y N Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y N Y Y Y
@import url(styles.css) Y Y Y Y Y Y Y Y N Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y
@import url('styles.css') Y Y Y Y Y Y Y Y N Y Y Y Y Y N Y Y Y Y Y Y Y Y Y N N Y Y Y N Y Y Y
@import url("styles.css") Y Y Y Y Y Y Y Y N Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y
@import "null?\"\{";
@import "styles.css";
Y Y Y N N Y Y Y N Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y N Y Y Y
@media all{/* rules */} Y Y Y Y N Y Y Y N Y Y Y Y N N Y Y Y N Y Y Y Y Y N N Y Y Y N Y Y Y
<link media="all"> Y Y Y Y Y Y Y Y N Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y
<link media="All"> Y Y Y Y Y Y Y Y N Y Y Y Y Y Y Y Y Y N Y Y Y Y Y Y Y Y Y Y N Y Y Y
* html div N Y Y Y Y N N N N N N N N N Y N N N N N N N N N Y Y N N N N N N N
*+html div Y N N Y N N N N N N N N N N N N N N N N N N N N N N N N N N N N N
i{content:"\"/*"}
div{property:value}
Y Y N N N Y Y Y N Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y N Y Y N
/* \*/
div{property:value}
/* */
Y Y Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y Y Y Y Y Y Y N Y Y Y Y Y Y Y Y
html*#test Y Y Y N N Y Y Y N N N N N N Y Y Y Y N N N N Y Y Y N Y Y Y N ? Y N
_property:value N Y Y Y Y N N N N N N N N N N N N N N N N N N N Y Y N N N N N N N
*property:value Y Y Y Y N N N N N N N N N N N N N N N N N N N N N N N N N N N N N
@media tty {
i{content:"\";/*" "*/}} @import 'styles.css'; /*";}
}/* */
N N Y Y N N N N N N N N N N N N N N N N N N N N N N N N N N N N N
@media tty {
i{content:"\";/*" "*/}}; @import 'styles.css'; {;}/*";}
}/* */
N N N Y N N N N N N N N N N N N N N N N N N N N N N N N N N N N N
@media tty {
i{content:"\";/*" "*/}}@m; @import 'styles.css'; /*";}
}/* */
N N Y N N N N N N N N N N N N N N N N N N N N N N N N N N N N N N
/*\*//*/
@import "styles.css";
/**/
N N N N N N N N N N N N N N Y N N N N N N N N N Y N N N N N N N N