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

몇 번의 클릭만으로 Houdini 페인트 Worklet으로 CSS를 강화할 수 있습니다.

Una Kravets

CSS Houdini는 개발자가 작성하는 스타일을 훨씬 더 효과적으로 제어하고 관리할 수 있는 일련의 하위 수준 브라우저 API를 설명하는 포괄적인 용어입니다.

Houdini는 유형이 지정된 객체 모델을 사용하여 보다 의미 있는 CSS를 지원합니다. 개발자는 Properties and Values API를 통해 구문, 기본값, 상속을 통해 고급 CSS 맞춤 속성을 정의할 수 있습니다.

또한 페인트, 레이아웃, 애니메이션 워크렛이 도입되어 작성자가 브라우저 렌더링 엔진의 스타일 지정 및 레이아웃 프로세스에 더 쉽게 연결할 수 있도록 하여 새로운 가능성을 열어줍니다.

Houdini 워크릿 이해하기

Houdini Worklet은 기본 스레드에서 실행되고 필요한 경우 호출할 수 있는 브라우저 안내입니다. Worklet을 사용하면 모듈식 CSS를 작성하여 특정 작업을 수행할 수 있으며, 자바스크립트 한 줄로 가져오고 등록할 수 있습니다. CSS 스타일의 서비스 워커와 마찬가지로 Houdini 워크릿은 애플리케이션에 등록되며 일단 등록되면 CSS에서 이름으로 사용할 수 있습니다.

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

CSS Painting API로 자체 기능 구현

CSS Painting API는 이러한 Worklet (페인트 Worklet)의 한 예이며 개발자는 배경, 테두리, 마스크 등으로 CSS에서 직접 사용할 수 있는 캔버스와 같은 맞춤 페인팅 함수를 정의할 수 있습니다. 자체 사용자 인터페이스에서 CSS 페인트를 사용하는 방법은 무궁무진합니다.

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

.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에서는 고려 중입니다.

하지만 전체 브라우저 지원이 없어도 Houdini Paint API를 사용하여 창의성을 발휘하고 CSS Paint Polyfill을 통해 모든 최신 브라우저에서 스타일이 작동하는지 확인할 수 있습니다. 몇 가지 고유한 구현을 보여주고 리소스 및 Worklet 라이브러리를 제공하기 위해 우리 팀은 houdini.how를 빌드했습니다.

Houdini.how

Houdini.how는 Houdini 워크렛 및 리소스에 대한 라이브러리이자 참조입니다. 브라우저 지원, 다양한 API의 개요, 사용법 정보, 추가 리소스, 라이브 페인트 Worklet 샘플 등 CSS Houdini에 관해 알아야 할 모든 것을 제공합니다. Houdini.how의 각 샘플은 CSS Paint API를 기반으로 합니다. 즉, 각 샘플은 모든 최신 브라우저에서 작동합니다. 지휘봉을 빙글빙글 돌려 보세요.

Houdini 사용

Houdini 워크릿은 로컬에서 서버를 통해 실행하거나 프로덕션의 HTTPS에서 실행해야 합니다. Houdini Worklet으로 작업하려면 로컬에 설치하거나 unpkg와 같은 콘텐츠 전송 네트워크 (CDN)를 사용하여 파일을 제공해야 합니다. 그런 다음 Worklet을 로컬에서 등록해야 합니다.

Houdini.how 쇼케이스 Worklet을 웹 프로젝트에 포함할 수 있는 몇 가지 방법이 있습니다. 프로토타입 제작 용량으로 CDN을 통해 사용하거나 npm 모듈을 사용하여 직접 워크릿을 관리할 수 있습니다. 어떤 경우든 CSS 페인트 폴리필을 포함하여 브라우저 간 호환이 가능하도록 하는 것이 좋습니다.

1. CDN으로 프로토타입 제작

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

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

이 함수는 구문 및 대체 값에 대한 맞춤 속성을 등록하지 않습니다. 대신 Worklet에 각각 대체 값이 삽입되어 있습니다.

맞춤 속성을 선택적으로 등록하려면 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을 통한 Worklet 관리

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 저장소를 확인하세요. 여러분의 의견을 기다립니다.