이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

Una Kravets

게시일: 2024년 7월 12일

CSS 업그레이드를 준비하세요. CSS Houdini API의 일부인 @property 규칙은 이제 모든 최신 브라우저에서 완전히 지원됩니다. 이 획기적인 기능을 사용하면 CSS 맞춤 속성 (CSS 변수라고도 함)을 새로운 수준으로 제어하고 유연하게 만들 수 있으므로 스타일시트가 더 스마트하고 동적으로 작동합니다.

`@property`의 이점

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

고급 맞춤 속성 만들기

'표준' 맞춤 속성을 만들려면 --로 시작하는 속성 이름을 설정하고 이 속성에 값을 지정합니다. 이러한 맞춤 속성의 값은 브라우저에서 문자열로 파싱됩니다.

다음 예는 기본 (문자열 기반) 맞춤 속성이 초기화되는 방식을 보여줍니다.

:root {
 --myColor: hotpink;
}

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

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

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

@property로 초기화된 맞춤 속성은 이름과 값보다 훨씬 더 많은 세부정보를 제공합니다. 이 속성에는 문법 유형이 포함되며 상속을 true 또는 false로 설정합니다.

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

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

@property의 멋진 애플리케이션 중 하나는 브라우저에서 이미지로 인식되는 그라데이션과 같이 이전에는 전환할 수 없었던 속성을 부드럽게 애니메이션 처리하는 것입니다. 하지만 @property를 통해 변수에 문법적 의미를 부여하면 이를 기울기 문에 사용할 수 있습니다. 이제 그라데이션 내에서 선언된 두 값 간의 애니메이션을 설명하여 애니메이션을 사용 설정합니다. 다음 예를 살펴보세요. 서로 다른 타임라인에서 색상이 전환되는 두 개의 방사형 그라데이션으로 구성된 은근한 배경 애니메이션이 포함된 카드입니다.

@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 강력 기능이 점점 더 강력해지고 있습니다.