Jace's Blog

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

Netscape 4 제외시키기
Netscape 4은 media속성값에 "screen"이외의 값이 올 경우 읽어 들이지 못하는 것을 이용한 방법이다.

이나

라고 지정할 경우 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에만 적용
IE7에만 다른 스타일을 적용하는 방법은 해당 셀렉터의 앞에
*+html body이나(*+html body는 Opera8~에도 적용되어 버리는 문제가 있기에 *+html>/**/body로 Opera8~ 전용 스타일을 기술하여야 한다. 참조:IE7のCSSバグとOpera CSS Hack)
*:first-child+html을 기술한 다음 해당 셀렉터와 스타일을 작성하면 된다. 예를 들어 #banner라는 id셀렉터에 적용시키는 경우
*:first-child+html #banner {
　　　　　　：
　　[IE7용 스타일을 기술]
　　　　　　：
}라고 기술한다. IE7이외의 브라우저를 위한 원래의 #banner 스타일 설정은 IE7용 스타일 설정 앞에 기술한다(순서가 바뀌면 원하는 효과를 얻지 못한다. 참조:IE7 の CSS ハック)
#banner {
　　　　　　：
　　[IE7이외의 브라우저를 위한 스타일을 기술]
　　　　　　：
}
*:first-child+html #banner {
　　　　　　：
　　[IE7용 스타일을 기술]
　　　　　　：
}IE 6 and below （IE6이하）
* htmlIE 7 and below （IE7이하）
*:first-child+html, * htmlIE 7 only （IE7전용）
*:first-child+htmlIE 7 and modern browsers only （IE7과 모던브라우저）
html>bodyModern browsers only (not IE 7) （IE7이외의 모던 브라우저）
html>/**/bodyRecent Opera versions 9 and below （최근의 Opera9이하）
html:first-childSafari에만 적용
/* XXX */로 코멘트 아웃하고 html:66irst-child를 덧붙임으로써 Safari에만 CSS가 적용된다.
/* safari only */
html:66irst-child div.globalContainer{
margin: 0 0 0 18px;
}
/* end */


출처 : http://www.nmindplus.com