요즘들어 스킨을 무척 많이 다루고 또 만들고 있다보니 자연스레 CSS도 많이 접해야 되게 됩니다. 제가 스킨을 만들면서 가장 중요하게 생각하는 것중 하나가 바로 크로스 브라우징인데요. 어떤 브라우저에서 보던 같은 내용을 출력 할 수 있도록 하기 위함 입니다. 하지만 이게 그렇게 만만한 작업이 아닙니다. 각 브라우저 마다 기본적으로 랜더링 하는 방법에서 차이가 나고 그걸 바탕으로 또한 미묘하게 같은 소스를 주었음에도 다른 식으로 표현해 냅니다. 대표적인 주자가 IE6(인터넷 익스플로러 6)이 있겠습니다. 상당히 오래된 브라우저라서 웹표준을 지키지 못하는 부분이 너무 많지만 사용률이 가장높아 표준이 되버리고만 이런 모순적인 상황이 발생합니다. 따라서 같은 코드로는 같은 내용을 출력하기에 큰 문제가 있을 때 바로 밑에와 같은 CSS핵을 사용함으로써 해결이 가능합니다. 각 브라우저마다의 미묘한 차이를 CSS로 잡아주는 것입니다. 특정한 문구가 들어가면 어떠한 브라우저는 읽고 어떠한 브라우저는 읽지 못하는 방법을 사용한것이 바로 CSS핵입니다. 다같이 살펴볼까요 ?

Netscape 4 제외시키기
Netscape 4은 media속성값에 "screen"이외의 값이 올 경우 읽어 들이지 못하는 것을 이용한 방법이다.
<link rel="stylesheet" type="text/css" href="/css/style.css" media="all" />
이나
<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen, tv" />
라고 지정할 경우 Netscape 4은 읽어 들이지 못한다.

부분적으로 읽어들이지 못하게 하는 경우에는 Caio's hack인 /*/*/를 이용한다. 보통 코멘트는 */으로 닫지만 /*/으로 닫게 되면 Netscape 4에서는 인식되지 않는다. 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Netscape 4에서도 문제없이 적용된다.
p { /*/*/ color:white; /* */ }

Mac IE 4.5, Netscape 4 제외시키기
@import룰로 url()함수를 이용하여 외부 스타일시트를 이중인용부호로 지정한다.
Mac IE 4.5는 @import에 url()함수를 이용하는 경우, 단일 인용부호와 인용부호가 없는 것이 아니면 읽어 들이지 못한다. Netscape 4은 @import를 지원하지 않는다.
@import url("/css/style.css")

Mac IE 5 제외시키기
CSS소스 안의 코멘트 서식을 /* \*/ 이라는 방식으로 기술한다. holly hack이라고 하며 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Mac IE 5에서도 문제없이 적용된다.
p { /* \*/ color:white; /* */ }

Win IE 4~5 제외시키기
셀렉터 바로 뒤에 /**/라고 적는다.
p/**/ { color:white;}

Win IE 4~5, Mac IE 4.5~5 제외시키기
프로퍼티와 값을 구분하는 콜론(;) 앞에 코멘트에 스페이스를 포함하여 /* */라고 적는다.
p { color/* */:white;}

Win IE 4~6, Mac IE 4, Netscape 4 제외시키기
셀렉터 앞에 html>body를 붙인다.
html>body p { color:white;}

Win IE 6 제외시키기
프로퍼티와 값을 구분하는 콜론(;)의 앞에, 스페이스와 코멘트를 /**/라고 적는다.
p { color /**/:white;}

star hack
셀렉트 앞에 *html를 붙이면, Win IE 4~6, Mac IE 4~5 등에는 스타일이 적용되고, 그 외의 브라우저에서는 적용되지 않는다.
*html p { color:white; }

underscore hack
프로퍼티의 가장 앞부분에 언더스코어(_)를 붙이면, Win IE 4~6에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.
p { _color:white; }

hash hack
프로퍼티의 앞에 샾(#)을 붙이면, Win IE 4~6, Mac IE 5, Opera 7, Mozilla, Firefox에서는 스타일이 적용되고, 다른 브라우저에는 적용되지 않는다.
p { #color:white; }
 
star 7 hack
셀렉트의 앞에 html*을 붙이면, Win IE 5.5~6, Mac IE 5, Safari 등에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다. html*과 셀렉터사이에 스페이스를 넣지 않는다.
html*p { color:white; }

xmlns hack
속성셀렉터를 이용하여, html요소에 붙이는 xmlns속성을 스타일적용을 위하여 사용하는 방법.
Mozilla, Fire-fox, Opera 7/8, Safari 등 속성셀렉터를 서포트하는 브라우저에서는 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.
html[xmlns] h1 { color:red; }

:root hack
셀렉터의 앞에 :root를 붙이면, Mozilla, Firefox, Mac IE 5, Safari 등 :root유사클래스를 지원하는 브라우저에만 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.
:root h1 { color:red; }

Tantek box model hack
voice-family프로퍼티를 이용한 가장 유명한 박스모델핵.
div#content { width:500px; voice-family: ""}""; voice-family:inherit; width:400px; }

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 5-5.5용 패스필터
@media tty { i{content:"";/*" "*/}}@import '/css/style.css';/*";} }/* */
모던브라우저용 패스필터
@import "null?"{"; @import "/css/style.css"; @import "null?"}";

이 이외에도 많은 핵(hack)이 존재합니다. CSS Filters (dithered.com)에 다양한 CSS hack이 잘 정리되어 있으므로 참고하시길 바랍니다.

2006년 7월 18일, IE7용의 핵(hack)을 추가.
IE7에만 적용
*+html body

IE7를 포함한 모든 IE에만 적용하는 방법은
*+html body, * html body

IE7을 포함한 모던브라우저에 적용(IE6이하를 제외)
html>body

IE7을 제외한 모던브라우저에만 적용
html>/**/body