datalist is one I stumbled upon and blew me away. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/da...</a><p>It's not a replacement for select as you still need an input to tie it to but it seems to handle filtering a list of options nicely.<p>Also, if you have two selects with the same list in it, you can do it once with datalist and have two inputs, say a list of clients with client_a and client_b for inputs.<p>I don't quite care for how it displays the value, like if you put the ID as the value and the client name in the option element, you can filter by the ID or the name but the input will show the ID only.
The trick to prevent scrolling by setting overflow: hidden unfortunately results in visual page jumping for me.<p>The reason is I have macOS set up to always show scroll bars, instead of hiding them. At least one browser (I forget which, but I test on Safari, Firefox and Chrome) doesn’t have a disabled scroll bar but removes it altogether. This makes the page wider and causes it to reflow and move.<p>Does anyone know how to keep the scroll bar onscreen, just not enabled?
Freezing the page isn't so simple, as overflow: hidden messes up things like the sticky header on that page. I had so much trouble with it, I decided to just let users scroll and hide the modal during scrolling: <a href="https://radogado.github.io/n-modal/" rel="nofollow">https://radogado.github.io/n-modal/</a>
This is a neat piece of modern CSS:<p><pre><code> body:has(dialog[open]) {
overflow: hidden;
}
</code></pre>
<a href="https://caniuse.com/css-has" rel="nofollow">https://caniuse.com/css-has</a> confirms the has() selector has had widespread browser support since December 2023.
Be careful using:<p><pre><code> dialog::backdrop {
backdrop-filter: blur(2px);
}
</code></pre>
If there is frequently updating content on the page like a video, it can kill CPU performance. Restream does this and it punishes my M3 macbook air.<p>It seems you can use the transform3d trick to kick it to the GPU to help fix it.
Thanks for the article!<p>I remember I had a hard time trying to stretch dialog to full screen for mobile devices, but it actually didn't want to work. The code was something like this:<p>dialog {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
}
OT: I really want to see marquee tag have native UI scrolling via CSS property. The many websites that use this horizontal scrolling layout with JS makes me want to cry.