หน้านี้ได้รับการแปลโดย Cloud Translation API

@property: ตัวแปร CSS รุ่นถัดไปรองรับเบราว์เซอร์แบบสากลแล้ว

Una Kravets

เตรียมพร้อมสำหรับการเพิ่มพลัง 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 นี้ก็กำลังเติบโตขึ้นเรื่อยๆ