Data guidelines for CSS features

This file contains guidelines that are specific to the CSS features (css/).

Animatable and transitionable

Use the key name is_animatable to capture data describing when a feature was made @keyframe animatable and transitionable. If a browser supports the feature as exclusively @keyframe animatable or exclusively transitionable, then set partial_implementation to true.

Such features should have the description field set to "`@keyframe` animatable and transitionable".

The description can have an optional parenthetical suffix: (x), where x is a particular condition under which the feature is animatable and/or transitionable. For example — "`@keyframe` animatable and transitionable (when setting `inset` properties)".

This guideline was proposed in #30417.

Contexts and layout modes

Different contexts or layout modes can mean different support data depending on how the CSS features are used.

Use a well-known context subfeature to represent this information. Here is the list of well-known contexts:

KeyDescription
context_blockSupported in block layout
context_flexSupported in flex layout
context_gridSupported in grid layout
context_multicolSupported in multi-column layout
context_pagedSupported in paged media
context_position_absoluteSupported in absolutely-positioned boxes

For example, the align-self CSS property has grid layout mode support, recorded like this:

{
  "css": {
    "properties": {
      "align-self": {
        "__compat": {},
        "context_grid": {
          "__compat": {
            "description": "Supported in grid layout",
            "support": {}
          }
        }
      }
    }
  }
}

As it is the case with any CSS property, its values are recorded at the top-level of the CSS property data and not nested inside the context_grid sub-feature.

If a CSS property value is already supported but a new context adds new meaning to CSS property value, the value is not recorded separately either. The information about the new context support can be obtained from the context_grid key.

However, if the contextual value support is different to that context‘s support (for example, the stretch value’s support data is different for flex context than it is the grid context), record a sub-feature like stretch_in_flex inside the context_flex feature.

For example, the align-self property has this data structure:

  • css.properties.align-self
    • context_flex
      • stretch_in_flex (different to the original stretch as well as different to context_flex)
    • context_grid
    • context_position_absolute
    • (... other values)
    • stretch (the original stretch implementation)

This guideline was originally proposed in #30613.