News for hackers. Stuff that matters.

A comment on <dialog>: The Dialog Element.

Re:<dialog>: The Dialog Element by divbzero on Saturday December 07, 2024 @01:41AM (#42347746)
Other delightfully interactive HTML elements include…

File pickers:

  <input type="file">
Color pickers:

  <input type="color">
Date/time pickers:

  <input type="month">
  <input type="date">
  <input type="time">
  <input type="datetime-local">
Numeric sliders:

  <input type="range" min="0" max="5">
Suggested options for text fields:

  <input list="fonts">
  <datalist id="fonts">
    <option value="Courier New"></option>
    <option value="Garamond"></option>
    <option value="Georgia"></option>
    <option value="Tahoma"></option>
    <option value="Times New Roman"></option>
  </datalist>
Summaries with expandable details:

  <h2>FAQs</h2>
  <details name="faq">
    <summary>Why are interactive HTML elements cool?</summary>
    They’re lightweight and semantic!
  </details>
  <details name="faq">
    <summary>Will the previous answer close when I open this one?</summary>
    Yes, because the <code>&lt;details&gt;</code> elements share the same name.
  </details>
Media players with controls:

  <audio controls src="example.mp3"></audio>
  <video controls src="example.mp4"></video>
[ Parent | on HN ]
Re:<dialog>: The Dialog Element by vintermann on Saturday December 07, 2024 @05:40AM (#42348831)
All of which these days are going to be unused in favor of some toolkit, because they don't behave predictably enough across browsers / browser versions.
[ Parent | on HN ]
Re:<dialog>: The Dialog Element by nikodotio on Saturday December 07, 2024 @07:55AM (#42349475)
I use all of them pretty consistently! I try not to have them do magic, but using native date pickers and dropdowns and selects saves so much time and headache - and they work consistently.
[ Parent | on HN ]
Re:<dialog>: The Dialog Element by porridgeraisin on Saturday December 07, 2024 @08:12AM (#42349595)
How do you use audio/video consistently across browsers? It looks quite different across the browser/platform combination matrix.
[ Parent | on HN ]
Re:<dialog>: The Dialog Element by nikodotio on Saturday December 07, 2024 @11:09AM (#42350644)
I accept that they will look different but function consistently and in line with the client device - when that can be made as a design decision.
[ Parent | on HN ]
Re:<dialog>: The Dialog Element by saagarjha on Saturday December 07, 2024 @11:01PM (#42354933)
You put one on the screen and the user controls it with the controls they are used to.
[ Parent | on HN ]
Re:<dialog>: The Dialog Element by jazzypants on Sunday December 08, 2024 @07:29AM (#42356750)
No one cares about this except marketing people.
[ Parent | on HN ]
Re:<dialog>: The Dialog Element by goatlover on Sunday December 08, 2024 @04:24PM (#42360628)
Why does it matter if it looks different? Those who use Safari will be used to how it looks there, same with Firefox, Chrome, etc
[ Parent | on HN ]
Re:<dialog>: The Dialog Element by esrauch on Saturday December 07, 2024 @07:45AM (#42349418)
Except file, no one is giving the browser full access to their files so that it can render a shitty file picker
[ Parent | on HN ]
Re:<dialog>: The Dialog Element by pests on Saturday December 07, 2024 @12:44PM (#42351347)
The browser already has full access to their files.
[ Parent | on HN ]
Re:<dialog>: The Dialog Element by lobsterthief on Saturday December 07, 2024 @02:55PM (#42352382)
But websites don’t
[ Parent | on HN ]
Re:<dialog>: The Dialog Element by pests on Saturday December 07, 2024 @08:12PM (#42354194)
They only get access to what your browser gives them, through a file picker.
[ Parent | on HN ]
Re:<dialog>: The Dialog Element by esrauch on Monday December 09, 2024 @11:19PM (#42373699)
It can actually be both.

At least on Android the browser itself can lack the rights to listdir and only gets access to file you picked via the system picker, rather than the browser having unlimited access and only delegating only some of that access to the Web app.

[ Parent | on HN ]
Re:<dialog>: The Dialog Element by dv_dt on Saturday December 07, 2024 @09:24AM (#42350015)
Depends if you mean consistent to the os or browser or consistent to the js framework - I would suggest that most casual users don't notice and actually do better if its consistent to the os or browser they use

Well some other comment mentioned audio/video and those are seemingly aways different

[ Parent | on HN ]
Re:<dialog>: The Dialog Element by wongarsu on Saturday December 07, 2024 @10:13AM (#42350281)
> Well some other comment mentioned audio/video and those are seemingly aways different

Which is probably fine for your users. In every browser it plays video and has basic controls like a start/pause button, a timeline and a volume control. While the video is playing they even look identical: it's the video, playing; with controls only visible on hover.

The differences aren't an issue for the actual user, they are an issue for the designer that tries to have the website look and feel the same everywhere. Preferably look the same as it does on their MacBook.

[ Parent | on HN ]
Re:<dialog>: The Dialog Element by ilius2 on Saturday December 07, 2024 @01:37PM (#42351772)
So it's industry's management problem, not a tech problem.
[ Parent | on HN ]
Re:<dialog>: The Dialog Element by eek2121 on Saturday December 07, 2024 @10:39AM (#42350441)
I use them! I just add CSS to pretty them up.
[ Parent | on HN ]
Re:<dialog>: The Dialog Element by eek2121 on Saturday December 07, 2024 @10:40AM (#42350448)
(not everyone is into using some hot new framework, some of use stick with HTML/CSS/JavaScript)
[ Parent | on HN ]
Re:<dialog>: The Dialog Element by mikae1 on Saturday December 07, 2024 @06:31AM (#42349077)
> Media players with controls:

> <audio controls src="example.mp3"></audio>

> <video controls src="example.mp4"></video>

Which look different in every single browser and can't be styled without JavaScript. Wish these were implemented better.

[ Parent | on HN ]
Re:<dialog>: The Dialog Element by BeFlatXIII on Saturday December 07, 2024 @04:30PM (#42352993)
I wish more websites left things with default styling.
[ Parent | on HN ]
Re:<dialog>: The Dialog Element by wwweston on Friday December 13, 2024 @04:02PM (#42412338)
As long as the essential controls are there (play/pause, volume, transport) and don't have serious UX sins (tiny or otherwise lacking touch targets) restyling them is overrated.

And an unfortunate number of recreated controls seem to have the serious UX sins.

"looks different in every single browser" is a minor issue. Might be nice if they were restylable via CSS, though.

[ Parent | on HN ]
Re:<dialog>: The Dialog Element by gonzo41 on Saturday December 07, 2024 @10:51AM (#42350516)
d<atalist> is a gem. Love it.
[ Parent | on HN ]