CSS Working Group resolved to allow range syntax in style queries. We can compare with a container variable:
@ container style(--var < 5em)
But can also compare normal values:
style(1em < 20px)
style(sibling-count() > 3)
This style function can also be used for conditions of inline if()
#css
Mia [data-css=poetic]
npub1sz…p5a79
2025-04-02 20:46:57 UTC
Author Public Key
npub1szda4djvv7w77kk8s3nfcwm3dx5ktej4mk96qpx7z7ng34yax6nssp5a79Seen on
wss://relay.momostr.pinkPublished at
2025-04-02 20:46:57 UTCEvent JSON
{
"id": "db37fc00b954857825f71d6229fe1a8799e4abc4551dff2b35e49c95349d13bf",
"pubkey": "809bdab64c679def5ac784669c3b7169a965e655dd8ba004de17a688d49d36a7",
"created_at": 1743626817,
"kind": 1,
"tags": [
[
"t",
"css"
],
[
"proxy",
"https://front-end.social/@mia/114270327139621249",
"web"
],
[
"proxy",
"https://front-end.social/users/mia/statuses/114270327139621249",
"activitypub"
],
[
"L",
"pink.momostr"
],
[
"l",
"pink.momostr.activitypub:https://front-end.social/users/mia/statuses/114270327139621249",
"pink.momostr"
],
[
"-"
]
],
"content": "CSS Working Group resolved to allow range syntax in style queries. We can compare with a container variable:\n\n@ container style(--var \u003c 5em)\n\nBut can also compare normal values:\n\nstyle(1em \u003c 20px)\nstyle(sibling-count() \u003e 3)\n\nThis style function can also be used for conditions of inline if()\n\n#css",
"sig": "a92df7a6aa15a32cfea4c417417a3062de37aa913abec878f535bee35600d09f219f29dfd6f18f09d9c7320a02a43e244fdba9916ea005a0c913ddc0c46fc909"
}