CSS @property กฎ

การกำหนดและการใช้งาน

CSS @property กฎที่ใช้เพื่อกำหนดคุณสมบัติ CSS ที่กำหนดโดยตนในตารางสไตล์โดยไม่ต้องทำงาน JavaScript ใดๆ。

@property กฎที่มีฟีเจอร์ตรวจสอบชนิดข้อมูลและข้อจำกัด สามารถตั้งค่าค่าเริ่มต้น และกำหนดว่าคุณสมบัติสามารถสืบทอดค่าหรือไม่。

ใช้ @property ประโยชน์ของมัน:

• ตรวจสอบชนิดข้อมูลและข้อจำกัด: ต้องระบุชนิดข้อมูลของคุณสมบัติเฉพาะ เช่น <number>、<color>、<length> และอื่น ๆ นี้ ซึ่งจะป้องกันความผิดพลาดและให้ความเชื่อมั่นในการใช้คุณสมบัติเฉพาะอย่างถูกต้อง。
• ตั้งค่าเริ่มต้น: สามารถกำหนดค่าเริ่มต้นสำหรับคุณสมบัติเฉพาะ ซึ่งจะทำให้เมื่อมีการจัดสรรค่าที่ผิดปกติ บราวเซอร์จะใช้ค่าที่กำหนดในลูกค้าย。
• ตั้งพฤติกรรมการสืบทอด: ต้องระบุว่าคุณสมบัติเฉพาะสามารถสืบทอดค่าจากองค์ประกอบพ่อหรือไม่。

ตัวอย่าง: กำหนดคุณสมบัติเฉพาะที่กำหนดโดยตน

@property --my-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

การกำหนดดังกล่าวหมายความว่า --my-color คือคุณสมบัติสีที่สามารถสืบทอดค่าจากองค์ประกอบพ่อ และมีค่าเริ่มต้นคือ lightgray。

ใช้คุณสมบัติเฉพาะที่กำหนดโดยตนใน CSS:

body {}}
  backgound-color: var(--my-color);
}

ตัวอย่าง

ตัวอย่าง 1

กำหนดคุณสมบัติที่กำหนดโดยมาตรฐานสองรายการสำหรับการเปลี่ยนสี - และใช้นั้นเพื่ออนิเมชั่นการเปลี่ยนสี:

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

ทดลองด้วยตัวเอง

ตัวอย่าง 2

กำหนดคุณสมบัติที่กำหนดโดยมาตรฐานสองรายการ: หนึ่งสำหรับขนาดของรายการและหนึ่งสำหรับสีของรายการ：

@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --item-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

ทดลองด้วยตัวเอง

CSS ภาษา

@property --propertyname {
  syntax: "<color>";
  initial-value: red;
  inherits: false;
}

ค่าของคุณสมบัติ

การสนับสนุนบราวเซอร์

ตัวเลขในตารางนี้แสดงความสามารถที่เรียกใช้กับ @ กฎที่หนึ่งครั้งเท่านั้นของเวอร์ชั่นบราวเซอร์ที่สนับสนุนอย่างเต็มที่。

หน้าที่เกี่ยวข้อง

ตัวอย่าง:CSS @property กฎ