CSS 사용자 정의 속성에 @property 사용

Chrome은 이제 @property 사용하여 CSS 사용자 정의 속성 선언을 지원하며 문자열보다 자세한 정보를 제공합니다. 이 기사는이 기능을 깊이 탐구합니다.

과거에는 CSS 사용자 정의 속성 선언은 다음과 같습니다.

 html {
  -스탑 : 50%;
}

이제 @property 사용하여 자세한 내용을 제공 할 수 있습니다.

 @property-- 스토프 {
  구문 : "<percentage> ";
  초기 가치 : 50%;
  상속 : 거짓;
}</percentage>

브라우저는 이제이 사용자 정의 속성이 문자열이 아니라 백분율이라는 것을 알고 있습니다. 다른 유용한 유형은 다음과 같습니다<integer></integer> 그리고<color></color> . 이러한 방식으로 정보를 브라우저에 전달함으로써 두 값 간 전환과 같은 새로운 기능을 얻습니다.

그러나 실제 응용에서는 전환 해야하는 특성을 명확하게 지정 해야한다는 점에 유의해야합니다 (간단한 transition 구현 될 수 없음). 다음 데모는 Una Kravetz 기사에서 예제를 재현합니다.

색상 스톱 포인트 (백분율)의 위치를 ​​애니메이션하고 있지만 색상 자체를 애니메이션하려고 시도했지만 여전히 작동하지 않습니다. 나는 원래이 새로운 기능이 이것을 달성 할 수 있다고 생각했다. 사람들은 오랫동안 기울기가 불가능하다는 것에 대해 혼란스러워했습니다. (Ana Tudor의 기사를 참조하십시오.)

사용자 정의 속성을 지원하지 않는 브라우저의 경우 더 높은 수준에서 속성을 다시 고정하여 지원을 제공 할 수 있습니다. 이것은 조금 웃긴 것 같습니다. Safari는이 Houdini 기반 기술에 대한 관심을 보여 주지만 아직 지원되지 않았습니다. Firefox? 상황은 불분명하며 해고 전에 "프로토 타이핑에 적합한"것으로 표시했습니다.

@property 또한 CSS 사용자 정의 속성의 이상한 폴백 문제를 해결할 수 있습니다.

다른 사용자 정의 속성과 마찬가지로 VAR 사용 ( var 사용) 또는 세트 (쓰기/재 작성) 값을 얻을 수 있지만 Houdini 사용자 정의 속성의 경우 덮어 쓰기시 허위 값을 설정하면 CSS 렌더링 엔진은 라인을 무시하는 대신 초기 값 (폴백 값)을 보냅니다.

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