مرجع CSS فارسی
PSEUDO-CLASS
fullscreen:
شبه کلاسی است که برای انتخاب و استابل دهی به المان ها در حالت تمام صفحه ، استفاده می شود.
اکثر مرورگر ها حالت تمام صفحه ایی دارند که به کاربر امکان این را می دهند ، که محتوا را در حالتی خارج از مرورگر و به اندازه ی صفحه نمایش کاربر ، نمایش می دهد. با استفاده از F11 می توانید مرورگر خود را در حالت تمام صفحه قرار دهید.
در این صورت اگر برای انتخاب یک المان از fullscreen: استفاده کرده باشید ، المان مورد نظر انتخاب نخواهد شد . و برای استفاده از fullscreen: می بایست از HTML5 Fullscreen API استفاده کنید.
HTML5 Fullscreen API از محدوده ی بحث این مقاله خارج است . بدون وارد شدن به جزییات چگونگی استفاده از آن ، تکه کد جاوا اسکریپتی زیر را برای قرار دادن یک المان در وضعیت تمام صفحه مشاهده می کنید.
var el = document.getElementById('element');
// use necessary prefixed versions
el.webkitRequestFullscreen();
el.mozRequestFullScreen();
el.msRequestFullscreen();
// finally the standard version
el.requestFullscreen();
با این تفاسیر ، متغیر el در وضعیت تمام صفحه قرار گرفته و با استفاده از تکه کد CSS زیر قابلیت انتخاب و استایل دهی دارد.
#element:fullscreen {
width: 100vw;
height: 100vh;
/* etc.. */
}
سایر نکات
در استاندارد W3C از fullscreen: استفاده می شود. اما در مرورگرهای Webkit-based مثل کروم از webkit-full-screen-: و در فایر فاکس از moz-full-screen-: استفاده می شود .
مثال ها
تکه کد زیر به المان های با کلاس ” el. ” در حالت تمام صفحه ، استابل دهی می کند.
.el:-webkit-full-screen {
width: 100vw;
height: 100vh;
}
.el:-moz-full-screen {
width: 100vw;
height: 100vh;
}
.el:-ms-fullscreen {
width: 100vw;
height: 100vh;
}
.el:fullscreen {
width: 100vw;
height: 100vh;
}
figure:-webkit-full-screen figcaption {
display: none;
}
figure:-moz-full-screen figcaption {
display: none;
}
figure:-ms-fullscreen figcaption {
display: none;
}
figure:fullscreen figcaption {
display: none;
}
دمو (کد های زیر را تغییر داده و نتیجه را مشاده کنید)
روی دکمه ی زیر المان آبی رنگ کلیک کنید.
See the Pen :fullscreen CSS example by alishooti (@alishooti) on CodePen.
پشتیبانی مرورگر
کروم ، سافاری و اپرا به شکل webkit-full-screen-: ، در فایر فاکس moz-full-screen-: و در اینترنت اسپلورر +11 از ms-fullscreen-: استفاده می شود.
بیشتر بخوانید
استفاده از این متون آموزشی و کپی برداری از آن ها بلامانع می باشد. توجه شود که ذکر منبع به شدت روحیه دهنده است 😉 .
همچنین منتظر دیدگاه های شما هستیم.