:fullscreen

Disponibilidad limitada

Esta característica no es Baseline porque no funciona en algunos de los navegadores más usados.

¿Quieres que más navegadores sean compatibles con esta característica? Cuéntanos por qué.

Ver la compatibilidad completa
Más información

Experimental: Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La pseudo-clase :fullscreen de CSS representa un elemento que se muestra cuando el navegador está en modo de pantalla completa.

css

/* Selecciona cualquier <div> que se muestre en modo de pantalla completa */
/* Implementado en Firefox, WebKit/Chrome, y Edge/IE usando prefijos;
   Edge también es compatible con la versión sin prefijo */
div:-moz-full-screen {
  background-color: pink;
}

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

div:fullscreen {
  background-color: pink;
}

Nota: La especificación W3C usa la palabra única :fullscreen, sin guiones, pero las implementaciones experimentales de WebKit y Gecko usan una variante prefijada con dos palabras separadas por un guión: :-webkit-full-screen y :-moz-full-screen, respectivamente. Microsoft Edge e Internet Explorer utilizan la convención estándar: :fullscreen y :-ms-fullscreen, respectivamente.

Sintaxis

css

:fullscreen {
  /* ... */
}

Ejemplo

HTML

html

<div id="fullscreen">
  <h1>Demostración :fullscreen</h1>
  <p>
    Este texto se pondrá grande y rojo cuando el navegador esté en modo de
    pantalla completa.
  </p>
  <button id="fullscreen-button">Entrar en pantalla completa</button>
</div>

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);

#fullscreen:-moz-full-screen {
  padding: 42px;
  background-color: pink;
  border: 2px solid #f00;
  font-size: 200%;
}
#fullscreen:-webkit-full-screen {
  padding: 42px;
  background-color: pink;
  border: 2px solid #f00;
  font-size: 200%;
}

#fullscreen:-moz-full-screen > h1 {
  color: red;
}
#fullscreen:-webkit-full-screen > h1 {
  color: red;
}

#fullscreen:-moz-full-screen > p {
  color: darkred;
}
#fullscreen:-webkit-full-screen > p {
  color: darkred;
}

#fullscreen:-moz-full-screen > button {
  display: none;
}
#fullscreen:-webkit-full-screen > button {
  display: none;
}

CSS

css

#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;
}

Resultado

Haga clic aquí para probar este ejemplo.

Especificaciones

Especificación
Selectors Level 4 # selectordef-fullscreen
Fullscreen API # css-pc-fullscreen

Compatibilidad con navegadores

Ver también

Usando el modo de pantalla completa
::backdrop
DOM API: Element.requestFullscreen(), Document.exitFullscreen(), Document.fullscreen, Document.fullscreenElement
Atributo allowfullscreen

Ayuda a mejorar MDN

Aprende cómo colaborar

Esta página se modificó por última vez el 4 sept 2026 por colaboradores de MDN.

Ver esta página en GitHub • Informar de un problema con este contenido