'WEB'에 해당되는 글 66건

  1. 2014.02.17 IE 핵 (css hack)과 IE filter 1
2014. 2. 17. 15:46

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


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 모두 적용이 됩니다.



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

핵을 사용해야 하는 이유와 어떤 영향을 끼치는지 적혔있는 블로그입니다.
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 TypeW3C Status
-ms-acceleratorExtension 
-ms-background-position-xCSS3Working Draft
-ms-background-position-yCSS3Working Draft
-ms-behaviorExtension 
-ms-block-progressionCSS3Editor's Draft
-ms-filterExtension 
-ms-ime-modeExtension 
-ms-layout-gridCSS3Editor's Draft
-ms-layout-grid-charCSS3Editor's Draft
-ms-layout-grid-lineCSS3Editor's Draft
-ms-layout-grid-modeCSS3Editor's Draft
-ms-layout-grid-typeCSS3Editor's Draft
-ms-line-breakCSS3Working Draft
-ms-line-grid-modeCSS3Editor's Draft
-ms-interpolation-modeExtension 
-ms-overflow-xCSS3Working Draft
-ms-overflow-yCSS3Working Draft
-ms-scrollbar-3dlight-colorExtension 
-ms-scrollbar-arrow-colorExtension 
-ms-scrollbar-base-colorExtension 
-ms-scrollbar-darkshadow-colorExtension 
-ms-scrollbar-face-colorExtension 
-ms-scrollbar-highlight-colorExtension 
-ms-scrollbar-shadow-colorExtension 
-ms-scrollbar-track-colorExtension 
-ms-text-align-lastCSS3Working Draft
-ms-text-autospaceCSS3Working Draft
-ms-text-justifyCSS3Working Draft
-ms-text-kashida-spaceCSS3Working Draft
-ms-text-overflowCSS3Working Draft
-ms-text-underline-positionExtension 
-ms-word-breakCSS3Working Draft
-ms-word-wrapCSS3Working Draft
-ms-writing-modeCSS3Editor's Draft
-ms-zoomExtension 

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


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

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

#transparentDiv { 
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"
       filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); 
       opacity: .5;