Skip to content

[css-cascade-6] Enable revert-layer layer limiting and fallback values #10416

Open
@Que-tin

Description

@Que-tin

Currently revert-layer is always allowed to roll back between origins. It would if this could be limited via an argument. This way it would be possible to empty values instead of the initial values if no value is set in the previous author layers.

Quote from the Specs:

Note: If there are no lower-priority declarations in the same cascade origin as the revert-layer value, the cascaded value will roll back to the previous origin.

That would only be useful in combination with the ability to define fallback values if no other value is found. Currently this can only be achieved with custom properties as they always roll back to an empty value.

The following example will always revert to red, because there is no initial value for --color.

@layer example {
  p {
    --color: revert-layer;
    color: var(--color, red); 
  }
}

This on the other hand will always roll back to the inital UA styles

@layer example {
  p {
    color: revert-layer;
  }
}

If one would only be able to provide a fallback value. This would still roll back to the UA styles as they are non empty.

@layer example {
  p {
    color: revert-layer(red);
  }
}

So this would only make sense in the combination with a rollback limiter. It would make sense to be able to pass any layer name as well as the different origins. As origin names could clash with layer names this could be solved with introducing a new env()-Var.
The syntax could look like the following:

@layer example {
  p {
    color: revert-layer(to env(UA), red);
  }
}

@layer example {
  p {
    color: revert-layer(to layer2, red);
  }
}

This can be useful if you want to be able expose the opportunity to override certain properties on an element directly from a previous layer without a detour over custom-properties. This would feel way more natural.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions