@property
Baseline 2024 | Newly available
Chrome, Edge, Firefox, Safari에서 지원돼요.
2024년 7월부터 이 기능은 최신 기기와 브라우저 버전에서 작동해요. 이 기능은 구형 기기나 브라우저에서는 작동하지 않을 수 있어요.
@property CSS at-rule은 CSS 사용자 정의 프로퍼티를 명시적으로 정의하는 데 사용돼요. 프로퍼티 타입 검사와 제약, 기본값 설정, 그리고 사용자 정의 프로퍼티가 값을 상속할 수 있는지 여부를 정의할 수 있어요.
참고:
JavaScriptregisterProperty()메서드는@propertyat-rule과 동등해요.
그동안 우리가 사용했던 CSS 변수(커스텀 프로퍼티)는 단순히 '글자'를 저장하는 바구니 같았어요. 그래서 그 안에 색상을 넣었는지, 숫자를 넣었는지 브라우저는 몰랐죠. 하지만 @property를 쓰면 브라우저에게 "이 변수에는 꼭 '색상'만 들어가야 해!"라고 알려줄 수 있고, 덕분에 예전에는 불가능했던 그라데이션 애니메이션 같은 것도 가능해진답니다. 자, 하나하나 자세히 설명해 드릴게요!
구문 (Syntax)
/* 어떤 값이든 들어올 수 있는 변수 정의 */
@property --canBeAnything {
syntax: "*";
inherits: true;
}
/* '각도' 타입만 허용하는 변수 정의 */
@property --rotation {
syntax: "<angle>";
inherits: false;
initial-value: 45deg;
}
/* '길이'나 '백분율'만 허용하는 변수 정의 */
@property --defaultSize {
syntax: "<length> | <percentage>";
inherits: true;
initial-value: 200px;
}커스텀 프로퍼티 이름은 --로 시작하고 사용자가 직접 정의한 식별자가 뒤따르는 dashed-ident 형식이에요. 대소문자를 구분한다는 점, 꼭 기억하세요!
디스크립터 (Descriptors)
syntax
등록된 커스텀 프로퍼티에 허용되는 값의 타입을 설명하는 문자열이에요.
inherits
이 커스텀 프로퍼티가 기본적으로 부모 요소로부터 값을 상속받을지 결정하는 불리언(true/false) 값입니다.
initial-value
해당 프로퍼티의 초기값(기본값)을 설정해요.
설명 (Description)
@property 앳 규칙은 CSS 후디니(Houdini) API 세트의 일부예요. 개발자가 CSS 커스텀 프로퍼티를 명시적으로 정의할 수 있게 해주는데, 이를 통해 프로퍼티의 타입 체크 및 제약, 기본값 설정, 그리고 상속 여부 정의가 가능해지죠.
자바스크립트 도움 없이도 스타일 시트 안에서 직접 커스텀 프로퍼티를 등록할 수 있다는 게 큰 장점이에요. 유효한 @property 규칙은 자바스크립트에서 registerProperty()를 호출한 것과 똑같은 효과를 냅니다.
@property 규칙이 유효하려면 다음 조건들을 만족해야 해요.
- 반드시
syntax와inherits디스크립터를 모두 포함해야 합니다. 둘 중 하나라도 빠지면 규칙 전체가 무시돼요. syntax는<color>,<length>,<number>같은 데이터 타입 이름일 수도 있고, 반복 기호(+,#)나 조합 기호(|)를 쓸 수도 있어요. 모든 토큰을 허용하는 범용 정의(*)도 가능하죠. 값은 반드시 따옴표로 감싼 문자열이어야 합니다.syntax: "*"인 경우를 제외하고는initial-value가 필수입니다. 필요한데 생략하면 규칙이 무시돼요.syntax가*가 아닐 때,initial-value는 반드시 '계산적으로 독립적인(computationally independent)' 값이어야 해요. 즉, 다른 값에 의존하지 않고 바로 계산된 값으로 변환될 수 있어야 한다는 뜻이죠.- 예를 들어
10px은 어디서든 10px이니까 괜찮아요.1in도 항상96px이니까 유효하죠. - 하지만
3em은 유효하지 않아요. 왜냐하면em은 부모의font-size가 얼마냐에 따라 값이 계속 바뀌기 때문이죠.
- 예를 들어
- 알 수 없는 디스크립터가 들어오면 그 줄은 무시되지만, 규칙 전체가 무효화되지는 않아요.
만약 같은 이름의 @property 규칙이 여러 개라면 스타일 시트에서 가장 마지막에 나온 것이 이깁니다. 만약 CSS의 @property와 자바스크립트의 CSS.registerProperty()가 충돌하면 자바스크립트로 등록한 것이 우선권을 가집니다.
형식적인 구문 (Formal syntax)
@property =
@property <custom-property-name> { <declaration-list> } 이 구문은 CSS Properties and Values API Level 1의 최신 표준을 반영합니다.
예제 (Examples)
기본적인 예제 (Basic example)
두 개의 커스텀 프로퍼티를 선언하고 실제 스타일에서 사용하는 방법을 살펴볼게요.
HTML
<p>Hello world!</p>CSS
/* 색상 타입의 변수 정의 */
@property --myColor {
syntax: "<color>";
inherits: true;
initial-value: rebeccapurple;
}
/* 길이 또는 백분율 타입의 변수 정의 */
@property --myWidth {
syntax: "<length> | <percentage>";
inherits: true;
initial-value: 200px;
}
p {
/* 정의한 변수들을 사용합니다 */
background-color: var(--myColor);
width: var(--myWidth);
color: white;
}결과
이 문단은 너비 200px에 보라색 배경, 그리고 흰색 글자로 표시됩니다.
커스텀 프로퍼티 값 애니메이션하기 (Animating a custom property value)
이게 바로 @property의 진정한 진가입니다! 원래 CSS 그라데이션은 애니메이션이 안 되지만, 그라데이션의 위치 값을 변수로 만들고 그 변수의 타입을 정의해 주면 애니메이션이 가능해져요.
HTML
<div class="bar"></div>CSS
/* --progress 변수가 '백분율'임을 브라우저에게 알려줍니다 */
@property --progress {
syntax: "<percentage>";
inherits: false;
initial-value: 25%;
}
.bar {
display: inline-block;
--progress: 25%;
width: 100%;
height: 5px;
/* 변수를 사용해서 그라데이션의 경계선을 정합니다 */
background: linear-gradient(
to right,
#00d230 var(--progress),
black var(--progress)
);
/* 이제 --progress 값을 애니메이션 할 수 있습니다! */
animation: progressAnimation 2.5s ease infinite;
}
@keyframes progressAnimation {
to {
--progress: 100%;
}
}결과
--progress 값이 25%에서 100%로 2.5초 동안 부드럽게 변하면서, 초록색이 차오르는 진행 표시줄(progress bar) 효과가 나타납니다. 브라우저가 이제 이 변수가 '숫자(백분율)'라는 걸 알기 때문에 중간값들을 부드럽게 계산해 줄 수 있는 거예요.
