CSS 파워업을 준비하세요. CSS Houdini API의 일부인 @property 규칙이 이제 모든 최신 브라우저에서 완전히 지원됩니다. 이 혁신적인 기능을 사용하면 CSS 맞춤 속성 (CSS 변수라고도 함)에 대한 새로운 수준의 제어 및 유연성이 제공되어 스타일시트를 더욱 스마트하고 동적으로 만들 수 있습니다.
@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를 통해 변수에 구문적 의미를 부여하면 그라데이션 문에서 사용할 수 있습니다. 이제 그라데이션 내에서 선언된 두 값 사이의 애니메이션을 설명하여 애니메이션을 사용 설정합니다. 서로 다른 타임라인에서 색상을 변경하는 두 방사형 그래디언트로 구성된 섬세한 배경 애니메이션이 포함된 카드를 예로 들어 보겠습니다.
@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의 강력한 기능이 점점 더 강화되고 있습니다.