News for hackers. Stuff that matters.
Re:<dialog>: The Dialog Element by thousand_nights on Friday December 06, 2024 @04:44PM (#42344829)
> comnpletely unstyled,

this is what completely holds back most built-in browser components from widespread usage, i suspect the vendors implementing it just don't care at all because it's not their problem

every company i've ever worked at had at least a somewhat consistently defined design language and it would look completely amateurish and out of place to use built in browser components in most places, regardless of how much html/css purists want that to be the case

unless that is fixed, it will never happen

Re:<dialog>: The Dialog Element by MrJohz on Friday December 06, 2024 @05:36PM (#42345317)
I think you might be talking about a different thing to the other poster.

The dialog element behaves exactly how you'd want it to behave for a company with their own design language — you can style every part of it exactly how you need it (including the backdrop, the positioning and size of the dialog element itself, borders, colours, contents, etc). Depending on how you implement the design language, you can either apply those styles to the dialog element in general, or provide a custom component that wraps the dialog element and provides the styles you need.

What the previous poster was complaining about was the opposite situation: they aren't working with their own design language, and instead want to use native-looking HTML elements (the default inputs, selects, buttons, etc). However, the dialog element does not provide a native look-and-feel, and instead is very minimalistic, providing only the base that developers can add their own styles to.

That said, I think the browser implementors have made the correct choice here. The dialog element is not a native popup, and doesn't behave like a native popup at all, so it doesn't make sense to style it natively. In addition, the more styles they provide as part of the user-agent styling, the harder it is to reset those styles if you want to do something different. Apart from inputs, browsers fairly consistently stick with providing the minimum possible styling for an element to be usable, and this means that developers have the largest range of freedom to use those elements as they like.

Re:<dialog>: The Dialog Element by ryandrake on Friday December 06, 2024 @05:05PM (#42345044)
I feel like every company's (different/contrasting) "design language" and their insistence on using it, ends up being yet another weird looking thing on my computer. I'd rather decide for myself the fonts, color scheme, look and feel, etc. for applications on my computer, and have applications be consistent and respect those preferences. Rather than have some artist I don't know 2,000 miles away from me simply decide what a dialog should look like (and it's always totally different than what some other artist decided a dialog should look like).
Re:<dialog>: The Dialog Element by DaiPlusPlus on Friday December 06, 2024 @05:26PM (#42345229)
"But we don't want to look like everyone else"
Re:<dialog>: The Dialog Element by spatley on Friday December 06, 2024 @06:50PM (#42345877)
and/or making the website using the most modern design trends sets us apart and reinforces that we are a cutting edge company.
Re:<dialog>: The Dialog Element by DaiPlusPlus on Friday December 06, 2024 @10:30PM (#42347022)
Right down to the Stablediffusion-generated corporate-memphis artwork
Re:<dialog>: The Dialog Element by IgorPartola on Saturday December 07, 2024 @01:33PM (#42351738)
These are the same people who insist on having PDF copies of everything and sometimes PDF forms. Nobody ever designs custom PDF form styling to be different. I wonder why? /s
Re:<dialog>: The Dialog Element by xp84 on Saturday December 07, 2024 @03:12AM (#42348128)
I think most of us here who aren't self-important "UX designers" (or branding consultants) would agree with you, but the decision makers responsible for most of the sites on the Web disagree/don't care what we'd like. They want their site to look identical on all platforms and browsers, and to have their "signature" design language, to heck with what users might expect. It's why you see stupid things like pixel-perfect clones of the iOS "switch" control brought to the Web.

So, anyway, if the `<dialog>` is ever to have a chance at adoption, instead of the "div soup and 1000 lines of JS and CSS modal" we've had everywhere since 2008 or so, it really should be blank slate for the "UX Designer" who fancies themself a real artist can vomit their personal brand of "elegant but bold, minimalist, flat design" onto the DOM.

If it's not completely skinnable, they'll just keep insisting on building div soup modals forever.

Re:<dialog>: The Dialog Element by mardifoufs on Saturday December 07, 2024 @01:43PM (#42351815)
Idk, personally I completely disagree. I don't want to theme every single app. I want them to be distinctive and I don't actually care about native look. What I care about is that they have a nice design (which is as subjective as it gets, I know) but more importantly that they are distinctive enough in terms of design. Now I don't want every app to have different shortcuts or whatever, but I don't want slack to look like discord for example. And I don't want to theme anything ideally.
Re:<dialog>: The Dialog Element by chrishtr on Friday December 06, 2024 @05:36PM (#42345326)
The <dialog> element is fully styleable, including its backdrop (the MDN article explains how for the latter). In Chrome you can also fully style animations opening and closing a <dialog> or popover.

https://developer.chrome.com/blog/entry-exit-animations

Re:<dialog>: The Dialog Element by salzig on Friday December 06, 2024 @08:43PM (#42346534)
@starting-style support is quite good in all browsers, not just chrome. https://caniuse.com/?search=%20%40starting-style
Re:<dialog>: The Dialog Element by dylan604 on Friday December 06, 2024 @04:53PM (#42344914)
the most commonly used element that I use is the date picker. i hate using it, but i'm not loading some library or framework just for it either.
Re:<dialog>: The Dialog Element by thousand_nights on Friday December 06, 2024 @05:03PM (#42345024)
i don't know what context you're using it in, but imagine a company like airbnb or booking.com using the built in date picker on their front page

you might as well cut their public valuation in half at that point. it's just not worth it to use the completely neglected and anemic components that are part of the browser, they are a joke

Re:<dialog>: The Dialog Element by WD-42 on Friday December 06, 2024 @05:18PM (#42345176)
Weird. I think the built in date picker is actually pretty nice.
Re:<dialog>: The Dialog Element by dylan604 on Friday December 06, 2024 @05:27PM (#42345237)
functionally it is perfectly fine. aesthetically, it looks nothing like any other component of the site's style. it very much looks like a band-aid
Re:<dialog>: The Dialog Element by dotancohen on Saturday December 07, 2024 @05:57PM (#42353510)
In which browser and OS?
Re:<dialog>: The Dialog Element by 8n4vidtmkvmk on Saturday December 07, 2024 @03:16AM (#42348157)
The native datepicker is weird, at least in Chrome. I was playing around with it, and if you give it milliseconds it will render a millisecond picker in intervals of 100. If you give it a nice round minute, then ms and s disappear from the UI. There's no attribute to control this.

I also want a non-local time picker. Let me specify a time that the server can properly interpret as a moment in time. i.e specify an offset somehow.