핵과 필터 사용에 대한 주의사항
CSS는 언어적인 측면에서 상위 버전 호환성을 잘 고려해서 설계되었다.
브라우저가 특정 선택자를 이해하지 못할 경우 해당 규칙을 전혀 적용하지 않게 된다. 마찬가지로 특정 속성이나 값을 이해하지 못할 경우 해당 선언을 모두 무시해버린다. 이런 기능으로 인해 새로운 선택자, 속성, 값이 추가되더라도 구버전의 브라우저에는 별다른 영향을 주지 않게 된다.
이런 특성을 이용하면 구식 브라우저에서도 안전하게 동작하면서도 최신 브라우저를 위한 규칙과 선언을 사용할 수 있다. 새로운 버전의 브라우저가 나올 경우 기존에 필터를 써야했던 CSS가 제대로 동작하게 될 것이다. 구버전의 브라우저에서 문제가 있어서 고급 CSS 기능을 사용했다면 새로운 버전에서는 이런 문제가 해결될 것이다. 이런 특성 때문에 필터를 이용해서 지원하지 않는 CSS를 사용하는 방법은 상대적으로 안전하다고 하겠다. '상대적'이라고 한 것은 브라우저가 언젠가는 새로운 버전이 나와서 해당 문제가 해결되겠지만 고치려고 했었던 버그는 다시 나타날 것이기 때문이다.
코드 해석을 잘못하는 버그에 기반한 필터를 사용하는 건 좀 더 위험한 선택이다. 왜냐하면 기능이 아니라 버그에 의존하고 있기 때문이다. 앞선 방법과 마찬가지로 코드 해석을 잘못하는 버그만 해결되고, 해결하고자 했는 문제는 그대로 남아 있다면 오히려 그 문제가 두드러지게 될 것이다. 더 문제가 되는 건 코드 해석 버그는 새로운 버전이 나오면 거의 해결될 것이다. 예를 들어 파이어폭스가 새로운 버전이 나왔는데 코드 해석 관련 버그가 있다고 치자. 그 버그를 이용해서 IE박스 모델 문제 해결을 위한 필터로 적용했다면 그 버전의 파이어폭스에서는 모두 너비값 계산 때문에 아마 많은 사이트가 깨져보이게 될 것이다.
또 알아두어야 할 것은 핵과 필터 때문에 유효성 검사에서 실패할 수 있다는 사실이다. 예를 들어 CSS3 선택자를 이용하면 CSS2 스펙의 유효성 검사를 통과하지 못한다. 하지만 몇몇 브라우저가 해당 선택자를 지원한다면 최종 스펙에 추가될 수 있을 것이다. 이런 상황이라면 유효한 CSS3를 쓰고 있을 경우 CSS2 유효성 검사를 통과하지 못하는 건 그리 큰 문제가 안된다. 더 큰 문제는 옳지 않은 문자를 사용해서 나중에 나올 브라우저에서 해석 오류가 발생할 가능성이 있다는 것이다.
아직 지원되지 않는 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 타입 선택자 앞에 오도록 해서 다른브라우져에서 적용되지 않지만 IE계열에서만 적용되는 스타일시트를 정의할 수 있다.
이 스타핵은 IE7에서 적용되지 않는다.
*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~7, 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이 잘 정리되어 있으므로 참고하시길…
!important 핵
스타핵은 IE6을 구분하기 위하여 2가지의 선언을 해야한다. 그러나 한 규칙선언안에서 IE6 이하버전을 위한 선언과 다른 브라우저를 위한 선언을 하고 싶다면 !important 핵을 사용하면된다.
#top {
position:fixed !important;
position:static;
}
IE6 버전에서는 한 규칙안에 여러개의 속성을 사용할 수 없으므로, 첫번째 선언을 무시하고 두번째 선언을 적용한다. 나머지 브라우져에서는 important 키워드가 쓰여진 속성의 우선순위를 높게 인식하기때문에 첫번째 선언을 적용한다.
언더바핵
가장 많이 알려진 CSS핵입니다.
iE6이하 버전에서는 속성정의자의 _ (언더바)를 무시하고, 인식하는 점을 응용한 핵
.under {display:inline; _display:block}
두번째 정의된 display 의 _ (언더바)가 없다면, 모든 브라우져에서 display:block 이 적용될 것이나 _ (언더바)가 있기때문에 두번째 속성정의자는 IE6 이하 브라우져를 제외하곤 잘못된 속성정의자로 인식. 따라서 IE6에서만 _display 를 display 로 인식하기때문에 display:block 속성이 적용된다.
IE7에만 적용
*+html body
IE7를 포함한 모든 IE에만 적용하는 방법은
*+html body, * html body
IE7을 포함한 모던브라우저에 적용(IE6이하를 제외)
html>body
IE7을 제외한 모던브라우저에만 적용
html>/**/body
출처 - http://blog.naver.com/ssaeju?Redirect=Log&logNo=60050225325
