IE 핵 (css hack)과 IE filter

IE 핵 (css hack)

IE6 핵(underscore hack)

div{_width:100px; _height:50px;}               속성 앞에 언더바(_)를 붙여준다.

IE6 핵(star hack)

*html div{width:100px; height:50px;}               선택자 앞에 *html를 붙여준다.

IE7 핵(star hack)

*div{width:100px; height:50px;}               선택자 앞에 별(*)를 붙여준다.

IE7 핵

 *+html body div{width:100px; height:50px;}/* IE7, OPERA 적용 */
*:first-child+html div{width:100px; height:50px;}/* IE7 적용 */

선택자 앞에 *+html body 또는 *:first-child+html 을 붙이면 IE7 or Opera 에서 적용이 됩니다.

IE 6, 7 핵(dot hack)

div{.width:100px; .height:50px;}

프로퍼티의 가장 앞부분에 닷(.)를 붙이면 IE6, 7에서만 적용이 됩니다.

IE 7, 8, 9 핵(선택자 핵)

html>body div{width:100px; height:50px;}

셀렉트 앞에 html>body를 붙이면 IE7, 8, 9에서 적용이 됩니다.

IE8 핵

div{width:100px; height:50px\9;}

프로퍼티 마지막에 \9 를 붙인다.(

단, IE6~7에서도 인식이 된다.)

IE8 핵(속성 핵)

div{width:/*＼**/100px; height:/*＼**/50px;}

프로퍼티의 속성값 앞부분에 (/*＼**/) 를 붙이면 IE8에서만 적용이 됩니다.

→ 포스팅 작성시에 테스트 했을때는 되었는데 현재 다시 사용하니 적용이 안됨 (2012.10.16) -- ??

IE8, IE9 ,IE8+9 핵

div{width:100px \0/IE8+9; height:50px  \0/IE8+9;}

프로퍼티의 속성값 뒷부분에 \0/IE8 를 붙이면 IE8 에서 적용이 됩니다.

프로퍼티의 속성값 뒷부분에 \0/IE9 를 붙이면 IE9에서 적용이 됩니다.

프로퍼티의 속성값 뒷부분에 \0/IE8+9 를 붙이면 IE8과 IE9 모두 적용이 됩니다.

#. 2015년 8월26일 내용 보완

IE8 핵 사용할때는 IE8, IE7 순으로 사용해야힌다.

그러나 어떻게 해도 IE8 에서 핵을 사용 할 수가 없었다. (내가 쓴 포스팅을 따라해도 안됨)

그래서 구글링을 통해 알게 된 방법이 아래와 같다

IE8 핵 (미디어쿼리 핵)

@media \0screen {

.box{width:800px;}

}

→ 사용가능(굿!!)

참고

http://blog.naver.com/0131v?Redirect=Log&logNo=110119269445
http://biew.co.kr/5
http://www.nmindplus.com/2006/06/28/css-hack/ 
http://blog.naver.com/2z00/140136776524
http://blog.naver.com/2z00/140165674205

핵을 사용해야 하는 이유와 어떤 영향을 끼치는지 적혔있는 블로그입니다.
http://niceilm.blog.me/150026133263

IE filter

아래는 IE Blog에  2008 년 9 월 8 일 오후 8시 29분에 올라온 글이다.

사이트에 번역기가 있으니 돌려보아도 될것이다.

전 간단히 필요한 부분만 발취하겠습니다. 


Microsoft CSS Vendor Extensions

CSS 2.1 명세에 따라 나열 된 범주에 속하는 속성의 이전에 있어야 microsoft, 모질라, 오페라, '-o-' '-moz-' '-ms-' 와 같은 공급 업체 특정 접두사 등등.

인터넷 익스플로러 8와 함께 완전 한 CSS 2.1 준수에 도달 우리의 계획의 일환으로, 우리는 '-ms-' 접두사 뒤에 다음 조건 중 하나를 충족 하는 모든 속성을 배치 하기로 결정 했습니다.

CSS 스팩에 정의되어 있지 않은 MS 확장 속성일 경우

CSS 스팩에 정의되어 있지만 W3C에서 아직 권고후보 상태인 경우

CSS 스팩에 정의되어 있는 속성

Property	Type	W3C Status
-ms-accelerator	Extension
-ms-background-position-x	CSS3	Working Draft
-ms-background-position-y	CSS3	Working Draft
-ms-behavior	Extension
-ms-block-progression	CSS3	Editor's Draft
-ms-filter	Extension
-ms-ime-mode	Extension
-ms-layout-grid	CSS3	Editor's Draft
-ms-layout-grid-char	CSS3	Editor's Draft
-ms-layout-grid-line	CSS3	Editor's Draft
-ms-layout-grid-mode	CSS3	Editor's Draft
-ms-layout-grid-type	CSS3	Editor's Draft
-ms-line-break	CSS3	Working Draft
-ms-line-grid-mode	CSS3	Editor's Draft
-ms-interpolation-mode	Extension
-ms-overflow-x	CSS3	Working Draft
-ms-overflow-y	CSS3	Working Draft
-ms-scrollbar-3dlight-color	Extension
-ms-scrollbar-arrow-color	Extension
-ms-scrollbar-base-color	Extension
-ms-scrollbar-darkshadow-color	Extension
-ms-scrollbar-face-color	Extension
-ms-scrollbar-highlight-color	Extension
-ms-scrollbar-shadow-color	Extension
-ms-scrollbar-track-color	Extension
-ms-text-align-last	CSS3	Working Draft
-ms-text-autospace	CSS3	Working Draft
-ms-text-justify	CSS3	Working Draft
-ms-text-kashida-space	CSS3	Working Draft
-ms-text-overflow	CSS3	Working Draft
-ms-text-underline-position	Extension
-ms-word-break	CSS3	Working Draft
-ms-word-wrap	CSS3	Working Draft
-ms-writing-mode	CSS3	Editor's Draft
-ms-zoom	Extension

IE전용 속성이나 css속성 중에 IE가 인식하는 css 범위에서는 모두 사용이 가능하다

필터속성에 관해 msdn 에서 아래 처럼 사용하라고 권고

-ms- 속성을 먼저 써야하며 따옴표를 사용해야한다.(" ")

#transparentDiv { 

       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 

       filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); 

       opacity: .5; 

}

[참고]

http://blogs.msdn.com/b/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx


IE filter 로 다른 예제들을 볼 수 있는 사이트
http://www.javascriptkit.com/filters/filters.shtml