CSS hack 정리

[css-tip]CSS hack 정리
다양한 브라우저와 브라우저의 버그를 이용하여 특정 브라우저에만 css를 적용하는 것을 "CSS 핵"이라고 한다. 크로스브라우징을 위해 사용을 하고 있지만 사용하지 않고 구현하기를 권장한다.

css 핵은 사용하지 않는 것이 좋다.
새로운 브라우저가 생겼을 경우나 기존 브라우저의 버전 변경시 다시 손을 봐야 하는 경우가 생길 수도 있으며 css 문법상 올바르지 않는 것도 있을 수 있고 무엇보다 크로스브라우징, 웹 표준에 맞지 않아 올바른 CSS 라고 볼 수가 없다.

스타핵 (star hack)
셀렉트 앞에 * 을 붙히며 Win IE 4~7 에만 적용(IE8, FF에는 적용 안됨)
예> P { padding:3px; *padding:0px; } /* IE8, FF는 padding:3px, IE4~7는 padding:0px 적용 */

셀렉트 앞에 *html  을 붙히며 Win IE 4~6, Mac IE 4~5 에만 적용
예> * html p { padding:3px; } /* 맨앞에 *html 을 붙힌다. */

언더스코어 핵 (underscore hack)
속성의 가장 앞부분에 언더스코어(_)를 붙이며 Win IE 4~6에만 적용

예> p { _padding:3px; } /* padding 앞에 _ 를 붙힌다. */

 

해시 핵 (hash hack)
속성의 앞에 # 를 붙이며 Win IE 4~6, Mac IE 5, Opera 7, Mozila, Firefox 적용

(CSS의 문법상 속성의 앞에 #를 두는 것은 문법적으로 바르지 않다.)

예> p { #padding:3px; } /* padding(속성) 앞에 #를 붙힌다. */

 

스타 7 핵 (star 7 hack)
셀렉트 앞에 html* 를 붙이며 Win IE 5.5~6, Map IE 5, Safari 에만 적용

(html* 과 선택자 사이에 공백을 두면 안된다.)

예> html*p { padding:3px; }

 

IE7 전용핵
셀렉트 앞에 *:first-child+html 를 붙히며, IE 7에만 적용

예> *:first-child+html p { padding:3px; }

 

사파리용 핵
body:first-of-type
예> body:first-of-type #wrap

 

이밖에도 브라우저 배제를 위한 핵과 박스모델 핵 패스필터 등이 있다.

 

 

소스 예>

style="text-align:left;padding-left:5px;*padding-left:7px;_padding-left:0px;"

 

소스 예 설명> 위 소스 중 padding 부분

[ff,ie8]padding-left:5px;

[ie7]*padding-left:7px;

[ie6]_padding-left:0px;