หน้านี้ได้รับการแปลโดย Cloud Translation API

เวิร์กเล็ตสีแบบข้ามเบราว์เซอร์และ Houdini.how

เพิ่มประสิทธิภาพให้กับ CSS ของคุณด้วย Worklet สี Houdini ด้วยการคลิกเพียงไม่กี่ครั้ง

Una Kravets

CSS Houdini เป็นคำกว้างๆ ที่อธิบายถึงชุด API ของเบราว์เซอร์ระดับต่ำ ซึ่งช่วยให้นักพัฒนาแอปควบคุมและมีอำนาจในสไตล์ที่เขียนขึ้นได้มากยิ่งขึ้น

Houdini เปิดใช้ CSS เชิงความหมายมากขึ้นด้วย Typed Object Model นักพัฒนาซอฟต์แวร์สามารถกำหนดพร็อพเพอร์ตี้ที่กำหนดเองของ CSS ขั้นสูงด้วยไวยากรณ์ ค่าเริ่มต้น และการสืบทอดค่าผ่านทาง Properties and Value API

นอกจากนี้ยังเปิดตัวเวิร์กเล็ตสำหรับระบายสี เลย์เอาต์ และภาพเคลื่อนไหว ซึ่งเปิดโลกแห่งความเป็นไปได้โดยให้ผู้เขียนเข้าถึงกระบวนการจัดรูปแบบและเลย์เอาต์ของเครื่องมือแสดงผลของเบราว์เซอร์ได้ง่ายขึ้น

ทำความเข้าใจ Worklet Houdini

Houdini Worklet คือคำสั่งของเบราว์เซอร์ที่เรียกใช้เทรดหลักและสามารถเรียกใช้ได้เมื่อจำเป็น Worklet ช่วยให้คุณเขียน CSS แบบแยกส่วนเพื่อทำงานที่เจาะจงให้สำเร็จได้ และไม่ต้องใช้ JavaScript 1 บรรทัดในการนำเข้าและลงทะเบียน ระบบจะลงทะเบียน Worklets ของ Houdini กับแอปพลิเคชันของคุณ และเมื่อลงทะเบียนแล้ว คุณจะสามารถใช้ชื่อใน CSS ของคุณได้ ซึ่งคล้ายกับ Service Worker สำหรับรูปแบบ CSS

เขียนไฟล์ Worklet ลงทะเบียนโมดูล Worklet (CSS.paintWorklet.addModule(workletURL)) ใช้ Worklet (background: paint(confetti))

การใช้งานฟีเจอร์ของคุณเองด้วย CSS Painting API

CSS Painting API เป็นตัวอย่างของเวิร์กเล็ตดังกล่าว (Worklet) ที่ช่วยให้นักพัฒนาแอปกำหนดฟังก์ชันการวาดภาพแบบกำหนดเองที่คล้ายกับแคนวาส ซึ่งสามารถใช้เป็นพื้นหลัง เส้นขอบ มาสก์ และอื่นๆ ใน CSS ได้โดยตรง มีวิธีมากมายที่คุณสามารถใช้ CSS Paint ในอินเทอร์เฟซผู้ใช้ของคุณเอง

เช่น แทนที่จะต้องรอให้เบราว์เซอร์ใช้ฟีเจอร์เส้นขอบมุม คุณก็เขียน Worklet สำหรับ Paint ของคุณเองหรือใช้ 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

ฝ่ายสนับสนุนของ Caniuse — ขณะนี้ CSS Painting API ใช้งานได้บนเบราว์เซอร์ที่ใช้ Chromium

แต่ถึงแม้จะไม่รองรับเบราว์เซอร์อย่างเต็มรูปแบบ คุณก็ใช้ Houdini Paint API ได้อย่างสร้างสรรค์ และดูสไตล์ที่เข้ากับเบราว์เซอร์สมัยใหม่ได้ด้วย CSS Paint Polyfill และเพื่อแสดงตัวอย่างการใช้งานที่ไม่เหมือนใคร รวมถึงจัดเตรียมทรัพยากรและไลบรารี Worklet ทางทีมของผมได้สร้าง houdini.how ขึ้นมา

Houdini.how

ภาพหน้าจอของหน้า Worklet — ภาพหน้าจอจากหน้าแรกของ Houdini.how

Houdini.how คือไลบรารีและข้อมูลอ้างอิงสำหรับ Worklet และทรัพยากรของ Houdini ซึ่งมีทุกสิ่งที่คุณจำเป็นต้องทราบเกี่ยวกับ CSS Houdini ไม่ว่าจะเป็นการรองรับเบราว์เซอร์, ภาพรวมของ API ต่างๆ, ข้อมูลการใช้งาน, แหล่งข้อมูลเพิ่มเติม และตัวอย่าง Worklet Live Paint ตัวอย่างแต่ละรายการใน Houdini.how จะมี CSS Paint API แสดงอยู่ ซึ่งหมายความว่าแต่ละตัวอย่างจะใช้ได้กับเบราว์เซอร์ที่ทันสมัยทั้งหมด ทดลองสิ!

การใช้ Houdini

Worklet Houdini ต้องเรียกใช้ผ่านเซิร์ฟเวอร์ภายในหรือบน HTTPS ในเวอร์ชันที่ใช้งานจริง หากต้องการทำงานร่วมกับ Worklet Houdini คุณจะต้องติดตั้ง Worklet ภายในเครื่องหรือใช้เครือข่ายการนำส่งเนื้อหา (CDN) เช่น unpkg เพื่อแสดงไฟล์ จากนั้นคุณจะต้องลงทะเบียน เวิร์กเลตไว้ในเครื่อง

วิธีรวม Worklet ของ Houdini.how ไว้ในโปรเจ็กต์เว็บของคุณเอง โดยจะใช้ผ่าน CDN ในความจุในการสร้างต้นแบบ หรือจะจัดการเวิร์กเล็ตด้วยตนเองโดยใช้โมดูล npm ก็ได้ แต่ไม่ว่าจะเลือกแบบใด คุณจะต้องใส่ CSS Paint Polyfill ด้วยเพื่อให้เข้ากันได้ข้ามเบราว์เซอร์

1. การสร้างต้นแบบด้วย CDN

เมื่อลงทะเบียนจาก unpkg คุณจะลิงก์ไปยังไฟล์ worklet.js ได้โดยตรงโดยไม่ต้องติดตั้ง Worklet ภายในเครื่อง Unpkg จะแก้ไขเป็น worklet.js เป็นสคริปต์หลัก หรือคุณจะระบุเองก็ได้ การคลายแพ็กจะไม่ทำให้เกิดปัญหา CORS เนื่องจากให้บริการผ่าน HTTPS

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

โปรดทราบว่าวิธีนี้ไม่ได้บันทึกพร็อพเพอร์ตี้ที่กำหนดเองสำหรับไวยากรณ์และค่าสำรอง แต่ทั้งคู่จะมีค่าสำรองฝังอยู่ใน Worklet

หากต้องการลงทะเบียนพร็อพเพอร์ตี้ที่กำหนดเอง ให้รวมไฟล์ property.js ด้วย

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

วิธีรวม CSS Paint Polyfill พร้อมไฟล์ Unpkg

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

2. การจัดการ Worklet ผ่าน NPM

ติดตั้ง Worklet จาก npm ดังนี้

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

การนำเข้าแพ็กเกจนี้จะไม่แทรก Worklet สีโดยอัตโนมัติ หากต้องการติดตั้ง Worklet คุณต้องสร้าง URL ที่แก้ไขไปยังworklet.js ของแพ็กเกจ แล้วลงทะเบียน URL นั้น ด้วยคำสั่งต่อไปนี้

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

ดูชื่อแพ็กเกจ npm และลิงก์ได้ในการ์ด Worklet แต่ละใบ

คุณจะต้องรวม CSS Paint Polyfill ผ่านสคริปต์หรือนำเข้าโดยตรง เช่นเดียวกับที่ทำกับเฟรมเวิร์กหรือ Bundler

ตัวอย่างวิธีใช้ Houdini กับ Paint plyfill ในชุดเทมเพลตสมัยใหม่

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 พร้อมหลักเกณฑ์การมีส่วนร่วม เราอยากเห็นสิ่งที่คุณคิด