: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 پشتیبانی می کنند.
می تونست خیلی بهتر می بود هنوزم متوجه نشدم
سلام. اگر مرورگر در حالت تمام صفحه باشه این سودوکلاس اونها را هدف میگیره. البته فعلا تمام مرورگرها از این سودوکلاس پشتیبانی نمی کنند و عموما از media query ها برای انتخاب عناصر در اندازههای مختلف مرورگر استفاده میکنیم.