CSS를 짜다보면 어쩔수 없이 핵과 마주해야합니다. 그나마 있어줘서 고마운 핵... 하지만 우리는 그 이름조차 모르고 있지는 않나요? ( --; 무슨 공익광고인가...)
그래서 이름과 용법 등을 정리해 보았습니다.
박스모델 핵 (Box Model Hack)
<적용브라우저 : IE4, IE5, IE5.5, NS4>
"웹2.0을 이끄는 방탄웹(왜 웹2.0을 방탄웹이 이끄는지는 미스테리)"에 보면 처음 나오는 핵입니다.
IE5.x (IE5, IE5.5 등)에서 div로 지정된 박스의 넓이가 padding과 margin을 적용하면 해석하는 과정에서 큰 오차가 발생하는 관계로 이 부분의 오차를 미연에 방지하고자 적용하는 핵입니다. 하지만, 다른 IE5.x관련 값에도 적용되는 유용한 핵입니다.
(제 경험으로는, DTD를 Strict로 맞춰주면 이 핵을 적용하지 않고도 별 이상없이 구현되었습니다.)
간략화된 박스모델 핵(SMBH, Simplified Box Model Hack)
<적용브라우저 : IE4, IE5 ,IE5.5, NS4, OP5>
말뜻 그대로, 길어서 줄인 것입니다.
카이오 핵(Caio's Hack)
<적용브라우저 : NS4>
<적용 브라우저 : IE4, IE5, IE5.5, IE6, IE7, NS6, NS7, OP6, OP7, OP8, SF2>
오웬 핵(Owen's Hack)
<IE4, IE5, IE5.5, IE6, NS4, OP5, OP6>
자식 셀렉터(Child Selector)
<적용 브라우저 : IE4, IE5, IE6, NS4>
원래는 핵이 아닌데, IE 구버전에서 처리할 수 없는 셀렉터를 이용해 핵처럼 이용하는 방법입니다. 이런 핵이 몇개 있는데, 대부분 IE 구버전과 관련있습니다.
속성 셀렉터(Attribute Selector)
<적용 브라우저 : IE4, IE5, IE6, NS4>
이것 또한 속성셀렉터를 구버전 IE에서 인식하지 못하는 점을 이용한 핵입니다.
스타 HTML 버그(Star HTML Bug)
<적용 브라우저 : IE7, MO1, NS4, NS6, NS7, OP5, OP6, OP7, OP8, SF>
오페라 전용 핵처럼 생각되어질 정도군요.
넥스트 낫씽 핵(Next to Nothing Hack)
<적용 브라우저 : IE5.5, IE6, MO1, NS4>
인라인 하이패스 필터(Inline High Pass Filter)
<적용 브라우저 : IE4, IE5, IE5.5, NS4>
스타7 핵(Star 7 Hack)
<적용 브라우저 : IE4, IE5, NS4, OP5, OP6, OP7, OP8, SF>
언더스코어 핵(Under Score Hack)
<적용 브라우저 : IE7, MO1, NS4, NS6, NS7, OP5, OP6, OP7, OP8, SF>
http://centricle.com/ref/css/filters/의 내용을 참고하여, 윈도우용만 적용해 보았습니다.
기타 잘 정리해 둔 내용...
그래서 이름과 용법 등을 정리해 보았습니다.
박스모델 핵 (Box Model Hack)
<적용브라우저 : IE4, IE5, IE5.5, NS4>
voice-family:"\"}\"";
voice-family:inherit;
property:<value>;
"웹2.0을 이끄는 방탄웹(왜 웹2.0을 방탄웹이 이끄는지는 미스테리)"에 보면 처음 나오는 핵입니다.
IE5.x (IE5, IE5.5 등)에서 div로 지정된 박스의 넓이가 padding과 margin을 적용하면 해석하는 과정에서 큰 오차가 발생하는 관계로 이 부분의 오차를 미연에 방지하고자 적용하는 핵입니다. 하지만, 다른 IE5.x관련 값에도 적용되는 유용한 핵입니다.
(제 경험으로는, DTD를 Strict로 맞춰주면 이 핵을 적용하지 않고도 별 이상없이 구현되었습니다.)
간략화된 박스모델 핵(SMBH, Simplified Box Model Hack)
<적용브라우저 : IE4, IE5 ,IE5.5, NS4, OP5>
말뜻 그대로, 길어서 줄인 것입니다.
* html <selector> {
property:<value>; <- IE5.x의 값
p\roperty:<value>; <- 그 외 브라우저의 값
}
카이오 핵(Caio's Hack)
<적용브라우저 : NS4>
/*/*/property:value;/* */ <적용 브라우저 : IE4, IE5, IE5.5, IE6, IE7, NS6, NS7, OP6, OP7, OP8, SF2>
/*/*//*/property:value;/* */
오웬 핵(Owen's Hack)
<IE4, IE5, IE5.5, IE6, NS4, OP5, OP6>
head:first-child+body div자식 셀렉터(Child Selector)
<적용 브라우저 : IE4, IE5, IE6, NS4>
원래는 핵이 아닌데, IE 구버전에서 처리할 수 없는 셀렉터를 이용해 핵처럼 이용하는 방법입니다. 이런 핵이 몇개 있는데, 대부분 IE 구버전과 관련있습니다.
body>div속성 셀렉터(Attribute Selector)
<적용 브라우저 : IE4, IE5, IE6, NS4>
이것 또한 속성셀렉터를 구버전 IE에서 인식하지 못하는 점을 이용한 핵입니다.
html[xmlns] div스타 HTML 버그(Star HTML Bug)
<적용 브라우저 : IE7, MO1, NS4, NS6, NS7, OP5, OP6, OP7, OP8, SF>
오페라 전용 핵처럼 생각되어질 정도군요.
* html div
넥스트 낫씽 핵(Next to Nothing Hack)
<적용 브라우저 : IE5.5, IE6, MO1, NS4>
*+html div인라인 하이패스 필터(Inline High Pass Filter)
<적용 브라우저 : IE4, IE5, IE5.5, NS4>
i{content:"\"/*"}
div{property:value}스타7 핵(Star 7 Hack)
<적용 브라우저 : IE4, IE5, NS4, OP5, OP6, OP7, OP8, SF>
html*#test언더스코어 핵(Under Score Hack)
<적용 브라우저 : IE7, MO1, NS4, NS6, NS7, OP5, OP6, OP7, OP8, SF>
_property:valuehttp://centricle.com/ref/css/filters/의 내용을 참고하여, 윈도우용만 적용해 보았습니다.
기타 잘 정리해 둔 내용...
Netscape 4 배제하기
<link rel="stylesheet" type="text/css" href="http://wis1674.tistory.com/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="http://wis1674.tistory.com/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?"}";