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

Una Kravets

CSS Houdini는 하위 수준 API 집합은 CSS 렌더링 엔진의 일부를 노출하고 CSS 객체 모델에 액세스할 수 있습니다. 이것은 CSS 생태계에서 변화합니다. 이를 통해 개발자가 브라우저에 브라우저 공급업체가 제공할 때까지 기다리지 않고 맞춤 CSS를 읽고 파싱합니다. 이러한 기능에 대한 기본 지원이 제공됩니다. 정말 흥미진진하죠!

Houdini 산하의 CSS에 가장 흥미로운 추가 기능 중 하나는 속성 및 값 API를 참고하세요.

이 API는 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;
}

이제 다음을 통해 다른 CSS 맞춤 속성처럼 --colorPrimary에 액세스할 수 있습니다. var(--colorPrimary)입니다. 하지만 여기서 차이점은 --colorPrimary이 그냥 문자열로 읽게 됩니다. 데이터가 있어!

대체 값

다른 맞춤 속성과 마찬가지로 var를 사용하여 가져오거나 설정할 수 있습니다. (쓰기/재작성) 값이지만 Houdini 커스텀 속성이 있는 경우(falsey를 설정한 경우) 값을 재정의하면 CSS 렌더링 엔진이 (대체 값)을 반환합니다.

아래 예를 참고하세요. --colorPrimary 변수에는 총 magenta개 중 initial-value번째 계정입니다. 하지만 개발자가 값은 '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 */
}

구문

구문 기능을 사용하면 이제 유형. 현재 허용되는 유형은 다음과 같습니다.

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

구문을 설정하면 브라우저에서 커스텀 속성의 유형을 확인할 수 있습니다. 여기에는 여러 가지 이점이 있습니다.

이 점을 설명하기 위해 그라데이션에 애니메이션을 적용하는 방법을 보여드리겠습니다. 현재, 그래디언트 값 간에 매끄럽게 애니메이션 (또는 보간)할 방법이 없습니다. 각 그라데이션 선언은 문자열로 파싱됩니다.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> '숫자'로 맞춤 속성 사용 왼쪽의 그라데이션이 매끄럽게 자동 변환되도록 할 수 있습니다. 오른쪽의 그라데이션은 기본 맞춤 속성을 사용합니다. (정의된 구문이 없음) 갑작스러운 전환이 표시됩니다.

이 예에서는 시작 지점부터 그라데이션 중지 비율을 애니메이션으로 표시합니다. 값을 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%;
}

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

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 그라데이션 테두리의 부드러운 전환 Glitch에 대한 데모 보기

결론

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

사진: Cristian Escobar, Unsplash