CSS핵(hack) 정리

브라우저의 버그를 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이 동시 적용이 되는 문제를 김진태님이 지적해 주셨습니다.