CSS핵(hack) 정리
2006-06-28 Wednesday Posted in Web Standards | 30 Comments »
브라우저의 버그를 hack으로 해결할 수 있는 부분이 많이 있습니다만 그보다 사이트의 CSS구조를 설계할때 각 브라우저의 속성을 파악해고 조금만 더 주의해서 설계를 하시면 hack을 사용하지 않고도 해결할 수 있는 부분이 많이 있습니다. hack을 사용할때는 조금 더 신중하게 사용하시는게 좋습니다. 특히 예전 버전의 브라우저에 적용되었던 hack이 새로운 브라우저에 영향을 끼칠 가능성이 있으며 CSS를 변경 할 때 업무효율을 저하시키는 한 요인이 될 것 입니다.
Intenet Explorer계열의 브라우저에서 제대로 표시가 되지 않는 경우에는 일단 width값이나 float관련 설정을 변경해 보시는 것도 하나의 방법인 것 같습니다. 혹시 Intenet Explorer에서 float와 margin을 같은 방향으로 설정했을때 문제가 생긴 경우라면 이 포스트를 참조하시기 바랍니다.
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이 동시 적용이 되는 문제를 김진태님이 지적해 주셨습니다.
