사용자 정의 속성, HSL 및 작은 calc ()로 색상 테마 생성

CSS Custom Properties (종종 "변수") 이전에 단일 웹 사이트에서 여러 색상 구성표를 관리하려면 별도의 스타일 시트가 필요합니다. 이제 단일 스타일 시트 내에서 변수를 정의하고 CSS가 변형을 처리 할 수 ​​있습니다.

사용자 정의 테마가 없어도 사이트 전체의 테마는 가치가 있습니다. 예를 들어, 다른 섹션에서는 별개의 색상 팔레트를 사용할 수 있습니다.

예를 들어 봅시다.이 예제는 섹션에서 일관된 가벼움을 사용하며 색조 만 다양합니다. 단일 색조에 대한 단순화 된 팔레트는 다음과 같습니다. 여러 가지 색조가이를 확장하여 하나의 값 만 변경되는 HSL로 쉽게 관리합니다.

사용자 정의 속성 활용

구형 브라우저를 위해 널리 지원되고 쉽게 폴리 채식 된 사용자 정의 속성은 표준 CSS와 유사한 간단한 구문을 제공합니다. 기본 사용법은 다음과 같습니다. [원본에서 개념적으로 설명 된 바와 같이 간결성에 대해 기본 사용 예제가 생략 됨]. 변수는 일반적으로 다음 :root 의사 요소에 정의되지만 데이터 속성과 같은 속성을 사용하여 특정 요소로 범위를 지정할 수 있습니다.

calc() 통합

사용자 정의 속성은 고정 값으로 제한되지 않습니다. calc() 함수는 일관된 패턴 내에서 동적 값 계산을 가능하게합니다. CSS에는 루프가 부족하지만 전처리 기는 코드의 일부를 생성하는 데 도움이 될 수 있습니다 (그러나 CSS 변수는 SASS 변수와 다릅니다).

실제로 CSS 변수 구현

우리의 목표는 다른 페이지 섹션에서 구성 요소의 색상을 변경하는 것입니다. #food , #lifestyle 및 #travel 의 ID와 함께 세 섹션을 사용하여 각각 다른 색조와 관련이 있습니다. .wrapper div의 data-theme 속성은 활성 색조를 결정합니다. #travel 활성화되면 --first-hue (예 : 청록색의 경우 180 °) --hue 에 할당됩니다.

<div data-theme="travel">
  
</div>

<style>
.wrapper[data-theme="travel"] {
  --hue: var(--first-hue); /* = 180° = teal */
}
</style>

작은 JavaScript 스 니펫은 탭 클릭을 기반으로 data-theme 속성을 업데이트하여 해시 ( # )를 제거합니다. 이는 컴파일 후 정적 인 사전 처리기 변수와 달리 JavaScript의 CSS를 조작하는 능력을 활용합니다.

진보적 인 향상

JavaScript가 비활성화 된 사용자의 접근성을 보장하기 위해 진보적 인 향상을 추가합니다.

 // 진보적 인 향상 :
// JavaScript가 없으면 모든 섹션이 표시되며 테마는 페이지로드 될 때만 설정됩니다.
Wrapper.dataset.theme = Wrapper.querySelector ( 'section'). id;

이를 통해 JavaScript가 없어도 기본 기능을 보장합니다.

단일 페이지 접근 방식이 여기에서 사용되지만 서버 측 data-theme 설정이있는 별도의 페이지로 섹션을 제공하는 것도 가능합니다.

대안 적 접근

색상 값이 선형으로 변하지 않으면 스타일 시트를 분리 할 수 ​​있습니다.

웹 구성 요소 지원

웹 구성 요소 테마에는 다음이 필요합니다 :host-context() 의사 선택기 : [원본에서 개념적으로 설명 된대로 간결성을 생략 한 예].

결론

CSS Custom Properties는 웹 사이트 테마를 단순화하여 개선 된 유지 관리, 성능 및 JavaScript와의 통합을 제공합니다. HSL 및 calc() 과 결합하여 강력한 테마 기능을 잠금 해제하여 간단한 색상 변경을 넘어 사용자 제어 테마로 확장됩니다.

위 내용은 사용자 정의 속성, HSL 및 작은 calc ()로 색상 테마 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!