안정적인 웹 발전을 선도하는 IE10 Release Preview

  • Article

우리는 Windows 8 Release Preview를 기획할 때 IE10에서 지원하는 모든 W3C 초안 표준을 검토했으며, 특히 다음과 같은 사양을 찾아 보았습니다.

  • 최근에 기능이 추가되었거나 변경된 적이 없으며 향후 이름 변경 또는 큰 변화가 없을 것으로 예상되는 안정적인 사양
  • IE10 외에 2개 이상의 브라우저에서 지원되는 사양
  • 이러한 브라우저에서 기능의 핵심 활용 사례에 상호 운용 가능한 사양
  • 접두사 없는 형식을 비롯해 이미 웹에서 사용 중인 사양
  • Windows 8 Consumer Preview 이후에 권장 기술 후보가 되거나 2012년에 권장 기술 후보가 될 것으로 보이는 사양

다음 W3C 초안 표준 기능은 이러한 기준과 일치하며 IE10은 이제부터 다음 W3C 초안 표준을 접두사 없는 형식으로 지원합니다.

Windows 8 Consumer Preview를 사용하여 개발된 사이트 및 앱과의 호환성을 위해 IE10은 Microsoft 공급업체 접두사(‑ms‑/ms)를 사용하여 이러한 표준의 공급업체 접두사 형식도 지원합니다.

또한 IE10은 다음 W3C 초안 표준의 공급업체 접두사 형식까지 지원합니다. 이러한 초안은 아직까지는 위의 기준을 만족하지 못합니다.

실험적 단계에서 안정적 단계로

웹 브라우저에서는 새로운 표준을 구현할 때 고유한 공급업체 접두사를 사용하여 새 기능을 표시합니다. ‑moz‑가 붙은 스타일 속성은 Mozilla Firefox의 실험적 CSS 기능을 나타내고, ‑ms‑는 Microsoft Internet Explorer의 실험적 CSS 기능을 나타내고, ‑o‑는 Opera의 실험적 CSS 기능을 나타내고, ‑webkit‑는 Google Chrome과 Apple Safari를 포함한 WebKit 기반 브라우저의 실험적 CSS 기능을 나타냅니다. 기능의 개체 모델에도 이와 비슷한 접두사가 붙습니다.

window.requestAnimationFrame() 같은 새로운 플랫폼 API도 이와 마찬가지로 현재 window.mozRequestAnimationFrame(), window.webkitRequestAnimationFrame() 또는 window.msRequestAnimationFrame()으로 호출됩니다.

해당 사양이 권장 기술 후보가 되면 브라우저 공급업체에서는 일반적으로 공급업체 접두사를 제외합니다. 이 명명 규칙의 목적은 다음과 같습니다.

  • 사양이 발전할 수 있도록 허용: 접두사가 없으면 편집자는 초기 구현을 위해 작성한 웹 콘텐츠를 편집할 수 없기 때문에 유용한 기능 추가 또는 기능 변경 작업이 매우 어렵거나 아예 불가능할 수 있습니다.
  • 실험적 구현 분리: 특정 브라우저의 초안 버전 버그 또는 선택은 다른 브라우저에 아무런 영향을 미치지 않습니다.
  • 스타일 시트 문서화: 공급업체별 스타일 시트 종속성이 명시적으로 문서화됩니다.

기타 표준은 공급업체 접두사를 전혀 사용하지 않을 수 있습니다. 예를 들어, 브라우저 공급업체에서는 <canvas> 및 <video>와 같은 HTML5 사양에서 도입된 새 HTML 요소에 접두사를 전혀 사용하지 않았습니다.

웹의 모범 사례

실제로, 여러 브라우저가 상호 운용 가능한 방법으로 동일한 초안 기능을 지원하는 시대가 옵니다. 그 결과, 웹 개발자들은 다음과 같은 선언을 작성합니다.

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

-ms-transform: rotate(30deg);

-o-transform: rotate(30deg);

개발자들은 이 패턴을 수도 없이 복사하여 붙여 넣은 끝에 앞으로 제공될 W3C 표준이 현재 웹과 호환될 것이라고 예상합니다. 개발자들은 속성의 접두사 없는 버전을 추가하여 스타일 시트의 미래를 대비합니다

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

-ms-transform: rotate(30deg);

-o-transform: rotate(30deg);

transform: rotate(30deg);

웹 개발자의 관점에서 보면, 위의 선언 집합은 접두사 없는 CSS 변환을 지원하는 미래의 브라우저에 사용할 수 있습니다.

기존의 표준 기능을 통해 이 현실적인 예측이 맞다는 것을 실제로 확인했습니다. IE9의 첫 번째 Platform Preview에서 접두사 없는 border-radius 속성 지원을 추가할 때, 미래를 대비한 스타일 시트가 이미 배포되었기 때문에 여러 사이트에서 기능을 “사용”할 수 있다는 것이 확인되었습니다.

현재 수많은 기능이 동일한 발전 과정을 거치고 있습니다. 수많은 CSS 전환 데모 페이지가 이미 미래를 대비하고 있을 뿐만 아니라(Paul Hayes의 패럴랙스 효과 또는 Lea Verou의 애니메이션 효과를 줄 수 있는 갤러리 참조) Google의 html5slides, 디자이너의 홈 페이지, 사이트 로고 및 자습서 같은 오픈 소스 프로젝트도 일반적으로 접두사 없는 transition 선언을 포함하고 있습니다.

수많은 전환 효과가 CSS 변환, 즉 접두사 없는 transform 속성이 자주 선언되는 자습서와 관련되어 있습니다.

사양 마무리

웹 개발자들은 새로운 마크업에서 브라우저가 융합될 것으로 예상하고 있지만, 표준화 프로세스는 이보다 훨씬 보수적으로 이루어지고 있습니다. border-radius가 수천 개의 웹 사이트에서 충분히 상호 운영 가능하게 실행되었지만 CSS 작업 그룹의 회원들은 너비와 색상이 가변적인 두 인접 경계 간의 둥근 모서리 모양 같은 복잡한 사례의 렌더링을 정의하느라 바빴습니다. 이와 마찬가지로, CSS 전환, 애니메이션 및 변환 편집자는 오류 조건을 지정하고, 오류를 수정하고, 덜 일반적인 시나리오를 분류하는 작업을 수행합니다.

이러한 문제를 해결해야만 상호 운용성 수준을 높이고 권장 기술 후보 상태에 도달할 수 있지만 현재 및 미래의 콘텐츠에 영향을 미치는 문제는 상대적으로 적습니다. 사양이 안정적이고 상호 운용 가능한 상태가 되면 웹은 마지막 코너 케이스(정상 조작 요인들의 범위 밖에서만 발생하는 문제나 상황)에 의해 방해를 받으면 안 됩니다. 새 HTML5 요소 또는 CSS2.1 사양 마무리에서는 이것이 필요 없으며, 두 경우 모두 접두사가 필요 없습니다.

완전한 공용 테스트 도구 모음에 의해 백업되는 안정적인 사양이 매우 중요하며, 권장 기술 후보가 게시될 때까지 모든 웹 개발자가 같은 선언을 수차례 반복하도록 요구하면 콘텐츠 안정성보다 사양 완성도를 먼저 해결할 수 있습니다.

사양을 마무리하려면 많은 시간이 걸립니다. 한 가지 예를 들자면, CSS 그라데이션은 2008년에 등장했고, 상호 운영 가능한 솔루션을 지정하는 첫 번째 작업 초안은 2009년에 작성되었고, 권장 기술 후보는 2012년 4월에 게시되었습니다. 그 중간 기간에는 표준화된 구문이 여러 웹 사이트에 배포된 접두사 붙은 구문과 호환되지 않았습니다. IE10의 Release Preview는 접두사 없는 최신 사양을 처음으로 공식적으로 구현한 것입니다. IE10은 ‑ms‑ 공급업체 접두사가 붙은 상호 운영 가능한 버전도 지원합니다.

코드가 갖는 의미

CSS 그라데이션

광범위하게 상호 운영 가능하며 모든 최신 브라우저에서 지원되는 접두사 붙은 그라데이션 구문은 사양의 기존 초안 버전을 반영합니다. 이 기존 구문은 현재 권장 기술 후보와 호환되지 않습니다. 예를 들어, 다음과 같은 그라데이션을 선언했다고 가정하겠습니다.

background: -ms-linear-gradient(left, yellow, red);

‑ms‑ 접두사를 제거하기만 하면 간단하게 접두사 없는 그라데이션이 생성되는 상황이 아닙니다. IE10의 접두사 없는 선형 그라데이션 함수가 최신 사양을 따르기 때문에 다음과 같아야 합니다.

background: linear-gradient(to right, yellow, red);

나중에 다른 글을 통해 IE10의 CSS 그라데이션 지원에 대해 자세히 설명하겠습니다.

계단식 배열 및 CSS 개체 모델

다음 규칙을 감안할 때 계단식 배열은 접두사가 붙은 CSS 속성을 예상대로 해결할 것입니다(접두사 없는 선언의 회전각이 더 높다는 점에 주의).

-ms-transform: rotate(30deg);

transform: rotate(60deg);

요소는 60도로 회전하게 됩니다. 두 속성은 서로의 별칭으로 취급되며 마지막 선언이 승리합니다. 두 속성의 CSSOM 속성 역시 별칭입니다. transform 및 msTransform 스타일 속성의 계산 값을 요청할 경우 두 속성 모두 60도 변환을 반영합니다.

이와 마찬가지로 element.style.transform을 설정하면 element.style.msTransform도 설정되고, 그 반대의 경우도 마찬가지입니다

속성 이름 직렬화

transition-property 같은 속성은 CSS 속성 이름 목록을 가져옵니다. 예를 들어, IE10 Consumer Preview에서 2초 이상 transform 속성을 전환하려면 개발자는 다음과 같이 코드를 작성해야 합니다.

-ms-transition-property: -ms-transform;

-ms-transition-duration: 2s;

IE10 Release Preview에서는 style.msTransitionProperty 및 style.transitionProperty의 값을 모두 ‘transform’으로 직렬화합니다. 이때 원래 접두사가 보존되지 않는다는 점에 주의해야 합니다.

전환 이벤트의 propertyName 속성 역시 마찬가지입니다.

애니메이션 및 전환 이벤트 유형 이름

IE10 Release Preview에서는 접두사 있는 이름과 접두사 없는 이름을 모두 사용하여 애니메이션 및 전환 이벤트 수신기 등록을 허용합니다. 즉, 다음과 같습니다.

element.addEventListener("MSTransitionEnd", myHandler, false);

element.addEventListener("transitionend", myHandler, false);

하지만 IE10 Release Preview에서는 언제나 이벤트 개체의 type 속성에 접두사 없는 이름을 반환합니다.

다음 단계는?

현재 IE10에서 접두사 없이 지원하는 모든 기능에 대한 사례를 테스트하기 위해 W3C에 새로운 테스트 사례를 제출할 것입니다. 작업 그룹의 회원이자 공동 편집자로서 우리는 동료들과 협력하여 이러한 사양을 권장 기술 후보까지 발전시킬 것입니다.

이러한 기능 지원 및 브라우저 간 호환성에 대해 여러분의 많은 피드백을 기다리겠습니다.

- Internet Explorer 프로그램 관리자, Sylvain Galineau