CodeNewbie Community 🌱

Cover image for New HTML Control Lands in Safari
Álvaro Montoro
Álvaro Montoro

Posted on • Originally published at alvaromontoro.com

New HTML Control Lands in Safari

Native toggle switches landed in one browser. Safari introduced this new HTML control as part of the Safari Technology Preview 185 release and then expanded it in the 186 release.

Creating a semi-native HTML toggle switch component is quite hacky. It involves using a checkbox, adding the "switch" ARIA role, removing its appearance with CSS, and adding styles to make it look like the classic switch or however we want –check this toggles collection.

And even doing all that, some things cannot be avoided. For example, developers can still set the indeterminate attribute into the base checkbox using JavaScript, which would make the toggle switch invalid.

A native solution would prevent these problems and provide a better experience. Even when it's only an experiment on one browser and has some issues (as we'll describe soon), this attempt is welcomed, and I hope it gets traction.

How does it work?

Safari's implementation is as straightforward as it can be. Just add the switch attribute to a regular checkbox, and you'll be done!

<!-- this will render a checkbox -->
<input type="checkbox" />

<!-- this will render a toggle switch -->
<input type="checkbox" switch />
Enter fullscreen mode Exit fullscreen mode

It's really that simple. There is no need for additional CSS, JS, or anything complicated, and the browser will take care of the rest, including out-of-the-box interactions and styles.

Just add the switch attribute to a checkbox. There is some HTML code in a box: With arrows pointing to checkboxes (from the first line of code) and toggle switches (from the second line of code)

Just add the switch attribute to a checkbox!
 

The default visualization resembles the toggle switch of iOS, but as part of the feature, Safari includes two pseudo-elements ::track and ::thumb that make it easy to update the look and feel of the control. 一丝 added a few examples of how they work (you'll need Safari Technology Preview 185 or above to see them).

Thoughts on this syntax

Having a switch attribute in the checkbox makes it easy, but it also may be misleading as it looks like it equates toggle switches to checkboxes. While this may seem logical to many, it is unfair to the switch control, which becomes a "sub-control" tightly coupled to the checkbox.

They are not the same component: they have different values (checked/unchecked vs. on/off), one of them has an indeterminate state (checkbox, although it's not technically a state), and one is supposed to have an action associated on change (switch).

So why couple them? Just because they look the same or behave in a "similar way"? That's wrong. Following that logic, we shouldn't have inputs of the type number, date, password, email, search... because we already have the text input to handle all of them.

<!-- We don't do this -->
<input type="text" number />
<input type="text" date />
<input type="text" password />

<!-- So why do this? -->
<input type="checkbox" switch />

<!-- Wouldn't this make more sense? -->
<input type="switch" />
Enter fullscreen mode Exit fullscreen mode

In my opinion, a toggle switch should be its own type of input. And not a "sub-type" or "sub-control" dependent on the checkbox.

Pros and cons

As with every technology –especially a new one–, Safari's toggle switch has good and bad things. Here are some pros and cons of this component.

Pros

  • Provides native support for the control: no need for hacky or complex solutions that require too much code and may be error-prone.
  • Straightforward interface: easy to implement (add an attribute!) and easy-to-follow new pseudo-elements (::track and ::thumb).
  • Easy styling in CSS: with the introduction of two pseudo-elements (::track and ::thumb), changing the styles of the components would become simple.
  • Accessibility out of the box: the control is announced correctly by the Voice Over screen reader without needing extra ARIA labels or roles. Adrian Roselli ran tests and shared the results over time.

Summary of the pros in image format

Cons

  • Non-standard feature: this is a Safari proposal and hasn't been adopted by other browsers or taken into the standard.
  • Safari-only feature: as it is a new suggestion by Safari, it will work only on Safari and only in the Technology Preview version of the browser (from version 185).
  • Default styles are sketchy: the toggle looks like the regular iOS toggle, but it presents some issues when scaling and applying zoom.

Considering those cons, it is safe to say that this is not a production-ready feature. At least not yet. It could be an excellent case for progressive enhancement approaches (maybe the reason why they made it an attribute instead of a full type: falling back into a checkbox if not supported), but waiting to see how the component moves forward is better. It is still too early.

Summary of the cons in image format

Conclusion

Toggle switches are a great addition to a browser, and the Safari team did nicely adding it to the Technology Preview version. Still, the implementation feels a bit rushed –maybe Safari is trying to earn brownie points with developers while shaking the "The New IE Browser" label?

One of the things that is more counterintuitive is the used syntax. Having a switch attribute in the checkbox makes it easy, but it also unnecessarily associates both controls and doesn't follow the same notation that other form controls follow. I wouldn't be surprised if this is one thing that changes when –not if– this proposal moves forward. So beware of support and likely changes in the future.

As I said, this is a great addition to the form controls. I hope it triggers a deeper conversation about its addition to the standard. I look forward to what it becomes and the possibility of using it on any browser.

Top comments (10)

Collapse
 
robyngknapp profile image
robyngknapp

Are you ready to transform your home with stylish and luxurious furniture? Discover more about our extensive collection by visiting our website. You can also check out our furniture in person at our showroom. Our friendly and knowledgeable staff are always on hand to help you find the perfect pieces to match your home's aesthetic.

Collapse
 
annaw3 profile image
john devis

In the fast-paced world of e-commerce and retail, efficient logistics are crucial for maintaining customer satisfaction and streamlining operations. This is where pick and pack services come into play. Pick and pack is a vital logistics process designed to handle the preparation and shipping of individual orders efficiently. At the forefront of this service is One Click 3PL, a leader in providing comprehensive pick and pack solutions tailored to meet the diverse needs of businesses.

Collapse
 
annaw3 profile image
john devis

Welcome to PlusPrinters, your premier destination for high-quality printing solutions. At PlusPrinters, we understand the importance of making a lasting impression, whether you need professional business cards, eye-catching flyers, or custom banners. Our commitment to excellence and attention to detail ensures that every print project meets your exact specifications. With state-of-the-art technology and a dedicated team of experts, PlusPrinters is here to turn your vision into reality. Explore our diverse range of services and discover how PlusPrinters can elevate your branding and marketing efforts.

Collapse
 
annaw3 profile image
john devis

Capture the magic of your special day with Wedding Videographer Singapore services from Precious Films. Renowned for their artistry and professionalism, Precious Films offers bespoke wedding videography that beautifully encapsulates every precious moment of your wedding day. By choosing their services, you’re ensuring that your wedding video will be more than just footage—it will be a timeless keepsake that tells the story of your love in the most enchanting way.

Collapse
 
robyngknapp profile image
robyngknapp

London, with its blend of historic charm and modern vibrancy, offers the perfect backdrop for family portrait photography. Whether you prefer the iconic landmarks of the city or the hidden gems in its quieter neighborhoods, there’s no shortage of stunning locations for your photoshoot. At Studio Milla, we specialize in creating family portraits that are not only visually striking but also deeply meaningful. Our goal is to capture the essence of your family’s relationships, ensuring that each photograph reflects your unique connection.

Collapse
 
claudebernet profile image
Claude Bernet

Kinda takes us back 20 years ago when each browser was doing its own thing - designing websites was much harder then. I don't know if other browsers will standardize it, because what it does is pretty useful. But Chrome leads the way.
Regards,
Claude Bernet, Neuchâtel
E-réputation CCO

Collapse
 
robyngknapp profile image
robyngknapp

Dreaming of studying in the USA? Bright Scholarship provides information on Scholarships to study in UK for International Students in the USA, helping students turn their aspirations into reality. Whether you're interested in undergraduate or graduate studies, our platform features scholarships tailored to your academic pursuits.

Collapse
 
contentc6944 profile image
contentc6944

Loklok APK has become the preferred choice of its users due to its unconventional features and huge content library. It facilitates users with massive content from around the globe without charging any subscription fee. It also facilitates users with its offline and online watching experience. Unlike other streaming apps, it does not charge heavy monthly or weekly subscriptions and has no daily streaming limit. See details

Collapse
 
impactfirstid profile image
Impactfirst

Thank you, hope they will include this on safari. I work with web-based-ERP on safari mostly

Collapse
 
veiikash profile image
Bikash Baruah

Doesn't work in mine . Am i doing something wrong ? Using vscode here.