CSS 핵
UI개발 스토리
브라우저마다 HTML렌더링하는 방식이 조금씩 차이가 나고, 때로는 버그가 존재하는 관계로(망할 IE) 모든 CSS 코드가 모든 웹브라우저에서 똑같이 보이지 않습니다.
따라서 이러한 특성을 이용하여 특정 브라우저를 제외하거나, 특정 브라우저에서만 CSS를 적용하는 기법을 CSS 핵(Hack) 이라고 부르죠...
그래서 문법적으로 맞지 않거나, 특정 브라우저에만 적용되는 비표준인 경우가 많기 때문에 이러한 CSS핵은 어쩔 수 없는 경우가 아니면 사용하지 않아야 합니다. 또한, 단순히 눈앞의 문제만을 해결하기 위해 핵을 사용하면 나중에 페이지를 수정하거나 브라우저의 버전이 올라갈 때에 문제가 생기는 경우도 있구요.
CSS핵은 이런게 있다는 것도 알아두고, CSS핵을 사용하기 이전에 근본적으로 디자인을 수정하거나 다른 표준 태그로 해결하는게 좋을 듯 하네요.
어쨌든 일단 현존 CSS핵에 대한 정리!
http://centricle.com/ref/css/filters/
서핑하다 찾은 사이트인데 CENTRICLE.COM 의 CSS filters 페이지가 가장 잘 되어 있는 것 같습니다.
이제까지 알려진 CSS핵의 종류와 현존하는 거의 모든 웹 브라우저에서 적용되는지의 여부를 알기쉽게 표로 보여줍니다. 각 항목을 눌러보면 해당 핵의 예제도 볼 수 있네요.
http://www.communis.co.uk/dithered/css_filters/
웹표준 교과서에서 소개하는 CSS 핵 & 필터 안내 페이지
그 외에 평소에 자주 사용하는 팁으로서의 CSS 핵 정리는 아래에 정리.
Netscape 4 배제하기
<link rel="stylesheet" type="text/css" href="/css/style.css" media="all" />
Netscape 는 media 속성이 screen 이 아닌 경우 외부 스타일시트를 읽지 못하는 버그가 존재함.
Win IE 3~4, Mac IE 4~4.5, Netscape 4 배제하기
@import url("/css/style.css")
Win IE 4, Mac IE 4 는 인용부호가 "가 아니면 읽지 못하는 버그 존재. IE 3과 Netscape 4는 @import 지원하지 않음.
Mac IE 5 배제하기
H1 { /* \*/ color:red; /* */ }
Holly 핵이라 하며, 주석 안의 내용이 적용되지 않음.
Win IE 4~5 배제하기
H1/**/ { color:red; }
셀렉터 뒤에 /**/ 삽입.
Win IE 4~5, Mac IE 4.5~5 배제하기
H1 { color/* */:red; }
속성과 속성값을 구분하는 콜론(:) 앞에 /* */ 삽입.
Win IE 4~6, Mac IE 4, Netscape 4 배제하기
html>body H1 { color:red; }
셀렉터 앞에 html>body 삽입.
Win IE 6 제외시키기
H1 { color /**/:red; }
속성과 속성값을 구분하는 콜론(:) 앞에 스페이스와 /**/ 삽입.
언더스코어 핵 (_)
H1 { _color:red; }
Win IE 4~6 에 적용.
닷핵 (.)
H1 { .color:red; }
속성 앞에 . 삽입. Win IE 6~7 에만 적용. 타 브라우저는 정확히 확인하지 못했습니다.
이 핵에 대해선 계속 확인중인데 블로그스피어나 여타 서적에는 전혀 언급이 없는 이상한 핵(?)입니다.
해시 핵(#)
H1 { #color:red; }
속성 앞에 # 삽입. Win IE 4~6, Mac IE 5, Opera 7, Mozilla계열, Firefox 에 적용.
스타 핵
*HTML H1 { color:red; }
셀렉터 앞에 *html 삽입. Win IE 4~6, Mac IE 4~5 에 적용.
스타7 핵
HTML*H1 { color:red; }
셀렉터 앞에 html* 삽입(공백없이). Win IE 5.5~6, Mac IE 5, Safari 에 적용.
xmlns 속성 핵
HTML[xmlns] H1 { color:red; }
셀렉터 앞에 속성 선택자를 삽입. Mozilla, Firefox, Opera, Safari 등 속성 선택자를 지원하는 브라우저에 적용.
:root 가상클래스 핵
:root H1 { color:red; }
셀렉터 앞에 :root 가상클래스 삽입. Mozilla, Firefox, Mac IE 5, Safari 등 가상클래스를 지원하는 브라우저에 적용.
Tantek 박스모델 핵
H1 {
width:500px;
voice-family: ""}"";
voice-family:inherit;
width:400px;
}
Tantek Celik 이 고안한 유명한 박스모델 핵. Win IE 4~5, Mac IE 4, Netscape 4 에서는 voice-family 속성 이전의 스타일 적용. 그외의 브라우저는 뒤의 속성 적용.
단순 박스모델 핵
H1 {
width:500px;
w\idth:400px; //Win IE 6, Mac IE 5, Mozilla, Opera, Safari
\width:450px; // only Win IE 5
}
속성의 첫번째, 두번째 글자 사이에 \를 삽입하면 Win IE 6, Mac IE 5, Mozilla, Opera, Safari 에 적용.
추가로 속성의 앞에 \를 삽입하면 Win IE 5 에만 적용.
IE 7, Opera 적용하기
*+html body H1 { color:red; }
셀렉터 앞에 *+html body 삽입. IE 7, Opera 8 이후 버전 적용. Opera를 배제한 IE7 전용으로 하고 싶을 때는 *+html>/**/body 로 Opera 전용 속성 기술.
IE 7 적용하기
*:first-child+html H1 { color:red; }
셀렉터 앞에 *:first-child+html 삽입. IE 7에만 적용되고, 이외의 브라우저는 앞에서 기술한 셀렉터의 속성 적용.
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 6 패스필터(?)
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/css/style.css" media="all" /><![endif]-->
Win IE 7 패스필터(?)
<!--[if gte IE 7]><link rel="stylesheet" type="text/css" href="/css/style.css" media="all" /><![endif]-->
모던브라우저 패스필터 (Win IE 5.5 이하, Mac IE 5, Opera 8 이하, Netscape 4 이하 제외)
@import "null?"{";
@import "/css/style.css";
@import "null?"}";
저의 주 작업 브라우저는 IE6, IE7, FF2, OP9 입니다. 개인적으로 CSS 핵은 거의 사용하지 않지만, 폼 (특히 체크박스, 라디오 버튼) 의 형태가 각 브라우저마다 틀려서 IE 6~7 에서 폼의 마진을 조절하기 위해 언더스코어 핵, 닷핵 만을 사용하고 있습니다.
덧붙여... 우리나라에서 최고의 사용률을 보여주는 IE가 CSS Spec을 제대로 지원하지 않으면서도 이를 업데이트하지 않는 이유는, 아이러니컬하게도 브라우저간 버그를 보정하기 위한 CSS핵도 큰 이유를 차지하고 있는 듯.
IE 6에서 갑자기 IE 7 또는 표준스펙 풀 지원으로 CSS 지원 스펙을 수정하면 현재 IE 6 기준으로 만들어진 사이트나 IE 6용 패스필터, 핵을 사용한 엄청난 수의 사이트(특히 우리나라)는 어떻게 될지...
중요 포인트!!
1. 구조를 설계할 때 절대 CSS핵 위주로 설계하지 말 것.
2. 단발성 CSS 핵보다는 패스필터 사용 권장.
3. CSS핵은 어쩔 수 없는 경우에만 사용할 것.