CSS코드를 올바로 작성하면 CSS를 지원하는 모든 브라우저에서 올바로 동작해야합니다. 하지만 불행하게도 브라우저에는 버그도 있고 일괄적으로 동작하지도 않습니다. 이를 해결하기 위한 아주 강력한 무기가 바로 핵(hack)과 필터(filter)입니다.
하지만 이런 강력한 기능을 사용할 때는 그에 따른 의무사항도 지켜야 하겠죠.
이런 핵과 필터에 대한 기능과 사용방법을 이번 포스팅에서 설명하겠습니다. ㅋㅋ
필터는 브라우저에 따라서 특정 규칙을 적용되도록 하거나 적용되지 않도록 하는 방법입니다.
핵은 원하는 방법대로 브라우저를 동작시키려고 사용하는 쉽게 말해 꼼수입니다;;
핵은 브라우저에 따라 각기 다른 규칙을 적용하기 위해 필터를 사용합니다. 또한 핵을 이용해 브라우저에서 원하는 결과를 얻기 위해 올바르지 않은 CSS를 사용하기도 합니다. 다시말해 CSS필터는 브라우저마다 다른 규칙을 적용하기 위해 사용하는 핵의 한 종류라고 할 수 있습니다.
핵 사용시 유의점
핵과 필터에 많이 의존하게 되면 오히려 복잡한 코드로 인해 기존의 코드를 읽기 어려워지게 될 수도 있습니다.
따라서 핵을 사용하기 전 단순하고 명료한 코드 관리를 우선시 하고 핵을 위한 스타일시트 파일을 별도로 만드는 것이 좋습니다.
유용한 핵
01. 언더바 핵 ( _ ) : div { _width:100px; } - Win IE 4~6에서만 스타일만 적용
02. 닷 핵 ( . ) : div { .width:100px; } - Win IE 6~7에서만 스타일 적용
03. 해시 핵 ( # ) : div { #width:100px; } - Win IE 5.5~6, Mac IE 5, Opera 7, Mozilla 계열, Firefox에 스타일 적용
04. 스타 핵 : *html div { width:100px; } - Win IE 4~6, Mac IE 4~5에 적용
05. 스타7 핵 : html*div { width:100px; } - Win IE 5.5~6, Mac IE 5, Safari에 적용
06. xmlns 속성 핵 : html[xmlns] div { width:100px; }
- Mozilla, Firefox, Opera, Safari 등 속성 선택자를 지원하는 브라우저에 적용
07. :root 가상클래스 핵 : :root div { width:100px; }
- Mozilla, Firefox, Mac IE 5, Safari 등 가상클래스를 지원하는 브라우저에 적용
08. IE 8에서만 적용 : div { width/***/:100px; } - IE 8에서만 적용
09. IE 8을 포함한 IE버젼에서만 적용 : div { width:100px＼; } - IE에서만 적용
10. IE 7, Opera 적용 : *+html body div { width:100px; }
- IE 7, Opera 8 이후 버전 적용, Opera를 배제한 IE7전용으로 하고 싶을 때는
*+html>/**/body 로 Opera 전용 속성 기술
11. IE 7 적용 : *:first-child+html div { width:100px; }
- IE 7에서만 적용되고, 이외의 브라우저는 앞에서 기술한 셀럭터의 속성에 적용
12. Netscape 4 제외시키기 : <link rel="stylesheet" type="text/css" href="/css/style.css" media="all" />
- Netscape는 media 속성이 screen이 아닌 경우 외부 스타일시트를 읽지 못하는 버그가 존재함
13. 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 지원하지 않음
14. Mac IE 5 제외시키기 : div { /*＼*/width:100px; /* */ } - Mac용 IE 5에서는 적용시키기
15. Win IE 4~5 제외시키기 : div/**/ { width:100px; } - Win용 IE 4~5에서는 적용 제외시키기
16. Win IE 4~5, Mac IE 4.5~5 제외시키기 : div { width/* */:100px; }
- Win용 IE 4~5, Mac용 IE 4.5~5에서는 적용 제외시키기
17. Win IE 6 제외시키기 : div { width/**/:100px; } - Win용 IE 6에서는 적용 제외시키기
18. IE 7, IE 8에 적용: html>body div { width:100px; } - IE 7, IE 8에서만 적용
19. Opera 9,27 및 하위 버전에서만 적용 : html:first-child div { width:100px; }
- Opera 9.27 및 하위버전에서만 적용
20. Win IE 6 패스필터
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/css/style.css" media="all" /><![endif]->
21. Win IE7 패스필터
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="/css/style.css" media="all" /><![endif]->
22. 모던브라우저 패스필터 (Win IE 5.5 이하, Mac IE 5,Opera 8 이하, Netscape 4 이하 제외)
@import "null?"{";
@import "/css/style.css";
@import "null?"}";
