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

Una Kravets

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

สิ่งหนึ่งที่น่าตื่นเต้นที่สุดสำหรับ CSS ภายในร่ม Houdini ก็คือ คุณสมบัติและค่า API

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

การเขียนคุณสมบัติที่กำหนดเองของฮูดินี

นี่คือตัวอย่างของการตั้งค่าพร็อพเพอร์ตี้ที่กำหนดเอง (เช่น ตัวแปร 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 Value 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 Value API โปรดดู แหล่งข้อมูล:

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

รูปภาพโดย Cristian Escobar ใน Unsplash