Re: [csswg-drafts] [css-style-attr] Feature suggestion: support for inline media queries in HTML (#12036)

```html
<!DOCTYPE html>
<style>
  @custom-media --md (min-width: 640px);
  @custom-media --lg (min-width: 1024px);
  @custom-media --xl (min-width: 1280px);
</style>
<div style="
   border: 6px solid blue; background-color: blue;
   (md) { background-color: green; }
   (lg) { background-color: yellow; }
   (xl) { background-color: orange; }
  ">
</div>
```
----

```html
<!DOCTYPE html>
<style>
  @custom-media --md (min-width: 640px);
  @custom-media --lg (min-width: 1024px);
  @custom-media --xl (min-width: 1280px);
</style>
<div style="border: 6px solid blue; background-color: blue; (md) { background-color: green; } (lg) { background-color: yellow; } (xl) { background-color: orange; }">
</div>
```

vs.

```html
<!DOCTYPE html>
<style>
  @custom-media --md (min-width: 640px);
  @custom-media --lg (min-width: 1024px);
  @custom-media --xl (min-width: 1280px);
</style>
<div
  style="border: 6px solid blue; background-color: blue;"
  style(md)"background-color: green;"
  style(lg)="background-color: yellow;"
  style(xl)="background-color: orange;"
</div>
```

---

```html
<!DOCTYPE html>
<style>
  @custom-media --md (min-width: 640px);
  @custom-media --lg (min-width: 1024px);
  @custom-media --xl (min-width: 1280px);
</style>
<div
  style="border: 6px solid blue; background-color: blue;" style(md)"background-color: green;" style(lg)="background-color: yellow;" style(xl)="background-color: orange;"
</div>
```

-- 
GitHub Notification of comment by gitspeaks
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12036#issuecomment-2773012892 using your GitHub account


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

Received on Wednesday, 2 April 2025 15:47:17 UTC