CSS @property กฎ

CSS @property กฎ

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

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

กำหนดตัวอย่างของคุณสมบัติแบบตัวแปรที่กำหนดไว้

@property --myColor {
  syntax: "<color>";
  inherits: ความสามารถนำมาจากบุตรของตนเอง;
  initial-value: ขาวอ่อน;
}

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

เพื่อใช้คุณสมบัติแบบตัวแปรที่กำหนดไว้ใน CSS เราใช้ var() ฟังก์ชัน:

body {
  background-color: var(--myColor);
}

การใช้ @property ประโยชน์:

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

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

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

ตัวอย่างของ @property ที่เรียบง่าย

ในตัวอย่างนี้มีคุณสมบัติที่กำหนดเองสองตัว--my-bg-color และ --my-txt-color. จากนั้น div จะมีค่า background-color และ color ใช้คุณสมบัติที่กำหนด

ตัวอย่าง

@property --my-bg-color {
  syntax: "<color>";
  inherits: ความสามารถนำมาจากบุตรของตนเอง;
  initial-value: ขาวอ่อน;
}
@property --my-txt-color {
  syntax: "<color>";
  inherits: ความสามารถนำมาจากบุตรของตนเอง;
  initial-value: สีน้ำเงินมืด;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
  color: var(--my-txt-color);
}

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

ใช้คุณสมบัติที่กำหนด

ในตัวอย่างนี้ เราใช้คุณสมบัติที่กำหนดของรูปแบบโดยเริ่มต้นในตัว <div> โดยมีคุณสมบัติที่กำหนดโดยนักจำแนกของอีกตัวอย่าง .fresh และ .nature ปกปิดคุณสมบัติที่กำหนดในรูปแบบ (ด้วยการกำหนดสีอื่น) มีประสิทธิภาพดีมาก:

ตัวอย่าง

@property --my-bg-color {
  syntax: "<color>";
  inherits: ความสามารถนำมาจากบุตรของตนเอง;
  initial-value: ขาวอ่อน;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: rgb(120, 180, 30);
}

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

เพื่อป้องกันความผิดพลาดด้วยการตรวจสอบชนิดและค่ายางในตัวเลข

ในตัวอย่างนี้ เราจะ .nature คุณสมบัติที่กำหนดในรูปแบบของหลักคำว่าจะเป็นตัวเลขตัวเดียว。 initial-value สีที่กำหนดในของที่กำหนดในคุณสมบัติ (ขาวอ่อน):

ตัวอย่าง

@property --my-bg-color {
  syntax: "<color>";
  inherits: ความสามารถนำมาจากบุตรของตนเอง;
  initial-value: ขาวอ่อน;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: 2;
}

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

ใช้ค่า inherits

ในตัวอย่างนี้ เราจะ inherits ค่าจัดการ falseนี่หมายความว่าคุณสมบัติที่กำหนดขึ้นเองจะไม่มีค่าจากตัวอนุญาตของตนเอง。

ตัวอย่าง

@property --my-bg-color {
  syntax: "<color>";
  inherits: false;
  initial-value: ขาวอ่อน;
}

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

ตัวอย่างต่อไปนี้จะ inherits ค่าจัดการ trueนี่หมายความว่าคุณสมบัติที่กำหนดขึ้นเองจะมีค่าจากตัวอนุญาตของตนเอง。

ตัวอย่าง

@property --my-bg-color {
  syntax: "<color>";
  inherits: ความสามารถนำมาจากบุตรของตนเอง;
  initial-value: ขาวอ่อน;
}

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

การใช้ @property สร้างแอนิเมชันที่สมบูรณ์

การใช้ @property โอกาสที่สามารถทำได้ด้วยกฎที่สามารถปฏิบัติงานของแอนิเมชันที่เคยไม่สามารถแอนิเมชันได้ก็คือกราฟิกตาย ดูตัวอย่างต่อไปนี้

ตัวอย่าง

กำหนดสองขอบวนตัวแปรที่เป็นส่วนตัวสำหรับการเปลี่ยนแปลงกราฟิกตายแล้ว

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

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

CSS @property กฎ