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

Una Kravets

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

ผลิตภัณฑ์เพิ่มเติมที่น่าตื่นเต้นที่สุดอย่างหนึ่งของ CSS ภายใน Houdini umbrella คือ Properties and values API

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

กำลังเขียนคุณสมบัติที่กำหนดเองของ Houdini

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

ไฟล์ JavaScript แยกต่างหาก (Chromium 78)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '',
  initialValue: 'magenta',
  inherits: false
});
รวมอยู่ในไฟล์ CSS (Chromium 85)
@property --colorPrimary {
  syntax: '';
  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 ได้โดยทำดังนี้

/* Check for Houdini support & register property */
@supports (background: paint(something)) {
  @property --gradPoint {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 40%;
  }
}

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

@supports (background: paint(something)) {
  .post:hover,
  .post:focus {
    --gradPoint: 100%;
  }
}

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

การเปลี่ยนเส้นขอบการไล่ระดับสีอย่างราบรื่น ดูการสาธิตเกี่ยวกับ Glitch

บทสรุป

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

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