เผยแพร่เมื่อวันที่ 12 กรกฎาคม 2024
เตรียมพร้อมรับการเพิ่มประสิทธิภาพ CSS กฎ @property ซึ่งเป็นส่วนหนึ่งของกลุ่ม API ของ CSS Houdini ได้รับการรองรับอย่างเต็มรูปแบบในเบราว์เซอร์สมัยใหม่ทั้งหมดแล้ว ฟีเจอร์ที่ปฏิวัติวงการนี้ช่วยให้คุณควบคุมและปรับเปลี่ยนพร็อพเพอร์ตี้ที่กำหนดเองของ CSS (หรือที่เรียกว่าตัวแปร CSS) ได้อย่างยืดหยุ่นมากขึ้น ทำให้สไตล์ชีตฉลาดขึ้นและเป็นแบบไดนามิกมากขึ้น
ประโยชน์ของ @property
- ความหมายเชิงอรรถศาสตร์: ใช้
@propertyเพื่อกำหนดประเภท (ไวยากรณ์) ของพร็อพเพอร์ตี้ที่กำหนดเอง ซึ่งจะบอกเบราว์เซอร์ว่าพร็อพเพอร์ตี้ที่กำหนดเองมีข้อมูลประเภทใด (เช่น สี ความยาว หรือตัวเลข) ซึ่งจะช่วยป้องกันไม่ให้ได้ผลลัพธ์ที่ไม่คาดคิดและรองรับความเป็นไปได้ใหม่ๆ เช่น การไล่ระดับสีแบบเคลื่อนไหว - ค่าสำรอง: จะไม่มีสไตล์ที่หายไปอีกต่อไป ใช้
@propertyเพื่อตั้งค่าเริ่มต้นสำหรับพร็อพเพอร์ตี้ที่กำหนดเอง หากมีการกําหนดค่าที่ไม่ถูกต้องในภายหลัง เบราว์เซอร์จะใช้ค่าสำรองที่คุณกําหนดไว้ - การจัดการข้อผิดพลาดที่ดีขึ้น: ความปลอดภัยของประเภทที่เพิ่มขึ้นและความสามารถในการตั้งค่าค่าสำรองจะเปิดโอกาสใหม่ๆ ในการทดสอบและตรวจสอบภายใน CSS โดยตรง
สร้างพร็อพเพอร์ตี้ที่กำหนดเองขั้นสูง
หากต้องการสร้างพร็อพเพอร์ตี้ที่กำหนดเอง "มาตรฐาน" ให้ตั้งชื่อพร็อพเพอร์ตี้โดยนำหน้าด้วย -- แล้วกำหนดค่าให้กับพร็อพเพอร์ตี้นี้ เบราว์เซอร์จะแยกวิเคราะห์ค่าของพร็อพเพอร์ตี้ที่กำหนดเองเหล่านี้เป็นสตริง
ตัวอย่างต่อไปนี้แสดงวิธีเริ่มต้นพร็อพเพอร์ตี้ที่กำหนดเองเริ่มต้น (แบบสตริง)
:root {
--myColor: hotpink;
}
หากต้องการรับประโยชน์จาก "พร็อพเพอร์ตี้ที่กำหนดเองขั้นสูง" เหล่านี้ รวมถึงความหมายที่นอกเหนือจากสตริง ให้ลงทะเบียนพร็อพเพอร์ตี้ที่กำหนดเอง CSS กับ @property
ในตัวอย่างนี้ ระบบจะเริ่มต้นพร็อพเพอร์ตี้ที่กำหนดเองเดียวกันด้วย @property
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
พร็อพเพอร์ตี้ที่กำหนดเองที่เริ่มต้นด้วย @property ให้รายละเอียดมากกว่าแค่ชื่อและค่า ซึ่งประกอบด้วยประเภทไวยากรณ์และตั้งค่าการสืบทอดเป็นจริงหรือเท็จ
ข้อดีของแนวทางนี้คือ เมื่อใช้พร็อพเพอร์ตี้มาตรฐาน คุณคาดหวังว่าพร็อพเพอร์ตี้นั้นจะมีสีเป็นค่า และคุณจะใช้สีนั้นในส่วนอื่นๆ ของสไตลชีต หากมีผู้อัปเดตพร็อพเพอร์ตี้ดังกล่าวให้มีตัวเลขเป็นค่า การใช้พร็อพเพอร์ตี้นั้นในที่อื่นๆ จะใช้งานไม่ได้ เมื่อใช้ @property จะมีการกำหนดสีสำรองไว้ พร้อมกับ syntax ที่ประกาศว่าพร็อพเพอร์ตี้นี้ต้องมีค่าสี หากใช้ค่าที่ไม่ใช่สี ระบบจะใช้ค่าสำรองแทน
ตัวอย่าง: พื้นหลังไล่ระดับสีที่ระยิบระยับ
การใช้งานที่ยอดเยี่ยมอย่างหนึ่งของ @property คือภาพเคลื่อนไหวที่ราบรื่นของพร็อพเพอร์ตี้ที่ก่อนหน้านี้เปลี่ยนไม่ได้ เช่น ไล่ระดับสี ซึ่งเบราว์เซอร์จะรับรู้เป็นภาพ อย่างไรก็ตาม หากคุณกำหนดความหมายทางไวยากรณ์ของตัวแปรผ่าน @property ตัวแปรเหล่านี้จะใช้ได้ในคำสั่ง Gradient ตอนนี้คุณกําลังอธิบายภาพเคลื่อนไหวระหว่างค่าที่ประกาศ 2 ค่าภายในไล่ระดับสี ซึ่งจะเปิดใช้ภาพเคลื่อนไหว มาดูตัวอย่างต่อไปนี้ การ์ดที่มีภาพเคลื่อนไหวพื้นหลังเล็กน้อยซึ่งประกอบด้วยการไล่สีแบบรัศมี 2 แบบซึ่งเปลี่ยนสีในไทม์ไลน์ที่แตกต่างกัน
@property เพื่อกำหนดสไตล์สีที่เคลื่อนไหวในการไล่ระดับสีพื้นหลังซึ่งทำได้โดยการตั้งค่าค่าพร็อพเพอร์ตี้ที่กำหนดเองเป็นสี ดังนี้
@property --card-bg {
syntax: "<color>";
inherits: false;
initial-value: lavender;
}
@property --shine-1 {
syntax: "<color>";
inherits: false;
initial-value: wheat;
}
@property --shine-2 {
syntax: "<color>";
inherits: false;
initial-value: lightpink;
}
จากนั้นคุณเข้าถึงข้อมูลดังกล่าวเพื่อสร้างพื้นหลังไล่ระดับสีเริ่มต้น
.card {
background: radial-gradient(
300px circle at 55% 60% in oklab,
var(--shine-2), transparent 100% 100%),
radial-gradient(farthest-side circle at 75% 30% in oklab,
var(--shine-1) 0%, var(--card-bg) 100%);
}
นอกจากนี้ คุณยังอัปเดตค่าในคีย์เฟรมได้โดยทำดังนี้
@keyframes animate-color-1 {
to {
--shine-1: orange;
}
}
@keyframes animate-color-2 {
to {
--shine-2: hotpink;
}
}
และสร้างภาพเคลื่อนไหวขององค์ประกอบแต่ละรายการดังนี้
animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;
บทสรุป
พร็อพเพอร์ตี้ที่กำหนดเองที่ลงทะเบียนของ CSS เป็นฟีเจอร์ที่มีประสิทธิภาพมากซึ่งขยายภาษา CSS โดยระบุความหมายและบริบทให้กับตัวแปร CSS ตอนนี้ @property อยู่ในแท็บพื้นฐานแล้ว ความสามารถอันยอดเยี่ยมของ CSS นี้จึงยิ่งทวีความแข็งแกร่ง