더 나은 UX를 위한 CSS 사용자 정의 속성 사용
게시 됨: 2019-11-29
최종 업데이트 - 2021년 7월 8일
CSS3는 CSS 사양이 오랫동안 가지고 있었던 가장 큰 추가 사항 중 하나를 가져왔습니다. 수년 동안 개발자를 괴롭혔던 핵심 문제를 해결하고 사람들이 SASS와 같은 전처리기 사용을 선호하는 주요 원인인 변수 사용 기능을 해결했기 때문에 많은 화제를 불러일으켰습니다.
CSS 변수가 추가되면서 테마와 같은 기본 기능을 지원하기 위해 작성해야 했던 많은 코드가 더 이상 필요하지 않습니다. 반복을 피하고 웹 앱에서 응답성을 추가하여 동적 글꼴 크기 및 단순성과 같은 훨씬 더 많은 사용 사례를 활성화하는 데 사용할 수 있는 유용한 기능입니다.
CSS 변수로 복잡함 없애기
대부분의 앱의 공통 기능은 앱 전체에서 동일하고 일관되게 유지되어야 하는 브랜드 색상입니다. 아무도 나중에 참조하기 위해 머리에 10가지 다른 16진수 값을 저장할 생각을 하지 않으며, 값을 복사하기 위해 파일 사이를 왔다 갔다 하는 것은 번거로울 뿐만 아니라 생산성에도 해롭습니다. 이제 해당 색상을 변경해야 하는 경우 수행해야 하는 작업의 양을 상상해 보십시오.
WordPress와 함께 CSS 전처리기를 사용 하는 것이 문제를 처리하는 가장 일반적인 방법입니다. 이들은 믹스인, 중첩 선언 및 물론 변수와 같은 전체 기능에 대한 지원을 제공하며 이는 생산성을 크게 향상시킵니다.
코드를 한 번만 작성하면 CSS로 컴파일되어 원하는 경우 자유롭게 액세스하고 변경할 수 있습니다. 그러나 런타임 시 이러한 값을 찾아 변경할 수 없다는 점, 예를 들어 웹 앱에 어두운 테마를 추가할 수 없다는 것이 가장 큰 단점입니다. SASS가 지원하지 않을 뿐만 아니라 지원하지 않을 가능성이 높기 때문에 중요한 문제입니다.
CSS 열기에 사용자 정의 내장 변수를 추가하면 특히 테마 및 반응형 디자인과 관련하여 응용 프로그램을 작성하는 방법에 큰 영향을 미칩니다.
CSS 변수에 대한 브라우저 지원은 어떻습니까?
이것은 CSS 변수를 토론할 때 가장 많이 받는 질문입니다. Caniuse 에 따르면 CSS 변수에 대한 브라우저 지원은 93.16%입니다. 모든 최신 브라우저(Chrome 49+, Firefox 31+, Safari 9.3+, Opera 36+ 및 Edge 16+)에서 지원됩니다. 항상 그렇듯이 IE는 쇼에서 빠져 있으며 놀라운 6.47% 의 시장 점유율을 가지고 있습니다. 오래된 브라우저를 지원해야 하는 가난한 개발자의 경우 걱정하지 마십시오. Polyfills 또는 더 정확하게는 ponyfills가 여기에 있습니다.
CSS 변수에 대한 공식적인 소개
CSS 변수에 익숙하다면 CSS 변수에 문제가 없어야 합니다.
SASS 변수는 다음과 같이 선언됩니다.
<사전>
$facebook-blue: #4267B2;
</pre>
CSS 변수는 약간 다르게 선언되지만:
<사전>
: 루트 {
– 브랜드 색상: #4267B2;
}
.브랜드 탐색 모음 {
배경: var(- -브랜드 색상);
}
</pre>
두 구문 사이에 몇 가지 차이점이 있습니다.
- CSS 변수 앞에 두 개의 대시가 있어야 합니다.
- CSS 변수는 일반적으로 ':root' 내부에 선언되지만 언제든지 다시 선언할 수 있습니다.
- CSS 속성은 'var()' 함수를 사용하여 검색합니다.
CSS 변수는 또한 몇 가지 추가 기능에 대한 액세스를 제공합니다.
계단식 값
CSS 속성은 일반적인 계단식 규칙에 따라 계단식으로 배열됩니다. 즉, 아래의 재선언은 위의 재선언에 영향을 미치지 않습니다.
<사전>
:root { -색상: 노란색; }
div { -색상: 파란색; }
#훌륭한 { –색상: 녹색; }
* { 색상: var(-색상); }
<p>노란색, 루트에서 상속됩니다!</p>
<div>나는 파란색이야!</div>
<div id="훌륭한">
효과가 있었다! 나는 녹색이야!
<p>나도 초록색이야! 위에서 상속됨!</p>
</div>
</pre>
대체 값
'var()' 함수는 여러 매개변수를 허용합니다. 두 번째는 사용자 정의 CSS 속성이 정의되지 않은 경우 폴백 값으로 사용할 수 있습니다. 이것은 JavaScript를 통해 CSS 변수에 액세스해야 하는 모든 사람에게 유용한 기능입니다.
서명은 'var(<custom-property-name> [, <declaration-value> ]?)'와 같으며 다음과 같이 사용할 수 있습니다.
<사전>
.브랜드 탐색 모음 {
배경: var(–brand-color, “#4267B2”);
}
</pre>
'-brand-color'가 정의되지 않은 경우 "#4267B2"가 대신 사용되며,
JavaScript를 통한 액세스
전처리기보다 CSS 변수를 사용하는 가장 좋은 이유 중 하나는 JavaScript를 통해 사용자 정의 변수에 액세스하는 기능입니다. 전처리기 변수는 브라우저에 존재하지 않습니다. 코드가 컴파일될 때 평가됩니다. 이렇게 하면 브라우저에서 전처리기 변수에 액세스할 수 없습니다. CSS 변수를 사용하면 속성이 브라우저에 있으므로 즉시 값을 편집할 수 있습니다.
사용자가 팝업 또는 이와 유사한 것을 통해 사용자 정의 색상을 선택할 수 있는 대시보드를 고려하십시오.
<사전>
.브랜드 탐색 모음 {
배경: var(–brand-color, “#4267B2”);
}
//현재 값을 얻기 위해
getComputedStyle(document.documentElement).getPropertyValue('–브랜드 색상');
//값을 설정하려면
document.documentElement.style.setProperty('–브랜드 색상', '빨간색');
//한 CSS 속성을 다른 속성에 할당할 수도 있습니다.
document.documentElement.style.setProperty('-브랜드 색상','var(-2차 색상)');
</pre>
글로벌 및 로컬 범위
JavaScript(또는 실제로 모든 프로그래밍 언어)에 익숙하다면 범위 지정의 개념을 이해하고 있을 것입니다. 변수는 일반적으로 로컬 범위 라고 하는 코드의 특정 부분에만 액세스할 수 있도록 정의 하거나 전역 범위 라고 하는 앱 전체에서 사용할 수 있도록 정의할 수 있습니다.
CSS 변수도 비슷하게 작동합니다. 브랜드 색상 및 세로 간격과 같은 일부 변수는 더 쉽게 참조할 수 있도록 전역적으로 범위를 지정해야 합니다. 이는 일반적으로 앱 전체에서 동일하게 유지되며 변경 시 모든 곳에 반영되어야 합니다. 대조적으로 로컬 범위 지정이 필요할 수 있는 변수에는 크고 작은 변형이 서로 다른 버튼이 포함됩니다. 특정 버튼의 패딩을 변경하려는 경우 변경 사항이 전체 DOM을 통과하는 것을 원하지 않을 것입니다. 앱의 한 지점에서 변경해야 합니다.
기본적으로 CSS 속성은 로컬 범위입니다. JavaScript나 다른 프로그래밍 언어로 작업한 경우 범위 지정에는 고유한 문제가 있습니다. 그것들은 상속될 수 있기 때문에 지역 변수처럼 작동하는데, 사용 방법에 주의하지 않으면 흥미로운 영향을 미칠 수 있습니다. 값은 계단식이므로 특히 JavaScript와 관련하여 값을 변경하는 방법을 염두에 두어야 합니다.
미디어 쿼리에 사용자 정의 속성 사용
전처리기와 마찬가지로 CSS 속성 사용의 주요 단점은 미디어 쿼리 내에서 사용할 수 없다는 것입니다. 예를 들어 이것은 작동하지 않습니다.
<사전>
@media(최소 너비: var(–중단점)){
패딩: 1rem;
}
</pre>
대신 할 수 있는 일은 미디어 쿼리 내에서 사용자 정의 속성을 재정의하는 것입니다. 브라우저가 축소될 때 글꼴 크기를 변경해야 한다면 운이 좋은 것입니다. CSS 변수를 사용하면 JavaScript를 사용하여 브라우저 변경 사항을 수신하고 한 번만 축소해야 하는 크기를 변경할 수 있습니다.
사용자 정의 CSS 속성의 실제 적용은 무엇입니까?
"오늘날 CDN 서비스를 사용하여 사이트 성능을 향상시키는 것 외에도 CSS 사용자 지정 속성을 사용하는 것은 생산성을 향상시키는 가장 빠른 방법 중 하나입니다."라고 맞춤형 종이 작성 서비스 웹 디자이너 인 Colby Stuart가 조언합니다 .
잘 강조된 이점 외에도 생산성을 추가합니다. 웹 앱에서 사용할 수 있는 실제 사례가 있습니까?
다크 모드 추가
소비자 시장을 사로잡은 새로운 트렌드는 웹 앱을 포함한 모든 최신 소프트웨어에서 다크 모드에 대한 수요입니다. 어두운 배경색을 추가하는 것보다 조금 더 복잡할 수 있습니다. 고려해야 할 다른 사항으로는 텍스트 색상이 어떻게 변경되고 흰색 배경이 있는 이미지가 영향을 받는지 등이 있습니다.
이 모든 것은 앱 전체에서 먼저 변수를 선언함으로써 가능합니다. 사용자가 스위치를 트리거하여 웹사이트 테마를 어둡게 만들면 CSS 변수를 변경하는 JavaScript 함수를 트리거합니다. 웹 앱이 더 복잡한 경우 여기에는 현재 이미지를 다크 모드 친화적인 이미지로 바꾸는 것도 포함될 수 있습니다.
WordPress에 다크 모드 추가
CSS 변수는 WordPress의 세계에 도달할 정도로 영향력이 있습니다. 오늘날 WordPress 앱의 다크 모드(또는 더 일반적으로 테마)를 만드는 것은 매우 간단합니다.
대부분의 WordPress 개발자는 사이트의 모양과 기능을 변경하기 위해 사용자 지정 프로그램에 의존합니다. 사이트의 CSS에 액세스하여 색상, 글꼴, 배경 이미지 등과 같은 항목에 대한 액세스를 제공합니다. 이것의 주요 문제는 CSS를 이런 식으로 변경하면 PHP가 HTML을 다시 렌더링하도록 하고, 그렇게 하면 서버가 전체 파일 을 브라우저로 다시 보내게 된다는 것입니다. 앱이 불필요한 요청을 하여 필요한 것보다 더 많은 데이터를 소비합니다.
“이러한 앱이 소비자를 대상으로 했다면 아마도 많은 불만을 받았을 것입니다. 변경하려는 변수에 대한 전용 CSS 파일이 없으면 상황이 훨씬 더 나빠집니다.” paperowl review 의 선임 개발자 이자 이력서 작성 서비스 발행인 인 Helena Newman 은 CSS 사양에 필요한 추가 사항이라고 생각합니다.
CSS 변수를 사용하면 JavaScript를 사용하여 브라우저에서 모든 색상이 변경됩니다. 수행될 유일한 요청은 필요한 경우 현재 테마를 서버에 유지하는 것입니다. 그런 다음에도 이러한 변수는 브라우저에 저장할 수 있습니다.
웹사이트에 반응형 디자인 추가
그 어느 때보다 인터넷에 더 많은 휴대전화가 사용되면서 반응형 웹사이트에 대한 필요성이 그 어느 때보다 분명해졌습니다. 개발자의 발을 헛디디게 만드는 반응형 디자인의 가장 중요한 측면은 글꼴 크기를 변경하는 것입니다. 여러 글꼴 또는 동적 글꼴을 사용하는 앱의 경우 이를 추적하고 다른 브라우저에 맞게 변경하는 것은 힘든 일입니다.
대신 사용자 정의 CSS 속성을 사용하면 웹사이트 전체에서 사용 및 재사용할 수 있는 범용 글꼴 크기를 정의할 수 있습니다. 변경해야 하는 경우 JavaScript 함수를 호출하기만 하면 모두 작동합니다.
고대 브라우저를 지원할 필요가 없는 경우 사용자 정의 CSS 변수를 (상대적으로) 새로운 그리드 CSS 시스템과 함께 사용하여 미디어 쿼리의 필요성을 완전히 제거할 수 있습니다.
그런 다음 CSS 자체 내에서 너비 변경을 수신 대기해야 하는 경우 미디어 쿼리가 여전히 필요할 수 있습니다. 이것이 JavaScript 실행을 허용하지 않는 브라우저를 지원할 수 있는 유일한 방법입니다.
결론
사용자 정의 CSS 변수는 한동안 사양에 가장 중요한 추가 사항 중 일부입니다. CSS 파일에서 어수선한 것을 제거하고 불필요한 추가 요청을 할 필요가 없도록 하여 디자인 프로세스를 단순화할 수 있습니다.