Firefox Tomorrow

web api interface

CSSViewTransitionRule

View on MDN ↗

The CSSViewTransitionRule interface represents a CSS @view-transition at-rule.

Instance properties

Inherits properties from its ancestor, CSSRule.

  • navigation Read only
    • : Returns the @view-transition at-rule’s navigation descriptor value.
  • types Read only
    • : Returns an array containing the @view-transition at-rule’s types descriptor values.

Instance methods

Inherits methods from its ancestor, CSSRule.

Examples

Basic usage

A stylesheet includes a @view-transition at-rule, with navigation and types descriptors set:

@view-transition {
  navigation: auto;
  types: slide, rotate;
}

In script, we grab a reference to the @view-transition at-rule using document.styleSheets[0].cssRules, then log the corresponding CSSViewTransitionRule object and its navigation and types properties to the console. The types property returns an array containing the values set for the types descriptor.

let myRule = document.styleSheets[0].cssRules;
console.log(myRule[0]); // a CSSViewTransitionRule representing the @view-transition at-rule
console.log(myRule[0].navigation); // "auto"
console.log(myRule[0].types); // ["slide", "rotate"]

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also