<div dir="ltr"><div dir="ltr">Maybe @custom-media queries can get you part of the way there:<div><a href="https://www.w3.org/TR/mediaqueries-5/#custom-mq">https://www.w3.org/TR/mediaqueries-5/#custom-mq</a></div><div><br></div><div>So instead of repeating a media query multiple times, you can define a custom media query like this:</div><div>    @custom-media --sm (width >= 40);</div><div><br></div><div>And use it with the regular syntax:</div><div>    @media (--sm) {</div><div>        // ...</div><div>    }</div></div><br><div class="gmail_quote gmail_quote_container"><div dir="ltr" class="gmail_attr">On Sat, Jul 12, 2025 at 8:13 PM Christopher Schnick <<a href="mailto:crschnick@xpipe.io">crschnick@xpipe.io</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><u></u>

  
    
  
  <div>
    <p>Assuming this would be available, I would implement custom css
      breakpoints to refer to common layout changes for our application.
      This would prevent a lot of repetition. For example, something
      similar to the tailwindcss breakpoints:</p>
    <p><br></p><p>
      I could also use it to define more advanced breakpoint conditions
      that are not possible to achieve with just css expressions.<br>
      <br>
      In general, having the media queries only available in css is also
      limiting for many more advanced customizations. If I want to for
      example subscribe to a certain states, e.g. when the width crosses
      a certain breakpoint, to run a listener that changes some node
      properties.<br>
      <br>
      Custom media queries can also just be implemented using a listener
      that sets pseudo class states on the root node for each scene.
      However, always found it annoying having to specify something like
      .root:xl .button {} to replicate these breakpoints. If there was
      such a thing as recursive pseudo classes that would allow querying
      them in css via .button:xl when they are only set for a parent or
      root node, that would work as well as an alternative.</p><blockquote type="cite"><blockquote type="cite"><pre></pre>
      </blockquote>
    </blockquote>
  </div>
</blockquote></div></div>