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

ชาร์จไฟ CSS ของคุณให้มีประสิทธิภาพด้วยชิ้นงานสี Houdini ได้ง่ายๆ ในไม่กี่คลิก

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

เลเยอร์ Houdini

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

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

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

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

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

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

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

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

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

Houdini.how

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

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

การใช้ Houdini

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

คุณสามารถรวมงาน 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>");

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

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

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

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

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

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

ตัวอย่างวิธีใช้ Houdini กับ Paint Polyfill ใน Bundler สมัยใหม่

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.how ไม่ได้โฮสต์ชิ้นงานใดๆ เอง แต่แสดงผลงานของชุมชนแทน หากมีชิ้นงานหรือทรัพยากรที่ต้องการส่ง โปรดดูที่เก็บข้อมูล github ที่มีหลักเกณฑ์การมีส่วนร่วม เราอยากทราบความคิดเห็นของคุณ