호환성

1. 소개

웹 브라우저가 다양한 벤더 CSS 속성 및 DOM API를 지원해야만 동작이나 레이아웃이 보장되는 웹 콘텐츠의 양이 점점 증가하고 있습니다. 특히 모바일에 최적화된 웹 콘텐츠의 경우 -webkit- 접두사가 붙은 속성에 대한 의존도가 매우 높습니다.

이 명세서는 웹 호환성을 위해 사용자 에이전트가 지원해야 하며, 다른 곳에 명시되어 있지 않은 -webkit- 접두사 CSS 속성과 DOM API의 최소 집합을 정의하는 것을 목적으로 합니다.

오늘날 주요 브라우저에서 사용되는 HTTP User-Agent 헤더 필드도 이 명세서에서 다룹니다.

2. 적합성

이 문서에서 "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "NOT RECOMMENDED", "MAY", "OPTIONAL"은 RFC 2119에 정의된 의미로 해석해야 합니다. 가독성을 위해 이 단어들은 본 명세서에서 모두 대문자로 표기되지 않습니다. [RFC2119]

알고리즘의 일부로 명령문 형태로 표현된 요구 사항(예: "선행 공백 문자를 모두 제거한다" 또는 "거짓을 반환하고 이 절차를 종료한다")은 알고리즘을 소개하는 데 사용된 키워드("must", "should", "may" 등)의 의미에 따라 해석해야 합니다.

알고리즘이나 구체적인 단계로 표현된 적합성 요구 사항은 결과가 동등하다면 어떤 방식으로든 구현할 수 있습니다. (특히, 이 명세서에 정의된 알고리즘은 따르기 쉽게 작성된 것이며, 성능을 고려한 것이 아닙니다.)

3. CSS 호환성

3.1. CSS At-규칙

다음 -webkit- 벤더 접두사 at-규칙은 해당 비접두사 at-규칙의 별칭(alias)으로 지원되어야 합니다:

3.2. CSS 미디어 쿼리

3.2.1. -webkit-device-pixel-ratio

-webkit-device-pixel-ratio 는 resolution range 타입 미디어 특성(media feature)의 별칭으로 취급되어야 하며, 그 값은 dppx 단위로 해석되어야 합니다.

range 기능에 min- 또는 max- 접두사를 사용해서는 안 되며, 대신 아래 별칭을 사용해야 합니다:

3.2.2. -webkit-transform-3d

-webkit-transform-3d 미디어 특성은 사용자 에이전트가 CSS 3D 변환을 지원하는지 여부를 질의하는 데 사용됩니다. [css-transforms-1]

사용자 에이전트가 3D 변환을 지원하면 값은 1, 지원하지 않으면 0입니다.

3.3. CSS 그라디언트 함수

3.3.1. -webkit-linear-gradient()

-webkit-linear-gradient() 그라디언트 함수는 linear-gradient의 별칭으로 취급되어야 하며, [css3-images-20110217]에 정의되어 있습니다.

3.3.2. -webkit-radial-gradient()

-webkit-radial-gradient() 그라디언트 함수는 radial-gradient의 별칭으로 취급되어야 하며, [css3-images-20110217]에 정의되어 있습니다.

3.3.3. -webkit-repeating-linear-gradient()

-webkit-repeating-linear-gradient() 그라디언트 함수는 repeating-linear-gradient의 별칭으로 취급되어야 하며, [css3-images-20110217]에 정의되어 있습니다.

3.3.4. -webkit-repeating-radial-gradient()

-webkit-repeating-radial-gradient() 그라디언트 함수는 repeating-radial-gradient ([css3-images-20110217]에 정의됨) 의 별칭으로 취급되어야 한다.

3.4. CSS 속성

3.4.1. 레거시 이름 별칭

다음 -webkit- 벤더 접두사 속성은 해당 비접두사 속성의 레거시 이름 별칭으로 지원되어야 한다:

3.4.2. 접두사 레거시 이름 별칭

다음 -webkit- 벤더 접두사 속성들은 해당 비접두사 속성의 레거시 이름 별칭으로 지원되어야 합니다. 만약 사용자 에이전트가 비접두사 속성을 제공하지 않는다면, -webkit- 접두사 속성은 사용자 에이전트의 벤더 접두사 속성의 별칭으로 취급되어야 합니다.

참고: 각 속성이 비접두사로 제공되는 순간 레거시 이름 별칭으로 정의될 수 있습니다.

3.4.3. 별칭 없는 벤더 접두사 속성

참고: 이 절에서는 -webkit-appearance 속성을 명시했으나, 이는 현재 CSS Basic User Interface Module에 정의되어 있습니다.

3.4.4. 속성 매핑

다음 -webkit- 벤더 접두사 속성들은 해당 비접두사 속성으로 매핑되어야 합니다:

-webkit-box-* 정의는 웹 호환성이 부족한 것으로 알려져 있습니다. [이슈 #87]

3.4.5. 키워드 매핑

다음 -webkit- 벤더 접두사 키워드는 해당 비접두사 키워드로 매핑되어야 합니다:

-webkit-box 정의는 웹 호환성이 부족한 것으로 알려져 있습니다. [이슈 #87]

3.4.6. 텍스트 채우기 및 스트로크

3.4.6.1. 전경 텍스트 색상: -webkit-text-fill-color 속성

-webkit-text-fill-color 속성은 요소 텍스트 콘텐츠의 전경 채우기 색상을 정의합니다.

.one {
  color: blue;
  /* 아래는 생략 가능, 왜냐하면 초기값임:
  -webkit-text-fill-color: currentcolor; */
}

.two {
  color: red;
  -webkit-text-fill-color: blue;
}

3.4.6.2. 텍스트 스트로크 색상: -webkit-text-stroke-color 속성

-webkit-text-stroke-color 속성은 요소 텍스트의 스트로크 색상을 지정합니다.

3.4.6.3. 텍스트 스트로크 두께: -webkit-text-stroke-width 속성

-webkit-text-stroke-width 속성은 각 글리프의 가장자리에 그려지는 스트로크의 두께를 지정합니다. 값이 0이면 스트로크가 그려지지 않으며, 음수 값은 유효하지 않음입니다.

3.4.6.4. 텍스트 스트로크 축약형: -webkit-text-stroke 속성

-webkit-text-stroke 속성은 -webkit-text-stroke-width 및 -webkit-text-stroke-color 속성의 축약형(shorthand)으로, 요소 텍스트의 스트로크 두께와 스트로크 색상을 설정합니다.

.stroked-text-longhand {
  color: #fff;
  -webkit-text-stroke-color: #000;
  -webkit-text-stroke-width: 1px;
}

.stroked-text-shorthand {
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: thin #000;
}

<p class="stroked-text-longhand">Serious typography</p>

3.5. CSS 속성 값

3.5.1. 추가 touch-action 값

이 절은 touch-action 정의 ([pointerevents2])를 보강하여 pinch-zoom 값을 추가합니다.

pinch-zoom 토큰이 지정되면 페이지의 다중 손가락 팬 및 확대/축소가 활성화됩니다. 확대/축소가 일어나려면 모든 손가락이 pinch-zoom 동작이 활성화된 요소(자신 또는 조상에 pinch-zoom, manipulation 또는 auto 값이 있음) 위에서 시작해야 합니다.

manipulation은 "pan-x pan-y pinch-zoom"의 별칭입니다.

4. DOM 호환성

4.1. WebKitCSSMatrix 인터페이스

참고: WebKitCSSMatrix 는 현재 DOM Geometry 명세에 정의되어 있습니다. [geometry-1].

4.2. window.orientation API

partial interface Window {
    readonly attribute short orientation;
    attribute EventHandler onorientationchange;
};

partial interface HTMLBodyElement {
    attribute EventHandler onorientationchange;
};

orientation 속성을 가져올 때, 사용자 에이전트는 다음 단계를 수행해야 합니다:

1. document를 this의 관련 전역 객체의 연관된 Document로 둔다.

2. document의 현재 window.orientation 각도를 반환한다.

뷰포트가 기기의 자연스러운 방향과 다른 각도로 표시될 때마다, 사용자 에이전트는 다음 단계를 수행해야 합니다:

1. 이벤트 발생: orientationchange 이벤트를 Window 객체(활성 문서의)에 대해 발생시킨다.

window.orientation 속성과 관련 orientationchange 이벤트를 구현한 사용자 에이전트는 모바일이 아닌 플랫폼에서는 이를 노출시키면 안 된다.

4.2.1. window.orientation 각도

window.orientation 각도로 가능한 정수값은 -90, 0, 90, 180이다. 사용자 에이전트는 -90, 0, 90을 반드시 지원해야 하고, 180은 선택적으로 지원할 수 있다.

0은 자연스러운 방향을 의미한다. -90은 자연스러운 방향에서 시계 방향으로 90도 회전한 것을 의미한다. 90은 자연스러운 방향에서 반시계 방향으로 90도 회전한 것을 의미한다. 180은 자연스러운 방향에서 180도 회전한 것을 의미한다.

현재 window.orientation 각도를 결정하기 위해, 사용자 에이전트는 다음 단계를 수행해야 한다:

1. orientationAngle에 현재 오리엔테이션 각도를 저장한다.
   1. orientationAngle이 180 미만이면, orientationAngle을 반환한다.
   2. orientationAngle이 180이면, user agent 가 이 값을 지원하는 경우 orientationAngle을 반환하고, 그렇지 않으면 0을 반환한다.
   3. orientationAngle이 180 초과면, orientationAngle - 360을 반환한다.

4.2.2. 이벤트 핸들러 (Window 객체 및 body 요소)

아래 이벤트 핸들러 및 그에 상응하는 이벤트 핸들러 이벤트 타입은 모든 Window 객체와 body 요소에서 속성(attribute)으로 지원되어야 한다:

5. User-Agent 문자열

User-Agent 헤더 필드 구문은 [HTTP-SEMANTICS]에 공식적으로 정의되어 있으며, 값에 대해 SHOULD 수준의 지침을 제공합니다. 이 절은 이른바 주요 웹 브라우저에서 발견되는 User-Agent 패턴의 설명적 기록 역할을 하며, 많은 부분이 공통 기반(포크, 임베더 등)을 가진 다른 브라우저뿐만 아니라 user agent가 User-Agent 헤더를 보내는 경우에도 적용됩니다.

5.1. User-Agent 토큰

User-Agent 토큰(token)은 User-Agent 문자열에서 의미 단위를 추상화한 문자열입니다. 본 문서는 토큰을 문자열로 정의하며, 시작은 "<"로 하고 끝은 ">"로 하며 예시는 <version>입니다. 토큰에는 다른 토큰이 포함될 수도 있습니다.

User-Agent 상수(constant)는 값이 변하지 않는 문자열입니다.

토큰의 값이 하나 이상의 토큰 및 선택적으로 상수로 구성되는 경우, 해당 토큰과 상수로 분해(decompose)된다고 합니다.

5.1.1. User-Agent 토큰 레퍼런스

아래는 일반적인 User-Agent 토큰의 일부 목록입니다.

5.2. 메타 구조

이후 등장하는 User-Agent 문자열은 다음과 같은 공통 메타 구조를 가집니다:

"Mozilla/5.0 (a) b"

여기서 a는 디바이스 정보를 나타내는 하나 이상의 토큰이고, b는 브라우저 정보를 나타내는 하나 이상의 토큰입니다.

5.3. Chrome

5.3.1. Chrome User-Agent 패턴

"Mozilla/5.0 (<unifiedPlatform>) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/<majorVersion>.0.0.0 <deviceCompat>Safari/537.36"

5.3.2. Chrome 전용 토큰

5.4. Firefox

5.4.1. Firefox User-Agent 패턴

"Mozilla/5.0 (<firefoxPlatform>; rv: <firefoxVersion>) Gecko/<geckoVersion> Firefox/<firefoxVersion>"

5.4.2. Firefox 전용 토큰

<firefoxVersion> 분해 결과:

"<majorVersion>.0"

Firefox의 데스크톱 플랫폼(Windows, macOS, Linux 등)에서는 <geckoVersion> 값이 고정 빌드 날짜 "20100101"입니다. Android Firefox에서는 <geckoVersion> 값이 <firefoxVersion>과 동일합니다.

<firefoxPlatform> 분해 결과:

데스크톱 플랫폼에서는 "<platform>; <oscpu>".

Android Firefox에서는 "<platform>; <deviceCompat>".

5.5. Safari

5.5.1. Safari User-Agent 패턴

"Mozilla/5.0 (<safariPlatform>) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/<safariVersion> <deviceCompat> Safari/<webkitVersion>"

5.5.2. Safari 전용 토큰

<safariVersion> 분해 결과:

"<majorVersion>.<minorVersion>", 여기서 <minorVersion> 은 한 자리 숫자입니다.

<safariPlatform> 분해 결과:

데스크톱 및 대형 iPad 폼팩터에서는 상수 "Macintosh; Intel Mac OS X 10_15_7".

모바일 플랫폼(소형 iPad 포함)에서는 "<appleProduct>; CPU <mobileOSName> <iOSVersion> like Mac OS X".

감사의 말씀

Mounir Lamouri, Marcos Cáceres에게 ScreenOrientation 인터페이스 정의에 감사드립니다. [screen-orientation]

Apple 및 WebKit.org 블로그 저자들에게 본 명세서의 많은 내용에 대한 초기 설명을 제공해 주신 것에 특별히 감사드립니다.

이 표준의 작성자는 Mike Taylor (Google, miketaylr@google.com)입니다.

지적 재산권

Copyright © WHATWG (Apple, Google, Mozilla, Microsoft). 본 저작물은 Creative Commons Attribution 4.0 International License에 따라 라이선스가 부여됩니다. 일부가 소스 코드에 포함된 경우, 해당 부분은 BSD 3-Clause License에 따라 라이선스가 부여됩니다.

이 문서는 현행 표준입니다. 특허 검토 버전에 관심이 있다면 현행 표준 검토 초안을 참고하십시오.