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

> The kind of syntax you're suggesting - putting square brackets in attribute names - doesn't exist in HTML and it would be difficult to add that. It would require changes to the HTML parser and the DOM. Can I suggest you revise your proposal so that the inline media queries are inside the attribute value string?

Would you mean something like this?

```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>
```

I still prefer the original `style[condition]=...` format because it clearly separates the *condition* from the *styles*, making it obvious what's being applied and when. With the value-based syntax, there's a bit of ambiguity - does the condition apply to just the first declaration or the entire string? Of course, the spec can define this, but I liked that the bracketed attribute form avoided that question entirely.

That said, if square brackets in attribute names are a no-go due to parser and DOM constraints, then yeah - this value-based approach looks like a solid alternative.

> That said, it would be helpful to know what problem you think needs solving here. Why is it desirable to 'make it easier to write responsive styles without having to jump over to `<style>` tags or external stylesheets'? What problem have you had writing your styles in a stylesheet?

In a nutshell: looking in one place is simpler than looking in two.

I’ve found that having markup and style together makes understanding layout easier - and inline media queries just extend that benefit into responsive behavior. Honestly, this mindset shift came fairly recently after seeing how @Loirooriol  formats examples with everything inline. I started doing the same, and now I'm kind of hooked. 😊

CSS layout is inherently about the hierarchy of boxes, and when style and markup are co-located, that hierarchy becomes visually clearer, especially for the part of the layout you're focused on. When styles are split into another file (or far away in the document), I have to mentally track that structure. But when they're together, the layout logic is more self-evident.

So the motivation here isn’t about solving a specific layout challenge, it’s about improving developer experience and reducing friction when reading and writing layout code.

-- 
GitHub Notification of comment by gitspeaks
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12036#issuecomment-2770959689 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 00:19:28 UTC