Selector : pseudo-class CSS fullscreen digunakan untuk memilih dan menata elemen yang sedang ditampilkan dalam mode layar penuh.

Sebagian besar browser memiliki kemampuan untuk masuk ke mode layar penuh atau kios untuk sementara waktu sekarang. Pada dasarnya, GUI browser menyingkir, dan konten mengambil alih. Dalam hal ini, seluruh halaman dalam mode layar penuh. Anda dapat melihat efek itu dengan mengklik F11 saat halaman aktif.

Namun, jika Anda memiliki elemen pada halaman itu dan Anda memilihnya menggunakan: pseudo-class selector fullscreen, itu tidak akan cocok dengan pemilih. Agar suatu elemen cocok: layar penuh, ia harus masuk ke mode layar penuh menggunakan API Layar Penuh HTML5.

API Layar Penuh berada di luar cakupan entri ini, jadi kami tidak akan membahas secara terperinci tentang cara menggunakannya di sini. Tetapi contoh cuplikan sederhana yang memasukkan elemen ke mode layar penuh mungkin terlihat seperti berikut:

 

El dalam contoh di atas sekarang cocok dengan: pemilih layar penuh, dan dapat ditata dalam mode itu:

Konten dalam mode layar penuh biasanya dipusatkan di viewport browser. Menggunakan: layar penuh, Anda dapat menata elemen dengan cara apa pun yang Anda inginkan saat dalam mode layar penuh. Sering kali, Anda ingin elemen diperluas untuk mengisi seluruh ukuran viewport. Lihat bagian Contoh di bawah untuk contoh.

Trivia & Catatan

Spesifikasi W3C menggunakan sintaks bebas dasbor: layar penuh. Namun, browser berbasis webkit telah menerapkan varian awalan dan eksperimental yang memisahkan kata layar penuh dan layar dengan tanda hubung:: -webkit-layar penuh. Demikian pula, Firefox menggunakan sintaks awalan -moz- yang juga mencakup tanda hubung:: moz-full-screen. Jadi, Anda perlu memasukkan sintaks dan awalan masing-masing saat Anda menggunakan: pemilih layar penuh saat ini. Lihat bagian Dukungan Browser untuk informasi lebih lanjut.

Contohnya

Contoh berikut gaya elemen dalam mode layar penuh sehingga mengambil seluruh ukuran viewport:

 

Contoh berikut akan menyembunyikan keterangan gambar ketika memasuki mode layar penuh:

Berikut ini akan menyembunyikan semua elemen dengan catatan kaki nama kelas saat mode layar penuh aktif: