@재산

Chrome (및 잠재적으로 Safari 및 Firefox)에 새로운 추가 기능인 @property at-rule을 사용하면 제어 및 기능이 향상된 CSS 사용자 정의 속성 선언이 가능합니다. 현재 CSS는 그라디언트 내의 특정 속성을 직접 전환 할 수있는 능력이 부족하며 제한 @property 해결을 목표로합니다.

초안 사양 및 "배송 의도"문서는 기능을 간략하게 설명합니다. @property 규칙 ( @media 쿼리와 유사) 외부 선택자 블록 (@Media Queries와 유사)으로 선언 된 @Property 규칙은 사용하기 전에 사용자 정의 속성의 특성을 등록합니다. 이 등록은 속성의 syntax 지정합니다 (예 :<color></color> )), initial-value 및 inherits 플래그.

JavaScript 동등한 CSS.registerProperty() 는 Houdini 이니셔티브에 따라 동일한 등록을 달성합니다. 주요 장점은 이전에 직접 애니메이션 할 수없는 속성에 대한 전환을 가능하게하는 것입니다. 예를 들어, 이전에 의사 요소와 같은 해결 방법이 필요한 선형 구배의 시작 색상을 부드럽게 전환하면 간단 해집니다.

 @property- 그라데이션 시작 {
  구문 : "<color> ";
  초기 가치 : 흰색;
  상속 : 거짓;
}

.el {
  -그라디언트 시작 : 흰색;
  배경 : 선형 그레이드 (var (-gradient-start), 검은 색);
  전환 :-그레이드 스타트 ​​1s;
}

.el : 호버 {
  -그라디언트 시작 : 빨간색;
}</color>

@property --gradient-start a로 정의하기 때문에 작동합니다<color></color> CSS가 애니메이션을 올바르게 처리 할 수 ​​있습니다. 이것은 attr()<length></length> . 정확한 출시 날짜는 알려지지 않았지만 Chrome의 계획된 구현과 다른 브라우저의 양수 신호는 광범위한 채택이 가능하다는 것을 암시합니다.

위 내용은 @재산의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!