CSS/:fullscreen

الصنف الزائف ‎: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-)

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

• معيار Fullscreen API.