CSS핵

브라우저 마다  HTML / XHTML을 불러오는 방식이 차이가 조금씩 나기도 하며,

가끔 버그가 존재하므로 모든 css코드가 모든 브라우저에서 똑같이 보이지 않습니다.

크로스 브라우징(여러종류의 브라우저를 사용하는것)을 위해 특정 브라우저에서 css를 적용하거나 제외하는 기법을 css핵이라고 합니다.

 

 --------------------------------------------------------------

 

 ※ 언더스코어(언더바)핵 (_)

div{ _width:300px; }

Win IE 4~6에서만 CSS적용

 

 ---------------------------------------------------------------

 

 ※ 닷핵 (.)

div{ .width:300px; }

Win IE6~7에만 CSS 적용

 

 ---------------------------------------------------------------

 

 ※해시 핵(#)

div{ #width:300px; }

Win IE 4~7, Mac IE 5, Opera 7, Mozilla계열, Firefox에 CSS적용

 

 ---------------------------------------------------------------

 

 ※스타핵

*html div{ 300px; }

Win IE 4~6, Mac IE4~5에 CSS적용

  ---------------------------------------------------------------

 ※스타7핵

html*div { width:300px; }

win IE5.5~6, Mac IE5, Safari에 적용

 

  ---------------------------------------------------------------

 

 ※ xmlns핵

html〔xmlns〕 div { width:300px; }

Mozilla, Firefox, Opera, Safari등 속성 선택자를 지원하는 브라우저에 적용

 

  ---------------------------------------------------------------

 

 ※ IE8 을 포함한 IE버전에만 적용하기

div { width:300px＼; }

IE8 에서만 적용

 

 ---------------------------------------------------------------

 

 ※ root 가상클레스 핵

root div { width:300px; }

Mozilla, Firefox, Mac IE 5, Safari등 가상 클래스를 지원하는 브라우저에 적용

 

 ---------------------------------------------------------------

 

 ※ IE 7적용하기

*:first-child+html div{width:300px;}

IE7 에만 적용되고, 이외의 브라우저는 앞에서 기술한 셀렉터의 속성 적용

 

 ---------------------------------------------------------------

 

 ※ Netscape4 제외시키기

<link rel="stylesheet" type="text/css" href="/css/style.css" media="all"/>

Netscape는 media속성이 screen이 아닌 경우 외부 스타일시트를 읽지 못하는 버그가 존재함

 

 ---------------------------------------------------------------

 

 ※ Win IE 3~4, Mac IE 4~4.5 Netscape4 제외시키기

@import url("/css/style.css")

Win IE 4, Mac IE4는 인용부호가 "가 아니면 읽지 못하는 버그 존재. IE 3과 Netscape 4는 @import 지원하지 않음

 ---------------------------------------------------------------

 ※  Mac IE5 제외시키기

div { /*\*/ width:100px;/**/}

 ---------------------------------------------------------------

 ※ Win IE 4~5 제외시키기

div/**/{width:100px;}

 ---------------------------------------------------------------

 ※ Win IE 4~5, Mac IE4.5~5 제외시키기

div {width/* */:100px;}

Win용 IE4~5, Mac용 IE4.5~5에서는 적용 제외시키기

 ---------------------------------------------------------------

 ※ Win IE6 제외시키기

div {width/**/:100px;}

Win용 IE6 에서는 적용 제외시키기

 ---------------------------------------------------------------

 ※ IE7, IE8 에 적용하기

html>body div {width:100px;}

IE7,IE8 에서만 적용

---------------------------------------------------------------

 ※ Opera 9.27 및 하위버전에서만 적용하기

html:first-child div {width:100px;}

Opera 9.27 및 하위버전에서만 적용

---------------------------------------------------------------

 ※ Win IE6 패스필터

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/css/styel.css" media="all"/><![endif]-->

---------------------------------------------------------------

 ※ Win7 패스필터

<!--[if get IE 7]><link rel="stylesheet" type="text/css" href="/css/styel.css" media="all"/><![endif]-->

Opera 9.27 및 하위버전에서만 적용

---------------------------------------------------------------

 ※ 모던브라우저 패스필터 (Win IE 5.5이하, Mac IE5, Opera8이하, Netscape 4이하 제외)

@import "null?"{";
@import "/css/style.css";
@import "null?"}";

---------------------------------------------------------------

[출처] CSS핵|작성자 Demoon