css 핵 종류

CSS hack 은 표준은 아니지만, 브라우져의 CSS 해석 오류를 이용하여 특정 브라우져만을 위한 코드를 넣는 방법이다.
표준으로 CSS 를 작성을 하고 표준을 해석하는 것에 문제가 있는 브라우져 만을 위한 코드를 사용하여 문제를 해결하는 것.  

1. 언더스코어(언더바)핵 (_)
div{ _width:300px; }
Win IE 4~6에서만 CSS적용

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

2. 닷핵 (.)
div{ .width:300px; }
Win IE6~7에만 CSS 적용

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

3. 해시 핵(#)
div{ #width:300px; }
Win IE 4~7, Mac IE 5, Opera 7, Mozilla계열, Firefox에 CSS적용

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

4. 스타핵
*html div{ 300px; }
Win IE 4~6, Mac IE4~5에 CSS적용

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

5. 스타7핵
html*div { width:300px; }
win IE5.5~6, Mac IE5, Safari에 적용

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

6. xmlns핵
html〔xmlns〕 div { width:300px; }
Mozilla, Firefox, Opera, Safari등 속성 선택자를 지원하는 브라우저에 적용

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

7. IE8 을 포함한 IE버전에만 적용하기
div { width:300px＼; }
IE8 에서만 적용

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

8. root 가상클레스 핵
root div { width:300px; }
Mozilla, Firefox, Mac IE 5, Safari등 가상 클래스를 지원하는 브라우저에 적용

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

9. IE 7적용하기
*:first-child+html div{width:300px;}
IE7 에만 적용되고, 이외의 브라우저는 앞에서 기술한 셀렉터의 속성 적용

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

10. Netscape4 제외시키기
<link rel="stylesheet" type="text/css" href="/css/style.css" media="all"/>
Netscape는 media속성이 screen이 아닌 경우 외부 스타일시트를 읽지 못하는 버그가 존재함

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

11. 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 지원하지 않음

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

12. Mac IE5 제외시키기
div { /*\*/ width:100px;/**/}

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

13. Win IE 4~5 제외시키기
div/**/{width:100px;}

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

14. Win IE 4~5, Mac IE4.5~5 제외시키기
div {width/* */:100px;}
Win용 IE4~5, Mac용 IE4.5~5에서는 적용 제외시키기

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

15. Win IE6 제외시키기
div {width/**/:100px;}
Win용 IE6 에서는 적용 제외시키기

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

16. IE7, IE8 에 적용하기
html>body div {width:100px;}
IE7,IE8 에서만 적용

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

17. Opera 9.27 및 하위버전에서만 적용하기
html:first-child div {width:100px;}
Opera 9.27 및 하위버전에서만 적용

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

18. Win IE6 패스필터

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

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

19. Win7 패스필터

<!--[if get IE 7]><link rel="stylesheet" type="text/css" href="/css/styel.css" media="all"/><![endif]-->
Opera 9.27 및 하위버전에서만 적용

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

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

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


##### 브라우저별 핵

-webkit-, -moz-, -o-

• webkit : 크롬, 사파리(web kit 기반)
• moz : 파이어폭스
• o : 오페라

지원 버전은 FF 3.5+, Safari 4+, Opera 10.0+

 

조건부 주석

조건의 내용	예제	조건에 대한 설명
!	[If !IE]	IE가 아닐 경우(부정일 경우)에 참 값을 가진다.  > IE가 아닐 경우 주석안의 소스 렌더링
lt	[If lt IE 9]	버전 값을 항상 필요로 하며 해당 버전 미만의 버전의 IE에서   항상 참 값을 가진다. (lt = less than)  > IE9 미만의 브라우저에서 주석안의 소스 렌더링
lte	[If lte IE 9]	버전 값을 항상 필요로 하며 해당 버전 이하의 버전에서    항상 참 값을 가진다. (lte = less than or equal)  > IE9 이하의 브라우저에서 주석안의 소스 렌더링
gt	[If gt IE 6]	버전 값을 항상 필요로 하며 해당 버전을   초과하는 버전의 IE에서 항상 참 값을 가진다. (gt = greater than)  > IE6 초과(IE7이상)의 브라우저에서 주석안의 소스 렌더링
gte	[If gte IE 6]	버전 값을 항상 필요로 하며 해당 버전 이상의 버전의   IE에서 항상 참 값을 가진다. (gte = greater than or equal)  > IE6 이상의 브라우저에서 주석안의 소스 렌더링
()	[If !(IE 7)]	세부적인 표현을 위한 형식이다. 수학의 계산과 프로그래밍과   동일하게 괄호 안의 표현식부터 먼저 처리된다.   > IE7 브라우저가 아닐 경우 주석안의 소스 렌더링
&	[if (gt IE 5)&(lt IE 7)]	프로그래밍에서의 &&와 동일하게 "그리고"를 의미한다.
|	[if (IE 6)|(IE 8)]	프로그래밍에서의 ||와 동일하게 "또는"을 의미한다.  > IE6 또는 IE8 브라우저일 경우에 주석안의 소스 렌더링