Matches every element which is currently in full-screen mode. If multiple elements have been put into full-screen mode, this selects them all.

Syntax :fullscreen Usage notes

The:fullscreen pseudo-class lets you configure your stylesheets to automatically adjust the size, style, or layout of content when elements switch back and forth between full-screen and traditional presentations.

Example

In this example, the color of a button is changed depending on whether or not the document is in full-screen mode. This is done without needing to specifically apply style changes using JavaScript.

HTML

The page"s HTML looks like this:

MDN Web Docs Demo: :fullscreen pseudo-class

This demo uses the :fullscreen pseudo-class to automatically change the style of a button used to toggle full-screen mode on and off, entirely using CSS.

Toggle Fullscreen

The with the ID "fs-toggle" will change between pale red and pale green depending on whether or not the document is in full-screen mode.

CSS

The magic happens in the CSS. There are two rules here. The first establishes the background color of the "Toggle Full-screen Mode" button when the element is not in a full-screen state. The key is the use of the:not(:fullscreen) , which looks for the element to not have the:fullscreen pseudo-class applied to it.

#fs-toggle:not(:fullscreen) { background-color: #afa; }

When the document is in full-screen mode, the following CSS applies instead, setting the background color to a pale shade of red.

#fs-toggle:fullscreen { background-color: #faa; }

Specifications Specification Status Comment

Fullscreen API The definition of ":fullscreen" in that specification.	Living Standard	Initial definition.

Browser compatibility

The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet :fullscreen Select all elements in the fullscreen stack

Chrome Full support 71 Full support 71 Full support 15 :-webkit-full-screen">Alternate Name :-webkit-full-screen">Alternate Name	Edge Full support 12	Firefox Full support 64 Full support 64 No support 47 - 65 Disabled Disabled :-moz-full-screen">Alternate Name :-moz-full-screen">Alternate Name	IE Full support 11 Prefixed Full support 11 Prefixed Prefixed Implemented with the vendor prefix: -ms-	Opera Full support 58 Full support 58 Full support 15 :-webkit-full-screen">Alternate Name :-webkit-full-screen">Alternate Name Uses the non-standard name: :-webkit-full-screen	Safari Full support 6 :-webkit-full-screen">Alternate Name Full support 6 :-webkit-full-screen">Alternate Name :-webkit-full-screen">Alternate Name Uses the non-standard name: :-webkit-full-screen	WebView Android Full support 71 Full support 71 Full support 37 :-webkit-full-screen">Alternate Name :-webkit-full-screen">Alternate Name Uses the non-standard name: :-webkit-full-screen	Chrome Android Full support 71 Full support 71 Full support 18 :-webkit-full-screen">Alternate Name :-webkit-full-screen">Alternate Name Uses the non-standard name: :-webkit-full-screen	Firefox Android Full support 64 Full support 64 No support 47 - 65 Disabled Disabled From version 47 until version 65 (exclusive): this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. No support 9 - 65 :-moz-full-screen">Alternate Name :-moz-full-screen">Alternate Name Uses the non-standard name: :-moz-full-screen	Opera Android Full support 50 Full support 50 Full support 14 :-webkit-full-screen">Alternate Name :-webkit-full-screen">Alternate Name Uses the non-standard name: :-webkit-full-screen	Safari iOS No support No	Samsung Internet Android Full support 10.0 Full support 10.0 Full support 1.0 :-webkit-full-screen">Alternate Name :-webkit-full-screen">Alternate Name Uses the non-standard name: :-webkit-full-screen
Chrome No support No	Edge No support 12 - 79	Firefox Full support 43	IE Full support 11	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 43	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend Full support Full support No support No support User must explicitly enable this feature. User must explicitly enable this feature. Uses a non-standard name. Uses a non-standard name. Requires a vendor prefix or different name for use. Requires a vendor prefix or different name for use.

Это утилита для устройств, работающих под управлением операционной системы Android, которое позволит вам отображать картинку на вашем экране в полноэкранном режиме. Другими словами с его помощью вы сможете скрыть с экрана системные кнопки, которые расположены внизу экрана и статус бар и заполнить это пространство с большей пользой.

Конечно, же для проведения таких манипуляций будет обязательным наличие прав root пользователя. Сразу же в голову приходит вопрос, а как в таком случае использовать смартфон. Но здесь все продумано. Например, уведомления, которые обычно находятся в статус баре будут отображаться в небольших всплывающих окнах.

Сразу же после активации приложения в углу экрана появятся небольшие кнопки. Именно они станут заменой всем скрытым с экрана элементам. В настройках приложения вы можете выбрать их размер, цвет, количество, а так же расположение. При долгом нажатии на данные кнопки будет производиться установленная в настройках функция, а именно отображение панели уведомлений, показ уведомлений, открытие меню, домой, назад и так далее.

ИТОГ: будет вам полезен, если вам не нравятся черные полосы внизу и вверху вашего экрана. При этом у вас останется возможность полноценного использования смартфона. Однако, будет ли это также удобно как и было раньше, решить вы сможете только после того, как сами попробуете его. Все эти изменения легко отменяются через приложение.

Псевдокласс :fullscreen применяется к элементам, когда браузер находится в полноэкранном режиме. При этом скрывается заголовок окна, адресная строка, вкладки, меню и другие стандартные элементы и браузер отображается на весь экран. Для перехода из стандартного режима в полноэкранный и обратно обычно применяется клавиша F11 .

Чтобы псевдокласс работал, предварительно для отдельных элементов следует разрешить полноэкранный режим с помощью скриптов (см. пример).

Синтаксис

Селектор :fullscreen { ... }

Обозначения Описание Пример

	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	{1,4}
#	Повторять один или больше раз через запятую.	#

ЗначенияПример

:fullscreen function fullScreen() { var el = document.getElementById("msg"); // Получаем элемент if (el.webkitRequestFullscreen) el.webkitRequestFullscreen(); // Chrome, Opera, Safari else if (el.mozRequestFullScreen) el.mozRequestFullScreen(); // Firefox else if (el.msRequestFullscreen) el.msRequestFullscreen(); // Internet Explorer, Edge else if (el.requestFullscreen) el.requestFullscreen(); // Стандарт } body { margin: 0; } #msg { padding: 10px; background: #bc7062; color: #fff; } #msg:-ms-fullscreen { background: #6088a5; } #msg:-webkit-full-screen { background: #6088a5; } #msg:-moz-full-screen { background: #6088a5; } Страница отображается в полноэкранном режиме.

Посмотреть на полном экране!

Примечание

Internet Explorer поддерживает псевдокласс :-ms-fullscreen .

Chrome, Opera, Safari поддерживают псевдокласс :-webkit-full-screen .

Firefox поддерживает псевдокласс :-moz-full-screen .

Псевдоклассы для каждого браузера следует писать отдельно, а не перечислять их через запятую.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации ) - первая черновая версия стандарта.

Браузеры

Браузеры

В таблице браузеров применяются следующие обозначения.