사용자 정의 값을 설정할 때 연속된 하이픈(--)은 접두어로 사용한다.
사용자 정의 값을 지정하기 위한 사용자 속성(변수)명은 대소문자를 구분한다. 다음의 선언은 별개로 처리한다.
--my-color: #FF0000;
--My-color: #FFFF00;
이렇게 선언된 값은 다음과 같이 var()
함수를 이용해 사용이 가능하다.
background-color: var(--my-color);
border-color: var(--My-color);
사용자 정의 값은 유효 범위를 가지고 있다. 루트(:root
) 또는 html
선택자에서 정의한 사용자 정의 값은 전역 값으로 동일 웹 페이지내 모든 CSS 속성에서 사용이 가능하다. 사용자 정의 값은 하위로 상속되어지므로 루트가 아닌 다른 선택자에서 정의한 사용자 정의 값은 종속 관계가 아니라면 사용할 수 없다. 또한 종속 관계라 할 지라도 상위에서 사용할 수 없다.
<declaration-value> 타입은 시퀀스에 허용되지 않는 토큰이 포함되지 않는 한 하나 이상의 토큰 시퀀스와 일치한다. 유효한 선언이 값으로 가질 수 있는 전체를 나타낸다.
<declaration-value>?
--mycolor: #FFFF00;
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Custom Properties for Cascading Variables Module Level 1 | Last review date: 2022-11-27 |