- From: gitspeaks via GitHub <sysbot+gh@w3.org>
- Date: Wed, 02 Apr 2025 13:16:07 +0000
- To: public-css-archive@w3.org
@AtkinsSJ
>```html
> <!DOCTYPE html>
> <div style="
> border: 6px solid blue; background-color: blue;
> @media (min-width: 640px) { background-color: green; }
> @media (min-width: 1024px) { background-color: yellow; }
> @media (min-width: 1280px) { background-color: orange; }
> ">
> </div>
> ```
I like it! I would also add `@media` query aliases
```html
<!DOCTYPE html>
<style>
@media (min-width: 640px) [640]
@media (min-width: 1024px) [lg]
@media (min-width: 1280px) [xl]
</style>
<div style="
border: 6px solid blue; background-color: blue;
[640] { background-color: green; }
[lg] { background-color: yellow; }
[xl] { background-color: orange; }
">
</div>
```
There's the question of how difficult it would be to implement auto-formatting to separate lines.
For comparison, here's the original suggestion:
```html
<!DOCTYPE html>
<style>
@media (min-width: 640px) [640]
@media (min-width: 1024px) [lg]
@media (min-width: 1280px) [xl]
</style>
<div
style="border: 6px solid blue; background-color: blue;"
style[640]="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-2772535549 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 13:16:10 UTC