CSS :fullscreen Pseudo Class

css-fullscreen-pseudo-class.markdown

CSS :fullscreen Pseudo Class

A Pen by A973C on CodePen.

License.

index.html

<div class="box">
  <button onclick="toggleFullScreen()"></button>
</div>

script.js

function toggleFullScreen() {
  if ((!document.fullscreenElement) || (!document.webkitFullscreenElement)){
    try{
      document.documentElement.webkitRequestFullscreen();
    }
    catch(e){
      document.documentElement.requestFullscreen();
    }
      
  } else {
    if ((document.exitFullscreen) || (document.webkitExitFullscreen)){
      try{
        document.webkitExitFullscreen();
      }
      catch(e){
        document.exitFullscreen();
      }
    }
  }
}

// document.addEventListener("keypress", function(e) {
//   if (e.keyCode === 13) {
//     toggleFullScreen();
//   }
// }, false);

style.scss

/* all browser except Safari */
html:fullscreen {
    background-color:rgb(255 221 64);
    button{
      background-color:rgb(14 190 255/ var(--opacity));
      &::before{content:"Click to Close :fullscreen styles";}
    }
}
/* For Safari */
html:-webkit-full-screen{
  background-color:rgb(255 221 64);
  button{
    background-color:rgb(14 190 255/ var(--opacity));
    &::before{content:"Click to Close :fullscreen styles";}
  }
}


html{background-color:#dadada; transition:1.2s;}
.box{
  display:flex;
  width:100vw;
  height:100vh;
}

button{
  --opacity:1;
  all:unset; background-color:rgb(255 221 64/ var(--opacity)); padding:15px; 
  font-family:monospace; font-size:3vw; cursor:pointer; border-radius:10px;
  transform:rotateZ(0deg); transition:1.2s; margin:auto;
  animation:dance 7s infinite;
  &::before{content:"Click to use CSS :fullscreen pseudo class";}
  &:hover,
  &:focus{--opacity:0.8;}
}

@keyframes dance{
  0% ,45%, 53.01%{transform:rotateZ(0deg);}
  45.01%, 47%, 49%, 51%, 53%{transform:rotateZ(5deg);}
  46%,48%, 50%, 52%{transform:rotateZ(-5deg);}
  
}