클릭 몇 번만으로 Houdini 페인트 워크렛으로 CSS를 강화할 수 있습니다.
CSS Houdini는 개발자가 작성하는 스타일을 훨씬 더 세부적으로 제어할 수 있는 일련의 하위 수준 브라우저 API를 설명하는 포괄적인 용어입니다.
Houdini는 유형이 지정된 객체 모델을 사용하여 더 많은 시맨틱 CSS를 지원합니다. 개발자는 속성 및 값 API를 통해 문법, 기본값, 상속을 사용하여 고급 CSS 맞춤 속성을 정의할 수 있습니다.
또한 작성자가 브라우저의 렌더링 엔진의 스타일 지정 및 레이아웃 프로세스에 더 쉽게 연결할 수 있도록 하여 가능성의 세계를 열어주는 페인트, 레이아웃, 애니메이션 워크렛을 소개합니다.
Houdini 워크렛 이해하기
Houdini 워크렛은 기본 스레드에서 실행되고 필요할 때 호출할 수 있는 브라우저 안내입니다. 워크렛을 사용하면 모듈식 CSS를 작성하여 특정 작업을 실행할 수 있으며 가져오고 등록하는 데 단일 JavaScript 라인이 필요합니다. CSS 스타일의 서비스 워커와 마찬가지로 Houdini 워크렛은 애플리케이션에 등록되며, 등록되면 CSS에서 이름으로 사용할 수 있습니다.
워크렛 파일 작성 워크렛 모듈 등록 (CSS.paintWorklet.addModule(workletURL)) 워크렛 사용(background: paint(confetti))
CSS Painting API로 자체 기능 구현
CSS Painting API는 이러한 워크렛 (Paint 워크렛)의 한 예이며, 개발자가 CSS에서 배경, 테두리, 마스크 등으로 직접 사용할 수 있는 캔버스와 같은 맞춤 페인팅 함수를 정의할 수 있도록 지원합니다. 자체 사용자 인터페이스에서 CSS 페인트를 사용하는 방법에는 무궁무진한 가능성이 있습니다.
예를 들어 브라우저가 각진 테두리 기능을 구현할 때까지 기다리는 대신 자체 페인트 워크렛을 작성하거나 기존에 게시된 워크렛을 사용할 수 있습니다. 그런 다음 border-radius를 사용하는 대신 이 워크렛을 테두리와 클리핑에 적용합니다.
.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을 사용하여 모든 최신 브라우저에서 스타일이 작동하는지 확인할 수 있습니다. 몇 가지 고유한 구현을 보여주고 리소스 및 워크렛 라이브러리를 제공하기 위해 팀에서 houdini.how를 빌드했습니다.
Houdini.how
Houdini.how는 Houdini 워크렛 및 리소스의 라이브러리 및 참조입니다. CSS Houdini에 관해 알아야 할 모든 것을 제공합니다. 브라우저 지원, 다양한 API의 개요, 사용 정보, 추가 리소스, 실시간 페인트 워크렛 샘플입니다. Houdini.how의 각 샘플은 CSS Paint API를 기반으로 하므로 모든 최신 브라우저에서 작동합니다. 사용해 보세요.
Houdini 사용
Houdini 워크렛은 로컬에서 서버를 통해 실행하거나 프로덕션에서 HTTPS를 통해 실행해야 합니다. Houdini 워크렛을 사용하려면 로컬에 설치하거나 unpkg와 같은 콘텐츠 전송 네트워크 (CDN)를 사용하여 파일을 제공해야 합니다. 그런 다음 로컬에서 워크렛을 등록해야 합니다.
자체 웹 프로젝트에 Houdini.how 워크렛 쇼케이스를 포함하는 방법에는 몇 가지가 있습니다. 프로토타입 제작 용도로 CDN을 통해 사용할 수도 있고 npm 모듈을 사용하여 직접 워크렛을 관리할 수도 있습니다. 어느 쪽이든 CSS 페인트 폴리필을 포함하여 교차 브라우저 호환성을 보장하는 것이 좋습니다.
1. CDN으로 프로토타입 제작
unpkg에서 등록할 때는 워크레트를 로컬에 설치하지 않고도 worklet.js 파일에 직접 연결할 수 있습니다. 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에서 워크렛을 설치합니다.
npm install <package-name>
npm install css-paint-polyfill
이 패키지를 가져오더라도 페인트 워크렛이 자동으로 삽입되지는 않습니다. 워크렛을 설치하려면 패키지의 worklet.js로 확인되는 URL을 생성하고 이를 등록해야 합니다. 다음과 같이 할 수 있습니다.
CSS.paintWorklet.addModule(..file-path/worklet.js)
npm 패키지 이름과 링크는 각 워크렛 카드에서 확인할 수 있습니다.
또한 프레임워크나 번들러에서와 마찬가지로 스크립트를 통해 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는 자체적으로 워크렛을 호스팅하지 않으며 대신 커뮤니티의 작업을 보여줍니다. 제출하려는 워크렛이나 리소스가 있는 경우 참여 가이드라인이 포함된 GitHub 저장소를 확인하세요. 여러분의 멋진 아이디어가 기대됩니다.