CSS 핵 사용법
CSS/웹이야기
코딩기준을 div { width:100px; }으로 잡고 이코드를 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?"}";
