미래 그 사용 용법이 더 복잡해진 CSS Opacity

CSS, Web Standards 2개의 댓글 »

문득 구독 feed들을 훑어보다가 CSS Opacity에 관한 불길한 내용을 읽게되어 여기에 옮겨놓는다.

CSS 3 Working Draft에 정의되어 있는 Opacity는 그 용법이 명확해서, 대부분의 웹 브라우저들에서 다음과 같이 사용될 수 있다.

#some-div {
  background: #999;
  opacity: 0.5;
  filter:alpha(opacity=50);  /* For IE 5-7 */
}

헌데, IE 8부터 사용하게 될 MS 전용 확장자(-ms-) 덕분에, 상황은 더 복잡해졌다.

IE8가 표준 모드로 웹 문서를 해석할 경우, 과거 MS만의 filter 용법은 완전 무시되면서 -ms-filter 속성과 함께 filter 정의 부분은 따옴표로 감싸주어야만 한다. 그래서, 간단한 opacity 속성 하나를 정의하려고 해도 다음과 같이 지저분한 용법이 사용될 판이다.

#some-div {
  background: #999;
  opacity: 0.5;
  filter:alpha(opacity=50);       /* For IE 5-7 */
  -ms-filter:"alpha(opacity=50)"; /* For IE 8 */
}

쉬운길 놔두고 멀리 돌아가는 것처럼 생각되는데, 이쯤되면 차라리 속편하게 PNG 그림으로 대체하게 생겼군. 하지만, 투명도가 들어간 PNG도 문제가 많으니 이래저래 골칫거리. 😐
결국, IEBlog에 나와 있는 대로 두 줄로 요약된다.

.fiftyPercentOpaque {
  opacity: 0.5; /* All modern browsers including IE9 */
  filter: alpha(opacity=50); /* IE5-IE9 */
}

내용 갱신: IE9을 포함한 모든 브라우저를 위한 Opacity 설정 방법.

.transparent {
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}
꼬리표:

IE 8의 새로운 X-UA-Compatible 꼬리표

Web Standards 2개의 댓글 »

EmulateIE7 tells IE8 to display standards DOCTYPEs in IE7 Standards mode, and Quirks DOCTYPEs in Quirks mode. We believe this will be the preferred IE7 compatibility mode for most cases. Support for IE=EmulateIE7 is available now as part of the IE June Security Update for IE8 Beta 1.

IEBLog : Introducing IE=EmulateIE7

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

요넘은 게으른 개발자들이 미쳐 모든 문서를 표준에 맞게 고치지 못한 경우, Quirks DOCTYPE을 가지고 있는 문서가 깨져 보이지 않도록 Quirks mode로 해석해서 보여준단다. 어쩔 수 없이 과거의 어두운 그림자를 더 길게 드리우게 되었다.

내가 진정 원하는 meta tag은,

<meta http-equiv="X-UA-Compatible" content="IE=자폭 모드 돌입 18초 전, 당장 새로운 브라우저를 까십시오!" />
꼬리표:

IE8의 기본 동작 모드가 정상적으로 되돌아오다

Web Standards 댓글이 없음 »

IE8이 발표되기도 전, 많은 웹 개발자들은 IE8에서 새로 도입될 meta 요소를 추가하지 않는 한 가장 최신의 웹 표준 모드를 지원하지 않고 IE7과 별반 다르지 않게 된다는 사실로 인해 커다란 우려와 원성을 불러왔었다.

하지만, 오늘 올라온 IEBlog 글에 의하면, 개발자들의 말을 옳게 귀담아 들었는지, 기존 알려진 웹 표준 모드 작동 방식과 반대되는 결정을 알려왔다. 그래서, IE8의 기본 랜더링 모드는 가장 최신의 웹 표준 모드로 작동될 것이며, 기존 웹 표준을 무시하고 제작된 사이트에서 호환성을 위해 과거 “Quirks mode“를 사용해서 올바로 표시되도록 하려면 meta 요소를 이용한 “version targeting”을 따로 지정해 주어야만 한다. 결국 기존 입장을 완전히 반대로 뒤집는 것이지만, 웹 표준의 정착을 고려해보면, 이제야 올바른 방법으로 돌아온 것이라서 참으로 반가운 소식이다.

처음으로 IE 팀원들의 등을 두드려주고 싶어지지만, 역시나 IEBlog에 올려진 칭찬의 댓글들은 참으로 어색하게 느껴진다. 😈

꼬리표:

어제 있었던 두통의 만병 통치약으로 등장한 HTML5

HTML, Web Standards 댓글이 없음 »

많은 논란을 일으켰던 어제의 IE8 version targeting 사건으로 상당수 웹 개발자들에게 혼란과 걱정을 불러일으켰었으나, 하루가 지난 지금 뜻하지 않은 반가운 소식이 들리고 있다.

우연하게도, 바로 어제 W3C에 첫 Working Draft로 등재된 HTML5가 마침 구원의 손길을 보내온 것이다. 요는 HTML5 DOCTYPE을 쓰면, IE8을 포함한 모든 웹 브라우저들에서 어떤 쓸때없는 코드를 추가하지 않아도 가장 최신의 표준 랜더링 엔진을 사용하도록 할 수 있다는 것이다.

결국 다음 한 줄의 Doctype 선언이면, 예전처럼 브라우저 버전에 관계없이 웹 표준(CSS, HTML5, DOM, JavaScript)을 따르면서 미래를 대비하는 웹 사이트를 개발할 수 있게 된다는 것이다:

<!DOCTYPE HTML>

평상시 사용하는 Doctype 보다 무척 간단해 보이지만, 이것은 일부러 이렇게 간단하게 쓰일 수 있도록 의도된 바이다.
더 놀라운 것은, 현재의 모든 브라우저들(IE, FF, Safari, Opera)은 위의 Doctype을 보면 비록 HTML5을 아직 모두 다 구현하지는 않더라도 standards mode로 문서를 해석한다는 사실! 그래서, 약간의 무리는 따르겠지만, 지금 당장 문서에 적용할 수도 있단다.

골치 꽤 썩힐 뻔했던 version targeting으로부터 해방될 수 있으니 다행인 것은 사실이지만, 여전히 웹 표준을 따르며 제작된 현재의 웹 사이트들은 어떠한 수정 조치를 취하지 않는 한, IE8에서는 표준 모드로 해석되지 않는다는 것은 그래도 아쉬움으로 남을 수밖에 없다.

아무튼, 앞으로 HTML5가 가져올 흥미진진한 변화를 기대하며, 책갈피해 두었던 HTML5의 변화된 면모를 자세히 훑어볼 때이다.

꼬리표: