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

การเพิ่มประสิทธิภาพ CSS ด้วยเวิร์กเลตการวาดของ Houdini ทำได้ง่ายๆ ในไม่กี่คลิก

Una Kravets

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

เลเยอร์ Houdini

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

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

ทำความเข้าใจเกี่ยวกับเวิร์กเลต Houdini

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

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

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

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

เช่น แทนที่จะรอให้เบราว์เซอร์ใช้ฟีเจอร์เส้นขอบแบบเอียง คุณสามารถเขียนเวิร์กเลต Paint ของคุณเองหรือใช้เวิร์กเลตที่เผยแพร่อยู่แล้ว จากนั้นให้ใช้เวิร์กเลตนี้กับเส้นขอบและการครอบตัดแทนการใช้ border-radius

ตัวอย่างด้านบนใช้เวิร์กเลตการวาดเดียวกันกับอาร์กิวเมนต์ที่แตกต่างกัน (ดูโค้ดด้านล่าง) เพื่อให้ได้ผลลัพธ์นี้ การสาธิตใน 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 ที่รองรับได้ดีที่สุด โดยข้อมูลจำเพาะของ API นี้เป็นคําแนะนําที่ W3C พิจารณา ปัจจุบันฟีเจอร์นี้เปิดใช้ในเบราว์เซอร์ทั้งหมดที่ใช้ Chromium, รองรับใน Safari บางส่วน และอยู่ระหว่างพิจารณาสำหรับ Firefox

การสนับสนุนของ Caniuse
ปัจจุบันเบราว์เซอร์ที่ใช้ Chromium รองรับ CSS Painting API

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

Houdini.how

ภาพหน้าจอของหน้าเวิร์กเลต
ภาพหน้าจอจากหน้าแรกของ Houdini.how

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

การใช้ Houdini

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

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

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

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

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

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

หากต้องการบันทึกพร็อพเพอร์ตี้ที่กําหนดเอง (ไม่บังคับ) ให้ใส่ไฟล์ properties.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. การจัดการเวิร์กเลตผ่าน NPM

ติดตั้งชิ้นงานจาก npm โดยทำดังนี้

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

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

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

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

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

ต่อไปนี้คือตัวอย่างวิธีใช้ Houdini กับ polyfill ของ Paint ในเครื่องมือจัดกลุ่มสมัยใหม่

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