@property: 범용 브라우저 지원을 통한 차세대 CSS 변수

Una Kravets

CSS 파워업을 준비하세요. CSS Houdini API의 일부인 @property 규칙이 이제 모든 최신 브라우저에서 완전히 지원됩니다. 이 혁신적인 기능을 사용하면 CSS 맞춤 속성 (CSS 변수라고도 함)에 대한 새로운 수준의 제어 및 유연성이 제공되어 스타일시트를 더욱 스마트하고 동적으로 만들 수 있습니다.

브라우저 지원

  • Chrome: 85. <ph type="x-smartling-placeholder">
  • Edge: 85. <ph type="x-smartling-placeholder">
  • Firefox: 128 <ph type="x-smartling-placeholder">
  • Safari 16.4. <ph type="x-smartling-placeholder">

소스

@property의 이점

  • 시맨틱 의미: @property를 사용하여 맞춤 속성의 유형 (구문)을 정의합니다. 이렇게 하면 맞춤 속성이 보유한 데이터의 종류 (예: 색상, 길이 또는 숫자)를 브라우저에 알려 예기치 않은 결과를 방지하고 그라데이션 애니메이션과 같은 새로운 가능성을 지원할 수 있습니다.
  • 대체 값: 더 이상 스타일이 사라지지 않습니다. @property를 사용하여 맞춤 속성의 초깃값을 설정합니다. 나중에 잘못된 값이 할당되면 브라우저에서 정의된 대체 값을 적절하게 사용합니다.
  • 오류 처리 개선: 유형 안전성이 향상되고 대체 설정을 지원하는 기능이 제공되므로 CSS 내에서 직접 테스트하고 검증할 수 있는 새로운 기회가 열리게 됩니다.

고급 맞춤 속성 만들기

'표준' 커스텀 속성의 경우 앞에 --가 붙은 속성 이름을 설정하고 이 속성에 값을 지정합니다. 이러한 맞춤 속성의 값은 브라우저에서 문자열로 파싱됩니다.

다음 예에서는 기본 (문자열 기반) 커스텀 속성이 초기화되는 방법을 보여줍니다.

:root {
 --myColor: hotpink;
}

문자열 외의 시맨틱스를 비롯하여 이러한 '고급 맞춤 속성'의 이점을 활용하려면 @property로 CSS 맞춤 속성을 등록하세요.

이 예에서는 동일한 커스텀 속성이 @property로 초기화됩니다.

@property --myColor {
    syntax: '<color>';
    inherits: false;
    initial-value: hotpink;
  }

@property로 초기화된 커스텀 속성은 이름과 값보다 훨씬 더 자세한 정보를 제공합니다. 구문 유형을 포함하고 상속을 true 또는 false로 설정합니다.

이 접근 방식의 장점은 표준 속성의 경우 속성이 색상을 값으로 포함하고 스타일 시트의 다른 곳에서 해당 색상을 사용할 것으로 예상된다는 것입니다. 누군가 숫자를 값으로 가지도록 속성을 업데이트하면 다른 곳에서는 속성을 사용할 수 없습니다. @property를 사용하면 이 속성이 색상 값을 보유해야 한다고 선언하는 syntax와 함께 대체 색상이 정의됩니다. 색상이 아닌 값을 사용해야 하는 경우 대체 값이 대신 사용됩니다.

데모: 반짝이는 그라데이션 배경

@property의 멋진 적용 사례 중 하나는 브라우저에서 이미지로 인식하는 그라데이션과 같이 이전에는 전환이 불가능했던 속성의 매끄러운 애니메이션입니다. 그러나 @property를 통해 변수에 구문적 의미를 부여하면 그라데이션 문에서 사용할 수 있습니다. 이제 그라데이션 내에서 선언된 두 값 사이의 애니메이션을 설명하여 애니메이션을 사용 설정합니다. 서로 다른 타임라인에서 색상을 변경하는 두 방사형 그래디언트로 구성된 섬세한 배경 애니메이션이 포함된 카드를 예로 들어 보겠습니다.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">를 통해 개인정보처리방침을 정의할 수 있습니다.
@property를 사용하여 배경 그라데이션에서 색상에 애니메이션 스타일을 지정합니다.

이렇게 하려면 맞춤 속성 값을 색상으로 설정하면 됩니다.

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: lavender;
}

@property --shine-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: wheat;
}

@property --shine-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: lightpink;
}

그런 다음 이 파일에 액세스하여 초기 그라데이션 배경을 만듭니다.

.card {
background: radial-gradient(
      300px circle at 55% 60% in oklab,
      var(--shine-2), transparent 100% 100%),
      radial-gradient(farthest-side circle at 75% 30% in oklab,
      var(--shine-1) 0%, var(--card-bg) 100%);
}

그런 다음 키프레임의 값을 업데이트합니다.

@keyframes animate-color-1 {
  to {
    --shine-1: orange;
  }
}

@keyframes animate-color-2 {
  to {
    --shine-2: hotpink;
  }
}

그리고 각각에 애니메이션을 적용합니다.

animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;

결론

CSS 등록 맞춤 속성은 CSS 변수에 의미와 컨텍스트를 제공하여 CSS 언어를 확장하는 매우 강력한 기능입니다. 이제 @property가 기준에 도달함에 따라 CSS의 강력한 기능이 점점 더 강화되고 있습니다.

추가 자료