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 */
}
}