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

Bramus

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

Fullscreen API นำเสนอแนวคิดใหม่ๆ เช่น เลเยอร์บนสุดและองค์ประกอบ ::backdrop

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

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

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

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

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

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

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

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

กลุ่มทํางาน CSS ได้นำแนวคิดเหล่านี้มาใช้เพื่อแก้ไขปัญหาเกี่ยวกับ ::backdrop และระบุไว้ในข้อกําหนดการจัดวางตำแหน่ง 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);
}