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

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

สมชาย ใจดี

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

ฮูดินี่คืออะไร

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

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

CSS Properties and Value API ระดับที่ 1 (Houdini Props และ 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 ที่คั่นด้วยคอมมา

รับทราบ

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

ประการที่ 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 ไปแล้ว ตอนนี้ก็มี Custom Props และ Vals แล้ว กล่องเครื่องมือครีเอทีฟโฆษณาของเราก็กำลังขยายใหญ่ขึ้น ซึ่งทำให้เราสามารถ กำหนดพร็อพเพอร์ตี้ CSS ที่มีการพิมพ์และใช้ในการสร้างและทำให้การออกแบบใหม่ๆ ที่น่าตื่นเต้น ได้เคลื่อนไหว นอกจากนี้เรายังมีวิธีอื่นๆ ที่เราจะเพิ่มเข้ามาในคิวปัญหาของ Houdini ซึ่งคุณสามารถแสดงความคิดเห็นและดูว่าต้องทำอะไรต่อไปสำหรับ Houdini Houdini ก่อตั้งขึ้นเพื่อพัฒนาคุณลักษณะ ที่อธิบาย "ความมหัศจรรย์" ของการจัดรูปแบบและเลย์เอาต์ในเว็บ ดังนั้น จงออกไปข้างนอกและใช้ประโยชน์จากคุณลักษณะที่มีเวทมนตร์เหล่านั้นให้เป็นประโยชน์

รูปภาพโดย Maik Jonietz บน Unsplash