diff --git a/snippets/fullscreen.md b/snippets/fullscreen.md new file mode 100644 index 000000000..8a6a6858f --- /dev/null +++ b/snippets/fullscreen.md @@ -0,0 +1,63 @@ +### Fullscreen + +The :fullscreen CSS pseudo-class represents an element that's displayed when the browser is in fullscreen mode. + +#### HTML + +```html +
+

Click the button below to enter the element into fullscreen mode.

+
+

I change color in fullscreen mode!

+
+
+ +
+``` + +#### CSS + +```css +.container { + margin: 40px auto; + max-width: 700px; +} + +.element { + padding: 20px; + height: 300px; + width: 100%; + background-color: skyblue; +} + +.element p { + text-align: center; + color: white; + font-size: 3em; +} + +.element:-ms-fullscreen p { + visibility: visible; +} + +.element:fullscreen { + background-color: #e4708a; + width: 100vw; + height: 100vh; +} +``` + +#### Demo + +#### Explanation + +1. `fullscreen` CSS pseudo-class selector is used to select and style an element that is being displayed in fullscreen mode. + +#### Browser support + +83.38 + +* https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen +* https://caniuse.com/#feat=fullscreen + +