Fullscreen API

Matías López Díaz — Mon, 06 Jun 2022 16:25:23 +0000

Using Fullscreen API is really easy, but sometimes things do not work as you need, maybe you discover not work the same in all browsers. Keep reading to learn how to use it in different scenarios:

I exclude IE because nobody should use it in 2022

I only provide example code compatible with Chromium-based, Firefox, and Safari

Request fullscreen

document.documentElement.requestFullscreen();

The above function is async!

Exit fullscreen

document.exitFullscreen();

Ok! Nice works perfect, but this is the beginning! Fullscreen API it's not standardized in all browsers so you will need to use a prefix to maximize compatibility.

Compatibility

Today the majority of modern updated browsers can handle Fullscreen API without a prefix but let's do 100% compatible code.

const context = document.documentElement;
const requestFullscreen = context.requestFullscreen || context.webkitRequestFullscreen || context.mozRequestFullScreen;
const exitFullscreen = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen;

(Change context value to this in case you work with a web component)

Great! Now I only need to execute requestFullscreen and exitFullscreen to toggle!

Nope! You will get the following error:

TypeError: Failed to execute 'requestFullscreen' on 'Element': Illegal invocation

TypeError: Failed to execute 'exitFullscreen' on 'Element': Illegal invocation

This is because the reference of context (DOM element) will not works, so we will need to bind the context:

requestFullscreen.bind(document.documentElement)();
exitFullscreen.bind(document)();

In case you want to use it inside of web component:

requestFullscreen.bind(this)();
exitFullscreen.bind(document)();

Full working toggle Fullscreen

function toggleFullscreen() {
    const requestFullScreen = this.requestFullscreen || this.webkitRequestFullscreen || this.mozRequestFullScreen;
    const exitFullscreen = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen;
    const isFullscreen = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement;
    if (isFullscreen) return exitFullscreen.bind(document)();
    else if (!isFullscreen) return requestFullScreen.bind(this)();
}
toggleFullscreen.bind(document.documentElement)(); // Typical way
toggleFullscreen.bind(this)(); // Inside web component

How to use dart-sass with Vue

Matías López Díaz — Wed, 20 May 2020 03:35:55 +0000

How to use

If you got here is because you can't find a solution how use @use or @include to you Vue app.

First install sass:

npm i sass --save-dev

Create file or add this code to vue.config.js:

/* vue.config.js */
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass')
      }
    }
  }
}