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
'Web(웹) Study > HTML & CSS' 카테고리의 다른 글
IE 7 에서 dt, dd 좌측여백이 생기는 문제 (0) | 2008.01.11 |
---|---|
CSS의 기초 (0) | 2008.01.11 |
셀렉트 박스 그룹화 시키기~ (0) | 2007.12.24 |
IE6,IE7 ,FireFox 에 대해 CSS 맞추기 (0) | 2007.12.22 |
onClick // onmouseup // onmousedown // onkeydown / onKeyUp // onkeypress (0) | 2007.12.05 |