เตรียมพร้อมสำหรับการเพิ่มพลัง CSS ตอนนี้กฎ @property ซึ่งเป็นส่วนหนึ่งของ CSS Houdini ครอบคลุม API รองรับการทำงานอย่างเต็มรูปแบบในเบราว์เซอร์สมัยใหม่ทั้งหมดแล้ว ฟีเจอร์พลิกเกมนี้ช่วยปลดล็อกระดับการควบคุมและความยืดหยุ่นใหม่ๆ สำหรับพร็อพเพอร์ตี้ที่กำหนดเองของ 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 ตัวแปรเหล่านี้สามารถใช้ในคำสั่งการไล่ระดับสีได้ คุณกำลังอธิบายภาพเคลื่อนไหวระหว่างค่าที่ประกาศ 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 นี้ก็กำลังเติบโตขึ้นเรื่อยๆ