شبه کلاس fullscreen: در CSS

:fullscreen Pseudo-class

شبه کلاس fullscreen: در CSS، تمام عناصری که در حالت تمام صفحه باشند را هدف می گیرد. اگر چندین عنصر در حالت تمام عرض قرار بگیرند این شبه کلاس همه آنها را انتخاب خواهد کرد.

شبه کلاس fullscreen: به شما این اجازه را می دهد که بصورت خودکار اندازه، استایل و قالب محتوا را زمانی که عناصر به حالت تمام صفحه در آمده و از آن حالت خارج می شوند را تنظیم کنید.

در مثال زیر میبینیم که رنگ دکمه <button> به نسبت اینکه صفحه در حالت تمام عرض باشد یا نه تغییر پیدا می کند. این کار بدون نیاز به جاوااسکریپت انجام می شود.

html

<h1>:fullscreen استفاده از قابلیت سودو کلاس</h1>

<p> :fullscreen در این دمو با استفاده از سودو کلاس
در حالت تمام صفحه استایل دکمه ها تغییر میابد</p>

<button class="btn">Toggle Fullscreen</button>

دکمه با کلاس "btn" در حالت تمام صفحه و غیر تمام صفحه مرورگر، به رنگ آبی و قرمز تغییر رنگ پیدا می کند.

css

.btn {
  background-color: red;
}
.btn:fullscreen {
  background-color: blue;
}

این شبه کلاس فعلا بصورت کامل توسط مرورگرها پشتیبانی نمی شود.

پشتیبانی مرورگرها
تمام مرورگرها بجز Safari on iOS از این شبه کلاس در CSS پشتیبانی می کنند.