เป็น :โมดัล ไหม

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

Jhey Tompkins

ตัวเลือก Pseudo ที่มีประโยชน์นี้ช่วยให้คุณเลือกองค์ประกอบที่เป็น "โมดัล" และหลีกเลี่ยงการจัดการคลาสใน JavaScript ด้วยการให้วิธีตรวจหาองค์ประกอบโมดัล

ปัจจุบันองค์ประกอบ 2 ประเภทได้รับการจัดประเภทเป็น :modal ได้แก่

• องค์ประกอบกล่องโต้ตอบที่ใช้เมธอด showModal
• องค์ประกอบที่อยู่ในโหมดเต็มหน้าจอ

คุณจะใช้งานอย่างไร ตัวอย่างนี้กำหนดสัดส่วนขององค์ประกอบ <dialog> ทั้งหมดที่เป็น :modal

dialog:modal {
 scale: 2;
}

ลองดูการสาธิตนี้ที่แสดง <dialog> ในรูปแบบ "โมดัล" หรือ "ไม่ใช่โมดัล" ได้

เมื่อคุณแสดงเวอร์ชัน "โมดัล" เวอร์ชันดังกล่าวจะใช้ ::backdrop ที่เลเยอร์บนสุดมีให้

dialog::backdrop {
 background: hsl(0 0% 10% / 0.5);
}

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

dialog[open]:not(:modal)::before {
  content: "";
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 50%;
  left: 50%;
  background: hsl(0 0% 10% / 0.25);
  transform: translate3d(-50%, -50%, -1px);
}

ซึ่งจะมีผลกับองค์ประกอบที่อยู่ในโหมดเต็มหน้าจอด้วย ลองนึกถึงองค์ประกอบของส่วนหัวนี้ที่สร้างขึ้นจาก Span

<header>
  <h1>
    <span style="--index: 0;">:</span>
    <span style="--index: 1;">m</span>
    <span style="--index: 2;">o</span>
    <span style="--index: 3;">d</span>
    <span style="--index: 4;">a</span>
    <span style="--index: 5;">l</span>
 </h1>
</header>

เมื่อองค์ประกอบอยู่ในโหมดเต็มหน้าจอ ระยะเวลาจะเคลื่อนไหว

h1 span {
 animation: jump calc(var(--speed, 0) * 1s) calc(var(--index, 0) * 0.1s) infinite ease;
}
header:modal span {
  --speed: 0.75;
}
@keyframes jump {
  50% {
    transform: translateY(-50%);
  }
}

ส่วนหนึ่งของชุดหนังสือที่ทำงานร่วมกันแบบใหม่