@property

CSS 커스텀 프로퍼티(--var)를 쓰다 보면 아쉬운 부분들이 있는데, 일단 잘못된 값을 넣어도 에러가 나지 않고, 초기값이나 상속 여부를 명확하게 제어할 방법도 없다. 애니메이션도 지원하지 않기 때문에, 각도나 길이 값이 시간에 따라 변하는 효과를 구현하려면 결국 자바스크립트에 의존해야 했다. 이런 문제들을 해결하기 위해 CSS Houdini API 중 하나로 등장한 것이 바로 @property다. CSS 커스텀 프로퍼티에 타입, 초기값, 상속 여부 등을 명시적으로 등록할 수 있게 해 주는데, Baseline 2024에 포함되면서 주요 브라우저에서도 안정적으로 쓸 수 있는 수준이 됐다.

@property

@property는 CSS 안에서 커스텀 프로퍼티를 명시적으로 등록하는 at-rule이다.
자바스크립트에서 CSS.registerProperty()를 호출하는 것과 동일한 일을 CSS만으로 할 수 있다.

@property --rotation {
  syntax: "<angle>";
  inherits: false;
  initial-value: 45deg;
}

• syntax: 허용할 값의 타입을 지정한다. ex) , , , , 등
• inherits: 상속 여부를 설정한다.
• initial-value: 초기값을 설정한다. 단, 이 값은 computationally independent 이어야 하는데, 예를 들어 10px은 가능하지만, 부모 폰트 크기에 의존하는 3em은 허용되지 않는다.

syntax와 inherits는 필수다. 둘 중 하나라도 빠지면 전체 @property 선언이 무시된다.
initial-value는 경우에 따라 필수인데, syntax: "*"가 아닐 경우에는 반드시 지정해야 한다고 한다.

@property와 애니메이션

일반 custom property는 문자열로 취급되기 때문에, 다음과 같은 코드는 애니메이션이 동작하지 않는다.

@keyframes rotate {
  to {
    --angle: 360deg; /* 문자열이기 때문에 보간 불가 */
  }
}

하지만 @property로 타입을 등록하면 브라우저가 해당 값을 인식해 보간할 수 있는데, 버튼 테두리에 그라디언트가 부드럽게 흐르는 효과를 @property를 활용해 적용해보았다. conic-gradient의 from 각도에 --angle을 연결하고, 이 값을 @property로 타입으로 등록해 애니메이션 하면 그라디언트의 진행 방향만 회전하게 된다. 해당 방법으로 테두리가 자연스럽게 흐르는 효과를 만들 수 있었다. (문법은 Tailwind를 함께 사용했다.)

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.btn-border {
  background:
    linear-gradient(white, white) padding-box,
     conic-gradient(
          from var(--angle),
          var(--color-green-500, #dddd07),
          var(--color-blue-400, #4a9df7),
          var(--color-pink-500, #e361af)
        ) border-box;
  border: 4px solid transparent;
  animation: spin 3s linear infinite;
}

@keyframes spin {
  to { --angle: 360deg; }
}