Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

A couple CSS tricks for HTML Dialog elements

cassidoo.co

Post reply on HN
Print view View original

41–48 of 48 posts

Re: A couple CSS tricks for HTML Dialog elements

#41

Post by lelandfe »

hk1337 wrote: post #24
lelandfe wrote: post #21

Earlier quoted context omitted.

My frown continues to deepen at Apple's UI backslide as they crib more and more junk from iOS/iPadOS. I'm on Sonoma 14.5, and this is Safari 17.5. macOS Safari's : https://imgur.com/a/05YWDCc macOS Safari's : https://imgur.com/a/4f3JwuA There are SO, SO, SO many things wrong with Safari's datalist element here. Esc doesn't close it (close from keyboard by switching tabs...). There's no hover effect on the options. Th…

Yeah, the more I dig into it the more I see it's not all that great. It has some potential for some things but not necessarily for an autocomplete list. https://jsfiddle.net/nhu4zef2/ This is one occurs in every browser when if you want to have a list but send the ID for the item instead of the value, it shows the value in the list and you can search by the ID or the value but the result in the input shows just the I…

This just got so much worse with scrollbars.

Select: https://imgur.com/a/fi1SPBJ

Datalist: https://imgur.com/a/sTiQhPF

This looks exactly like an iOS control now. The multiply effect on the scrollbar is comically out of place.

Re: A couple CSS tricks for HTML Dialog elements

#42

Post by starikovs »

askew wrote: post #12
starikovs wrote: post #6

Thanks for the article! 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: dialog { position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; }

You can shorthand the last four declarations with a single `inset: 10px;` (or maybe `inset: .625rem;`?

That's cool, actually I didn't know about this one :)

Re: A couple CSS tricks for HTML Dialog elements

#43

Post by dimaor »

extra88 wrote: post #36
dimaor wrote: post #28

Is it weird that I expected the post to actually have running examples?

From the article: > If you want to see a decent quick example of them in action, you can check out my game Jumblie and click the Settings gear button at the top. It has the backdrop filter but it doesn't prevent page scrolling. BTW, MDN's data on Safari's support for the unprefixed `backdrop-filter` property is wrong, it still sometimes requires using `-webkit-backdrop-filter` (works in iOS Safari 18.2.1, doesn't wor…

I have read the article, and saw the link, I simply thought it is so simple to actually add an example since the post itself is a web page.

Re: A couple CSS tricks for HTML Dialog elements

#44

Post by extra88 »

dimaor wrote: post #43
extra88 wrote: post #36

Earlier quoted context omitted.

From the article: > If you want to see a decent quick example of them in action, you can check out my game Jumblie and click the Settings gear button at the top. It has the backdrop filter but it doesn't prevent page scrolling. BTW, MDN's data on Safari's support for the unprefixed `backdrop-filter` property is wrong, it still sometimes requires using `-webkit-backdrop-filter` (works in iOS Safari 18.2.1, doesn't wor…

I have read the article, and saw the link, I simply thought it is so simple to actually add an example since the post itself is a web page.

That would require adding JavaScript to the page and some people don't do that in their blog, especially when it's published using a static site generator.

Re: A couple CSS tricks for HTML Dialog elements

#45

Post by cmgriffing »

extra88 wrote: post #32
cmgriffing wrote: post #30

Be careful using: dialog::backdrop { backdrop-filter: blur(2px); } 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. It seems you can use the transform3d trick to kick it to the GPU to help fix it.

I'd want to pause any video playing while a dialog with such a backdrop is open.

In the case of Restream (or cases like their "stage"), thats not always doable. What about superfluous hero animations that marketing sites love to do these days? Pausing some generic canvas rendering logic is usually more annoying than you would want.

Re: A couple CSS tricks for HTML Dialog elements

#47

Post by Sateeshm »

hk1337 wrote: post #11

datalist is one I stumbled upon and blew me away. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/da... 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. 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. I…

Doesn't seem to work on Firefox Android

Re: A couple CSS tricks for HTML Dialog elements

#48

Post by malobre »

Sateeshm wrote: post #47
hk1337 wrote: post #11

datalist is one I stumbled upon and blew me away. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/da... 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. 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. I…

Doesn't seem to work on Firefox Android

https://bugzilla.mozilla.org/show_bug.cgi?id=1535985
Post reply on HN