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

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

Sam Richard

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

Houdini คืออะไร

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

CSS Properties and Values API ระดับ 1

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

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

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

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

ในกรณีนี้ เนื่องจากไม่ได้พิมพ์ --my-color จึงไม่ทราบว่า URL ไม่ใช่ค่าสีที่ถูกต้อง เมื่อเราใช้ color จะเปลี่ยนเป็นค่าเริ่มต้น (สีดําสําหรับ 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 ข้อแรกคือ เมื่อกําหนดแล้ว คุณจะอัปเดตพร็อพเพอร์ตี้ที่ลงทะเบียนไว้ที่มีอยู่ไม่ได้ และพยายามลงทะเบียนพร็อพเพอร์ตี้อีกครั้งจะทำให้เกิดข้อผิดพลาดที่ระบุว่ามีการกําหนดไว้แล้ว

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

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