CSS Paint API에서 명확한 특성을 선호하는 명예는 사용자 정의 속성이 있습니다.

CSS 페인트 API 및 사용자 정의 속성 : 사용자 기본 설정에 따라 페인팅 효과 조정

CSS Paint API는 최근 몇 년 동안 흥미로운 기술이었습니다. 이를 통해 개발자는 사용자 정의 도면 작업 장치를 만들고 CSS를 통해 렌더링하는 방법을 제어 할 수 있습니다. prefers-color-scheme 미디어 쿼리와 CSS 사용자 정의 속성을 결합하면 사용자의 명암 및 어두운 모드 환경 설정에 따라 페인팅 작업 장치의 모양을 동적으로 조정할 수 있습니다.

이 기사는 Final Fantasy II 스타일의 조경 회화 작업 장치를 예제 ( overworld.js )로 사용하여 CSS 사용자 정의 속성을 사용 하여이 기능을 구현하는 방법을 보여줍니다.

준비

먼저 브라우저가 CSS 페인트 API 및 사용자 정의 속성을 지원하는지 확인해야합니다.

 const paintapisupported = window.css && "Paintworklet"의 "RegisterProperty";

다음으로 CSS.registerProperty 메소드를 사용하여 사용자 정의 속성을 정의하십시오. 이러한 특성은 CSS에서 정의되어 드로잉 작업 장치에서 읽어 렌더링 프로세스를 쉽게 제어 할 수 있습니다. overworld.js 작업 단위는 사용자 정의 속성을 사용하여 풍경의 다른 부분 (잔디, 나무, 강 등)의 색상을 정의합니다. 기본값은 표시등 모드에 적용됩니다.

속성 등록 코드는 다음과 같습니다.

 const 속성 = {
  "-오버 월드 그라스-녹색 색상": {
    구문 : "<color> ",
    InitialValue : "#58ab1d"
  },
  "-오버 월드 어두운 록 콜로": {
    구문 : "<color> ",
    InitialValue : "#A15D14"
  },
  // ... 기타 속성};

Object.entries (속성) .foreach (([이름, {syntax, initialValue}]) => {
  css.registerProperty ({
    이름,
    통사론,
    상속 : 거짓,
    초기 값
  });
});

css.paintworklet.addmodule ( "/worklets/overworld.js");</color></color>

사용자가 색 구성표를 선택할 때 이러한 속성의 초기 값을 덮어 쓸 수 있습니다.

사용자 선호도에 맞는 색 구성표

웹 사이트 설정 메뉴를 사용하면 사용자가 시스템, 라이트 모드 및 다크 모드 등 색 구성표를 선택할 수 있습니다. "시스템"모드는 운영 체제 설정 dark 따릅니다 light CSS 변수는 색상을 전환하는 데 사용됩니다.

 /* 사용자는 어두운 모드를 선택합니다*/
html.dark {
  --grass-green : #3a6b1a;
  -DARK-ROCK : #784517;
  // ... 기타 색상}

/* 시스템 선호도는 어두운 모드입니다*/
@Media 화면 및 (Color-Scheme : Dark) {
  html {
    --grass-green : #3a6b1a;
    -DARK-ROCK : #784517;
    // ... 기타 색상}
}

/* 사용자는 조명 모드를 선택합니다*/
html.light {
  --grass-green : #58ab1d;
  -DARK-ROCK : #A15D14;
  // ... 기타 색상}

/* 시스템 선호도는 조명 모드*/
@Media 화면 및 (Color-Scheme : Light) {
  html {
    --grass-green : #58ab1d;
    -DARK-ROCK : #A15D14;
    // ... 기타 색상}
}

페인팅 작업 장치에 사용자 정의 속성을 설정하십시오

브라우저가 페인트 API를 지원하는 경우 페이지의 인라인 스크립트는 paint-api 클래스를 요소에 적용합니다.

 @Media 화면 및 (min-width : 64rem) {
  .paint-api .BackDrop {
    배경 이미지 : 페인트 (오버 월드);
    / * ... 다른 스타일 ... */
    -오버 월드 그라스-녹색 색상 : var (-Grass-Green);
    -오버 월드 어크 록 콜로 : var (-다크 록);
    // ... 기타 속성}
}

여기서는 페인팅 작업 유닛의 사용자 정의 속성 값은 사용자의 색 구성표 기본 설정에 해당하는 CSS 변수에서 가져옵니다. 이것은 사용자 선호도에 따라 페인팅 작업 유닛의 렌더링 효과를 동적으로 조정하는 기능을 실현합니다.

이런 식으로, 색 구성표에 따라 세부 사항이나 부활절 달걀을 추가하는 것과 같이 페인팅 작업 장치의 렌더링을 유연하게 제어 할 수 있습니다. CSS Paint API는 사용자 정의 속성을 결합하고 prefers-color-scheme 개발자에게 역동적이고 개인화 된 사용자 경험을 만들 수있는 강력한 도구를 제공합니다.

위 내용은 CSS Paint API에서 명확한 특성을 선호하는 명예는 사용자 정의 속성이 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!