교차 브라우저 페인트 워크렛 및 Houdini.how

클릭 몇 번이면 Houdini 페인트를 사용해 CSS를 강화할 수 있습니다.

Una Kravets

CSS Houdini는 은 개발자에게 훨씬 더 많은 제어와 권한을 제공하는 일련의 하위 수준 브라우저 API를 설명합니다. 영향을 미칩니다.

Houdini 레이어

Houdini는 유형이 지정된 객체 모델을 참고하세요. 개발자는 구문, 기본값 및 상속을 사용하여 고급 CSS 맞춤 속성을 Properties and Values API(속성 및 값 API)

또한 페인트, 레이아웃, 애니메이션도 소개합니다. worklet은 작성자가 스타일과 레이아웃 프로세스에 더 쉽게 다가갈 수 있음 렌더링해야 합니다.

Houdini Worklet 이해

Houdini Worklet은 기본 스레드에서 실행되고 확인할 수 있습니다 Worklet을 사용하면 모듈식 CSS를 작성하여 특정 작업을 수행할 수 있으며 JavaScript 코드 행입니다. CSS 스타일의 서비스 워커와 마찬가지로 Houdini Worklet은 애플리케이션에 등록되고 일단 등록되면 CSS에서 이름으로 사용할 수 있습니다.

worklet 파일 쓰기 Worklet 모듈 등록 (CSS.paintWorklet.addModule(workletURL)) worklet 사용 (background: paint(confetti))

CSS Painting API로 자체 기능 구현

CSS 페인팅 API는 이러한 Worklet (페인트 워크릿)을 지원하며, 개발자가 캔버스와 유사한 맞춤 페인팅 함수를 정의할 수 있습니다. 는 CSS에서 배경, 테두리, 마스크 등으로 직접 사용할 수 있습니다. 데이터 애널리스트가 사용할 수 있는 여러분의 사용자 인터페이스에서 CSS 페인트를 어떻게 사용할 수 있을지 생각해 보세요.

예를 들어 브라우저가 각진 테두리 기능을 구현할 때까지 기다리는 대신 자체 페인트 Worklet을 사용하거나 기존의 게시된 Worklet을 사용할 수 있습니다. 그런 다음 테두리 반경을 사용하는 대신 이 워크렛을 테두리와 클리핑에 적용합니다.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 위의 예에서는 다른 인수 (아래 코드 참조)와 함께 동일한 페인트 Worklet을 사용하여 이 결과를 실행합니다. Glitch에 대한 데모입니다. 
.angled {
  --corner-radius: 15 0 0 0;
  --paint-color: #6200ee;
  --stroke-weight: 0;

  /* Mask every angled button with fill mode */
  -webkit-mask: paint(angled-corners, filled);
}

.outline {
  --stroke-weight: 1;

  /* Paint outline */
  border-image: paint(angled-corners, outlined) 0 fill !important;
}

CSS Painting API는 현재 가장 잘 지원되는 Houdini API 중 하나로, 사양은 W3C입니다. 도움이 될 수 있습니다 현재 모든 Chromium 기반 브라우저에서 사용 설정되어 있으며 부분적으로 사용 설정되어 있습니다. Safari에서 지원되며 Firefox에서도 고려 중입니다.

<ph type="x-smartling-placeholder">
</ph> Caniuse 지원
CSS Painting API는 현재 Chromium 기반 브라우저에서 지원됩니다.

하지만 완전한 브라우저 지원이 없더라도 여전히 Houdini Paint API로 창의력을 발휘하고 CSS 페인트를 사용하면 모든 최신 브라우저에서 스타일이 작동합니다. Polyfill을 사용해 보세요. 몇 가지 독특한 기능들을 리소스 및 Worklet 라이브러리를 제공할 뿐만 아니라, 우리 팀은 houdini.how를 참고하세요.

Houdini.how

<ph type="x-smartling-placeholder">
</ph> Worklet 페이지 스크린샷
Houdini.how 홈페이지의 스크린샷

Houdini.how는 Houdini Worklet과 리소스를 위한 라이브러리이자 참조입니다. 그것은 CSS Houdini에 관해 알아야 할 모든 것, 즉 브라우저 지원, 개요, 사용량 정보, 추가 리소스, 라이브 페인트 Worklet 샘플을 참고하세요. Houdini.how의 각 샘플은 CSS Paint API로 지원됩니다. 각각 모든 최신 브라우저에서 작동합니다. 지휘봉을 빙글빙글 돌려 보세요.

Houdini 사용

Houdini 워크렛은 로컬에서 서버를 통해 실행되거나 프로덕션 환경의 HTTPS에서 실행되어야 합니다. 목표: Houdini Worklet과 호환되는 경우 로컬에 설치하거나 콘텐츠 전송을 사용해야 합니다. 네트워크 (CDN)를 사용하여 파일을 제공합니다. 그런 다음 Worklet을 지원합니다

자신의 웹 프로젝트에 Houdini.how 쇼케이스 워크렛을 포함하는 방법에는 몇 가지가 있습니다. 사용자는 할 수 있습니다. 프로토타입 제작 용량의 CDN을 통해 사용하거나 npm 모듈로 변경합니다. 어느 쪽이든 CSS 페인트 폴리필을 포함하여 페인트 폴리필을 교차 브라우저 호환이 가능합니다.

1. CDN을 사용한 프로토타입 제작

unpkg에서 등록할 때 로컬에 연결하지 않고도 worklet.js 파일에 직접 연결할 수 있습니다. Worklet을 설치합니다. Unpkg는 worklet.js를 기본 스크립트로 해석하거나 이를 지정할 수 있습니다. 확인할 수 있습니다 Unpkg는 HTTPS를 통해 제공되므로 CORS 문제를 일으키지 않습니다.

CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");

이 작업은 구문 및 대체 값에 대한 커스텀 속성을 등록하지 않습니다. 대신 각 작업에는 대체 값이 포함되어 있습니다.

맞춤 속성을 선택적으로 등록하려면 properties.js 파일도 포함합니다.

<script src="https://unpkg.com/<package-name>/properties.js"></script>

unpkg를 사용하여 CSS 페인트 폴리필을 포함하려면 다음 단계를 따르세요.

<script src="https://unpkg.com/css-paint-polyfill"></script>

2. NPM을 통한 워크릿 관리

npm에서 worklet을 설치합니다.

npm install <package-name>
npm install css-paint-polyfill

이 패키지를 가져와도 페인트 Worklet이 자동으로 삽입되지 않습니다. Worklet을 설치하려면 패키지의 worklet.js로 확인되는 URL을 생성하고 등록해야 합니다. 필요한 작업: 다음과 같이 바꿉니다.

CSS.paintWorklet.addModule(..file-path/worklet.js)

npm 패키지 이름과 링크는 각 Worklet 카드에서 확인할 수 있습니다.

또한 스크립트를 통해 CSS 페인트 폴리필을 포함하거나 모델을 학습시키는 작업도 반복해야 합니다

다음은 최신 번들러에서 페인트 폴리필과 함께 Houdini를 사용하는 방법을 보여주는 예입니다.

import 'css-paint-polyfill';
import '<package-name>/properties.js'; // optionally register properties
import workletURL from 'url:<package-name>/worklet.js';

CSS.paintWorklet.addModule(workletURL);
드림

참여

Houdini 샘플을 몇 개 사용해 보셨으니 이제 직접 샘플을 추가해 보세요. Houdini.how는 어떠한 워크렛 자체도 호스팅하지 않으며, 대신 커뮤니티의 결과물을 보여줍니다. 만약 제출할 Worklet 또는 리소스가 있다면 github를 확인하세요. 저장소를 참조하세요. 여러분의 아이디어를 기다리고 있습니다.