How to Handle CSS in Browser Full-Screen Mode?

CSSWeb DevelopmentFront End Technology

We can define styles for a webpage in full-screen mode using CSS :fullscreen pseudo-class.

The syntax of CSS :fullscreen pseudo-class is as follows −

Selector:fullscreen {
   attribute: /*value*/
}

The following examples illustrate CSS :fullscreen pseudo-class.

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
* {
   margin: 3%;
}
:fullscreen {
   background-color: thistle;
   font-size: 2em;
}
:-webkit-full-screen {
   background-color: thistle;
   font-size: 2em;
}
:-ms-fullscreen {
   background-color: thistle;
   font-size: 2em;
}
</style>
</head>
<body onclick="fullScreenNow();">
<p> Proin eleifend quam nunc, et ultrices neque euismod a.</p>
<p>Nulla eleifend tempus tempor. Nam non nibh imperdiet est interdum eleifend vitae quis augue. Vivamus aliquam dolor vel elit semper egestas. Fusce consequat dolor nisl, eu interdum ex mattis id. Suspendisse consectetur ligula libero, vel pharetra tortor varius id. Nulla arcu lorem, convallis a erat vel, suscipit rutrum leo.</p>
<script>
let item = document.documentElement;
function fullScreenNow() {
   if (item.requestFullscreen) {
      item.requestFullscreen();
   } else if (item.webkitRequestFullscreen) {
      item.webkitRequestFullscreen();
   } else if (item.msRequestFullscreen) {
      item.msRequestFullscreen();
   }
}
</script>
</body>
</html>

Output

This will produce the following result −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
* {
   margin: 3%;
   color: white;
   box-shadow: inset 0 0 40px green;
}
:fullscreen {
   background: url("https://images.unsplash.com/photo-1612149413930- 72410fd9a021?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixlib=rb1.2.1&q=80&w=1920") no-repeat;
   font-size: 2em;
}
:-webkit-full-screen {
   background: url("https://images.unsplash.com/photo-1612149413930-72410fd9a021?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixlib=rb1.2.1&q=80&w=1920") no-repeat;
   font-size: 2em;
}
:-ms-fullscreen {
   background: url("https://images.unsplash.com/photo-1612149413930-72410fd9a021?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixlib=rb1.2.1&q=80&w=1920") no-repeat;
   font-size: 2em;
}
</style>
</head>
<body onclick="fullScreenNow();">
<p> Proin eleifend quam nunc, et ultrices neque euismod a.</p>
<p>Nulla eleifend tempus tempor. Nam non nibh imperdiet est interdum eleifend vitae quis augue. Vivamus aliquam dolor vel elit semper egestas. Fusce consequat dolor nisl, eu interdum ex mattis id. Suspendisse consectetur ligula libero, vel pharetra tortor varius id. Nulla arcu lorem, convallis a erat vel, suscipit rutrum leo.</p>
<script>
let item = document.documentElement;
function fullScreenNow() {
   if (item.requestFullscreen) {
      item.requestFullscreen();
   } else if (item.webkitRequestFullscreen) {
      item.webkitRequestFullscreen();
   } else if (item.msRequestFullscreen)
      item.msRequestFullscreen();
   }
}
</script>
</body>
</html>

Output

This will produce the following result −

raja
Published on 13-Mar-2021 12:24:12
Advertisements