مرجع 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.0

پشتیبانی مرورگر

کروم ، سافاری  و اپرا به شکل webkit-full-screen-: ، در فایر فاکس moz-full-screen-: و در اینترنت اسپلورر +11 از ms-fullscreen-: استفاده می شود.

استفاده از این متون آموزشی و کپی برداری از آن ها بلامانع می باشد. توجه شود که ذکر منبع به شدت روحیه دهنده است 😉 .

همچنین منتظر دیدگاه های شما هستیم.