▲

CSS @property와 새로운 스타일

 (ryanmulligan.dev)
2P by GN⁺ 2024-09-05 | ★ favorite | 댓글 1개
  • @property 규칙은 모든 최신 브라우저에서 지원되며, CSS 사용자 정의 속성의 구문, 초기 값, 상속을 명시적으로 정의할 수 있는 기능을 제공함
  • CSS Houdini와 CSS Properties and Values API가 처음 도입된 이후로 많은 시간이 흘렀음
  • @property의 가능성을 탐구하는 데모를 통해 다음 세대의 CSS가 어떤 것을 제공할 수 있는지 살펴봄

Calls to action(행동 유도 요소)

  • 웹페이지에서 주목을 끄는 CTA는 많은 사이트에서 사용되고 있음
  • 이 스타일을 직접 시도해보았으며, 결과는 CodePen에서 확인 가능함
  • 데모의 CSS 패널을 열어보면 애니메이션이 필요한 사용자 정의 속성에 관련된 @property 규칙을 확인할 수 있음
@property --gradient-angle {  
  syntax: "";  
  initial-value: 0deg;  
  inherits: false;  
}
  • @property 규칙은 브라우저에 구문을 허용하고 초기 값을 0deg로 설정함
  • 이를 통해 브라우저는 0deg에서 360deg로 부드럽게 전환하고 회전하는 그라디언트를 출력할 수 있음
@keyframes rotate-gradient {  
  to {  
    --gradient-angle: 360deg;  
  }  
}  
.rotate-gradient {  
  background: conic-gradient(from var(--gradient-angle), transparent, black);  
  animation: rotate-gradient 10s linear infinite;  
}
  • 간단한 그라디언트 회전 데모를 통해 이 개념을 구현하는 데 필요한 몇 줄의 코드를 확인할 수 있음

부드러운 호버 전환

  • 요소가 호버될 때 부드러운 그라디언트 전환을 위해 몇 가지 특별한 요소가 필요함
  • 각 애니메이션이 필요한 사용자 정의 속성은 @property 정의에서 구문을 선언하여 브라우저가 값 변경을 원활하게 전환할 수 있도록 함
.shiny-cta {  
  background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,  
              conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),  
                            transparent, var(--shiny-cta-highlight) var(--gradient-percent),  
                            var(--gradient-shine) calc(var(--gradient-percent) * 2),  
                            var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),  
                            transparent calc(var(--gradient-percent) * 4)) border-box;  
}
  • --gradient-percent 값은 빛나는 영역의 크기를 결정하며, 호버 시 더 높은 퍼센트로 빛을 길게 만듦
  • --gradient-angle-offset 값은 그라디언트 각도를 재조정하여 호버 시 빛이 되돌아가지 않도록 함

회전 속도 조절

  • 호버 시 회전을 느리게 하는 CSS 팁은 매우 유용함
  • 동일한 회전 애니메이션을 두 번 선언하고, 두 번째는 반대로 설정하여 일시 중지하고, 지속 시간을 절반으로 나눔
  • 요소가 호버될 때 animation-play-state: running이 일시 중지 값을 덮어쓰고 회전을 절반 속도로 느리게 함

작은 빛나는 점

  • 버튼 내부에 작은 점들이 빛나는 효과를 추가함
  • 이를 위해 radial-gradient 배경을 생성함
.shiny-cta::before {  
  --position: 2px;  
  --space: calc(var(--position) * 2);  
  background: radial-gradient(circle at var(--position) var(--position),  
                              white calc(var(--position) / 4),  
                              transparent 0) padding-box;  
  background-size: var(--space) var(--space);  
  background-repeat: space;  
}
  • --gradient-angle 사용자 정의 속성은 conic-gradient 마스크에서 사용되어 점 패턴의 일부를 회전하면서 드러냄

호버 색상 향상

  • 호버 스타일을 개선하여 더 깊이감 있고 눈에 띄게 만듦
  • 버튼 텍스트를 span 요소로 감싸고, 블러 처리된 박스 그림자를 적용하여 호버 시 확장되고 축소되도록 설정함

새로운 스타일 도입

  • 위의 많은 기술들은 얼마 전까지만 해도 거의 불가능했음
  • 사용자 정의 속성을 명시적으로 정의함으로써 많은 기회를 열어줌
  • @property가 대규모 애플리케이션과 디자인 시스템에서 어떻게 활용될지 기대됨

GN⁺의 정리

  • @property 규칙은 CSS 사용자 정의 속성의 구문, 초기 값, 상속을 명시적으로 정의할 수 있는 기능을 제공함
  • 이 기능을 통해 웹 개발자는 더 복잡하고 정교한 애니메이션과 스타일을 구현할 수 있음
  • 특히 대규모 애플리케이션과 디자인 시스템에서 유용하게 사용될 가능성이 큼
  • 유사한 기능을 제공하는 다른 프로젝트로는 CSS Houdini와 CSS Properties and Values API가 있음
▲
GN⁺ 2024-09-05  [-]
Hacker News 의견

  • 새로운 개념을 접할 때 뇌가 저항하는 느낌을 받음

    • MDN 기사 읽기를 추천함
    • @property를 직접 사용해보며 이해할 필요가 있음
    • 복잡한 UI 구현 시 JS 의존성을 최소화하는 것이 중요함

  • 웹 개발자는 아니지만 기본적인 웹 프레임워크 사용 가능함

    • CSS가 처음 나왔을 때 기억함
    • 첫 번째 코드펜 예제의 CSS가 이해되지 않음
    • 스타일링 시스템에 미니 애니메이션 프로그래밍 언어가 필요한지 의문
    • JavaScript로도 가능하지 않을까 생각함

  • 최근 CSS 작업, 특히 Houdini에 대해 흥미를 느낌

    • IE 5.5 기능 책을 받았을 때와 비슷한 느낌
    • CSS에 새로운 기능들이 추가되었지만 기본적인 것들이었음
    • IE 개발자들은 JS 코드를 모듈로 만들어 CSS로 요소에 붙일 수 있었음
    • 이제 다시 그런 기능들을 얻고 있음

  • 가능하다고 해서 꼭 해야 하는 것은 아님

    • 밝은 파란색 LED가 처음 나왔을 때 모든 하드웨어에 사용되었지만 사용자에게는 가치가 없었음

  • CSS 애니메이션으로 할 수 있는 것들이 마법처럼 느껴짐

    • CSS만을 위한 것이어서 배우기 어렵고 개념화하기 어려움
    • JS로 프로그래밍하는 것이 더 쉬움
    • CSS flex 사용 옵션이 많아 어려움을 겪음

  • 기술적으로 흥미로운 데모지만 버튼을 이렇게 애니메이션하지 말아야 함

    • 모든 것이 보라색 그라데이션 테두리를 추가하고 애니메이션하려고 함
    • 가능하다고 해서 꼭 해야 하는 것은 아님
    • 이런 스타일을 제거하기 위해 맞춤 CSS를 작성하는 것이 지침

  • 이전 제출물들은 주목받지 못했지만 흥미롭고 교육적임

  • 이 웹사이트가 기쁨을 줌

    • CSS를 만지작거리는 것을 항상 좋아했음
    • 웹 개발 경력을 쌓으며 많은 사람들이 CSS를 싫어한다는 것을 배움
    • HTML+CSS를 탐구하고 실험하는 데 많은 시간을 쏟음
    • 대부분의 사람들이 시간 낭비라고 생각할 것임
    • 이 사이트가 하루를 즐겁게 해줌

  • CSS 작업을 즐기지만 동료들이 어려움을 겪는 것을 봄

    • Kevin Powell의 YouTube 채널을 강력히 추천함
    • 등록된 속성에 대한 유용한 기능을 설명하는 비디오가 있음
    • 비디오 링크
    • 등록된 속성을 쉽게 설명하는 기사도 있음
    • 기사 링크

  • 웹 개발을 한동안 하지 않았고 이 기능이 무엇을 하는지 이해하는 데 시간이 걸림

    • 기사가 잘 설명하지 못했다고 생각함
    • 새로운 기능이 @property --gradient-angle {...} 블록에서 정의된 값을 사용하게 함
    • inherits: false; 부분이 무엇을 하는지 명확하지만 왜 필요한지 이해하지 못함
    • CSS 선택자가 이미 상속을 제어할 수 있는데 왜 두 번째 장소에서 제어해야 하는지 의문
    • @property 블록에서 타입을 정의해야 하는 이유를 이해하지 못함
    • 브라우저가 @property가 사용된 곳을 보고 타입을 추론할 수 없을까 생각함
답변달기