3 ms·
Edit: my mistake, the first custom-styled switch example isn’t the full example. I realized that after I commented. Original comment below for posterity. It doe
by eyelidlessness 3y ago
Edit: my mistake, the first custom-styled switch example isn’t the full example. I realized that after I commented. Original comment below for posterity. It doesn’t apply to this case, but I think it’s still relevant as I’ve encountered the mistake I thought I was seeing in “you don’t need JS” contexts pretty frequently. In any case, sorry I misunderstood the example in the article.
The custom-styled switch doesn’t work on iOS Safari. It certainly can work without JS, but this kind of mistake is potentially informative in evaluating whether it should.
That’s not to say “if you want a custom-styled switch, JS is a better way to achieve that.” But if you’re already starting from the premise that HTML has a functional equivalent, it’s okay to use that for the default behavior and enhance it with JS to ensure it’s interactive when it’s enhanced with CSS to satisfy a non-standard design.
- simonw 3y agoDid you try all of the custom styled switch example? The first one didn't visibly work for me on Safari but the others did - the examples are meant to build up a demonstration of the final pattern.
- eyelidlessness 3y agoI was just coming back to edit my comment to acknowledge this. My bad! I think the principle still applies, because I have definitely encountered the mistake I thought I was seeing here. But it doesn’t apply to the example. That’s what I get for commenting before the morning coffee sets in :)
- kilian 3y agoAuthor here. The first styled example doesn’t have the style to respond to the checked state. I explain that in the article right below the example.