[csswg-drafts] [css-properties-values-api] enhance @property with access-scope control (#9587)

brandonmcconnell has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-properties-values-api] enhance @property with access-scope control ==
## Abstract

To enhance the encapsulation of CSS custom properties, this proposal introduces an `access` descriptor for the `@property` rule. This feature enables developers to define the access-scope of access for custom properties, ensuring styles can be isolated and protected from unintended external manipulation.

## 1. Introduction

The encapsulation of styling within web applications is a key concern for developers aiming to maintain a consistent design language and protect style definitions from third-party interference. The `access` descriptor for the `@property` rule is proposed to give developers fine-grained control over the access of custom properties within their stylesheets.

## 2. `@property` Rule Enhancement for Access Control

### 2.1 Declaring Access-Scope

- The `@property` rule will include an `access` descriptor that determines the access-scope of a custom property:

```css
@property --background-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #00FF00;
  access: domain; /* Accessible only within the same domain */
}
```

### 2.2 Access Values

> ⚠️ There is a decent chance limiting read access would break imports without some magic, so perhaps all if these would only limit write access.

**Public:** The property is open for modification by any stylesheet or script.

```css
@property --background-color {
  access: public;
}
```

**Domain:** The property can be modified only by stylesheets and scripts from the same domain or subdomain.

```css
@property --background-color {
  access: domain;
}
```

**Sheet:** The property is confined to the current stylesheet where it is declared, whether in a CSS file or a `style` element.

```css
@property --background-color {
  access: sheet;
}
```

## 3. Use Cases

The access control provided by this feature serves various purposes:

- **Style Encapsulation:** Allows for component-specific styles that are not affected by global stylesheets or other components.
- **Protecting Design Integrity:** Helps maintain design consistency by preventing third-party stylesheets from altering the appearance of components.
- **Security:** Adds a layer of protection against CSS-based attacks by limiting the ability to alter custom properties to trusted sources.

## 4. Gotchas/Considerations

### 4.1 Cross-Origin Styles

The `access` descriptor must be designed to interact correctly with cross-origin styles, ensuring that properties with restricted access are not inadvertently exposed or modified.

### 4.2 Adoption and Fallback Strategies

It is important to consider how this feature will be adopted in browsers that currently do not support this level of style encapsulation and what fallbacks or polyfills might be appropriate.

## 5. Conclusion

The introduction of the `access` descriptor within the `@property` rule represents a significant advancement in CSS, providing developers with the necessary tools to ensure style encapsulation and security. This proposal aims to foster a more modular and secure approach to styling web applications.

## 6. Request for Comments

Feedback is sought on:

- The design and expected behavior of the `access` descriptor.
- Possible challenges in implementation and suggestions for browser vendors.
- Additional use cases and potential improvements to the proposal.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9587 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 9 November 2023 21:02:51 UTC