Safari Developer Library

Developer

StyleMedia Class Reference

Options
Deployment Target:

On This Page

StyleMedia

The StyleMedia class provides a way to evaluate CSS media queries from JavaScript. You do not need to, nor should you, create instances of this class. You access the shared StyleMedia object using the window’s styleMedia property.

  • type Property

    A string that represents the media type of the current view used for rendering the document.

    Declaration

    readonly attribute DOMString type

    Discussion

    For pages being displayed on screen, this property value is screen. When printing, this property value is print.

  • Evaluates the given string as a media query and returns the result.

    Declaration

    booleanmatchMedium (in DOMString mediaquery);

    Parameters

    mediaquery

    The media query to evaluate.

    Return Value

    true if the media query is logically true; otherwise, false.

    Discussion

    For example, window.styleMedia.matchMedium("(color)") returns true if the display device is a color device. You can also use this method to check whether the browser supports 3D transforms as follows:

    1. if ('styleMedia' in window && window.styleMedia.matchMedium("(-webkit-transform-3d)")) {
    2. // Insert 3D code here
    3. }

    Or check to see whether the browser supports animations as follows:

    1. if ('styleMedia' in window && window.styleMedia.matchMedium("(-webkit-animation)")) {
    2. // Insert animation code here
    3. }