Skip to content

[css-values] Proposal: new presentational global value to revert a property to use presentational hints if any, otherwise behave like revert #13213

@benface

Description

@benface

Problem

Imagine you're building a "drop-in UI" / "widget" kind of library. You don't control the environment (website/app/whatever) that's going to render your widget. How do you ensure that the CSS you write for it won't break due to author styles from the embedding page (e.g. weird/unexpected CSS resets)? Ideally, you would use a custom element and the style encapsulation of shadow DOM. But let's imagine you need it to be in the light DOM for some reason. Correct me if I'm wrong, but I believe that the next best thing, at least once the resolution of the "Allow authors to explicitly place unlayered styles in the cascade layer order" issue is implemented, is to combine a strong cascade layer with revert (specifically not revert-layer, since we need to neutralize author styles across layers), so that elements inside the widget start from a predictable, consistent baseline:

@layer ^my-library {
  @layer reset {
    .my-library-container {
      &,
      &::before,
      &::after,
      *,
      *::before,
      *::after {
        all: revert;
      }
    }
  }

  .my-library-some-element {
    /* now we should be able to confidently style this! */
  }
}

Unfortunately, this is one issue with that approach: revert also discards presentational hints, which breaks otherwise self-contained markup such as <img width height> and SVG presentation attributes. Any <svg> with <path>s in .my-library-container will be broken now that d is a presentational hint.

Solution

A new presentational global value that behaves exactly the same as revert, except that it does NOT discard presentational hints. Note: I tried to think of a name that starts with revert- for consistency, but revert-hints or revert-presentational sound like they will revert the hints instead of reverting TO them; revert-to-hints or revert-to-presentational sound unCSSy to me; and anything else I could think of (e.g. revert-stylesheets or revert-css) sounded unclear or ambiguous. Granted, presentational is not perfect either because only a small subset of properties can be influenced by presentational hints, but since the functional difference with revert is limited to properties that do, it seems... fine?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions