@iamdavidobrien None of the other browsers support switch inputs yet. But they will. It’s now part of HTML.
Also, because of how the HTML is designed, if you use `<input type="checkbox" switch>` on a webpage, it will just appear as a checkbox in browsers that don’t have support. Nothing will be broken. Fallbacks FTW!
Excellent, thank you!
@jensimmons @iamdavidobrien And if I'm not mistaken, this should be pretty easy to polyfill with css alone (though not sure how best to detect support).
It's pretty common anyway, Joe, just by visually hiding input elements or placing labels on top of them and using ::checked and other pseudo-attributes.
No js required.
Not sure if @supports {} would help here, @jensimmons ?
Dec 21, 2023, 10:10 PM@jensimmons @iamdavidobrien It’s worth noting that styles for these switches should be put behind `@supports` otherwise you won’t get a good fallback experience. They definitely don’t look like a checkbox input.
Attached is a screenshot of the “basic switch” example from Tim Nguyen w/out using at-supports in a non-supporting browser.
The entire set of styles, even the non-thumb ones, should be wrapped in `@supports selector(::thumb)`
@mez @iamdavidobrien We’ve been talking about this for the last three hours. Really, the test show be of the switch attribute in HTML. Which isn’t testable yet. So… https://github.com/w3c/csswg-drafts/issues/9746
Dec 22, 2023, 12:23 AM@jensimmons @iamdavidobrien Yeah! Doing a test on [switch] was my thought too, that would be cool! Generally being able to tell in CSS if the HTML is supported would be useful. `<dialog>` would have really benefited from this when it came out (and probably still could)
Um. No.
Just carry on with your checkboxes.
If switch is unsupported they’ll just be checkboxes.
You’ll get the same data back.
Nothing changes bar visual styling.
Dec 22, 2023, 12:28 AM@iamdavidobrien @jensimmons If the author decides to style their switches, the usability can be affected for non-supporting browsers. If they don’t style them, yeah, it’s all good!
The screenshot I posted shows how that can be the case when the styles aren’t put behind at-supports. It still *works*, but it isn’t a good user experience because it is not obvious that it is a checkbox or switch.
Then I guess you’ll want to test for the pseudo-elements.
Dec 22, 2023, 12:49 AM@iamdavidobrien @jensimmons Which is what I said in my original post.
@jensimmons This is fantastic. I’ve lost track of how many times I’ve styled a checkbox as a switch over the years
Dec 22, 2023, 6:39 AM@jensimmons
I would wish switches have a check mark as default, otherwise it is hard to see sometimes. Is right side active? Who knows?
@iamdavidobrien @kornel