พร็อพเพอร์ตี้ที่กำหนดเองที่ชาญฉลาดขึ้นด้วย API ใหม่ของ Houdini

การเปลี่ยนและการคุ้มครองข้อมูลใน CSS

Sam Richard

คุณสมบัติที่กำหนดเองของ CSS หรือที่เรียกว่า CSS ตัวแปร ช่วยให้คุณกำหนดคุณสมบัติของคุณเองใน CSS และใช้ค่าของพร็อพเพอร์ตี้ได้ตลอด CSS แม้จะมีประโยชน์อย่างยิ่งในปัจจุบัน แต่ก็ยังมีข้อบกพร่องที่อาจทำให้ ทำงานยาก: พวกมันอาจสร้างมูลค่าได้ จึงอาจเกิดโดยไม่ได้ตั้งใจ ถูกลบล้างด้วยสิ่งที่ไม่คาดคิด จึงรับค่าของค่าจาก ผู้ปกครอง และคุณไม่สามารถเปลี่ยนพวกเขาได้ ด้วยคุณสมบัติ CSS และ ค่า API ระดับ 1, ซึ่งตอนนี้พร้อมใช้งานใน Chrome 78 แล้ว ข้อบกพร่องเหล่านี้ก็ก้าวข้าม ทำให้ CSS พร็อพเพอร์ตี้ที่กำหนดเองนั้นมีประสิทธิภาพอย่างไม่น่าเชื่อ!

Houdini คืออะไร

ก่อนที่จะพูดถึง API ใหม่ เรามาพูดถึง Houdini อย่างรวดเร็วกัน CSS-TAG Houdini Task Force หรือที่รู้จักกันในชื่อ CSS Houdini หรือ Houdini ก่อตั้งขึ้นเพื่อ "พัฒนาคุณลักษณะที่อธิบาย 'ความมหัศจรรย์' การจัดรูปแบบและเลย์เอาต์บนเว็บ" ข้อกำหนดของ Houdini มีคอลเล็กชันดังนี้ ที่ออกแบบมาเพื่อเปิดขุมพลังของเครื่องมือเรนเดอร์ของเบราว์เซอร์ ทำให้ทั้ง รู้ลึกเกี่ยวกับสไตล์ของเราและความสามารถในการขยายเครื่องมือเรนเดอร์ของเรา จากวิธีนี้ การพิมพ์ค่า CSS ใน JavaScript และการทำโพลีฟิลล์หรือการสร้าง CSS ใหม่ ถ้าไม่มี Hit ด้านประสิทธิภาพ ฮูดินี่มีศักยภาพที่จะ ช่วยเพิ่มพลังความคิดสร้างสรรค์บนเว็บ

พร็อพเพอร์ตี้ CSS และค่า API ระดับ 1

ระดับ API ของพร็อพเพอร์ตี้ CSS และค่าระดับ API 1 (ฮูดีนีโพรพ์และ Vals) ทำให้เราสามารถกำหนดโครงสร้างให้กับคุณสมบัติที่กำหนดเองของเรา นี่เป็น กรณีที่ใช้คุณสมบัติที่กำหนดเอง จะมีลักษณะดังนี้

.thing {
  --my-color: green;
}

เนื่องจากพร็อพเพอร์ตี้ที่กำหนดเองไม่มีประเภท จึงอาจลบล้างได้อย่างไม่คาดคิด ได้ ตัวอย่างเช่น ลองพิจารณาว่าจะเกิดอะไรขึ้นหากคุณกำหนด --my-color ด้วย URL

.thing {
  --my-color: url('not-a-color');
  color: var(--my-color);
}

เนื่องจากไม่ได้พิมพ์ --my-color ไว้ จึงไม่ทราบ URL ที่ถูกต้อง ค่าสี! เมื่อเราใช้อยู่ การปรับกลับเป็นค่าเริ่มต้น (สีดำสำหรับ color แบบโปร่งใสสำหรับ background) ด้วย Houdini Props และ Vals คุณสมบัติที่กำหนดเองสามารถ ลงทะเบียนเพื่อให้เบราว์เซอร์รู้ว่าควรเป็นอะไร!

ตอนนี้พร็อพเพอร์ตี้ที่กำหนดเอง --my-color ได้รับการลงทะเบียนเป็นสีแล้ว ซึ่งจะบอก ประเภทค่าที่อนุญาต และวิธีการที่เบราว์เซอร์สามารถพิมพ์และจัดการกับค่านั้น

โครงสร้างของพร็อพเพอร์ตี้ที่จดทะเบียน

การลงทะเบียนพร็อพเพอร์ตี้จะมีลักษณะดังนี้

window.CSS.registerProperty({
  name: '--my-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'black',
});

โดยรองรับตัวเลือกต่อไปนี้

name: string

ชื่อของพร็อพเพอร์ตี้ที่กำหนดเอง

syntax: string

วิธีแยกวิเคราะห์พร็อพเพอร์ตี้ที่กำหนดเอง ดูรายการค่าที่เป็นไปได้ทั้งหมดได้ในข้อกำหนดค่าและหน่วย CSS ค่าเริ่มต้นคือ *

inherits: boolean

ตัวแปรจะรับค่าของระดับบนหรือไม่ ค่าเริ่มต้นคือ true

initialValue: string

ค่าเริ่มต้นของพร็อพเพอร์ตี้ที่กำหนดเอง

ดูรายละเอียด syntax อย่างละเอียด มีตัวเลือกมากมายที่ ถูกต้อง ตัวเลือก มีตั้งแต่ตัวเลข สี ไปจนถึง <custom-ident> ประเภทต่างๆ ไวยากรณ์เหล่านี้ยังสามารถแก้ไขได้โดยใช้ค่าต่อไปนี้

• การใส่ + ต่อท้ายหมายความว่ายอมรับรายการค่าของ ไวยากรณ์นั้น ตัวอย่างเช่น <length>+ จะเป็นรายการที่คั่นด้วยช่องว่างของ ความยาวสระ
• การต่อท้าย # หมายถึงว่ายอมรับรายการค่าของ ไวยากรณ์นั้น ตัวอย่างเช่น <color># จะเป็นรายการที่คั่นด้วยจุลภาคของ สี
• การเพิ่ม | ระหว่างไวยากรณ์หรือตัวระบุหมายความว่ารายการใดรายการหนึ่งที่ระบุ ถูกต้อง ตัวอย่างเช่น <color># | <url> | magic จะอนุญาตให้ รายการสี, URL หรือคำว่า magic ซึ่งคั่นด้วยคอมมา

Gotchas

มีฮูดินี พรอปส์และวาลส์ 2 คัน เหตุผลแรกก็คือ เมื่อ ที่กำหนดไว้ ก็จะไม่มีวิธีอัปเดตพร็อพเพอร์ตี้ ที่จดทะเบียนที่มีอยู่แล้ว และพยายาม การลงทะเบียนพร็อพเพอร์ตี้อีกครั้งจะแสดงข้อผิดพลาดที่ระบุว่าได้ดำเนินการแล้ว กำหนดไว้

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

การสร้างคุณสมบัติที่กำหนดเองเป็นภาพเคลื่อนไหว

พร็อพเพอร์ตี้แบบกำหนดเองที่ลงทะเบียนจะให้โบนัสสนุกๆ ที่มากกว่าการตรวจสอบประเภท: ก็สามารถทำให้เคลื่อนไหวได้! ตัวอย่างภาพเคลื่อนไหวพื้นฐานมีลักษณะดังนี้

<script>
CSS.registerProperty({
  name: '--stop-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'blue',
});
</script>

<style>
button {
  --stop-color: red;
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}
</style>

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

button {
  --stop-color: red;
  background: linear-gradient(var(--stop-color), black);
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}

ซึ่งจะทำให้พร็อพเพอร์ตี้ที่กำหนดเองของเราซึ่งเป็นส่วนหนึ่งของ linear-gradient เคลื่อนไหว ดังนั้น และทำให้การไล่ระดับสีแบบเส้นตรงของเราเคลื่อนไหว ดู Glitch ด้านล่างเพื่อดูโค้ดแบบเต็ม ของการใช้งาน แล้วลองเล่นเอง

บทสรุป

Houdini กำลังเดินทางไปยังเบราว์เซอร์ และ วิธีใหม่ๆ ในการทำงานและขยาย CSS ทั้งหมด ด้วย Paint จัดส่ง API แล้ว และตอนนี้ อุปกรณ์ประกอบและ Vals ที่กำหนดเอง กล่องเครื่องมือสร้างสรรค์ของเราก็กำลังขยายตัว ช่วยให้เรา กำหนดคุณสมบัติ CSS ที่พิมพ์และใช้เพื่อสร้างภาพเคลื่อนไหวแบบใหม่และน่าตื่นเต้น รูปแบบต่างๆ นอกจากนี้ยังมีข้อมูลเพิ่มเติมอีกมากมายในฉบับฮูดีนี คิวที่คุณสามารถให้ และดูว่าจะเกิดอะไรขึ้นกับ Houdini ฮูดินี่มีอยู่เพื่อพัฒนาฟีเจอร์ ที่อธิบาย "ความมหัศจรรย์" การจัดรูปแบบและเลย์เอาต์บนเว็บ ดังนั้นลองออกไป นำฟีเจอร์วิเศษเหล่านั้นมาใช้

รูปภาพโดย Maik Jonietz ในวันที่ หน้าจอแนะนํา