파이어폭스에서 text-overflow:ellipsis 쓰기
컴퓨터/웹
2008/10/21 13:26
IEBlog 에 올라온 Microsoft CSS Vendor Extensions 이라는 제목으로 올라온 글을 번역해봅니다.
예전부터 앞에 -moz-, -o- 같은게 붙은 스타일을 보고 이건 뭔가 했었는데 CSS 2.1 에 명시되어 있는 내용이었군요.
앞으로 IE 에서도 -ms- 식으로 접두어를 붙힌다고 합니다~
Microsoft CSS Vendor Extensions
알다시피 모든 브라우저에서는, CSS 명세서에는 완전히 정의되어 있는데 구현이 일부분만 되었다던가, 아직 CSS 명세서에 완전히 정의되어 있지 않거나, 아예 정의되어 있지 않은데 구현이 되어 있다던가 하는 경우에 해당 브라우저에서만 지원하는 형태의 CSS 속성들을 가지고 있습니다. (예: -ms-interpolation-mode)
CSS 2.1 에 따르면, 앞에서 얘기한 사항에 해당하는 CSS 속성은 무엇이든 vendor 접두어를 가져야 합니다. (Microsoft 의 '-ms-', Mozilla 의 '-moz-', Opera 의 '-o-' 같은 것 처럼)
CSS 2.1 에 IE8 을 완벽하게 맞추려는 우리의 계획의 일환으로, 다음 사항 중 하나라도 만족시키는 속성에는 '-ms-' 접두어를 붙히기로 결정했습니다.
- CSS 속성이 Microsoft 만의 확장기능인 경우 (CSS 명세서에 정의가 되지 않은)
- CSS 명세서에 정의되어 있긴 하지만 아직 W3C 에 의해 확정되지 않은 검토 과정의 속성인 경우
- CSS 명세서에 정의되어 있긴 하지만 CSS 속성 자체가 아직 완전히 구현된게 아닌 경우
이러한 변화는 이어서 나올 CSS 속성에 적용되어, IE8 에서 동작하는 페이지를 만들때 모두 '-ms-' 라는 접두어를 붙혀야 합니다. (IE8 사용자들이 당신의 홈페이지를 Compatibility View 모드로 보면 IE7 에서 보던 거랑 똑같이 보여지며 이러한 경우 '-ms-' 같은 접두어는 사용되지 않음을 명심하세요)
| 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-' 접두어를 추가해 줘야 하는 것과 관련된 업무를 이해하지만 가능한한 표준에 맞게 작성하기 위해서 당신의 페이지를 이렇게 작업해주는 것을 권장 합니다.
그러나 이러한 변환 작업을 쉽게 하기 위해, IE7 에서 존재하는 접두어가 없는 CSS 속성들(deprecated 가 고려되고 있는)도 IE8 에서도 여전히 동작할 것 입니다.
filter CSS 속성의 문법 바꾸기
아쉽게도, 원래 filter 문법은 CSS 2.1 표준이 아닙니다. 예를 들어 아래에 빨간색으로 강조되어 있는 등호(=)나 콜론(:), 그리고 쉼표(,) 같은 것들은 비표준입니다.
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80, FinishOpacity=70, Style=2);
우리의 CSS 파서가 표준에 맞도록 다시 설계되었기 때문에, 예전의 filter 문법은 CSS 명세서에 따르면 무시됩니다. 때문에 선언된 filter 를 따옴표로 감싸주는 것이 필요합니다. 위에 정의되어 있는 filter 문법을 올바른 방법으로 변경하면 아래와 같습니다. (바뀐 부분은 초록색으로 강조)
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80, FinishOpacity=70, Style=2)";
IE7, IE8 사용자 모두에게 filter 가 잘 작동되도록 하기 위해, 위에서 보여준 문법 두개를 모두 포함할 수도 있습니다. 우리의 파서가 가지고 있는 특색 때문에, Compatibility View 모드에서도 filter 가 제대로 동작하기 위해서는 예전 filter 의 사용 방식 앞에 새로운 방식을 추가하는 형태로 문법을 수정할 필요가 있습니다. (이건 이미 알고 있고 IE8 마지막 버젼에서는 수정될 버그입니다)
여기 CSS 스타일시트 예제입니다.
#transparentDiv {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);opacity: .5;}
시간 내서 봐주셔서 감사드리고 피드백 환영합니다~
Harel M. Williams
Program Manager
- 영양가 있는 포스팅인가요
- (총 1분이 투표해서 3.0점) 3.0점
