CSS Houdini เป็นคำกว้างๆ ที่ครอบคลุมชุด API ระดับต่ำที่เผยให้เห็นส่วนต่างๆ ของเครื่องมือการแสดงผล CSS และให้สิทธิ์นักพัฒนาซอฟต์แวร์มีสิทธิ์เข้าถึงโมเดลออบเจ็กต์ CSS นี่เป็นการเปลี่ยนแปลงครั้งใหญ่สำหรับระบบนิเวศ CSS เนื่องจากนักพัฒนาซอฟต์แวร์สามารถบอกวิธีการอ่านและแยกวิเคราะห์ CSS ที่กำหนดเองกับเบราว์เซอร์โดยไม่ต้องรอให้ผู้ให้บริการเบราว์เซอร์ให้การสนับสนุนฟีเจอร์เหล่านี้ในตัว น่าตื่นเต้นจริงๆ
ผลิตภัณฑ์เพิ่มเติมที่น่าตื่นเต้นที่สุดอย่างหนึ่งของ CSS ภายใน Houdini umbrella คือ Properties and values API
API นี้จะเสริมพลังให้กับพร็อพเพอร์ตี้ที่กำหนดเองของ CSS (หรือที่มักเรียกว่าตัวแปร CSS) โดยการให้ความหมายทางความหมาย (กำหนดโดยไวยากรณ์) และแม้กระทั่งค่าสำรอง ทำให้สามารถทดสอบ CSS ได้
กำลังเขียนคุณสมบัติที่กำหนดเองของ Houdini
ต่อไปนี้คือตัวอย่างการตั้งค่าพร็อพเพอร์ตี้ที่กำหนดเอง (เช่น ตัวแปร CSS) แต่ตอนนี้ใช้ไวยากรณ์ (ประเภท) ค่าเริ่มต้น (สำรอง) และบูลีนที่รับสืบทอดมา (ค่าดังกล่าวมาจากระดับบนสุดหรือไม่) วิธีการในปัจจุบันคือทำผ่าน CSS.registerProperty()
ใน JavaScript แต่ในเบราว์เซอร์ที่รองรับ คุณจะใช้ @property
ได้ดังนี้
CSS.registerProperty({ name: '--colorPrimary', syntax: '', initialValue: 'magenta', inherits: false });
@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%;
}
}
ซึ่งจะเป็นการเปิดใช้การเปลี่ยนการไล่ระดับสีที่ราบรื่น
บทสรุป
กฎ @property
ทําให้เทคโนโลยีที่น่าตื่นเต้นเข้าถึงได้มากขึ้น โดยให้คุณเขียน CSS ที่มีความหมายภายใน CSS ได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับ CSS Houdini และ Properties and Value API ได้จากแหล่งข้อมูลต่อไปนี้
- ฮูดินี่พร้อมหรือยัง
- ข้อมูลอ้างอิงของ MDN Houdini
- พร็อพเพอร์ตี้แบบกำหนดเองที่มีประสิทธิภาพยิ่งขึ้นด้วย API ใหม่ของ Houdini
- คิวปัญหา Houdini CSSWG
รูปภาพโดย Cristian Escobar ใน Unsplash