ในกรณีที่เราต้องการจัด CSS ให้กับการแสดงผลในโหมด fullscreen เราสามารถใช้ :fullscreen กับ element ใด ๆ ที่ถูกเรียกใช้งานผ่าน fullscreen API ได้

กำหนดให้มี HTML ดังต่อไปนี้

1<style>
2  .article {
3    width: 250px;
4  }
5
6  .image {
7    width: 100%;
8    height: 100%;
9  }
10</style>
11
12<article class="article">
13  <img src="/path/to/image" class="image" />
14  <p class="content">
15    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
16    Lorem Ipsum has been the industry's standard dummy text ever since the
17    1500s, when an unknown printer took a galley of type and scrambled it to
18    make a type specimen book.
19  </p>
20</article>

หน้าตาของการทำงานดังกล่าวเป็นดังนี้

ถ้าเราอยากให้เมื่อเปิดเต็มจอแล้วข้อความในส่วนของแท็ก p จะอยู่กลางจอพร้อมพื้นหลังสีดำ ในขณะที่ทั้ง article และรูปภาพกินพื้นที่ทั้งหมดของจอภาพ อาศัยความสามารถของ :fullscreen เราสามารถเพิ่ม CSS ได้ดังนี้

1.article:fullscreen {
2  width: 100vw;
3  height: 100vh;
4}
5
6.article:fullscreen .content {
7  position: fixed;
8  color: #fff;
9  top: 50%;
10  left: 50%;
11  transform: translate(-50%, -50%);
12  font-size: 36px;
13  background-color: #000;
14  padding: 24px;
15}

โค้ดดังกล่าวจะถือว่าเราทำเปิดโหมด fullscreen ผ่านอีลีเมนต์ .article เราจึงใช้ :fullscreen บนอีลีเมนต์ดังกล่าว นั่นเป็นผลทำให้ตัวมันเองและอีลีเมนต์ภายในถูกแสดงผลในโหมด fullscreen ด้วยเงื่อนไขตาม CSS ที่ระบุ

การใช้งาน :fullscreen นั้นจะใช้ได้เมื่อเปิดโหมดเต็มจอผ่าน fullscreen API ของ JavaScript เท่านั้น การกดเปิดเต็มจอผ่าน UI ของเว็บเบราว์เซอร์จะไม่ทำให้ได้รับผลลัพธ์จาก :fullscreen

ตัวอย่างการใช้ fullscreen API เช่น เราทำการสร้างแท็ก button ขึ้นมา เมื่อไหร่ก็ตามที่กดปุ่มนี้จะให้เปิดโหมดเต็มจอบนอีลีเมนต์ .article

1let button = document.querySelector('button')
2
3button.addEventListener('click', () => {
4  document.querySelector('.article').requestFullscreen()
5})

มาดูที่ browser support กันบ้าง Safari เจ้าเดิมก็ยังคงไม่สนับสนุนการใช้งานอะไรใหม่ ๆ เช่นเดิม (เหนื่อยใจ)