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) -- ??


IE8IE9 ,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; 


'퍼블리싱 > HTML&CSS' 카테고리의 다른 글

IE Conditional Comments 필터링  (1) 2011.12.14

+ Recent posts