CSS @property 규칙

정의와 사용

CSS @property 규칙은 스타일 시트에서 직접 사용자 정의 CSS 속성을 정의하며 어떤 JavaScript도 실행하지 않습니다.

@property 규칙은 데이터 타입 검사와 제약 조건 기능을 갖추고 있으며 기본 값을 설정하고 속성이 값을 상속할 수 있는지 정의할 수 있습니다.

사용 @property 장점:

• 타입 검사와 제약 조건: 사용자 정의 속성의 데이터 타입을 지정해야 합니다. 예를 들어 <number>、<color>、<length> 등입니다. 이는 오류를 방지하고 사용자 정의 속성의 올바른 사용을 보장합니다.
• 기본 값 설정: 사용자 정의 속성에 기본 값을 설정할 수 있습니다. 이는 후속으로 부적절한 값이 할당되었을 때 브라우저가 정의된 대체 값을 사용하도록 보장합니다.
• 상속 행동 설정: 사용자 정의 속성이 부모 요소에서 값을 상속받을 수 있는지 지정해야 합니다.

예제: 사용자 정의 속성 정의

@property --my-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

위 정의는 --my-color이 색상 속성임을 의미하며, 부모 요소에서 값을 상속받을 수 있으며 기본 값은 lightgray입니다.

CSS에서 사용하는 사용자 정의 속성:

body {}}
  backgound-color: var(--my-color);
}

예제

예제 1

gradient에 두 가지 사용자 정의 속성을 지정하고, 그들을 사용하여 gradient를 애니메이션합니다:

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

본인이 직접 테스트해 보세요

예제 2

두 가지 사용자 정의 속성을 지정합니다. 하나는 아이템 크기, 하나는 아이템 색상을 의미합니다:

@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --item-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

본인이 직접 테스트해 보세요

CSS 문법

@property --propertyname {
  syntax: "<color>";
  initial-value: red;
  inherits: false;
}

속성 값

브라우저 지원

표中的 숫자는 이 @ 규칙을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

관련 페이지

교본:CSS @property 규칙