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

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

== Feature suggestion: support for inline media queries in HTML ==
Suggesting support for inline media queries using a `style[media feature]` syntax like `style[min-width: 1024px]`, allowing responsive styling directly in markup. This would make it easier to write responsive styles without having to jump over to `<style>` tags or external stylesheets.

Example:

```html
<!DOCTYPE html>
<style>
  @media (min-width: 1920px) [xl]; /* media query alias*/
</style>
<div
  style="border: 6px solid blue; background-color: blue;"
  style[min-width: 640px]="background-color: green;"
  style[min-width: 1024px]="background-color: yellow;"
  style[min-width: 1280px]="background-color: orange;"
  style[xl]="background-color: red;">
</div>
```

Style declarations cascade from the base style attribute to conditional styles unless explicitly overridden, so in this example `border: 6px solid blue` is always applied.

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


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

Received on Tuesday, 1 April 2025 22:50:56 UTC