@property: เพิ่มพลังพิเศษให้กับตัวแปร CSS

Una Kravets

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

หนึ่งในการเพิ่มที่น่าตื่นเต้นที่สุดสำหรับ CSS ภายในร่มของ Houdini คือ Properties and Values (พร็อพเพอร์ตี้และค่า) API

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

การเขียนพร็อพเพอร์ตี้ที่กำหนดเองของ Houdini

ต่อไปนี้คือตัวอย่างการตั้งค่าพร็อพเพอร์ตี้ที่กำหนดเอง (ลองนึกถึงตัวแปร CSS) แต่ตอนนี้มีไวยากรณ์ (ประเภท) ค่าเริ่มต้น (ค่าสำรอง) และบูลีนการสืบทอด (รับค่ามาจากพร็อพเพอร์ตี้หลักหรือไม่) วิธีปัจจุบันในการดำเนินการนี้คือผ่าน CSS.registerProperty() ใน JavaScript แต่คุณใช้ @property ได้ในเบราว์เซอร์ที่รองรับ ดังนี้

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

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

ตอนนี้คุณเข้าถึง --colorPrimary ได้เช่นเดียวกับพร็อพเพอร์ตี้ที่กำหนดเองอื่นๆ ของ CSS ผ่าน var(--colorPrimary) แต่ความแตกต่างของที่นี่คือ --colorPrimary ไม่ได้อ่านเป็นสตริงเท่านั้น มีข้อมูล

ค่าสำรอง

คุณสามารถรับ (ใช้ var) หรือตั้งค่า (เขียน/เขียนใหม่) ค่าได้เช่นเดียวกับพร็อพเพอร์ตี้ที่กำหนดเองอื่นๆ แต่สำหรับพร็อพเพอร์ตี้ที่กำหนดเองของ Houdini หากคุณตั้งค่าที่ไม่ใช่ค่าจริงเมื่อลบล้างค่า เครื่องมือแสดงผล CSS จะส่งค่าเริ่มต้น (ค่าสำรอง) แทนการละเว้นบรรทัด

ลองดูตัวอย่างด้านล่าง ตัวแปร --colorPrimary มี initial-value เท่ากับ magenta แต่นักพัฒนาแอปได้ตั้งค่าเป็นค่าที่ไม่ถูกต้อง "23" หากไม่มี @property โปรแกรมแยกวิเคราะห์ CSS จะละเว้นโค้ดที่ไม่ถูกต้อง ตอนนี้โปรแกรมแยกวิเคราะห์จะใช้ magenta ซึ่งช่วยให้มีการแสดงผลสำรองและการทดสอบที่แท้จริงภายใน CSS เยี่ยมเลย

.card {
  background-color: var(--colorPrimary); /* magenta */
}

.highlight-card {
  --colorPrimary: yellow;
  background-color: var(--colorPrimary); /* yellow */
}

.another-card {
  --colorPrimary: 23;
  background-color: var(--colorPrimary); /* magenta */
}

ไวยากรณ์

ฟีเจอร์ไวยากรณ์ช่วยให้คุณเขียน CSS เชิงความหมายได้โดยระบุประเภท ประเภทที่อนุญาตในปัจจุบันมีดังนี้

• length
• number
• percentage
• length-percentage
• color
• image
• url
• integer
• angle
• time
• resolution
• transform-list
• transform-function
• custom-ident (สตริงตัวระบุที่กำหนดเอง)

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

เราจะอธิบายเรื่องนี้ด้วยการแสดงวิธีสร้างภาพเคลื่อนไหวของไล่ระดับสี ปัจจุบันยังไม่มีวิธีทำให้ค่าไล่ระดับมีภาพเคลื่อนไหว (หรือประมาณค่า) อย่างราบรื่น เนื่องจากระบบจะแยกวิเคราะห์การประกาศไล่ระดับแต่ละรายการเป็นสตริง

ในตัวอย่างนี้ เปอร์เซ็นต์จุดสิ้นสุดของไล่ระดับสีจะมีภาพเคลื่อนไหวจากค่าเริ่มต้น 40% เป็นค่าสุดท้าย 100% ผ่านการโต้ตอบด้วยการวางเมาส์เหนือ คุณควรเห็นการไล่ระดับสีด้านบนนั้นค่อยๆ ไล่ระดับลงอย่างราบรื่น

เบราว์เซอร์ทางด้านซ้ายรองรับ Houdini Properties and Values API ซึ่งช่วยให้การเปลี่ยนสีไล่ระดับเป็นไปอย่างราบรื่น แต่เบราว์เซอร์ทางด้านขวาไม่มี ส่วนเบราว์เซอร์ที่ไม่รองรับจะเข้าใจการเปลี่ยนแปลงนี้ว่าเป็นสตริงที่วิ่งจากจุด A ไปยังจุด B เท่านั้น จึงไม่มีเวลาที่จะประมาณค่า และคุณจึงไม่เห็นการเปลี่ยนที่ราบรื่น

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

@property --gradPoint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

และเมื่อถึงเวลาสร้างภาพเคลื่อนไหว คุณสามารถอัปเดตค่าจาก 40% เริ่มต้นเป็น 100% ได้โดยทำดังนี้

.post:hover,
.post:focus {
  --gradPoint: 100%;
}

ซึ่งจะช่วยให้การเปลี่ยนสีไล่ระดับเป็นไปอย่างราบรื่น

บทสรุป

กฎ @property ทำให้เทคโนโลยีที่น่าตื่นเต้นนี้เข้าถึงได้ง่ายขึ้นด้วยการอนุญาตให้คุณเขียน CSS ที่มีความหมายเชิงความหมายภายใน CSS เอง ดูข้อมูลเพิ่มเติมเกี่ยวกับ CSS Houdini และ Properties and Values API ได้ที่แหล่งข้อมูลต่อไปนี้

• Houdini พร้อมใช้งานหรือยัง
• ข้อมูลอ้างอิง MDN Houdini
• พร็อพเพอร์ตี้ที่กำหนดเองที่ฉลาดขึ้นด้วย API ใหม่ของ Houdini
• คิวปัญหา CSSWG ของ Houdini

รูปภาพโดย Cristian Escobar จาก Unsplash