CSS :fullscreen Selector

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

44 - Views

4 mins

1 Comment

Photo Credit to CodeToFun

Introduction

The :fullscreen selector in CSS is used to style elements when they are in full-screen mode.

This pseudo-class becomes active when an element is displayed using the full-screen API, typically triggered by the user or through JavaScript.

It is a useful tool for enhancing the visual experience when elements are displayed in full-screen mode, such as videos, images, or entire sections of a webpage.

Syntax

The signature of the :fullscreen Selector is as follows:

Syntax

Copied

:fullscreen {
    /* CSS properties */
}

The :fullscreen pseudo-class applies styles to any element currently in full-screen mode.

Example

Here is an example demonstrating the use of the :fullscreen selector in CSS:

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS :fullscreen Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="fullscreen-element">
        <h1>Click to Go Fullscreen</h1>
    </div>
    <button id="fullscreen-btn">Enter Fullscreen</button>

    <script>
        const fullscreenElement = document.getElementById('fullscreen-element');
        const fullscreenBtn = document.getElementById('fullscreen-btn');
        
        fullscreenBtn.addEventListener('click', () => {
            if (fullscreenElement.requestFullscreen) {
                fullscreenElement.requestFullscreen();
            }
        });
    </script>
</body>
</html>

CSS

Copied

/* Default styling for the element */
#fullscreen-element {
    width: 300px;
    height: 200px;
    background-color: lightblue;
    text-align: center;
    line-height: 200px;
}

/* Styling when the element is in fullscreen mode */
:fullscreen {
    width: 100vw;
    height: 100vh;
    background-color: darkblue;
    color: white;
    font-size: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
}

In this example:

The element with id="fullscreen-element" will change its appearance when it enters full-screen mode.
When the user clicks the "Enter Fullscreen" button, the element expands to fill the viewport, changes color, and increases font size.

Usage Tips

The :fullscreen selector can be combined with specific elements (like video:fullscreen, div:fullscreen) to target full-screen styling more precisely.
Ensure your design adapts well to full-screen mode by using flexible units like vw (viewport width) and vh (viewport height).

Common Pitfalls

The :fullscreen selector only works with elements that have entered full-screen mode using the full-screen API (e.g., via requestFullscreen() in JavaScript).
Not all browsers support full-screen mode for all elements (e.g., iframes might have limitations in some browsers).
Be aware of browser-specific full-screen pseudo-classes such as :-webkit-full-screen and :-moz-full-screen for older browsers, although modern browsers tend to support the standard :fullscreen.

Conclusion

The :fullscreen selector is a powerful way to adapt your design to full-screen mode.

By applying custom styles to elements when they enter full-screen, you can create immersive user experiences, particularly for media-rich content like videos, games, or interactive websites. Mastering this selector can help elevate the visual impact of your webpages.