การเปลี่ยนแปลงของ CSS ::การรับช่วงค่าฉากหลัง

Bramus

ประวัติของ ::backdrop

API เต็มหน้าจอเปิดตัวแนวคิดใหม่ เช่น เลเยอร์ด้านบนและองค์ประกอบ ::backdrop

• เลเยอร์ด้านบนคือเลเยอร์แบบซ้อนใหม่ที่แสดงผลใกล้กับผู้ใช้มากที่สุดภายในวิวพอร์ต มีขนาดของวิวพอร์ตและปรากฏที่ด้านบนของเลเยอร์อื่นๆ ทั้งหมด
• องค์ประกอบเทียมของ CSS ของ ::backdrop คือกล่องที่มีขนาดของวิวพอร์ตที่แสดงผลทันทีใต้องค์ประกอบใดๆ ที่แสดงในเลเยอร์บนสุด

ฟีเจอร์หนึ่งของข้อกำหนดเดิมสำหรับ ::backdrop คือ

โดยไม่รับค่ามาจากองค์ประกอบใดๆ และไม่รับค่ามา

แม้ว่าวิธีนี้จะมีประโยชน์ในการแยกการจัดรูปแบบของ ::backdrop แต่ก็หมายความว่า ::backdrop ไม่มีสิทธิ์เข้าถึงพร็อพเพอร์ตี้ที่กำหนดเองที่ประกาศเมื่อวันที่ :root ซึ่งทำให้เกิดความสับสนในหมู่นักพัฒนาเว็บ

วิธีแก้ปัญหาคือ คุณต้องประกาศพร็อพเพอร์ตี้ที่กำหนดเองใน ::backdrop และ :root อย่างชัดเจนเพื่อให้พร็อพเพอร์ตี้ดังกล่าวพร้อมใช้งาน

/* Pre-Chrome 122 */
:root, ::backdrop {
  --back-color: #333;
}

::backdrop {
  background-color: var(--back-color);
}

ข้อมูลอัปเดตเกี่ยวกับ ::backdrop

ในการแก้ไขปัญหาเกี่ยวกับ ::backdrop คณะทำงาน CSS ได้นำแนวคิดเหล่านี้ไปใช้ และได้ระบุแนวคิดดังกล่าวไว้ในข้อกำหนดเลย์เอาต์ที่จัดตำแหน่ง CSS แล้ว

นอกจากการย้ายคําจํากัดความไปยังข้อกําหนดใหม่แล้ว ยังได้ปรับแต่งคําจํากัดความดังกล่าวด้วย

การปรับเกณฑ์การค้นหาอย่างหนึ่งที่ส่งผลโดยตรงต่อนักพัฒนาเว็บคือองค์ประกอบ ::backdrop ในปัจจุบันจะเป็นองค์ประกอบสำหรับเก็บต้นไม้ ซึ่งหมายความว่าองค์ประกอบจะสืบทอดพร็อพเพอร์ตี้ที่สืบทอดมาจากองค์ประกอบต้นทาง

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

/* Chrome 122 and up */
:root {
  --backdrop-color: #333; /* Any ::backdrop can access this custom property */
}

dialog {
  --backdrop-color: #6300ff33; /* The ::backdrop for dialog can access this custom property */
}

::backdrop {
  background-color: var(--backdrop-color);
}