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

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

Sam Richard

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

Houdini คืออะไร

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

CSS Properties and Values API ระดับ 1

CSS Properties and Values API Level 1 (พร็อพเพอร์ตี้และค่า Houdini) ช่วยให้เรากำหนดโครงสร้างให้กับพร็อพเพอร์ตี้ที่กำหนดเองได้ สถานการณ์ปัจจุบันเมื่อใช้คุณสมบัติที่กำหนดเองมีดังนี้

.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 and 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 ข้อเกี่ยวกับพร็อพเพอร์ตี้และค่าของ Houdini ประการแรกคือเมื่อกำหนดแล้ว คุณจะอัปเดตพร็อพเพอร์ตี้ที่ลงทะเบียนไว้แล้วไม่ได้ และการพยายามลงทะเบียนพร็อพเพอร์ตี้ซ้ำจะแสดงข้อผิดพลาดที่ระบุว่ามีการกำหนดพร็อพเพอร์ตี้แล้ว

ประการที่ 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 เคลื่อนไหว จึงทำให้การไล่ระดับสีแบบเส้นตรงเคลื่อนไหว ดู Codepen ด้านล่างเพื่อดูโค้ดแบบเต็ม ที่ใช้งานจริงและลองเล่นด้วยตัวเอง

บทสรุป

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