الصنف ‎:fullscreen

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث
الصنف الزائف ‎:fullscreen في CSS (أي pseudo-class) يُمثِّل العناصر التي تُعرَض عندما يكون المتصفح في وضع ملء الشاشة.
div:-moz-full-screen {
  background-color: pink;
}

div:-webkit-full-screen {
  background-color: pink;
}

div:fullscreen {
  background-color: pink;
}
لاحظ أنَّ مواصفة W3C تستخدم الكلمة المحجوزة ‎:fullscreen دون شرطة بين الكلمتين، لكن متصفحات WebKit و Gecko تستخدم سابقة مع تلك الكلمة مع وضع شرطة بين full و screen كما في ‎:-webkit-full-screen و ‎:-moz-full-screen، أما متصفحَي Edge و IE فيستعملان ‎:fullscreen و ‎:-ms-fullscreen على التوالي وبالترتيب. الشكل العام لهذا المحدد:
:fullscreen

أمثلة

لاحظ كيف ستُطبَّق أنماط جديدة على العناصر عند دخول المتصفح لوضع ملء الشاشة:

<div id="fullscreen">
  <h1>:fullscreen Demo</h1>
  <p>This text will become big and red when the browser is in fullscreen mode.</p>
  <button id="fullscreen-button">Enter Fullscreen</button>
</div>
شيفرة CSS (لا تنسَ استخدام السابقات الخاصة بمتصفحات WebKit و Gecko):
#fullscreen:fullscreen {
  padding: 42px;
  background-color: pink;
  border:2px solid #f00;
  font-size: 200%;
}

#fullscreen:fullscreen > h1 {
  color: red;
}

#fullscreen:fullscreen > p {
  color: darkred;
}

#fullscreen:fullscreen > button {
  display: none;
}
شيفرة JavaScript:
var fullscreenButton = document.getElementById("fullscreen-button");
var fullscreenDiv    = document.getElementById("fullscreen");
var fullscreenFunc   = fullscreenDiv.requestFullscreen;

if (!fullscreenFunc) {
  ['mozRequestFullScreen',
   'msRequestFullscreen',
   'webkitRequestFullScreen'].forEach(function (req) {
     fullscreenFunc = fullscreenFunc || fullscreenDiv[req];
   });
}

function enterFullscreen() {
  fullscreenFunc.call(fullscreenDiv);
}

fullscreenButton.addEventListener('click', enterFullscreen);

دعم المتصفحات

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 15.0 (مع السابقة -webkit-) 9.0 (مع السابقة -moz-)

47.0

11 (مع السابقة -ms-) ؟ 6.0 (مع السابقة -webkit-)

مصادر ومواصفات