mozilla
Your Search Results

    :fullscreen

    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

    Summary

    The :fullscreen CSS pseudo-class applies to any element that's currently being displayed in full-screen mode. See Using full-screen mode for details.

    The W3C proposal uses the single word :fullscreen, that is without a dash, but both the Webkit and Gecko experimental implementations use a prefixed variant with two words linked by a dash: :-webkit-full-screen and :-moz-full-screen, respectively.

    Examples

    *:fullscreen {
      position:fixed;
      top:0; 
      right:0; 
      bottom:0; 
      left:0;
      margin:0;
      box-sizing:border-box;
      width:100%;
      height:100%;
      object-fit:contain;
    }
    h1:fullscreen {
      border:1px solid #f00;
    }
    p:fullscreen {
      font-size: 200%;
    }

    Specifications

    Specification Status Comment
    Fullscreen API
    The definition of ':fullscreen' in that specification.
    Living Standard  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 15.0 -webkit[1] 9.0 (9.0)-moz[1] 11 -ms Not supported 6.0 -webkit[1]
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support ? 9.0 (9.0) Not supported Not supported Not supported

    [1] Both the Webkit and Gecko prefixed versions have a dash between full and screen, but the W3C proposal uses one single word::fullscreen, :-webkit-full-screen, :-moz-full-screen.

    See also

    Document Tags and Contributors

    Last updated by: Sebastianz,