Comment on Feature detect Style Queries Support in CSS by A workaround for using custom properties in media queries - Piccalilli

['View More Posts', 'Published Bramus', 'Bramus Is A Frontend Web Developer Belgium', 'Working As A Chrome Developer Relations Engineer At Google. The Moment He Discovered View-Source At The Age Of'] Comments for Bram.us 2024-10-06 00:00:00

html { --sentinel: 1; } @container style(--sentinel: 1) { /* Style Queries supported! Behavior when it’s ON ( ): --toggler: ; /* = ON */ --value-when-on: var(--toggler) green; /* = ` green` = `green` */ --value-when-off: var(--toggler, red); /* = ` ` or `red` = `red` */ background: var(--value-when-on, var(--value-when-off)); /* = `green` or ` ` = `green` */ Behavior when it’s OFF ( initial ): --toggler: initial; /* = OFF */ --value-when-on: var(--toggler) green; /* = `initial green` = `initial` */ --value-when-off: var(--toggler, red); /* = `initial` or `red` = `red` */ background: var(--value-when-on, var(--value-when-off)); /* = `initial` or `red` = `red` */ body { --sentinel: 1; } @container style(--sentinel: 1) { body > * { --supported: ; /* Space Toggle */ } }