Hacker News Reader

Comment by open-source-ux | Hacker News Reader

The HTML form <input> element has a lot of interactive controls already e.g. colour picker, a date control for entering dates, file picker, number entry with spinner controls and more:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in...

The problem is that some HTML form controls cannot be styled with CSS to render consistently across browsers. So, many sites fall back on JavaScript to render the control. Here is an example from 2016 on styling HTML checkboxes and radio buttons to make them larger (which, as far I can tell, is still a problem): https://designnotes.blog.gov.uk/2016/11/30/weve-updated-the-...

View on HN

Date pickers and color pickers don't have to be consistent across desktop/tablet/mobile/kiosk/etc. They just have to be consistent across sites, but on the same device.

On Firefox, the date picker is good and I can easily navigate to a year from muscle memory. The same wouldn't work on mobile, so they have different UI and controls. I don't want to use iOS style date pickers on my Android, or the other way around just for consistency.

Many custom date pickers are sluggish and has bad UX, and adds a lot of extra validation complexity with pseudo elements.

And also cross browser support for the spec in general - eg desktop Safari doesn't implement that date picker, or any special treatment of input type="date" at all.

Apparently it will be supported in the next version! https://webkit.org/blog/11648/new-webkit-features-in-safari-...

In fact, Safari 14.1 is current as of last week (well, this week...) https://support.apple.com/en-us/HT212340

And iOS 14.5 (well, 14.5.1) is also current: https://support.apple.com/en-ca/HT211808#1451

But we'll have to wait a few weeks to months before all Safari users upgrade and see the latest improvements.

Yes, but still I think it's great news as it looks like we can realistically make forms using native inputs only and validation, complex inputs (like date pickers) all can be setup with little to no javascript. This enables much simpler architectures, like traditional server side rendered apps, that still have a great UX.

I don't have a modern Safari in front of me to check, but Can I Use alleges they're about on par with Firefox as of 14.1: https://caniuse.com/?search=Input%20date

Does that mean only fully up-to-date macOS gets it, or do Safari versions move independent of the OS?

Current Safari is available on at least two previous versions.

In rare cases, Safari features require a capability only available on the latest macOS.

Reply on news.ycombinator.com