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

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

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

Una Kravets

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

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

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

ทำความเข้าใจเวิร์กเล็ต Houdini

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

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

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

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

ตัวอย่างเช่น แทนที่จะต้องรอให้เบราว์เซอร์นำคุณลักษณะเส้นขอบแบบทำมุมไปใช้ คุณสามารถเขียน Worklet Paint ของคุณเอง หรือใช้ Worklet เผยแพร่ที่มีอยู่แล้ว จากนั้น แทนที่จะใช้เส้นขอบ-รัศมี ใช้เวิร์กเล็ตนี้กับเส้นขอบและการคลิป

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

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

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

Houdini.how

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

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

การใช้ Houdini

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

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

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

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

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

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

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

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

วิธีรวม Paint Polyfill ของ CSS ด้วย 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 คุณจะต้องสร้าง URL ที่แก้ไขลงในไฟล์ Worklet.js ของแพ็กเกจ แล้วลงทะเบียน URL นั้น คุณ ดังนั้นด้วย:

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

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

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

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