3 ms·

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 sp

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/input 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-radios-and-checkboxes-on-gov-uk/ https://designnotes.blog.gov.uk/2016/11/30/weve-updated-the-...

1986 5y ago
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.
- felipeccastro 5y ago
  Apparently it will be supported in the next version! https://webkit.org/blog/11648/new-webkit-features-in-safari-14-1/ https://webkit.org/blog/11648/new-webkit-features-in-safari-...
  - lstamour 5y ago
    In fact, Safari 14.1 is current as of last week (well, this week...) https://support.apple.com/en-us/HT212340 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 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.
    - felipeccastro 5y ago
      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.
- mdaniel 5y ago
  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 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?
  - extra88 5y ago
    Current Safari is available on at least two previous versions. In rare cases, Safari features require a capability only available on the latest macOS.
Ayesh 5y ago
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.

1986 5y ago

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.

felipeccastro 5y ago
Apparently it will be supported in the next version! https://webkit.org/blog/11648/new-webkit-features-in-safari-14-1/ https://webkit.org/blog/11648/new-webkit-features-in-safari-...
- lstamour 5y ago
  In fact, Safari 14.1 is current as of last week (well, this week...) https://support.apple.com/en-us/HT212340 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 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.
  - felipeccastro 5y ago
    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.
mdaniel 5y ago
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 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?
- extra88 5y ago
  Current Safari is available on at least two previous versions. In rare cases, Safari features require a capability only available on the latest macOS.

Ayesh 5y ago

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.