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.

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.