@property: CSS 변수에 초능력 부여

Una Kravets

CSS Houdini는 CSS 렌더링 엔진의 일부를 노출하고 개발자가 CSS 객체 모델에 액세스할 수 있도록 하는 하위 수준 API 집합을 포괄하는 포괄적인 용어입니다. 이는 CSS 생태계에 큰 변화입니다. 개발자가 브라우저 공급업체가 이러한 기능을 기본적으로 지원할 때까지 기다리지 않고도 맞춤 CSS를 읽고 파싱하는 방법을 브라우저에 알릴 수 있기 때문입니다. 정말 흥미진진하네요.

Houdini 범위 내에서 CSS에 가장 흥미로운 추가 기능 중 하나는 속성 및 값 API입니다.

이 API는 CSS 맞춤 속성(일반적으로 CSS 변수라고도 함)에 시맨틱 의미(구문으로 정의됨)와 대체 값까지 부여하여 CSS 테스트를 가능하게 함으로써 CSS 맞춤 속성을 강화합니다.

Houdini 맞춤 속성 작성

다음은 맞춤 속성 (예: CSS 변수)을 설정하는 예입니다. 이제 문법 (유형), 초기 값 (대체), 상속 불리언 (상위 요소에서 값을 상속할지 여부)이 포함되어 있습니다. 현재 방법은 JavaScript의 CSS.registerProperty()를 사용하는 것이지만 지원되는 브라우저에서는 @property를 사용할 수 있습니다.

별도의 JavaScript 파일 (Chromium 78)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});
CSS 파일에 포함됨(Chromium 85)
@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

이제 var(--colorPrimary)를 통해 다른 CSS 맞춤 속성과 마찬가지로 --colorPrimary에 액세스할 수 있습니다. 그러나 여기서 차이점은 --colorPrimary이 문자열로만 읽히지 않는다는 점입니다. 데이터가 있습니다.

대체 값

다른 맞춤 속성과 마찬가지로 값을 가져오거나 (var 사용) 설정(쓰기/재작성)할 수 있지만 Houdini 맞춤 속성의 경우 재정의할 때 거짓 값을 설정하면 CSS 렌더링 엔진이 줄을 무시하는 대신 초기 값(대체 값)을 전송합니다.

아래 예를 참고하세요. --colorPrimary 변수의 initial-value가 magenta입니다. 그러나 개발자가 잘못된 값 '23'을 제공했습니다. @property가 없으면 CSS 파서가 잘못된 코드를 무시합니다. 이제 파서는 magenta로 대체됩니다. 이를 통해 CSS 내에서 실제 대체 및 테스트가 가능합니다. 간단합니다.

.card {
  background-color: var(--colorPrimary); /* magenta */
}

.highlight-card {
  --colorPrimary: yellow;
  background-color: var(--colorPrimary); /* yellow */
}

.another-card {
  --colorPrimary: 23;
  background-color: var(--colorPrimary); /* magenta */
}

구문

이제 문법 기능을 사용하여 유형을 지정하여 시맨틱 CSS를 작성할 수 있습니다. 현재 허용되는 유형은 다음과 같습니다.

  • length
  • number
  • percentage
  • length-percentage
  • color
  • image
  • url
  • integer
  • angle
  • time
  • resolution
  • transform-list
  • transform-function
  • custom-ident (맞춤 식별자 문자열)

문법을 설정하면 브라우저에서 맞춤 속성의 유형을 검사할 수 있습니다. 여기에는 여러 가지 이점이 있습니다.

이를 설명하기 위해 그라데이션에 애니메이션을 적용하는 방법을 보여드리겠습니다. 현재 각 그라데이션 선언이 문자열로 파싱되므로 그라데이션 값 간에 원활하게 애니메이션(또는 보간)할 방법이 없습니다.

'숫자' 문법과 함께 맞춤 속성을 사용하면 왼쪽의 그라데이션을 통해 정류장 값 간의 원활한 전환을 볼 수 있습니다. 오른쪽의 그라데이션은 기본 맞춤 속성(정의된 문법 없음)을 사용하며 급격한 전환을 보여줍니다.

이 예에서는 마우스 오버 상호작용을 통해 경사 중지 비율이 시작 값 40% 에서 종료 값 100% 로 애니메이션으로 표시됩니다. 상단 그라디언트 색상이 아래쪽으로 부드럽게 전환되는 것을 볼 수 있습니다.

왼쪽 브라우저는 Houdini Properties and Values API를 지원하므로 그라데이션 중단 전환이 원활하게 이루어집니다. 오른쪽 브라우저는 그렇지 않습니다. 지원되지 않는 브라우저는 이 변경사항을 A 지점에서 B 지점으로 이동하는 문자열로만 이해할 수 있습니다. 값을 보간할 기회가 없으므로 원활한 전환이 표시되지 않습니다.

그러나 맞춤 속성을 작성할 때 문법 유형을 선언한 다음 이러한 맞춤 속성을 사용하여 애니메이션을 사용 설정하면 전환이 표시됩니다. 다음과 같이 맞춤 속성 --gradPoint를 인스턴스화할 수 있습니다.

@property --gradPoint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

그런 다음 애니메이션을 적용할 때 값을 초기 40%에서 100%로 업데이트할 수 있습니다.

.post:hover,
.post:focus {
  --gradPoint: 100%;
}

이렇게 하면 부드러운 그라데이션 전환이 가능합니다.

그라데이션 테두리를 원활하게 전환합니다. Glitch에서 데모 보기

결론

@property 규칙을 사용하면 CSS 자체 내에서 의미론적으로 의미 있는 CSS를 작성할 수 있으므로 흥미로운 기술을 더욱 쉽게 사용할 수 있습니다. CSS Houdini 및 Properties and Values API에 대해 자세히 알아보려면 다음 리소스를 확인하세요.

사진: 크리스티안 에스코바르(Unsplash)