CSS 변수의 놀라운 세부 사항 - var() 및 멋진 예제 사용

CSS 변수 포스팅 후반부, 전반부는 여기까지입니다.
이번 글에서는 var()의 세부사항을 살펴보겠습니다. 그리고 두 가지 멋진 예:

• CSS 변수를 이용한 애니메이션
• 시스템 설정 감지 기능을 갖춘 순수 CSS 다크 모드 토글

var() 사용

var()는 사용자 정의 속성 값(CSS 변수)에 액세스합니다. 구문은 다음과 같습니다.

var( <custom-property-name>, <fallback-value>? )
</fallback-value></custom-property-name>

기본 규칙

1. 첫 번째 매개변수는 CSS 변수여야 합니다. var(20px)와 같은 직접적인 값은 오류가 발생합니다. var()는 사용자 정의 속성 이름만 허용하기 때문입니다.

2. var()는 속성 이름을 대체할 수 없습니다. 즉, var(--prop-name): 20px; var()는 속성 값에만 사용하도록 제한되어 있기 때문입니다.
   

.foo {
  margin: var(20px); /* Error, 20px is not a CSS variable */

  --prop-name: margin-top;
  var(--prop-name): 20px; /* Error, cannot use var() this way */
}

상세한 행동

1. var(--b, fallback_value) 폴백: 두 번째 매개변수는 --b가 유효하지 않은 경우 사용되는 폴백 값 역할을 합니다.

2. var(--c,) 빈 대체 구문: 대체 값이 비어 있는 경우 구문은 유효한 상태로 유지되며 --c가 유효하지 않은 경우 기본적으로 빈 값이 사용됩니다. .

3. 여러 쉼표: var(--d, var(--e), var(--f), var(--g))에서 첫 번째 쉼표 뒤의 모든 내용은 다음과 같습니다. 폴백으로 처리되므로 --d가 유효하지 않은 경우 var() 표현식은 var(--e), var(--f), var(--g)를 하나의 폴백으로 평가하여 결과를 결정합니다.

4. 완전한 CSS 토큰으로서의 var(): 이 함수는 20px처럼 완전한 CSS 토큰 역할을 합니다. 따라서 var(--size)var(--unit)은 20px을 생성하지 않으며 유효하지 않은 것으로 간주됩니다.

5. CSS 변수에 이니셜 사용: CSS 변수에 이니셜을 할당하면 해당 변수가 유효하지 않음을 의미합니다. 이니셜을 값으로 표시하려면 fallback에 배치해야 합니다.

6. url() 및 var() 사용법: url()은 완전한 CSS 토큰으로 처리되므로 변수 내에서 전체 url()을 정의해야 합니다.
   

:root {
  /* 1. */
  margin: var(--b, 20px); /* Uses 20px if --b is invalid */

  /* 2. */
  padding: var(--c,) 20px; /* Falls back to 20px if --c is invalid */

  /* 3. */
  font-family: var(--fonts, "lucida grande", tahoma, Arial); /* Uses fallback font stack if --fonts is invalid */

  /* 4. */
  --text-size: 12;
  --text-unit: px;
  font-size: var(--text-size)var(--text-unit); /* Invalid, as it does not resolve to 12px */

  /* 5. */
  --initialized: initial;
  background: var(--initialized, initial); /* Results in background: initial */

  /* 6. */
  --invalid-url: "https://useme.medium.com";
  background: url(var(--invalid-url)); /* Invalid, as url() cannot parse var() */

  --valid-url: url(https://useme.medium.com);
  background: var(--valid-url); /* Correct usage */
}

가변 해상도 및 범위

CSS 변수는 다른 CSS 속성과 마찬가지로 범위 및 구체성에 대한 CSS 관련 규칙을 따릅니다. 이러한 요소가 CSS 변수에 어떤 영향을 미치는지 이해하면 보다 정확한 제어가 가능합니다.

전역 및 범위 변수:
:root에 정의된 변수는 전역적으로 적용되는 반면, 선택자에 정의된 변수는 범위가 더 제한적입니다.

   :root {
     --main-color: blue; /* Globally applied */
   }

   .container {
     --main-color: green; /* Scoped, applies only within .container */
   }

구체성에 따른 우선순위:
더 높은 특이성은 CSS 변수에 대한 더 낮은 특이성을 재정의합니다.

var( <custom-property-name>, <fallback-value>? )
</fallback-value></custom-property-name>

.foo {
  margin: var(20px); /* Error, 20px is not a CSS variable */

  --prop-name: margin-top;
  var(--prop-name): 20px; /* Error, cannot use var() this way */
}

이 예에서 .box가 --green: 0으로 재정의되기 전에 -- background가 rgb(255, 255, 255)로 확인되었으므로 .box의 배경색은 흰색으로 유지됩니다.

유사 클래스를 사용하여 변수 재평가:
동일한 레벨에 정의되면 의사 클래스 상태에 따라 변수가 변경됩니다.

:root {
  /* 1. */
  margin: var(--b, 20px); /* Uses 20px if --b is invalid */

  /* 2. */
  padding: var(--c,) 20px; /* Falls back to 20px if --c is invalid */

  /* 3. */
  font-family: var(--fonts, "lucida grande", tahoma, Arial); /* Uses fallback font stack if --fonts is invalid */

  /* 4. */
  --text-size: 12;
  --text-unit: px;
  font-size: var(--text-size)var(--text-unit); /* Invalid, as it does not resolve to 12px */

  /* 5. */
  --initialized: initial;
  background: var(--initialized, initial); /* Results in background: initial */

  /* 6. */
  --invalid-url: "https://useme.medium.com";
  background: url(var(--invalid-url)); /* Invalid, as url() cannot parse var() */

  --valid-url: url(https://useme.medium.com);
  background: var(--valid-url); /* Correct usage */
}

---

다음으로 CSS 변수에 대한 몇 가지 고급 사용 사례를 살펴보겠습니다.

사용 예 A: 애니메이션

CSS 변수는 브라우저가 데이터 유형을 추론할 수 없기 때문에 직접 애니메이션을 적용할 수 없습니다. 이 문제를 해결하려면 @property를 사용하여 변수의 유형과 초기 값을 정의하면 브라우저가 변수에 애니메이션을 적용하는 방법을 이해할 수 있습니다.

   :root {
     --main-color: blue; /* Globally applied */
   }

   .container {
     --main-color: green; /* Scoped, applies only within .container */
   }

   :root {
     --main-color: blue;
   }

   .section {
     --main-color: green; /* Overrides :root definition */
   }

   .section p {
     color: var(--main-color); /* Shows green */
   }

   p {
     color: var(--main-color); /* Shows blue */
   }

시스템 기본 설정에 맞는 수동 토글 추가

시스템 설정은 기본적으로 테마를 제어하지만 사용자에게 밝은 테마와 어두운 테마 사이를 수동으로 전환할 수 있는 옵션을 제공할 수 있습니다. 이를 달성하기 위해 상태를 전환하는 확인란을 추가할 수 있습니다. 이상적으로는 체크박스를 선택하면 다크 모드, 선택을 해제하면 라이트 모드를 나타냅니다.

그러나 CSS는 시스템 설정을 자동으로 감지하여 그에 따라 체크박스 상태를 변경할 수 없습니다. 특히 어두운 모드에서는 더욱 그렇습니다. 이러한 제한을 처리하기 위해 CSS 변수와 :has() 선택기를 사용하여 체크박스 상태에 따라 테마 전환을 제어할 수 있습니다.

이 모든 것을 CSS로 구현해보고 싶었지만 사용자의 시스템이 밝거나 어두운 모드로 설정되어 있을 수 있기 때문에 CSS만으로는 어두운 모드의 확인란을 자동으로 선택할 수 없습니다.

산을 옮길 수 없다면 길을 안내하겠습니다. 해결 방법은 다음과 같습니다.

• CSS를 사용하여 시각적인 'OFF' 상태가 밝은 모드를 나타내고 'ON'이 어두운 모드를 나타내는 토글 스위치를 만들겠습니다.

• 시스템이 조명 모드로 설정된 경우: 확인란을 선택 취소하면 "OFF" 상태(밝은 모드)에 해당합니다. 선택시 “ON”상태(다크모드)에 해당됩니다.

• 시스템이 다크 모드로 설정된 경우: 시스템 기본 설정이 반전되므로 시각적 상태도 반전됩니다. 확인란을 선택하지 않으면 "ON"(다크 모드)에 해당합니다. 선택시 “OFF”(라이트 모드)에 해당됩니다.

이 효과를 얻으려면 두 가지 주요 요소가 필요합니다.

첫 번째: 시스템 설정 및 체크박스 상태에 따라 변경되는 변수

var( <custom-property-name>, <fallback-value>? )
</fallback-value></custom-property-name>

두 번째: 확인된 상태 및 ON/OFF 표현에 대한 시스템 설정에 따른 동작 전환

밝은 모드와 어두운 모드의 CSS 속성은 시스템 설정에 따라 반전됩니다.

.foo {
  margin: var(20px); /* Error, 20px is not a CSS variable */

  --prop-name: margin-top;
  var(--prop-name): 20px; /* Error, cannot use var() this way */
}

CSS 변수 트릭으로 변수 설정 단순화

여기서는 Space Toggle 기술을 사용하여 변수 설정을 단순화하겠습니다. 다음은 코드와 작동 방식에 대한 설명입니다.

:root {
  /* 1. */
  margin: var(--b, 20px); /* Uses 20px if --b is invalid */

  /* 2. */
  padding: var(--c,) 20px; /* Falls back to 20px if --c is invalid */

  /* 3. */
  font-family: var(--fonts, "lucida grande", tahoma, Arial); /* Uses fallback font stack if --fonts is invalid */

  /* 4. */
  --text-size: 12;
  --text-unit: px;
  font-size: var(--text-size)var(--text-unit); /* Invalid, as it does not resolve to 12px */

  /* 5. */
  --initialized: initial;
  background: var(--initialized, initial); /* Results in background: initial */

  /* 6. */
  --invalid-url: "https://useme.medium.com";
  background: url(var(--invalid-url)); /* Invalid, as url() cannot parse var() */

  --valid-url: url(https://useme.medium.com);
  background: var(--valid-url); /* Correct usage */
}

여기서 핵심은 --Background-color: var(--light, #fbfbfb) var(--dark, #121212); 줄에 있습니다. 여기서 배경색은 --light 및 --dark 값에 따라 달라지며 속성의 if/else를 효과적으로 시뮬레이션합니다.

어떻게 작동하나요? 처음에는 --light: var(--ON); --ON: 초기; --ON을 잘못된 상태로 만듭니다. 한편 --OFF는 빈 문자열로 설정됩니다. var(--light, #fbfbfb) var(--dark, #121212)에 적용하면 유효하지 않은 --light 변수는 기본값이 #fbfbfb로 설정되고 유효한 --dark 변수(비어 있음)는 --Background-color를 허용합니다. #fbfbfb와 같습니다.

다른 모든 색상 변수는 동일한 논리를 따르며 --light 및 --dark의 상태에 따라 조정됩니다. 이렇게 하면 각 색상 변수를 한 번만 정의하면 됩니다.

상태 전환이 간단해졌습니다. 다크 모드가 활성화된 경우 --light: var(--OFF);를 사용하십시오. 및 --dark: var(--ON);. 라이트 모드에서는 이를 반대로 하세요. 즉시 직관적이지는 않지만 이 방법은 현재 CSS에서 가장 효과적입니다. 더 나은 솔루션이 있다면 시도해 볼 가치가 있습니다.

전체 예: CodePen 예

---

요약

CSS는 2016년 이후 주요 브라우저에서 CSS 변수를 사용할 수 있게 되면서 계속 발전하고 있습니다. @property 및 :has()와 같은 새로운 기능은 CSS 변수의 유연성을 더욱 확장하고 있습니다. 다른 새로운 도구와 결합하여 CSS 변수는 더욱 강력해지고 있습니다. 예를 들어 이제 스크롤 기반 애니메이션을 향상하여 시각적으로 역동적인 효과를 만들 수 있습니다. 프로그래밍 언어의 변수와 마찬가지로 CSS에 상태를 저장하는 핵심 요소로서 CSS 변수에 대한 확실한 이해는 향후 더욱 정교한 스타일 지정 및 디자인에 매우 중요합니다.

---

참고자료

• https://stackoverflow.com/questions/42330075/is-there-a-way-to-interpolate-css-variables-with-url/42331003#42331003
• https://kizu.dev/cycl-toggles/#was-this-always-possible
• https://dev.to/afif/what-no-one-told-you-about-css-variables-553o
• https://hackernoon.com/cool-css-variable-tricks-to-try-uyu35e9
• https://lea.verou.me/blog/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/

위 내용은 CSS 변수의 놀라운 세부 사항 - var() 및 멋진 예제 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!