الفرق بين المراجعتين لصفحة: «CSS/:fullscreen»

المراجعة الحالية بتاريخ 10:35، 21 أكتوبر 2018

الصنف الزائف ‎: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>العرض ملء الشاشة</h1>
  <p>سيصبح هذا النص كبيرًا وأحمر عندما يكون المتصفح في وضع ملء الشاشة.</p>
  <button id="fullscreen-button">الدخول في وضع ملء الشاشة</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-`)

انظر أيضًا

صفحة الصنف الزائف backdrop:: وهو صندوقٌ يُعرَض مباشرةً تحت أيّ عنصر معروض في وضع ملء الشاشة.

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

معيار Fullscreen API.

@@ سطر 22: / سطر 22: @@
 <syntaxhighlight lang="html">
 <div id="fullscreen">
-   <h1>:fullscreen Demo</h1>
+   <h1>العرض ملء الشاشة</h1>
-   <p>This text will become big and red when the browser is in fullscreen mode.</p>
+   <p>سيصبح هذا النص كبيرًا وأحمر عندما يكون المتصفح في وضع ملء الشاشة.</p>
-   <button id="fullscreen-button">Enter Fullscreen</button>
+   <button id="fullscreen-button">الدخول في وضع ملء الشاشة</button>
 </div>
 </syntaxhighlight>شيفرة CSS (لا تنسَ استخدام السابقات الخاصة بمتصفحات WebKit و Gecko):<syntaxhighlight lang="css">
@@ سطر 83: / سطر 83: @@
 |6.0 (مع السابقة <code>-webkit-</code>)
 |}
-==مصادر ومواصفات==
+==انظر أيضًا==
+* صفحة الصنف الزائف <code>[[CSS/::backdrop|backdrop::]]</code> وهو صندوقٌ يُعرَض مباشرةً تحت أيّ عنصر معروض في وضع ملء الشاشة.
+== مصادر ومواصفات ==
 *معيار [https://fullscreen.spec.whatwg.org/#:fullscreen-pseudo-class Fullscreen API].
 [[تصنيف:CSS|{{SUBPAGENAME}}]]
 [[تصنيف:CSS Selectors|{{SUBPAGENAME}}]]
 [[تصنيف:CSS pseudo-class|{{SUBPAGENAME}}]]