ประวัติของ ::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
ในปัจจุบันจะเป็นองค์ประกอบสำหรับเก็บต้นไม้ ซึ่งหมายความว่าองค์ประกอบจะสืบทอดพร็อพเพอร์ตี้ที่สืบทอดมาจากองค์ประกอบต้นทาง
การสนับสนุนเบราว์เซอร์
- 122
- 122
- 120
- 17.4
การเปลี่ยนแปลงนี้ทำให้คุณสามารถลบล้างค่าพร็อพเพอร์ตี้ที่กำหนดเองในองค์ประกอบบางอย่าง และ ::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);
}