How to Handle CSS in Browser Full-Screen Mode

Use-Cases of this Tutorial

  • How to change CSS properties of an element in full-screen mode using :fullscreen CSS pseudo-class
  • How to handle full-sceeen CSS & media queries at the same time

When an element in a webpage goes to full-screen mode (via F11 function key or by using Javascript Full-Screen API), you may want to change the look of what is seen while being in full-screen. You can achieve this with specific full-screen CSS properties.

CSS for All Elements that Go to Full-Sceeen :

CSS properties will be applied to all elements that go in full-screen.

:-webkit-full-screen {
	/* properties */
}

:-moz-full-screen {
	/* properties */
}

:-ms-fullscreen {
	/* properties */
}

/* W3C proposal that will eventually come in all browsers */
:fullscreen { 
	/* properties */
}

CSS for Elements that Go to Full-Screen :

CSS properties will be applied to the specific element that goes to full-screen.

/* specific elements */
#element:-webkit-full-screen {
	/* properties */
}

#element:-moz-full-screen {
	/* properties */
}

#element:-ms-fullscreen {
	/* properties */
}

#element:fullscreen { 
	/* properties */
}

In webkit based browers and IE11, you have to set the height and width to 100% explicitly when the element goes in full screen. Also you must remove the margins otherwise black areas will seen in place of the margins.

/* webkit and IE requires explicit width, height = 100% of sceeen */
/* webkit also takes margin into account in full screen also - so margin should be removed (otherwise black areas will be seen) */
#element:-webkit-full-screen {
	width: 100%;
	height: 100%;
	margin: 0;
}

#element:-ms-full-screen {
	width: 100%;
	height: 100%;
}

CSS for Child Elements of a Parent that Goes to Full-Screen :

Sometimes you need to change the CSS of the child elements of a container that goes to full screen.

/* Child elements */
#element:-webkit-full-screen #child-element {
	/* properties */
}

#element:-moz-full-screen #child-element {
	/* properties */
}

#element:-ms-fullscreen #child-element {
	/* properties */
}

#element:fullscreen #child-element { 
	/* properties */
}

Handling Full-Screen CSS in Responsive Mode

You may sometimes want to show different full-screen CSS for devices of different widths. Just put the same full-screen CSS under a CSS media query.

@media screen and (min-width:450px) {
	#element:-webkit-full-screen {
		/* properties */
	}

	#element:-moz-full-screen {
		/* properties */
	}

	#element:-ms-fullscreen {
		/* properties */
	}

	#element:fullscreen { 
		/* properties */
	}
}
I'm available for freelancing
If you've liked this article, you'll probably like my code too.

From short code snippets to complete web applications, I code in Javascript & PHP
Low Prices from $20, Fast Delivery Time
How to Make the Window Full Screen with Javascript
I'm available for freelancing
If you've liked this article, you'll probably like my code too.

From short code snippets to complete web applications, I code in Javascript & PHP
Low Prices from $20, Fast Delivery Time