新的 HTML 控件登陆 Safari

简介: #html#网络开发者

本机切换开关登陆在一个浏览器中。Safari 在Safari 技术预览版 185 版本中引入了这个新的 HTML 控件,然后在 186 版本中对其进行了扩展

创建半原生 HTML 切换开关组件非常困难。它涉及使用复选框、添加“开关”ARIA 角色、使用 CSS 删除其外观,以及添加样式以使其看起来像经典开关或我们想要的任何样式 -检查此切换集合

即使做到了这一切,有些事情还是无法避免。例如,开发人员仍然可以使用 JavaScript 将不确定属性设置到基本复选框中,这将使切换开关无效。

本机解决方案可以防止这些问题并提供更好的体验。即使它只是在一种浏览器上进行的实验并且存在一些问题(正如我们很快将描述的),这种尝试也是受欢迎的,我希望它能得到关注。

它是如何工作的?

Safari 的实现非常简单。只需将该switch属性添加到常规复选框即可完成!

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

真的就是这么简单。不需要额外的 CSS、JS 或任何复杂的东西,浏览器将处理其余的事情,包括开箱即用的交互和样式。

只需将 switch 属性添加到复选框即可!

 

默认的可视化类似于 iOS 的切换开关,但作为该功能的一部分,Safari 包含两个伪元素 ::track::thumb可以轻松更新控件的外观和感觉。一目了然地添加了一些关于它们如何工作的示例(您'需要 Safari 技术预览版 185 或更高版本才能看到它们)。

对这个语法的思考

switch在复选框中添加属性会很容易,但也可能会产生误导,因为它看起来将切换开关等同于复选框。虽然这对许多人来说似乎是合乎逻辑的,但对于开关控件来说这是不公平的,因为它成为与复选框紧密耦合的“子控件”。

它们不是相同的组件:它们具有不同的值(选中/未选中与开/关),其中一个具有不确定状态(复选框,尽管从技术上讲它不是一种状态),并且应该有一个与改变(切换)。

那么为什么要把他们结合起来呢?仅仅因为他们看起来相同或行为方式“相似”?那是错误的。number按照这个逻辑,我们不应该有, date, password, email, ...类型的输入search,因为我们已经有了处理所有这些的文本输入。

<!-- 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" />

在我看来,切换开关应该是它自己的输入类型。而不是依赖于复选框的“子类型”或“子控件”。

优点和缺点

与每项技术(尤其是新技术)一样,Safari 的切换开关也有优点和缺点。以下是该组件的一些优点和缺点。

优点

  • 为控件提供本机支持:不需要需要太多代码并且可能容易出错的黑客或复杂的解决方案。
  • 简单的界面:易于实现(添加属性!)并且易于遵循新的伪元素(::track::thumb)。
  • CSS 中的简单样式:通过引入两个伪元素(::track::thumb),更改组件的样式将变得简单。
  • 开箱即用的辅助功能:语音屏幕阅读器可以正确朗读控件,无需额外的 ARIA 标签或角色。随着时间的推移,阿德里安·罗塞利进行了测试并分享了结果

缺点

  • 非标准功能:这是 Safari 的提案,尚未被其他浏览器采用或纳入标准。
  • 仅限 Safari 的功能:由于这是 Safari 的新建议,因此它只能在 Safari 上运行,并且只能在浏览器的技术预览版(从版本 185 开始)中运行。
  • 默认样式很粗略:切换看起来像常规的 iOS 切换,但在缩放和应用缩放时会出现一些问题

考虑到这些缺点,可以肯定地说这不是一个可投入生产的功能。至少现在还没有。这可能是渐进增强方法的一个很好的例子(也许是他们将其设为属性而不是完整类型的原因:如果不支持,则返回到复选框),但等待查看组件如何向前移动会更好。现在还为时过早。

最后的想法

切换开关是浏览器的一个很好的补充,Safari 团队很好地将它添加到了技术预览版本中。尽管如此,实施感觉有点仓促——也许 Safari 试图在摆脱“新 IE 浏览器”标签的同时赢得开发者的青睐?

更违反直觉的事情之一是使用的语法。switch在复选框中添加一个属性会很容易,但它也不必要地关联两个控件,并且不遵循其他表单控件所遵循的相同符号。如果这是在该提案向前推进时(而不是如果)发生变化的一件事,我不会感到惊讶。因此,请注意未来的支持和可能的变化。

正如我所说,这是对表单控件的一个很好的补充。我希望它能引发关于将其添加到标准中的更深入的讨论。我期待它会变成什么样子以及在任何浏览器上使用它的可能性。

目录
相关文章
|
6月前
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
172 0
|
29天前
|
数据安全/隐私保护
HTML表单(Form)常用控件
HTML表单(Form)常用控件。
14 1
|
3月前
|
JSON 定位技术 数据格式
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)(下)
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)
31 0
|
3月前
|
JavaScript 前端开发 定位技术
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)(上)
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)
33 0
|
前端开发 JavaScript
HTML+CSS+JS 实现一个漂亮的登陆页面
HTML+CSS+JS 实现一个漂亮的登陆页面
407 1
HTML+CSS+JS 实现一个漂亮的登陆页面
|
移动开发 前端开发 JavaScript
【H5】html实现微信授权登陆
在一次前端项目中,需要在网页端拉起微信,实现微信授权登录,然后把调用微信API,获取到用户信息,返回给后端。 网页授权分为两种,一种静默授权,一种非静默授权。微信网页授权是通过OAuth2.0机制实现的,在用户授权给公众号后,公众号可以获取到一个网页授权特有的接口调用凭证(网页授权access_token),通过网页授权access_token可以进行授权后接口调用,如获取用户基本信息; 这篇文章就讲诉一下如何实现微信授权登录。
438 0
【H5】html实现微信授权登陆
Angular form控件原生HTML代码里ng-reflect-form属性和其值的生成时机
Angular form控件原生HTML代码里ng-reflect-form属性和其值的生成时机
122 0
Angular form控件原生HTML代码里ng-reflect-form属性和其值的生成时机
|
开发工具 git iOS开发
iOS中支持HTML文本的标签控件——MDHTMLLabel
iOS中支持HTML文本的标签控件——MDHTMLLabel
345 0
|
移动开发 HTML5
html5常用控件
input type="number" 数字: let $num = $('#number'); $num.on('change input',function (e) {//监听改变和输入事件 console.
1141 0