tl;dr; ~139 Bytes of code to give 99% of browsers use of dynamic, non-overlapping, custom media queries. (demo link below)
Media queries are powerful but such a PITA to work with. They are painfully static which makes them a pain to edit, even with a REPL. And even though modern web frameworks (I'm doing almost 100% Svelte these days) are a joy to use, the CSS side of the ship isn't as awesome, especially when it needs to be dynamic, and especially especially when it's dealing with media queries. (You can't use variables in media queries, for one.)
So, I ran into some miserable media query overlap problems while manually copying updated media query breakpoints/rules into some components, yuck. Then it happened again in a separate project; yuk yuk. And then I stumbled on Eric Meyers blog for the first time, and saw he was wishing for Custom Media Queries! Well, I had to solve it at that point.
This isn't an implementation of the spec on Custom Media Queries in ~139 bytes, but for me, its MORE than what I want out of the spec, and also MORE of what I need. So I like this better:
* For one, it is fully dynamic, so can be changed for any reason--especially helpful to me while doing rapid prototyping/development/design).
* For twos, it is NON-OVERLAPPING! The implementation enforces polite, prioritized media queries that are therefore very easy to manage.
* For threes, you can use it right now!
The URL for this submission is to the little write up explaining the code, its rationale and usage. Unfortuanately, I can't share my projects that use this code, so I wrote a little vanilla js demo and finally put my empty github page to use:
WHATS NEXT? I'm considering making a dat.gui inspired debugging panel, to help with developing media rule breakpoints. But for now, because I don't want anyone else to suffer anymore from this problem: Custom DYNAMIC Media Queries FTW, available now. LETS GOOOOO!
P.S., Thank you HN community and moderators. I've been a long time reader, less-long time member, and this is my first submission. My life is much richer because of many different people, readers, random commenters, @HN. Thank you.
