Microsoft CSS 공급업체 확장
이 글은 Internet Explorer 개발 팀 블로그 (영어)의 번역 문서입니다. 이 글에 포함된 정보는 Internet Explorer 개발 팀 블로그 (영어)가 생성된 시점의 내용으로, 제품의 사양이나 기능이 보장되는 것은 아닙니다. 이 글에 포함된 정보의 이용은 사용 조건을 참조해 주세요. 또, 이 글 게재 시점에서 Internet Explorer 개발 팀 블로그 (영어)의 내용이 변경 될 수 도 있습니다. 최신 정보는 Internet Explorer 개발 팀 블로그 (영어)를 참조하십시오.
영문 원본 : Microsoft CSS Vendor Extensions
업데이트 일자: 2008 년 9 월 8 일
잘 알고 계시리라 생각하지만, 모든 브라우저는 완전하게 규정된 CSS 사양을 부분적으로 구현한 속성이나, CSS 사양은 존재하지만 정의가 완료되지 않는 속성 구현인 공급업체 확장으로 간주되는 CSS 기능 집합 (예 -ms-interpolation-mode)을 가지고 있습니다. CSS 2.1 사양에 의하면, 이 카테고리로 분류되는 속성은 예를 들면 Microsoft 이면 -ms-, Mozilla 는 -moz-, Opera 는 -o- 라고 한 공급업체 고유의 프리픽스(Prefix)를 붙여야 합니다.
Internet Explorer 8 을 CSS 2.1 완전하게 따르는 계획의 일부로서 다음 조건을 하나라도 만족시키는 속성 앞에는―ms- 프리픽스(Prefix)를 배포 하는 것을 결정했습니다.
- 속성이 Microsoft 의 독자 확장인 경우 (CSS 사양, 혹은 모듈로 정의되어 있지 않다)
- 속성이 W3C에서 권장 후보 (Candidate Recommendation)의 상태를 받지 않은 CSS 사양, 혹은 모듈의 일부이다
- 속성이 CSS 사양 혹은 모듈로 정의된 속성의 부분적인 구현이다.
이 변경은 다음 속성에 적용되기 위해, Internet Explorer 8 용 페이지를 기술하는 경우, 이것들 모든 속성 앞에 ―ms- 를 붙여야 합니다. (Internet Explorer 8 의 호환 표시 모드에서 페이지를 보는 경우, Internet Explorer 7에서 드로잉한 것과 정확하게 같이 표시되어, 이 경우 프리픽스(Prefix)는 필요 없고, 파서에도 인식되지 않는 것에 주의해 주세요).
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 |
이 변경이 이미 기술한 페이지를 재검토하여, 속성에 -ms- 프리픽스(Prefix)를 추가한다고 이해하지만, 가능한 한 양식에 기준하여 기술한 페이지로 하기 위해서, 이 변경을 꼭 권장합니다. 다만 마이그레이션을 쉽게 하기 위한, Internet Explorer 7에서 존재하던 프리픽스(Prefix)가 없는 버전의 속성에 대한 추천은 하지 않지만 Internet Explorer 8에서도 계속 기능합니다.
필터 속성 구문 변경
아쉽지만, 오리지날 필터 구문은 CSS 2.1 에 기준하지 않았습니다. 예를 들면, 다음의 문맥 내 등호, 콜론, 콤마 ( 빨간색 하이라이트)는 인정되지 않습니다.
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity =80, FinishOpacity=70, Style=2);
CSS 파서는 표준에 맞도록 재설계되어, 이전 필터 구문은 CSS 사양에 적합하도록 무시됩니다. 이렇게 하여, 현재의 필터 정의는 모두 " quote"로 되어야 합니다. 올바른 필터 정의를 쓰는 방법은 다음과 같습니다 (변경이 필요한 부분은 초록으로 하이라이트 됨).
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80, FinishOpacity=70, Style=2)';
Internet Explorer 7과 8 의 사용자 모두, 필터가 기능하도록 보장하기 위해, 위의 구문을 모두 추가해야 합니다. 파서 문제 때문에 상호교환모드에서 정상적으로 필터를 동작시키기 위해서는 새로운 필터 구문을 오래된 구문 앞에 기술해야 합니다 (이것은 기존 버그로, Internet Explorer 8 최종 출시에서는 수정될 예정입니다). 다음은 CSS 스타일 시트의 예입니다.
#transparentDiv {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: .5;
}
그럼, 여러분의 의견을 기다리겠습니다.
Harel M. Williams
Program Manager