คุณสมบัติที่กำหนดเอง

สมมติว่าคุณได้สร้างสไตล์เริ่มต้นบางอย่างสำหรับเว็บไซต์ และพบว่าคุณใช้ค่าบางอย่างใน CSS ซ้ำ คุณใช้ dodgerblue เป็นสีหลัก และเพิ่มสีดังกล่าวลงในเส้นขอบปุ่ม ข้อความลิงก์ พื้นหลังส่วนหัว และใช้เครื่องมือออกแบบเพื่อเลือกสีน้ำเงินบางเฉดสำหรับส่วนอื่นๆ ของเว็บไซต์ จากนั้นคุณจะได้รับคู่มือสไตล์ และตอนนี้สีหลักคือ oklch(70% 0.15 270)

พร็อพเพอร์ตี้ที่กำหนดเองหรือตัวแปร CSS ช่วยให้คุณจัดระเบียบและนำค่าใน CSS กลับมาใช้ซ้ำได้ เพื่อให้สไตล์มีความยืดหยุ่นและเข้าใจได้ง่ายขึ้น

การสร้างพร็อพเพอร์ตี้

วิธีที่ง่ายที่สุดในการสร้างพร็อพเพอร์ตี้คือการตั้งค่าในพร็อพเพอร์ตี้ใหม่ที่มีชื่อที่คุณกำหนด

.card {
  --base-size: 1em;
}

ชื่อพร็อพเพอร์ตี้ทั้งหมดต้องขึ้นต้นด้วยขีดกลาง 2 ขีด ซึ่งจะช่วยป้องกันไม่ให้คุณพยายามใช้ชื่อพร็อพเพอร์ตี้ CSS ที่มีอยู่สำหรับค่าที่กำหนดเอง ข้อกำหนด CSS จะไม่เพิ่มพร็อพเพอร์ตี้ที่ขึ้นต้นด้วยขีดกลาง 2 ขีด

จากนั้นจะเข้าถึงพร็อพเพอร์ตี้นี้ได้ด้วยฟังก์ชัน var() ตัวอย่างนี้กำหนดขนาดแบบอักษรภายใน .card-title ให้เป็น 2 เท่าของค่า --base-size

.card .card-title {
  font-size: calc(2 * var(--base-size));
}

การใช้พร็อพเพอร์ตี้ที่กำหนดเอง

ดังที่เห็น คุณสามารถใช้ค่าของพร็อพเพอร์ตี้ที่กำหนดเองกับฟังก์ชัน var() ได้ คุณใช้ฟังก์ชัน var() ในค่าได้ แต่ใช้ใน Media Query ไม่ได้ โดยเฉพาะอย่างยิ่งเมื่อใช้เป็นอาร์กิวเมนต์กับฟังก์ชัน CSS อื่นๆ

การสำรอง

จะเกิดอะไรขึ้นหากคุณพยายามใช้พร็อพเพอร์ตี้ที่กำหนดเองซึ่งไม่ได้ตั้งค่าไว้ var() ฟังก์ชันจะใช้ค่าที่ 2 ซึ่งจะใช้เป็นค่าสำรอง ค่าสำรองอาจเป็นพร็อพเพอร์ตี้ที่กำหนดเองอื่นที่มี var() แบบซ้อนกันก็ได้

#my-element {
  background: var(
    --alert-variant-background,
    var(--alert-primary-background)
  );
}

ค่าไม่ถูกต้อง

หากพร็อพเพอร์ตี้ที่กำหนดเองเปลี่ยนเป็นค่าที่ไม่ถูกต้อง เช่น ค่า 1em สำหรับพร็อพเพอร์ตี้ background-color ระบบจะไม่ใช้การประกาศอื่นๆ ที่ถูกต้องในองค์ประกอบนั้นสำหรับพร็อพเพอร์ตี้นั้น เนื่องจากเบราว์เซอร์ไม่สามารถทราบได้ว่าค่าใดไม่ถูกต้องจนกว่าจะทิ้งประกาศอื่นๆ เมื่อคำนวณค่า แต่ค่าที่ใช้จะเป็นค่าที่รับมาหรือค่าเริ่มต้นแทน

.content {
  background-color: blue;
}

.content.invalid {
  --length: 2rem;
  background-color: var(--length);
}

ในตัวอย่างก่อนหน้า องค์ประกอบ .invalid จะไม่มีพื้นหลังสีน้ำเงิน แต่เนื่องจาก background-color ไม่ได้สืบทอด ค่าจึงเป็น transparent ซึ่งเป็นค่าเริ่มต้น

การลบล้างและการรับช่วงค่า

ส่วนใหญ่แล้ว คุณจะต้องการลักษณะการทำงานเริ่มต้นของพร็อพเพอร์ตี้ที่กำหนดเอง ซึ่งก็คือค่าจะรับค่า เมื่อตั้งค่าใหม่สำหรับพร็อพเพอร์ตี้ องค์ประกอบนั้นและองค์ประกอบย่อยทั้งหมดจะมีค่าดังกล่าวจนกว่าจะถูกลบล้างด้วยค่าอื่น

ระบบจะกำหนดพร็อพเพอร์ตี้ที่กำหนดเองตามการเรียงซ้อน ดังนั้นจึงสามารถลบล้างได้ด้วยตัวเลือกที่เฉพาะเจาะจงมากขึ้น

ควบคุมได้มากขึ้นด้วย @property

พร็อพเพอร์ตี้ที่กําหนดเองซึ่งสร้างขึ้นโดยการตั้งค่าจะเป็นประเภทใดก็ได้และจะรับค่า หากต้องการควบคุมพร็อพเพอร์ตี้ที่กำหนดเองได้มากขึ้น คุณสามารถใช้@propertyได้

--base-sizeพร็อพเพอร์ตี้ที่เราสร้างไว้ก่อนหน้านี้จะเทียบเท่ากับการประกาศ @property นี้

@property --base-size {
  syntax: "*";
  inherits: true;
  initial-value: 18px;
}

ค่า syntax จะตั้งค่าประเภทของค่า CSS ที่ใช้ได้กับพร็อพเพอร์ตี้ หากคุณตั้งค่าประเภทอื่นในพร็อพเพอร์ตี้นั้น พร็อพเพอร์ตี้นั้นจะใช้ไม่ได้ และจะเปลี่ยนกลับไปใช้ค่าเริ่มต้นหรือค่าที่รับช่วงมาซึ่งตั้งค่าไว้สูงกว่าในลำดับชั้น

เมื่อสร้างพร็อพเพอร์ตี้ที่กำหนดเองโดยใช้ @property คุณจะปิดใช้การรับค่าได้ด้วย inherit: false การลบล้างค่าสำหรับพร็อพเพอร์ตี้ที่กำหนดเองโดยปิดใช้การรับค่าจะเปลี่ยนค่าสำหรับองค์ประกอบที่เลือก แต่จะไม่เปลี่ยนค่าสำหรับองค์ประกอบย่อย ซึ่งมักจะมีประโยชน์เมื่อตัวเลือกหลายรายการกำหนดเป้าหมายไปยังองค์ประกอบเดียวกัน

initial-value จะตั้งค่าของพร็อพเพอร์ตี้ เว้นแต่จะมีการเปลี่ยนแปลงในภายหลัง @property ต้องตั้งค่า initial-value เว้นแต่ไวยากรณ์จะเป็น * ซึ่งหมายถึงประเภท CSS ใดก็ได้ วิธีนี้ช่วยให้มั่นใจได้ว่าพร็อพเพอร์ตี้จะมีค่าตามไวยากรณ์ที่ระบุเสมอ และจะไม่เป็นค่าที่ไม่ได้กำหนด

การอัปเดตพร็อพเพอร์ตี้ที่กำหนดเองด้วย JavaScript

คุณอัปเดตค่าของพร็อพเพอร์ตี้ที่กำหนดเองในองค์ประกอบได้โดยใช้ JavaScript ซึ่งคุณสามารถใช้เพื่ออัปเดตสไตล์ของเว็บไซต์แบบไดนามิก

const element = document.getElementById("my-button");
getComputedStyle(element).setPropertyValue("--color", orange);

ตัวอย่างนี้จะอัปเดตแท็กรูปแบบในองค์ประกอบ #my-button และการตรวจสอบในเครื่องมือสำหรับนักพัฒนาเว็บจะแสดงข้อมูลต่อไปนี้

<button id="my-button" style="--color: orange">Click me</button>

ในตัวอย่างก่อนหน้า คุณจะเห็นวิธีตั้งค่าพร็อพเพอร์ตี้ที่กำหนดเองโดยการเข้าถึงข้อมูลที่จัดเก็บไว้ในแอตทริบิวต์ HTML ที่กำหนดเอง ปุ่มแต่ละปุ่มมีแอตทริบิวต์ data-color ที่มีค่าเป็นสีที่เฉพาะเจาะจง ระบบจะรีเซ็ต--backgroundพร็อพเพอร์ตี้ที่กำหนดเองซึ่งตั้งค่าไว้ในองค์ประกอบ body เป็นค่าของ data-color ในปุ่มที่คลิก

นอกจากนี้ คุณยังใช้ getComputedStyle(element).getPropertyValue("--variable") เพื่อรับค่าของพร็อพเพอร์ตี้ในองค์ประกอบที่เฉพาะเจาะจงได้ด้วย ซึ่งจะเป็นประโยชน์หากตรรกะของคุณต้องตอบสนองต่อค่าที่เรียงซ้อนกัน