http://www.nmindplus.com/2006/06/28/css-hack/
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, IE 7 등 속성셀렉터를 서포트하는 브라우저에서는 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.
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이하)
* html
IE 7 and below (IE7이하)
*:first-child+html, * html
IE 7 only (IE7전용)
*:first-child+html
IE 7 and modern browsers only (IE7과 모던브라우저)
html>body
Modern browsers only (not IE 7) (IE7이외의 모던 브라우저)
html>/**/body
Recent Opera versions 9 and below (최근의 Opera9이하)
Opera 9와 Safari 동시적용
html:first-child
Safari에만 적용
Opera 9와 Safari 동시적용
/* XXX \*/로 코멘트 아웃하고 html:\66irst-child
를 덧붙임으로써 Safari에만 CSS가 적용된다.
/* safari only \\*/ html:\\66irst-child div.globalContainer{ margin: 0 0 0 18px; } /* end */
내용중 잘못된 부분이나 수정, 추가가 필요한 부분이 있으시면 의견 부탁드립니다.
Opera와 Safari용 css hack이 동시 적용이 되는 문제를 김진태님이 지적해 주셨습니다.
댓글 없음:
댓글 쓰기