• Building FullScreen Web Apps
  • Dulanka Karunasena
  • The Nuggets translation Project

Create an immersive user experience using full-screen elements

A full-screen UI design eliminates distractions and helps keep the user engaged with the content. As a result, we can see the increasing use of full-screen UIs in modern web applications. So, in this article, I’ll discuss the capabilities provided by the JavaScript Fullscreen API and walk you through how to use them in practice.

What is a full-screen API

The Fullscreen API provides a way to combine DOM elements and their children with a full-screen web page. Developers can use this feature to highlight useful information to end users.

Full screen mode provides a better user experience when viewing pictures, videos, maps, or playing games.

** Note: ** Browser support for the Fullscreen API varies, as Safari does not fully support this feature. But we can solve this problem by adding a browser prefix, which I’ll explain in the next section.

Use the Fullscreen API in practice

Using the Fullscreen API is very simple. It provides some basic functions, and all we need to do is customize them a little bit

Therefore, I will create a simple application like the one shown below to demonstrate all the capabilities of the Fullscreen API. You can find the complete code here and test it yourself.

Step 1 – Enable the full screen view

The Fullscreen API provides a method called requestFullscreen() that lets the browser open a full-screen view. This method returns a Promise instance. The Promise instance executes the corresponding Resolve method after full-screen mode is activated

let fullscreenHandler = document.querySelector('.fullscreenButton');

fullscreenHandler.addEventListener('click'.() = > {
  document.documentElement.requestFullscreen();
});
Copy the code

Here, I listen for a button click and ask for a full-screen view of the entire document. Therefore, the entire application will go to full screen.

We can use the requestFullscreen() method on any element.

In my example, I did a full screen operation on the map, which ended up like this:

let mapHandler = document.querySelector('.mapButton');

mapHandler.addEventListener('click'.() = > {
  document.querySelector('iframe').requestFullscreen();
});
Copy the code

Step 2 – Exit the full screen view

Exiting the full-screen view is straightforward, as the user can exit the full-screen view using the Esc key or any other general method.

However, if you want to exit the full-screen view when you click the button, you can use the exitFullscreen() method. This is a full-document method that switches the current element from full-screen mode back to windowed mode.

In my example, I created a button called Exit Fullscreen and added an event listener to it to correspond to the method

let exitButton = document.querySelector('.exitButton');

exitButton.addEventListener('click'.() = > {
  document.exitFullscreen();
});
Copy the code

Step 3 – Switch to full screen

Most of the time, we might prefer a simple toggle button to switch between full screen mode and window mode rather than multiple buttons. However, in the Fullscreen API, there is no way to directly switch between a full-screen view and a window view.

However, we can easily implement full-screen switching using existing methods and properties.

In this example, I will use the following properties to check whether the browser supports full-screen view or whether the application is already in full-screen mode

  • document.fullscreenEnabled– This property checks whether the browser supports the full-screen mode and whether the full-screen mode is allowed by the user.
  • document.fullscreenElement– This property returns the element currently in full-screen mode, or null if no element is currently in full-screen mode

ToggleFullscreen () is implemented as follows:

toggleFullscreen = () = > {
  if (document.fullscreenEnabled) {
    if (document.fullscreenElement) {
      document.exitFullscreen();
    } else {
      document.documentElement.requestFullscreen(); }}else {
    alert('Fullscreen is not supported! '); }};Copy the code

Here, I first check to see if the browser supports full-screen mode and to see if the current element is in full screen. The final results determine whether the application exits or enters the full screen view.

Finally, you can bind this method to a button or key, as follows:

// Button Click

let toggler = document.querySelector('.toggler');

toggler.addEventListener('click'.() = > {
  toggleFullscreen();
});

//Keyboard Key Press

document.addEventListener('keydown'.(e) = > {
  if (e.key === 'Enter') { toggleFullscreen(); }});Copy the code

Step 4 – Full screen style

We can use the CSS pseudo-class: fullScreen to add specific styles to full-screen elements. When the user enters a full-screen view, the styles are applied to the UI.

If I add the CSS style below to the yellow background

element in the example above, its background color will be changed to brown, the font color will be white, and the text will be moved to the center of the screen.

p:fullscreen {
  display: flex;
  align-items: center;
  background-color: brown;
  color: white;
}
Copy the code

Tip: You can use the pseudo :: Backdrop to set the styles of the elements immediately below the full-screen elements

Adding a Browser prefix

As I mentioned initially, Safari doesn’t fully support the features we discussed above.

We can solve this problem by adding browser prefixes to each of the Fullscreen API methods and attributes we discussed earlier.

These prefixes represent common browsers such as Firefox, Edge, and Apple’s WebKit engine.

The most common prefixes are MOS -, MS -, and webkit-

For example, we can use mozRequestFullScreen(), msRequestFullscreen(), and webkitRequestFullscreen() to enter full-screen mode.

Tip: You can find a complete list of browser prefixes for the Fullscreen API in the MDN documentation.

conclusion

A full screen view is usually used when rendering media elements. But broadly speaking, we can use the Fullscreen API to turn on a full-screen view of any element.

The full-screen API provides a whole bunch of functionality you can use. But the availability of the Fullscreen API depends on the browser environment.

However, we can use browser prefixes or third-party libraries like react-fullscreen, react-rex-full-screen, screenfull.js, and fscreen to handle compatibility issues.

Therefore, I invite you to try out the Fullscreen API in your application and share your experiences in the comments section.

Thanks for reading!!