사용자 지정 CSS 속성 사용하기 (변수)

This translation is incomplete. Please help translate this article from English

사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 작성자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성 표기법(--main-color: black;)을 사용해 정의하고, var() 함수를 사용해 접근할 수 있습니다. (color: var(--main-color);)

복잡한 웹사이트는 어마어마한 양의 CSS를 가지고 있는데, 종종 많은 값을 반복적으로 사용합니다. 예를 들어, 수 백 곳의 서로 다른 위치에서 같은 색상을 사용한다면, 그 색을 바꾸고 싶을 때 대규모 전역 검색 바꾸기를 피할 수 없습니다. 사용자 지정 속성을 사용하면 한 영역에 값을 저장해놓고, 다른 여러 공간에서 참조해갈 수 있습니다. 추가 장점은 의미를 가진 식별자라는 점인데, #00ff00보다는 --main-text-color가 이해하기 쉽다는 것입니다. 특히 같은 색을 다른 맥락에서 사용할 때 이 장점이 도드라집니다.

사용자 지정 속성은 종속 대상이며 부모로부터 상속합니다.

기본 사용법

사용자 지정 속성 선언:

element {
  --main-bg-color: brown;
}

사용자 지정 속성 사용:

element {
  background-color: var(--main-bg-color);
}

첫 단계

동일한 색상을 여러 클래스에 적용하는, 다음의 간단한 예제로 시작하겠습니다.

.one {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.five {
  background-color: brown;
}

HTML에 적용해보겠습니다.

<div>
  <div class="one">1:</div>
  <div class="two">2: Text <span class="five">5 - more text</span></div>
  <input class="three">
  <textarea class="four">4: Lorem Ipsum</textarea>
</div>

결과는 다음과 같습니다.

반복되는 CSS에 주목해보세요. 배경 색상은 여러 곳에서 brown 으로 설정되었다. 일부 CSS 선언의 경우 케스케이드에서 더 높은 곳에 선언하고, CSS 상속을 통해 이 문제를 자연스럽게 해결할 수도 있다. 하지만 중요한 프로젝트의 경우에는 이런 방식으로도 해결이 안될 수 있다. :root 가상 클래스에 변수를 선언해 놓고, CSS 작성자가 해당 변수를 사용한다면 위와 같이 반복적으로 속성값을 추가하지 않아도 된다.

:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 100px;
}

.five {
  background-color: var(--main-bg-color);
}

이전 예제와 동일한 결과물을 얻게 되지만, 원하는 속성을 넣기 위해 한 개의 표준 선언이 추가되었다.

상속

사용자 지정 속성은 상속을 받는다. 즉, 주어진 요소에 사용자 속성을 위한 값을 지정해 놓지 않으면, 해당 부모의 속성 값이 적용된다:

<div class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></div>
  </div>
</div>

CSS는 다음과 같다 :

.two {
  --test: 10px;
}

.three {
  --test: 2em;
}

이 경우, var(--test) 의 결과 값은 다음과 같다:

  • class="two" 요소: 10px
  • class="three" 요소: 2em
  • class="four" 요소: 10px (부모로부터 상속받음)
  • class="one" 요소: 속성 값 없음, 사용자 지정 속성의 기본 값.

이것들은 실제 CSS변수가 아니라 사용자 지정 속성이라는 것을 염두해 두자. 이 값들은 다른 규칙에서 사용하기 위해 따로 저장되는 것이 아니라, 필요할 때만 계산된다. 예를 들어, 요소의 속성을 설정하거나, 형제의 자손 규칙에서 이 요소를 검색할 수는 없다. 이 속성은 일반적인 CSS와 같이, 선택자가 일치하거나 해당 선택자의 하위 항목일 경우에만 설정된다.

대체값

주어진 변수가 아직 정의되지 않았을 때, var() 를 이용하여 여러 개의 대체 변수를 정의할 수 있다. 이는 사용자 정의 요소(Custom Element)및 섀도우 돔(Shadow DOM)으로 작업할 때 유용하게 쓸 수 있다.

함수에 있어서의 첫번째 논쟁은 대체될 사용자 속성의 이름이다. 두번째는 아래와 같이 잘못된 사용자 속성을 참조하였을 때 대신 사용할 수 있는 대체 변수이다:

.two {
  color: var(--my-var, red); /* --my-var가 정의되지 않았을 경우 red로 표시됨 */
}

.three {
  background-color: var(--my-var, var(--my-background, pink)); /* my-var와 --my-background가 정의되지 않았을 경우 pink로 표시됨 */
}

.three {
  background-color: var(--my-var, --my-background, pink); /* 유효하지 않음: "--my-background, pink" */
}

사용자 속성같은 대체 구문은 쉼표를 허용한다. 예를 들어, var(--foo, red, blue)는 빨강, 파랑의 fallback을 정의하고 있다; 즉, 첫번째 쉼표와 함수 마지막 사이에 있는 값들은 모두 대체 변수로 간주한다.

유효성과 값

각 속성과 연관된 기본 CSS 개념의 유효성은 사용자 지정 속성과 관련하여 별로 유용하지 않다. 사용자 속성 값을 분석할 때, 브라우저는 그것들이 어디서 사용되는지 모르기 때문에 거의 모든 값을 유효한 것으로 간주할 수 밖에 없다.

불행히도, 이 유효한 값들은 var() 함수 표현을 통하여 이해할 수 없는 문맥 안에서도 사용될 수 있다. 속성 및 사용자 변수로 인해 유효하지 않은 CSS 선언문이 만들어지면 계산된 시간에 유효한 새로운 개념이 생기게 된다.

유효하지 않은 변수를 만나면

When the browser encounters an invalid var() substitution, the initial or inherited value of the property is used.

Consider the code snippet below.

HTML

<p>This paragraph is initial black.</p> 

CSS

:root { --text-color: 16px; } 
p { color: blue; } 
p { color: var(--text-color); }

As expected, the browser substitutes the value of --text-color in place of var(--text-color), but 16px is not a valid property value for color. After substitution, the property doesn’t make any sense. The browser handles this situation in two steps:

  1. Check if the property color is inheritable. Yes, but <p> doesn't have any parent with color property. So move on to the next step.
  2. Set the value to its default initial value, i.e., black.

Result

The paragraph color will not be blue because invalid substitution is replaced by the initial value, not by the fallback. If you had written color: 16px without any variable substitutes, then it was a syntax error. The previous declaration will then be used.

Note: While a syntax error in a CSS property / value pair will lead to the line being ignored, using a cascaded value, invalid substitution -- using a custom property value that is invalid -- is not ignored, leading to the value to be inherited.

JavaScript에서의 값

JavaScript로 사용자 속성값을 사용하는 것은 표준 속성을 사용하는 것과 같다.

// 인라인 스타일에서 변수 얻기
element.style.getPropertyValue("--my-var");

// 어느 곳에서나 변수 얻기 
getComputedStyle(element).getPropertyValue("--my-var");

// 인라인 스타일에 변수 설정하기
element.style.setProperty("--my-var", jsVar + 4);

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
--*Chrome Full support 49
Full support 49
Full support 48
Disabled
Disabled From version 48: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Full support 15Firefox Full support 31
Full support 31
No support 29 — 55
Notes Disabled
Notes From Firefox 29 until Firefox 31, this feature was implemented by the var-variablename syntax.
Disabled From version 29 until version 55 (exclusive): this feature is behind the layout.css.variables.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 36Safari Full support 9.1WebView Android Full support 49Chrome Android Full support 49
Full support 49
Full support 48
Disabled
Disabled From version 48: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Full support 31
Full support 31
No support 29 — 55
Notes Disabled
Notes From Firefox 29 until Firefox 31, this feature was implemented by the var-variablename syntax.
Disabled From version 29 until version 55 (exclusive): this feature is behind the layout.css.variables.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 36Safari iOS Full support 9.3Samsung Internet Android Full support 5.0
env()
Experimental
Chrome Full support 69Edge No support NoFirefox Full support 65IE No support NoOpera Full support 56Safari Full support 11.1
Full support 11.1
No support 11 — 11.1
Alternate Name
Alternate Name Uses the non-standard name: constant
WebView Android Full support 69Chrome Android Full support 69Firefox Android Full support 65Opera Android ? Safari iOS Full support 11.3
Full support 11.3
No support 11 — 11.3
Alternate Name
Alternate Name Uses the non-standard name: constant
Samsung Internet Android Full support 10.0
var()Chrome Full support 49
Full support 49
Full support 48
Disabled
Disabled From version 48: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Full support 15Firefox Full support 31
Full support 31
No support 29 — 55
Disabled
Disabled From version 29 until version 55 (exclusive): this feature is behind the layout.css.variables.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 36Safari Full support 9.1WebView Android Full support 50Chrome Android Full support 49
Full support 49
Full support 48
Disabled
Disabled From version 48: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Full support 31
Full support 31
No support 29 — 55
Disabled
Disabled From version 29 until version 55 (exclusive): this feature is behind the layout.css.variables.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 36Safari iOS Full support 9.3Samsung Internet Android Full support 5.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.

같이 보기