How to Handle CSS in Browser Full-Screen Mode

css
Published on October 10, 2017

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 */
	}
}
In this Tutorial