<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<p>Yeah that would definitely improve the situation when it comes to
repetitiveness. Would I need to define such custom media queries
per stylesheet or can they apply globally?</p>
<div class="moz-cite-prefix">On 12/07/2025 20:24, Michael Strauß
wrote:<br>
</div>
<blockquote type="cite"
cite="mid:CAJEpuXRM_ZXdL5rHOZMsg7pEU9Eza=HquUM957=Pzw+1OJWrPg@mail.gmail.com">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<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"
moz-do-not-send="true" class="moz-txt-link-freetext">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" moz-do-not-send="true"
class="moz-txt-link-freetext">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">
<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"> </blockquote>
</blockquote>
</div>
</blockquote>
</div>
</div>
</blockquote>
</body>
</html>