WebKit JS

Access and modify DOM elements within a webpage, including touch events and visual effects.


This covers miscellaneous DOM extensions used by Safari in macOS and iOS. These extensions include DOM touch events for processing gestures for devices that have a touch screen and visual effects that support 2D and 3D transforms, animation, and transitions. Most of the classes described in this reference are Apple extensions that may also be proposed W3C standards.

If you want to read the WebKit W3C proposals then go to:


First Steps

Adding an AirPlay Button to Your Safari Media Controls

Create a custom control that adds AirPlay to your Safari media player.

Adding Picture in Picture to Your Safari Media Controls

Create a custom control that adds Picture in Picture to your Safari media player.



CanvasGradient instances define visual gradients that can be displayed on the HTML canvas element. The CanvasRenderingContext2D properties fillStyle and strokeStyle can be set to a CanvasGradient object. You obtain a CanvasGradient instance by calling one of the gradient creation methods of the CanvasRenderingContext2D class—createLinearGradient() or createRadialGradient().


The CanvasRenderingContext2D class provides a 2D drawing context for a canvas element. Use the methods of this class to draw on the canvas. To obtain an instance of the CanvasRenderingContext2D, call the getContext('2d') method on a canvas object. See Safari HTML5 Canvas Guide for usage examples.


A DOMApplicationCache object is used to store resources—such as, HTML, JavaScript, CSS, and images—locally. This allows your web application to continue running offline when there is no network connection. The cache persists after Safari exits, so it can be used by multiple browser sessions. There is one application cache per browsing context.


An instance of DeviceMotionEvent is created when significant change in motion occurs. The event object encapsulates the measurements of the interval, rotation rate, and acceleration of a device.


Instances of the DeviceOrientationEvent class are fired only when the device has a gyroscope and while the user is changing the orientation. The DeviceOrientationEvent class encapsulates the angles of rotation in degrees and heading.


These additions to the Document class are used to create touch event objects on iOS and control full-screen mode on the desktop.


The GestureEvent class encapsulates information about a multi-touch gesture.


A class representing the HTML audio element that plays a sound or audio stream in a webpage. All of the methods and properties in this class are inherited from HTMLMediaElement.


A canvas is an HTML element that defines a runtime drawing region within your web content. You can access the canvas as a JavaScript object and obtain a drawing context from it, in the form of a CanvasRenderingContext2D object. You draw on the canvas by using the JavaScript methods of the CanvasRenderingContext2D class.


An abstract superclass for media classes that display audio or video in webpages. This class defines common properties and methods inherited by the HTMLAudioElement and HTMLVideoElement classes representing the HTML audio and video elements.


A class representing the HTML video element that plays a video in a webpage. Use the HTMLAudioElement class for the HTML audio element.


An object used to store key-value-pair information.


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.


A Touch object represents a single user touch on the screen of the device. A touch is the presence or movement of a finger and is part of a unique multi-touch sequence. Use the changedTouches method to get all the touch objects that changed in a TouchEvent object.


The TouchEvent class encapsulates information about a touch event.


The TouchList class is used to represent a collection of Touch objects. For example, the changedTouches method in TouchEvent returns a TouchList object.


WebKitAnimationEvent objects encapsulate information about running animations.


WebKitCSSMatrix objects represent a 4x4 homogeneous matrix for 3D transforms or a vector for 2D transforms. You can use these objects to manipulate matrices in JavaScript. For example, you can multiply, translate, and scale matrices.


WebKitPoint objects represent a point in two-dimensional space used by CSS transitions specified using the -webkit-transition property.


WebKitTransitionEvent objects provide information about CSS transitions specified using the transition property. An event is sent at the end of a transition for each CSS property in the transition. Each event contains the name of the CSS property and duration of the transition. You can use these events to perform some action that starts at the end of a transition.


An object used to retrieve data from a URL.


CSSRule Additions Reference

These extensions to the CSSRule class are used to access animation keyframe and keyframes rules.

DOMWindow Additions

DOMWindow additions allow conversion of points between page- and node-coordinate systems for transitions, support for CSS media queries, and device orientation and motion events.


WebKitCSSKeyframeRule objects represent the style rule for a single keyframe in the @-webkit-keyframes CSS rule used in animations. The WebKitAnimationEvent class encapsulate information about running animations.


WebKitCSSKeyframesRule objects represent the keyframes for a single animation, that is, the contents of an @-webkit-keyframes CSS rule used in animations. The WebKitAnimationEvent class encapsulate information about running animations.