처음으로 색상 조정 () 탐색

Safari Technical Preview 122의 릴리스 노트에서 CSS에서 Color-Contrast () 기능을 지원한다고 보았습니다. 사파리는 먼저 문 밖으로 나옵니다. 내가 아는 한, 다른 브라우저는 아직 이것을 지원하지 않으며 안정적인 사파리가 언제 배송 할 것인지, 또는 다른 브라우저가 있을지 전혀 모른다. 하지만! 아주 좋은 생각입니다! 더 접근 가능한 인터페이스를 배송 할 수있는 기본 도구 (색상 대비가 일부인)는 나에게 시원합니다. 그래서 그것을 작동 시키려고 노력합시다.

누구나 Safari Technical Preview를 다운로드 할 수 있으므로 그렇게했습니다.

나는 이것에 대해 물어봐야했지만, 이것이 사전 릴리스 브라우저이기 때문에 이러한 모든 기능이 기본적으로 활성화되어 있음을 의미하지는 않습니다. Chrome Canary에 특징 플래그가있는 것처럼 Safari Technical Preview도 켜야합니다. 그래서 나는 다음과 같이 뒤집어 야했다.

릴리스 노트에는 실제로 ColorTrast ()를 사용하는 방법에 대한 정보가 없지만 운 좋게도 웹 검색은 사양 (Color Module 5의 일부)을 나타냅니다. MDN에는 매우 기본적인 구문 정보가 포함 된 페이지가 있습니다.

이것이 내가 이해하는 방법입니다.

위의 예제는 항상 흰색으로 되돌릴 것이기 때문에 약간 어리석은 일입니다. 이는 검은 색과 가장 대조적입니다. 이 기능은 실제로 해당 색상 값 중 하나 이상이 동적 일 때 유용합니다. 즉, CSS 사용자 정의 속성 일 가능성이 높습니다.

함수는 색상을 반환하므로 상단 사용 사례는 동적 배경을 기반으로 색상을 설정할 것입니다. 그래서…

 부분 {
  배경 : var (-bg);
  색상 : 색상 관리 (var (-bg) vs 흰색, 검은 색);
}

이제 우리는 -BG에서 모든 색상을 전혀 던질 수 있으며 가장 대조적 인 내용에 따라 흰색 또는 검은 색 텍스트를 얻을 수 있습니다.

가장 기본적인 사용 사례에서도 매우 시원합니다.

다음은 Dave의 데모가 부모의 텍스트 색상을 설정하는 것이 아니라 링크 색상도 선택할 수있는 다른 색상 세트를 가지고 있습니다. HSL 슬라이더 (물론 Safari Technology Preview)와 함께 작동하여 작동하는 것을 볼 수 있습니다.

충분한 대비가있는 두 가지 색상을 선택하는 것만으로는 쉽습니다 (좋은 의도를 가진 우리의 사람들조차도 얼마나 자주 망쳐 놓는 지 놀랄 것입니다). 그러나 오 와우는 다양한 상황에 따라 복잡해지며, 많은 색상 변형이 있거나, 신은 임의의 조합을 금지하지는 않습니다.

다음은 Dave의 테스터와 함께 연주하는 비디오가 있으므로 색상이 다른 장소에서 어떻게 업데이트되는지 확인할 수 있습니다.

위 내용은 처음으로 색상 조정 () 탐색의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!