Pseudoclases en CSS
Pseudoclases para elementos modales en CSS
En CSS, existen pseudoclases diseñadas para detectar el estado visual de elementos modales, es decir, aquellos que capturan completamente la atención del usuario e impiden la interacción con el resto de la interfaz mientras están activos.
Estas pseudoclases permiten aplicar estilos específicos a esos elementos cuando cumplen ciertas condiciones visuales o funcionales.
Pseudoclases disponibles
| Pseudoclase | Función |
|---|---|
:fullscreen | Aplica estilos cuando un elemento está en modo pantalla completa. |
:modal | Selecciona elementos que se comportan como ventanas modales. |
A continuación, explicamos cómo funciona cada una:
:fullscreen
La pseudoclase :fullscreen se activa cuando un elemento HTML entra en modo de pantalla completa, generalmente utilizando la API de FullScreen de JavaScript. Esta pseudoclase permite aplicar estilos específicos cuando el usuario ha expandido un elemento al tamaño completo de la ventana del navegador.
Ejemplo de uso:
htmlCopiarEditar<div class="screen" open>
<p>Estás viendo esta sección en pantalla completa.</p>
<button class="close">Cerrar</button>
</div>
<button class="open">Entrar en modo FullScreen</button>
En CSS, puedes aplicar estilos como:
cssCopiarEditar.screen:fullscreen {
background-color: black;
color: white;
}
:modal
Introducida más recientemente, la pseudoclase :modal identifica elementos que se comportan como modales, es decir, elementos que bloquean la interacción con el resto del contenido mientras están activos.
Esto es útil cuando se crean diálogos, ventanas emergentes o cualquier componente que obligue al usuario a actuar sobre él antes de continuar navegando por la página.
Ejemplo con la etiqueta <dialog>:
htmlCopiarEditar<dialog class="screen">
<p>Este es un cuadro de diálogo modal.</p>
<button class="close">Cerrar</button>
</dialog>
<button class="open">Mostrar modal</button>
En este caso, al utilizar :modal en CSS, puedes definir estilos que se aplican solo cuando el diálogo está abierto y activo:
cssCopiarEditar.screen:modal {
border: 2px solid #333;
background-color: #fafafa;
}
Cabe destacar que es posible tener múltiples elementos definidos como modales, pero solo uno puede estar activo y recibir interacciones del usuario a la vez.
Consideraciones finales
Ambas pseudoclases resultan muy útiles cuando se desea adaptar visualmente la interfaz según el estado de interacción del usuario. Mientras que :fullscreen se enfoca en el uso completo de la pantalla, :modal se centra en bloquear la interacción fuera del componente activo, mejorando la accesibilidad y la experiencia de usuario.