CSS 연결 매개변수 모듈 레벨 1

1. 소개

SVG는 CSS로 스타일을 지정할 수 있으며, HTML에서 인라인으로 사용할 때 이 기능은 매우 유용할 수 있다. 예를 들어 SVG 아이콘에 :hover 규칙을 적용하여 fill 속성을 변경하는 것만으로, 사용자가 아이콘 위에 마우스 포인터를 올렸는지에 따라 아이콘의 색상을 다르게 표시할 수 있다.

외부 페이지의 선택자나 CSS 상속이 SVG에 적용될 수 없는 방식으로 SVG를 참조하는 경우 (예를 들어 HTML에서 img 또는 iframe을 통해 삽입하는 경우), 이 기능을 사용할 수 없게 된다. 이러한 "외부" SVG 이미지의 표시를 변경하는 유일한 방법은 이미지를 여러 개 만들고, 참조하는 이미지를 변경하는 것이다. 이 경우 새로운 리소스를 다운로드하므로 페이지에 지연이 발생하며, CSS 전환과 같은 동적 효과를 사용할 수 없다.

CSS 링크 매개변수는 CSS 속성이나 URL의 특수한 프래그먼트 방식을 통해 "외부" 리소스에 CSS 사용자 지정 환경 변수를 설정하는 방법이다. 이를 통해 "인라인" SVG 이미지가 제공하는 사용자 지정 기능의 제한적이지만 강력한 일부를 "외부" SVG 이미지에서도 사용할 수 있다.

링크 매개변수는 <dashed-ident> 이름과 임의의 값(비어 있을 수도 있음)인 <declaration-value>의 쌍이다.

<svg>
  <path fill="env(--color, black)" d="..." />
</svg>

<img src="image.svg#param(--color,green)">

img {
  link-parameters: param(--color, green);
}

.foo {
  background-image: url("image.svg", param(--color, green));
}

2. 링크 매개변수 설정

외부 리소스에는 링크 매개변수 목록을 함께 지정할 수 있으며, 각 항목은 키인 <dashed-ident>와 값인 <declaration-value>(비어 있을 수도 있음)로 구성된다.

링크 매개변수를 지정하는 방법은 세 가지이다:

• link-parameters 속성을 통하는 방법. 이 속성은 리소스 자체 (요소가 외부 리소스를 나타내는 경우)와 해당 요소의 CSS 속성에서 사용하는 모든 외부 리소스에 적용된다

• 외부 리소스 URL의 프래그먼트 부분에 있는 특수 구문을 통하는 방법

• param() 인수를 url() 구문에서 사용하는 방법

이러한 방법 중 여러 방법으로 지정하면, 모든 링크 매개변수가 다음 순서로 외부 리소스의 단일 목록에 추가된다:

1. 해당하는 경우 요소의 link-parameters 속성

2. param() URL 프래그먼트 식별자

3. url()의 param() <url-modifier>

같은 이름의 링크 매개변수가 여러 개 있으면, 목록의 마지막 매개변수를 사용한다.

연결된 리소스에서 링크 매개변수에 접근하는 방법은 다음 절인 § 3 링크 매개변수 사용에서 정의한다.

2.1. CSS에서: link-parameters 속성

link-parameters 속성은 요소 자체 (HTML img 또는 iframe처럼 외부 리소스를 나타내는 요소인 경우)와 해당 요소에 지정된 모든 외부 CSS 리소스 (예: 배경 이미지 등)에 링크 매개변수를 설정하는 방법 중 하나이다. 이 속성의 값은 다음과 같다:

none

링크 매개변수를 지정하지 않는다.

<param()>#

하나 이상의 링크 매개변수 목록.

param() 함수는 링크 매개변수를 지정하며, 키는 <dashed-ident>이고, 값은 <declaration-value>?이다. (<declaration-value>를 생략하면, 빈 값을 나타낸다.) 구문은 다음과 같다:

<param()> = param( <dashed-ident> , <declaration-value>? )

2.2. URL에서

외부 리소스를 참조하는 데 사용하는 URL의 프래그먼트에서 특수한 "프래그먼트 식별자"를 사용할 수 있다. SVG 문서에 이미 존재하는 "프래그먼트 식별자"의 여러 예는 SVG 1.1 사양에서 확인할 수 있다.

SVG 매개변수 프래그먼트 식별자의 구문은 다음과 같다:

param( <dashed-ident> , <declaration-value>? )

(CSS 값 정의 구문을 사용한다. TODO 실제 파서를 정의한다).

URL에 여러 param() 프래그먼트 식별자를 추가하면 여러 링크 매개변수를 이미지에 전달할 수 있다. 서로 결합하거나 다른 "프래그먼트 식별자"와 결합할 때는 URL의 쿼리 매개변수와 마찬가지로 각 값을 & 문자로 구분한다.

참고: 공백과 CSS 구문에서는 유효할 수 있는 일부 다른 문자는 기술적으로 URL에서 유효하지 않다. 일부 맥락에서는 유효한 URL을 만들기 위해 이러한 문자를 이스케이프해야 할 수 있다. 그러나 대부분의 경우, HTML의 a 요소나 CSS의 url() 함수처럼, 공백이 허용되므로 이스케이프할 필요가 없다.

2.3. CSS url() 함수를 통한 설정

CSS를 통해 외부 리소스를 참조할 때, param() 함수를 url() 함수에서 사용할 수 있다. 그러나 일반적인 사용 사례는 페이지 자체의 사용자 지정 속성 값을 전달하는 것이다. 예를 들어 페이지에서 --primary-color 사용자 지정 속성을 사용하며, SVG 이미지도 이 속성에 맞추려고 할 수 있다. 하지만 CSS의 사용자 지정 속성 값을 url() 함수에 전달되는 URL에 통합할 방법은 없다.

이를 지원하기 위해 param()은 유효한 <url-modifier>이다. <url-modifier>로 지정된 모든 param()은 link-parameters와 마찬가지로 링크 매개변수를 정의한다.

.foo {
  background-image: url(
    "http://example.com/image.svg"
    param(--color, var(--primary-color))
  );
}

3. 링크 매개변수 사용

외부 리소스 링크에 하나 이상의 링크 매개변수가 지정되어 있고, 연결된 리소스가 CSS를 이해하는 경우 (예: SVG 또는 HTML 문서), 해당 링크 매개변수는 자신의 이름과 값을 사용하여 리소스의 전역 사용자 지정 환경 변수를 설정하며, 스타일시트에서 env() 함수를 통해 접근할 수 있다.

<svg>
  <g style="fill: env(--color);">
    <path d="..." />
  </g>
</svg>

개인정보 보호 고려사항

이 사양은 새로운 개인정보 보호 고려사항을 도입하지 않는다.

보안 고려사항

이 사양은 잠재적으로 적대적인 출처에서 연결된 리소스로 정보를 전달하는 새로운 방법을 도입한다.

이 채널에는 명시적인 핸드셰이크가 설정되지 않지만, 정보를 사용하는 데 env()를 사용하면 연결된 리소스가 해당 정보로 인해 예기치 않은 영향을 받을 가능성이 최소화된다. 페이지가 취약해질 수 있는 유일한 경우는 스타일에서 어떻게든 알 수 없는 env()를 사용하는 경우인데, 기본적으로 이는 단순히 속성을 무효화하며 개발자의 개발자 도구에 표시된다.

또한 적대적인 정보는 리소스가 명시적으로 사용하도록 선택한 개별 CSS 속성에만 영향을 줄 수 있다.