These last two days, I forced myself to use Opera in Full Screen mode. I want to get a precise idea of what is accessible or not when the browser chrome is not visible. I wondered then what would it mean to have a different layout if Full Screen is activated. But was that even possible?
Fortunately CSS has a specification called View Mode. It was mainly done for handling widgets or Web apps if you prefer that name. But would that work in the desktop browser?
I tried the following code in a very simple HTML page and… it worked!
.fullscreen {display: none;}
@media screen and (view-mode: fullscreen) {
.fullscreen {
text-align:center;
width: 5em;
font-size: 3em;
margin: 1em;
padding: 2em;
background-color: #F9C;
display:block;}
}
It works on Mac OS X with Opera 11.50\ It doesn't work on Safari 5 and Firefox 6