캐스케이드를 길들이기 위해 사용자 정의 속성 '스택'을 사용합니다

CSS 사용자 정의 속성 : 계단식 및 상속을 제어하는 ​​새로운 방법

1994 년 CS가 탄생 한 이래 캐스케이드와 상속은 웹 페이지에서 디자인하는 방식을 정의했습니다. 둘 다 강력한 기능이지만 개발자로서 상호 작용 방식에 대한 제어가 매우 제한적입니다. 선택기 특이성 및 소스 코드 순서는 최소한의 "계층 적"제어를 제공하지만 뉘앙스가 부족하며 상속에는 끊임없는 계보가 필요합니다. 이제 CSS 사용자 정의 속성을 통해 새로운 방식으로 계단식 및 상속을 관리하고 제어 할 수 있습니다.

이 기사는 커스텀 속성 "스택"을 사용하여 계단식의 몇 가지 일반적인 문제를 해결하는 방법을 보여줍니다. 스코프 구성 요소 스타일에서보다 명백한 의도 계층에 이르기까지.

사용자 정의 속성에 대해 빠르게 배우십시오

브라우저는 공급 업체 접두사 (-webkit- 또는 -moz-와 같은)를 사용하여 새 속성을 동일한 방식으로 정의하고 "빈" -접두사를 사용하여 고유 한 사용자 정의 속성을 정의 할 수 있습니다. Sass 또는 JavaScript의 변수와 마찬가지로, 우리는 그것들을 사용하여 값을 지정하고, 저장하고, 검색 할 수 있지만, CSS의 다른 속성과 마찬가지로, 그들은 계단식 으로 DOM과 상속 됩니다.

 <code>/* 定义自定义属性*/ html { --brand-color: rebeccapurple; }</code>

이 캡처 된 값에 액세스하기 위해 Var () 함수를 사용합니다. 두 부분이 있습니다 : 먼저 사용자 정의 속성의 이름, 속성이 정의되지 않은 경우 폴백 값입니다.

 <code>button { /* 如果可用，则使用--brand-color，否则回退到deeppink */ background: var(--brand-color, deeppink); }</code>

이것은 이전 브라우저의 지원 폴백이 ​​아닙니다. 브라우저가 사용자 정의 속성을 이해하지 못하면 전체 var () 선언을 무시합니다. 대신, 이것은 글꼴을 사용할 수 없을 때 폴백 글꼴 패밀리를 정의하는 글꼴 스택과 유사하게 정의되지 않은 변수를 처리하는 내장 방법입니다. 폴백 값을 제공하지 않으면 기본값이 설정되지 않습니다.

변수 "스택"빌드

폴백 값을 정의하는이 능력은 글꼴 패밀리 특성에 사용되는 "폰스 스택"과 유사합니다. 첫 번째 시리즈를 사용할 수 없으면 두 번째 시리즈가 사용됩니다. var () 함수는 단일 폴백 값 만 허용하지만 Var () 함수를 중첩하여 모든 크기의 사용자 정의 속성 폴백 "스택"을 생성 할 수 있습니다.

 <code>button { /* 尝试Consolas，然后是Menlo，然后是Monaco，最后是monospace */ font-family: Consolas, Menlo, Monaco, monospace; /* 尝试--state，然后是--button-color，然后是--brand-color，最后是deeppink */ background: var(--state, var(--button-color, var(--brand-color, deeppink))); }</code>

스태킹 속성에 대한 중첩 구문이 부피가 커진 경우 Sass와 같은 전처리기를 사용하여 더 컴팩트하게 만들 수 있습니다.

콤마를 포함하는 폴백 값 (글꼴 스택 또는 계층 적 배경 이미지)과 같은 폴백 값을 지원하려면 단일 폴백 값 한계가 필요합니다.

 <code>html { /* 后备值为"Helvetica, Arial, sans-serif" */ font-family: var(--my-font, Helvetica, Arial, sans-serif); }</code>

"범위"정의

CSS 선택기를 사용하면 특정 중첩 컨텍스트의 페이지 또는 요소의 어느 곳에서나 HTML DOM 트리 및 스타일 요소로 뛰어들 수 있습니다.

 <code>/* 所有链接*/ a { color: slateblue; } /* section 内的链接*/ section a { color: rebeccapurple; } /* article 内的链接*/ article a { color: deeppink; }</code>

이것은 유용하지만 "모듈 식"객체 지향 또는 구성 요소 중심 스타일의 현실을 캡처하지 않습니다. 우리는 많은 기사를 가지고있을 수 있으며 다양한 구성에 중첩되어있을 수 있습니다. 우리는 어떤 컨텍스트 나 범위 가 겹치는지를 명확히하는 방법이 필요합니다.

근접성 범위

.Light 테마와 .dark 테마가 있다고 가정 해 봅시다. 루트 요소의 이러한 클래스를 사용하여 페이지 전체 기본값을 정의 할 수 있지만 다양한 방식으로 중첩 된 특정 구성 요소에도 적용 할 수도 있습니다.

색상 패턴 클래스 중 하나를 적용 할 때마다 배경 및 색상 특성이 재설정 된 다음 중첩 타이틀과 단락으로 상속됩니다. 우리의 주요 맥락에서, 색상은 .light 클래스에서 상속되고 중첩 된 제목과 단락은 .dark 클래스에서 상속됩니다. 상속은 직접 혈통을 기반으로하므로 값이 정의 된 가장 가까운 조상이 우선합니다. 우리는 그것을 근접성이라고 부릅니다.

근접성은 상속에 중요하지만 특이성에 의존하는 선택기에는 영향을 미치지 않습니다. 내부 어두운 또는 가벼운 용기에 무언가를 스타일링하려면 문제가됩니다.

여기서는 밝고 어두운 버튼 변형을 정의하려고합니다. 라이트 모드 버튼은 흰색 텍스트로 돋보이게되므로 눈에 띄는 반면 어두운 모드 버튼은 검은 색 텍스트가있는 매실이어야합니다. 우리는 밝은 컨텍스트와 어두운 컨텍스트를 기반으로 버튼을 직접 선택하지만 작동하지 않습니다.

일부 버튼은 두 컨텍스트에 있으며 .light 및 .dark 조상이 있습니다. 이 경우, 우리가 원하는 것은 최근의 주제를 인수하는 것입니다 ( 근접성 동작 상속). 그러나 우리가 얻는 것은 첫 번째 선택기 (캐스케이드 동작)를 무시하는 두 번째 선택기입니다. 이 두 선택기는 동일한 특이성을 가지므로 소스 코드의 순서는 승자를 결정합니다.

맞춤 속성 및 근접성

우리는 주제에서 이러한 속성을 물려받을 수있는 방법이 필요하지만 버튼과 같은 특정 자식 요소에만 적용 할 수 있습니다. 사용자 정의 속성이이를 가능하게합니다! 우리는 밝은 컨테이너와 어두운 용기의 값을 정의 할 수 있지만 버튼과 같은 중첩 요소에서 상속 된 값 만 사용합니다.

먼저 사용자 지정 속성을 사용하도록 버튼을 설정하고 해당 속성이 정의되지 않은 경우 폴백 "기본"값을 사용합니다.

 <code>button { background: var(--btn-color, rebeccapurple); color: var(--btn-contrast, white); }</code>

이제 우리는 컨텍스트에 따라 이러한 값을 설정할 수 있으며, 근접성과 상속에 따라 해당 조상으로 범위를 둡니다.

 <code>.dark { --btn-color: plum; --btn-contrast: black; } .light { --btn-color: rebeccapurple; --btn-contrast: white; }</code>

추가 보너스로, 우리는 통합 버튼 정의뿐만 아니라 전체 코드를 적게 사용합니다.

버튼 구성 요소에 사용 가능한 매개 변수를 작성하는 API라고 생각합니다. Sara Soueidan과 Lea Verou는 최근 기사에서 이것을 잘 다루었습니다.

구성 요소 소유권

때로는 근접성이 범위를 정의하기에 충분하지 않습니다. JavaScript 프레임 워크가 "스코프 스타일"을 생성 할 때 특정 객체 요소 의 소유권을 설정하고 있습니다. 탭 레이아웃 구성 요소에는 탭 자체가 있지만 각 탭 뒤에는 내용이 없습니다. 이것은 또한 BEM 컨벤션이 복잡한 .Block__ Element 클래스 이름으로 포착하려고하는 것입니다.

Nicole Sullivan은 2011 년에“도넛 범위”라는 용어를 만들어이 문제에 대해 논의했습니다. 그녀 가이 문제에 대한 아이디어를 업데이트했다고 생각하지만 근본적인 문제는 변하지 않았습니다. 선택기와 특이성은 광범위한 패턴 위에 상세한 스타일을 구축하는 방법을 설명하는 데 적합하지만 명확한 소유권을 전달하지는 않습니다.

우리는이 문제를 해결하기 위해 사용자 정의 속성 스택을 사용할 수 있습니다. 우리는 먼저 기본 색상에 사용되는 요소에 "글로벌"속성을 생성합니다.

 <code>html { --background--global: white; --color--global: black; --btn-color--global: rebeccapurple; --btn-contrast--global: white; }</code>

이제 우리는 그것을 참조하려는 어느 곳에서나 사용할 수 있습니다. 우리는 데이터 테마 속성을 사용하여 전경 및 배경색을 적용합니다. 우리는 글로벌 값이 기본 폴백 값을 제공하기를 원하지만 특정 주제로 덮어 쓰는 옵션도 원합니다. "스택"이 들어 오는 곳입니다.

 <code>[data-theme] { /* 如果没有组件值，则使用全局值*/ background: var(--background--component, var(--background--global)); color: var(--color--component, var(--color--global)); }</code>

이제 *-구성 요소 속성을 글로벌 속성의 역으로 ​​설정하여 리버스 구성 요소를 정의 할 수 있습니다.

 <code>[data-theme='invert'] { --background--component: var(--color--global); --color--component: var(--background--global); }</code>

그러나 우리는 이러한 설정이 소유권 도넛에서 물려 받기를 원하지 않으므로 각 주제에서 이러한 값을 초기 (정의되지 않은)로 재설정합니다. 각 주제가 재정의 할 수있는 기본값을 제공 할 수 있도록 더 낮은 특이성 또는 이전 소스 코드 순서로이를 수행해야합니다.

 <code>[data-theme] { --background--component: initial; --color--component: initial; }</code>

초기 키워드는 사용자 정의 속성에 사용될 때 특별한 의미를 지니고있어 보장 된 valid 상태로 되돌립니다. 즉, 배경을 설정하기 위해 전달되지 않음을 의미합니다. 초기 또는 색상 : 초기, 사용자 정의 속성은 정의되지 않으며 스택의 다음 값, 즉 글로벌 설정으로 돌아갑니다.

버튼으로 동일한 작업을 수행 한 다음 각 구성 요소에 데이터 테마가 적용되는지 확인할 수 있습니다. 특정 주제가 제공되지 않으면 각 구성 요소는 글로벌 주제로 기본값을 제공합니다.

"소스"정의

CSS 캐스케이드는 동일한 속성에서 여러 값을 정의 할 때 선호 해야하는 값을 결정하는 데 사용되는 일련의 필터링 레이어입니다. 우리는 대부분 소스 코드 시퀀스를 기반으로 특정 계층 또는 최종 계층과 상호 작용하지만 캐스케이드의 첫 번째 레이어는 스타일의 "소스"입니다. Source는 스타일의 소스, 일반적으로 브라우저 (기본값), 사용자 (기본 설정) 또는 저자 (미국)를 설명합니다.

기본적으로 저자 스타일은 사용자 기본 설정을 무시하고 사용자 기본 설정은 브라우저 기본값을 대체합니다. 이것은 누군가가 스타일에 !important 하고 소스가 바뀌면 변경 될 때 변경됩니다. 브라우저 !important 스타일은 가장 높은 소스, 중요한 사용자 선호도, 저자의 중요한 스타일, 모든 일반 레이어를 가지고 있습니다. 다른 출처가 있지만 여기서는 자세히 설명하지 않습니다.

사용자 정의 속성 "스택"을 만들 때 매우 유사한 동작을 구축합니다. 기존 소스를 사용자 정의 속성 스택으로 표현하려면 다음과 같습니다.

 <code>.origins-as-custom-properties { color: var(--browser-important, var(--user-important, var(--author-important, var(--author, var(--user, var(--browser)))))); }</code>

이 레이어는 이미 존재하므로이를 재현 할 이유가 없습니다. 그러나 위의 "글로벌"및 "구성 요소"스타일을 계층화 할 때, 우리는 비슷한 일을하고 있습니다. "글로벌"레이어를 덮어 쓰는 "구성 요소"소스 레이어를 만듭니다. 동일한 방법을 사용하여 CSS의 다양한 계층 적 문제를 해결할 수 있으며, 항상 특이성으로 설명 할 수 없습니다.

• 재정의»구성 요소»테마»기본값
• 주제»시스템 또는 프레임 워크 설계
• 상태»유형»기본값

더 많은 버튼을 살펴 보겠습니다. 기본 버튼 스타일, 장애인 상태 및 위험, 기본 및 보조와 같은 다양한 버튼 "유형"이 필요합니다. 장애인 상태가 항상 유형 변형을 무시하기를 원하지만 선택기는이 차이를 캡처 할 수 없습니다.

그러나 우선 순위를 정할 순서대로 "유형"및 "상태"레이어를 제공하는 스택을 정의 할 수 있습니다.

 <code>button { background: var(--btn-state, var(--btn-type, var(--btn-default))); }</code>

이제 두 가지 변수를 설정하면 상태가 항상 우선합니다.

레이어링을 기반으로 사용자 정의 테마 설정을 허용하는이 기술을 사용하여 계단식 색상 프레임 워크를 만들었습니다.

• HTML에서 사전 정의 된 주제 속성
• 사용자 색상 환경 설정
• 밝고 어두운 모드
• 글로벌 테마 기본값

믹스 앤 매치

이러한 방법은 극단적 일 수 있지만 대부분의 일일 사용 사례는 스택에서 2 ~ 3 개의 값을 사용하여 처리 할 수 ​​있으며, 일반적으로 위의 기술을 사용합니다.

• 레이어의 변수 스택을 정의하십시오
• 상속은 근접성과 범위를 기반으로 설정합니다
• 초기 값을 신중하게 적용하여 중첩 요소를 범위에서 제거하십시오.

우리는 홀수 버드 프로젝트에서 이러한 사용자 정의 속성 "스택"을 사용하고 있습니다. 우리는 여전히 탐구하고 있지만 선택기와 특이성만으로 해결하기 어려운 문제를 해결하는 데 도움이되었습니다. 맞춤 속성을 사용하면 캐스케이드 나 상속과 싸울 필요가 없습니다. 우리는 예상대로 그것들을 캡처하고 활용할 수 있으며 각 인스턴스에 적용되는 방식을 더 잘 제어 할 수 있습니다. 나에게 이것은 CSS의 큰 승리, 특히 스타일 프레임 워크, 도구 및 시스템을 개발할 때 큰 승리입니다.

위 내용은 캐스케이드를 길들이기 위해 사용자 정의 속성 '스택'을 사용합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!