평가 : 루트 및 VAR ()
사용자 정의 속성 이름은 두 개의 하이픈입니다 ( - 예 : 시작 속성) --foo. 사용자가 정의한 후에는 사용할 수있는 var() 변수 참조.
CSS
1 : 루트 { 2 --view 높이 : 0 ; 3 }
에서 :root정의 사용자 지정 특성의 선택은 글로벌 문서의 모든 요소에 따라 행동 할 수 있음을 의미합니다. :rootCSS의 의사 클래스인가, 문서의 루트 요소를 일치 - <html>요소. 그것은 유사하다 html 선택기,하지만 더 높은 우선 순위를 가지고있다.
당신은 어디에서나 문서에 액세스 할 수있는 :root 사용자 지정 특성의 값 :
1 DIV { 2 높이 : 계산치 (VAR (- 뷰 높이) - 10px) ; 3 }
또한 CSS 변수의 대체 값을 포함 할 수 있습니다. 예를 들면 :
1 DIV { 2 높이 : VAR (- 뷰 높이 100 픽셀) ; 3 }
대신 백 오프 값으로 사용 된 사용자 정의 속성, 만약.
자바 스크립트의 사용은 CSS 사용자 정의 속성을 변경하려면
1 CONST VH = document.documentElement.clientHeight; 2 document.documentElement.style.setProperty ( '- 뷰 높이'+ VH 'PX');