CSS핵(hack) 정리

이 포스팅에서 언급하고 있는 CSS핵(hack)들은 대부분 옛날 브라우저들을 대상으로 한 것들이라 아마도 활용도가 그다지 높지 않으리라 생각하지만…해외사이트에 사용하고 있는 경우가 많으므로 알아두면 해외사이트를 분석할때도 상당히 도움이 되리라 생각한다. 또 CSS핵(hack)의 사용시 많은 주의를 기울여야 하며 CSS 문법상 맞지 않는 경우도 많으므로 주의하여야 한다. 일단 웹표준에 의한 사이트 제작이 익숙해지면 브라우저의 버그를 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

 

 

 

 

출처:http://blog.naver.com/blueroll80/28397344