Understanding the CSS `:fullscreen` Pseudo-class

The :fullscreen pseudo-class in CSS allows developers to apply specific styles to elements when they are displayed in fullscreen mode. This feature enhances user experience by optimizing the appearance of content when it occupies the entire screen.

What Is the `:fullscreen` Pseudo-class?

The :fullscreen pseudo-class represents an element that is being displayed in fullscreen mode using the Fullscreen API. When an element enters fullscreen mode, you can target it with :fullscreen to apply styles specific to that state.

Enabling Fullscreen Mode

To utilize the :fullscreen pseudo-class effectively, you first need to enable fullscreen mode on an element using JavaScript. This is typically done in response to a user action, such as a button click:


// JavaScript to request fullscreen
function openFullscreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.webkitRequestFullscreen) { // Safari
        element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) { // IE11
        element.msRequestFullscreen();
    }
}

When this function is called with an element as its argument, it requests the browser to display that element in fullscreen mode.

Using the `:fullscreen` Pseudo-class in CSS

Once an element is in fullscreen mode, you can apply specific styles to it using the :fullscreen pseudo-class:


/* CSS */
.element {
    /* Regular styles */
}

.element:fullscreen {
    /* Styles when in fullscreen mode */
    width: 100%;
    height: 100%;
    background-color: black;
}

This allows you to adjust the size, positioning, or any other styles of the element when it is in fullscreen mode.

Example: Creating a Fullscreen Video Player

HTML


<div id="video-container">
    <video id="myVideo" controls>
        <source src="video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <button onclick="openFullscreen(document.getElementById('video-container'))">Fullscreen</button>
</div>

CSS


/* Regular styles */
#video-container {
    position: relative;
    width: 640px;
    margin: 0 auto;
}

#video-container video {
    width: 100%;
}

/* Fullscreen styles */
#video-container:fullscreen {
    width: 100%;
    height: 100%;
}

#video-container:fullscreen video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

JavaScript


function openFullscreen(elem) {
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.webkitRequestFullscreen) { /* Safari */
        elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE11 */
        elem.msRequestFullscreen();
    }
}

In this example, clicking the "Fullscreen" button triggers the openFullscreen function, making the #video-container element enter fullscreen mode. The :fullscreen pseudo-class then applies styles to adjust the container and video to fill the screen.

Vendor Prefixes for Compatibility

For broader browser support, include vendor prefixes in your CSS:


/* Fullscreen pseudo-class with vendor prefixes */
.element:fullscreen { /* Standard syntax */
    /* Styles */
}

.element:-webkit-full-screen { /* Safari */
    /* Styles */
}

.element:-moz-full-screen { /* Firefox */
    /* Styles */
}

.element:-ms-fullscreen { /* IE11 */
    /* Styles */
}

Styling the Fullscreen Backdrop

You can also style the backdrop behind the fullscreen element using the ::backdrop pseudo-element:


/* Backdrop styles */
:fullscreen::backdrop {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Vendor prefixes */
:-webkit-full-screen::backdrop { /* Safari */
    background-color: rgba(0, 0, 0, 0.8);
}

:-moz-full-screen::backdrop { /* Firefox */
    background-color: rgba(0, 0, 0, 0.8);
}

This applies a semi-transparent black background behind the fullscreen element, enhancing the visual focus on the content.

Exiting Fullscreen Mode

To exit fullscreen mode programmatically, use the exitFullscreen method:


function closeFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.webkitExitFullscreen) { /* Safari */
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { /* IE11 */
        document.msExitFullscreen();
    }
}

You can attach this function to a button or trigger it based on user interaction.

Browser Support

The :fullscreen pseudo-class and Fullscreen API are supported in most modern browsers. However, implementation details and vendor prefixes may vary:

Chrome: Supports :fullscreen and Fullscreen API.
Firefox: Requires -moz- prefix (e.g., :-moz-full-screen).
Safari: Requires -webkit- prefix (e.g., :-webkit-full-screen).
Edge: Supports :fullscreen and Fullscreen API.
Internet Explorer 11: Supports Fullscreen API with -ms- prefixes.

Important Considerations

User Interaction Required: Browsers typically require that entering fullscreen mode is initiated by a user gesture, such as a click event.
Security Restrictions: For security and usability, browsers may limit fullscreen capabilities to prevent malicious behavior.
Vendor Prefixes: Always include vendor prefixes to ensure cross-browser compatibility.
Test Across Browsers: Due to variations in implementation, test your fullscreen functionality on all target browsers.

Conclusion

The :fullscreen pseudo-class in CSS provides a powerful way to style elements when they enter fullscreen mode, enhancing the user's immersive experience. By combining it with the Fullscreen API in JavaScript, you can create engaging content such as video players, image galleries, or presentations that adapt seamlessly to fullscreen display.

Understanding the CSS :fullscreen Pseudo-class

What Is the :fullscreen Pseudo-class?