CSS 사용자 정의 속성으로 CSS 동적 만들기

한동안 CSS를 작성해 왔다면 언젠가는 변수가 필요하다고 느꼈을 것입니다. CSS 사용자 정의 속성은 CSS 자체의 변수 구현과 다소 비슷합니다. 그러나 적절하게 사용하면 변수 그 이상일 수 있습니다.

CSS 사용자 정의 속성을 사용하면 다음을 수행할 수 있습니다.

• 원하는 이름으로 속성에 임의의 값 할당
• var() 함수를 사용하여 다른 속성에서 이러한 값을 사용합니다.

CSS 사용자 정의 속성에 대한 지원은 현재 약간 불안정한 경로이며 일부 브라우저는 사전에 활성화하거나 true로 설정해야 하는 플래그 아래에서 지원하지만 지원은 앞으로 극적으로 증가할 것으로 예상되므로 이해하는 것이 중요합니다. 사용 및 활용 방법. ¹

이 기사에서는 CSS 사용자 정의 속성을 사용하여 스타일시트를 좀 더 동적으로 만드는 방법을 배우게 됩니다.

원래의 덜 강력한 CSS 변수

CSS 사용자 정의 속성에 대해 논의하기 전에 CSS에는 일종의 변수가 있었고 이것이 바로 currentColor 키워드라는 점에 유의해야 합니다. 거의 사용되지 않지만 널리 지원되는 이 변수는 요소의 현재 색상 값을 나타냅니다. color 값을 허용하는 모든 선언에 사용할 수 있으며 완벽하게 계단식으로 배열됩니다.

예를 살펴보겠습니다.

 .element { color: blue; border: 2px solid currentColor; /* Sets a solid, 2px wide, blue border to the element */ }

계단식 배열 외에도 다음을 생성할 수도 있습니다.

 .element span { background: currentColor; /* Sets a blue background color for every span child of .element, unless a color property is declared in this same block */ } .element span.red { color: red; /* Sets a red background color for every span child of .element that has the class .red, since currentColor is applied to the background of every span child of .element no matter if they have the .red class or not */ }

currentColor 의 주요 문제는 사양 자체에 변수로 포함되지 않았다는 사실을 제외하고는 color 속성의 값만 수락한다는 점입니다. 이는 경우에 따라 작업하기 어렵게 만들 수 있습니다.

본격적인 CSS 변수

CSS 전처리기/후처리기 사용의 주요 이점 중 하나는 값을 키워드에 저장하고 필요한 경우 특정 선택기로 범위를 지정할 수 있다는 것입니다.

개발자들의 오랜 요청 끝에 CSS에 대한 기본 변수 해석을 위한 초안이 작성되었습니다. 이들은 공식적으로 CSS 사용자 정의 속성이라고 하지만 때로는 CSS 변수라고도 합니다.

기본 CSS 사용자 정의 속성에 대한 현재 사양은 전처리기/후처리기 변수와 동일한 모든 동작을 다룹니다. 이를 통해 색상 코드, 알려진 모든 단위의 크기 또는 필요한 경우 정수만 저장할 수 있습니다(예: 동일한 제수 또는 승수를 사용해야 하는 경우).

CSS 사용자 정의 속성에 대한 구문은 다른 언어에 비해 약간 이상하지만 동일한 CSS 에코시스템의 다른 기능과 해당 구문을 비교하면 충분히 이해가 됩니다.

 :root { --color-black: #2e2e2e; } .element { background: var(--color-black); }

이제 "이게 무슨 구문이야!?"라고 생각할 수 있습니다.

글쎄요, Lea Verou는 그녀의 놀라운 강연인 CSS Variables: var(–subtitle)에서 말했듯이 이 "대시-대시" 구문의 이유를 절대 단순하게 설명합니다.

그들은 다른 CSS 속성 […]과 똑같은 방식으로 작동합니다. 많은 사람들이 왜 우리가 달러[기호]나 이와 유사한 것을 사용하지 않았는지 묻습니다. 그리고 우리가 달러[기호]를 사용하지 않은 이유는 사람들이 SASS 또는 전처리기 변수와 CSS 변수. 둘 다 다른 것이고, 다른 목표를 달성하고, SASS로는 절대 할 수 없는 CSS 변수로 할 수 있는 일이 있고, CSS 변수로는 할 수 없는 SASS 변수로 할 수 있는 일이 있으므로 우리는 다음을 원합니다. 사람들은 같은 스타일시트에서 둘 다 사용할 수 있으므로 대시-대시 구문을 빈 접두사가 있는 접두사 속성과 같은 것으로 상상할 수 있습니다.

선택자, 속성 이름 또는 미디어 쿼리 선언을 제외한 모든 곳에서 사용할 수 있는 var() 함수를 사용하여 사용자 정의 속성의 값을 검색할 수 있습니다.

전처리기/후처리기 변수는 컴파일 시에만 사용되지만 CSS 변수는 동적으로 사용 및 업데이트될 수 있습니다. 이것은 무엇을 의미 하는가? 실제 CSS 스타일시트에 보존된다는 의미입니다. 따라서 스타일시트가 컴파일된 후에도 변수라는 개념은 유지됩니다.

좀 더 명확하게 하기 위해 몇 가지 예를 사용하여 상황을 설명하겠습니다. 다음 코드 블록은 SASS 스타일시트의 일부입니다.

 :root { $value: 30px; } @media screen and (min-width: 768px) { $value: 60px; } .corners { border-radius: $value; }

이 SASS 선언 및 규칙 스니펫은 다음과 같이 CSS로 컴파일됩니다.

 .corners { border-radius: 30px; }

SASS 변수는 CSS 파일 내부에 존재할 수 없기 때문에 (또는 더 정확하게는 CSS 파일에 강제로 존재할 수 있지만 무시되기 때문에 :root 내부의 속성과 media 쿼리가 컴파일 후 손실되는 것을 볼 수 있습니다. 일부 구문은 유효하지 않은 CSS이므로 나중에 변수 값을 업데이트할 수 없습니다.

이제 동일한 경우를 고려하되 CSS 전처리기/후처리기가 적용되지 않은 CSS 변수만 사용하여 적용해 보겠습니다(즉, 변환 또는 컴파일이 수행되지 않음).

 :root { --value: 30px; } @media screen and (min-width: 768px) { --value: 60px; } .corners { border-radius: var(--value); }

분명히 우리는 아무것도 컴파일/트랜스파일하지 않았기 때문에 아무 것도 변경되지 않았으며 사용자 정의 속성의 값은 동적으로 업데이트될 수 있습니다. 따라서 예를 들어 JavaScript와 같은 것을 사용하여 --value 의 값을 변경하면 var() 함수를 사용하여 호출되는 모든 인스턴스에서 값이 업데이트됩니다.

사용자 지정 속성의 기능은 이 기능을 매우 강력하게 만들어 자동 접두사와 같은 작업을 수행할 수도 있습니다.

Lea Verou는 clip-path 속성을 사용하여 예를 설정합니다. 접두사를 지정하려는 속성의 값을 initial 로 설정하지만 사용자 지정 속성을 사용하는 것으로 시작한 다음, 접두사가 붙은 각 속성의 값을 사용자 지정 속성 값으로 설정합니다.

 * { --clip-path: initial; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); }

그 후에 남은 것은 선택기 내부의 사용자 정의 속성 값을 변경하는 것입니다.

 header { --clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 2.5em), 0% 100%); }

이에 대해 좀 더 알고 싶다면 CSS 변수를 사용한 자동 접두사에 대한 Lea의 전체 기사를 확인하세요.

방탄 CSS 사용자 정의 속성

언급했듯이 CSS 사용자 정의 속성에 대한 브라우저 지원은 여전히 ​​대부분 비표준입니다. 그렇다면 이것을 어떻게 극복할 수 있을까요?

여기에서 PostCSS와 플러그인 postcss-css-variables가 작동합니다.

PostCSS가 무엇인지 궁금하다면 내 기사 PostCSS: SASS's New Play Date를 확인하고 완료한 후 여기로 돌아오십시오. 그러면 이 놀라운 도구로 무엇을 할 수 있는지에 대한 기본 아이디어를 갖게 되며 나머지 기사를 읽을 때 방향 감각이 흐트러지지 않을 것입니다.

postcss-css-variables 플러그인과 그 preserve 옵션을 true로 설정하면 출력에서 ​​모든 var() 함수 선언을 유지하고 계산된 값을 대체 선언으로 가질 수 있습니다. 또한 계산된 --var 선언을 유지합니다. 이 PostCSS 플러그인을 사용하면 변환 프로세스 후에 사용자 정의 속성을 동적으로 업데이트할 수 있지만, 구체적으로 대상을 지정하고 개별적으로 명시적으로 변경하지 않는 한 대체 값은 동일하게 유지됩니다.

CSS 변수를 사용하는 전/후처리기 없는 방법을 찾고 있다면 CSS @support 규칙을 사용하여 현재 지원을 항상 수동으로 확인하고 지원이 고르지 않거나 존재하지 않을 때 적절한 대체를 적용할 수 있습니다. 예를 들어:

 :root { --color-blue: #1e90ff; /* hex value for dodgerblue color */ } .element { background: var(--color-blue); } @supports (not(--value: 0)) { /* CSS variables not supported */ .element { background: dodgerblue; } }

JavaScript를 사용하여 사용자 정의 속성 값 변경

이 전체 기사에서 JavaScript를 사용하여 변수를 업데이트할 수 있다고 언급했으므로 이에 대해 알아보겠습니다.

다음과 같은 CSS가 있다고 가정할 때 밝은 테마가 있고 어두운 테마로 전환하고 싶다고 가정해 보겠습니다.

 :root { --text-color: black; --background-color: white; } body { color: var(--text-color); background: var(--background-color); }

다음을 수행하여 --text-color 및 --background-color 사용자 정의 속성을 업데이트할 수 있습니다.

 var bodyStyles = document.body.style; bodyStyles.setProperty('--text-color', 'white'); bodyStyles.setProperty('--background-color', 'black');

흥미로운 사용 사례

CSS 사용자 정의 속성의 사양에 관한 수년간의 개발 및 토론을 통해 몇 가지 흥미로운 사용 사례가 나타났습니다. 다음은 몇 가지 예입니다.

테마: 사이트에 테마 세트를 사용하는 것은 CSS 변수를 구현할 때 다소 쉽습니다. 현재 스타일의 밝거나 어두운 변형을 원하십니까? JavaScript를 사용하여 일부 사용자 정의 속성의 값을 변경하기만 하면 됩니다.

간격 조정: 열 사이의 거터와 같이 사이트 간격을 미세 조정해야 합니까? 단일 CSS 변수의 값을 변경하고 이 변경 사항이 사이트 전체에 반영된 것을 확인하십시오.

완전 동적 calc() 함수: 이제 이러한 함수 내에서 사용자 정의 속성을 사용하여 완전히 동적 calc() 함수를 가질 수 있으므로 JavaScript 내에서 복잡하거나 일시적인 계산을 수행한 다음 각 인스턴스에서 이 값을 수동으로 업데이트할 필요가 없습니다.

CSS 파일에 새 생명 불어넣기

CSS 사용자 정의 속성은 스타일시트에 생명을 불어넣는 강력하고 혁신적인 방법으로 CSS에서 처음으로 완전히 동적인 값을 도입합니다.

사양은 현재 후보 권장 사항 상태에 있습니다. 즉, 표준화가 코앞에 다가왔음을 의미하므로 이 기능을 자세히 살펴보고 최대한 활용해야 합니다.