Chrome 53 支持Shadow DOM、PaymentRequest等规范
上周发布的 Chrome 53 带来了一系列实验性规范的支持,如Shadow DOM,它为复杂网页的开发提供便利。同时,针对移动平台,Chrome 53也提供了PaymentRequest接口、自定义通知徽章等功能。
\\
Shadow DOM V1
\\
HTML、CSS和JavaScript是非常强大的开发语言,但是当代码量变大时,维护难度会大大增加。另外,网站嵌入的第三方内容而引入的样式,不会影响到其他的部分。Chrome 53支持Shadow DOM V1,该规范能够将元素的样式和子DOM节点单独封装,与主文档树相互独立。这样能够提升大型或富客户端网站的可维护性。Shadow DOM V1版本规范和V0版本有显著的不同,该版本已经被各大主流浏览器厂商广泛认可。Chrome将同时支持两个版本的API,直到有足够数量的开发者开始使用V1版本。ShadowRoot的行为由其创建时所调用的API决定(V0版本使用Element.createShadowRoot()
而V1版本使用Element.attachShadow()
创建)。
\\
PaymentRequest API
\\
在网页上完成支付操作对用户来说是个冗长的流程,这样会降低网站支付转化率。虽然自动填充可以让用户输入信息更加方便,但是在移动设备上高效数据输入仍然是一个挑战。PaymentRequest接口允许通过信用卡或者Android Pay在网页上快速、无缝和安全的支付。它还能够在无需输入的情况下,让用户提供账单地址、物流信息和支付信息等内容。PaymentRequest接口在Android版Chrome上可用,对更多平台支持即将推出。
\\
Payment Request API演示
\\
Android版Chrome自动播放静音视频
\\
视频是网站和用户交互非常好的方式,但是视频不合时宜的播放会令人不快。这种场景在移动设备上更为常见,因为用户可能处于不能开启音频的环境。Android版Chrome允许静音的视频在没有用户交互的情况下开始播放。如果视频被标记为静音,且有autoplay属性,Chrome将会在视频对用户可见时开始播放。开发者也可以通过脚本在无需用户交互的情况下播放静音视频。静音视频在用户操作前播放音频将会被自动暂停。
\\
其他新增特性
\\
- 网站发送通知给Android 6.0(Marshmallow)或以后版本的Android设备,现在可以提供显示在状态栏的徽章,以代替Chrome logo。 \\
- Notification对象提供了读取函数,以读取通知的操作按钮和振动模式。 \\
- 对于用户设置了“检测和运行重要插件内容”之后,跨域插件内容中包含小于5x5像素的图片将不再加载。 \\
- allow-presentation的sandbox标签允许网站控制iframe是否可以展现给外部设备。 \\
input
元素上的pattern属性现在可以使用unicode标记,以提升语法检查和其他正则表达式工效。 \\- 如果祖先元素透明度小于1,3D定位元素将会被扁平化。 \\
- 为了防止视觉假象,所有内容的变换缩放改动都将会重新光栅化,除非该元素包含
will-change: transform
CSS属性。 \\ - 低通和高通双二阶滤波器现在支持更多滤波特性。 \\
--webkit-filter
目前是无前缀属性filter的别名,二者行为完全相同,不再有独立的行为。 \\- --webkit-user-select现在支持
all
属性,它强制选取包含完整的元素及其后继元素。 \\ - Web Bluetooth API目前以初始使用的形式在一些平台上试验性可用,它允许网站通过蓝牙通用属性配置文件(Bluetooth Generic Attribute Profile,GATT)和附近设备进行交互。 \\
- text-size-adjust属性允许网站控制在移动设备上字体大小是否自动缩放。\
弃用和互操作性的改进
\\
- 通过脚本生成的事件将不再触发默认行为,以提升规范合规性和浏览器互操作性。 \\
- HTTP/0.9已经被废弃,取而代之的是HTTP/1.0,它增加了对响应头的支持。 \\
- 出于安全考虑,TLS的Diffie-Hellman加密算法已经被移除,该算法已经在Chrome 51版本中被弃用。 \\
- TextEncoder API不再支持参数,而是始终使用utf-8编码。 \\
- 由于最近安全问题,赛门铁克公司颁发或者证书链中包含赛门铁克公司的新证书,在Chrome中将不再被授信,除非新证书包含了证书透明度(Certificate Transparency)信息。\
感谢韩婷对本文的审校。
\
给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ,@丁晓昀),微信(微信号:InfoQChina)关注我们。
Chrome 53 支持Shadow DOM、PaymentRequest等规范相关推荐
- Chrome 53 支持 Shadow DOM 等规范
上周发布的 Chrome 53 带来了一系列实验性规范的支持,如Shadow DOM,它为复杂网页的开发提供便利.同时,针对移动平台,Chrome 53也提供了PaymentRequest接口.自定义 ...
- Chrome 53 Beta一些有意思的改动
原文链接: http://blog.chromium.org/2016... 译者:Icarus 邮箱:xdlrt0111@163.com 如果没有特殊说明的话,以下都是应用在Android,Chro ...
- Shadow DOM的理解
Shadow DOM的理解 Shadow DOM是HTML的一个规范,其允许在文档document渲染时插入一颗DOM元素子树,但是这棵子树不在主DOM树中,Shadow DOM如果按照英文翻译的话可 ...
- [译] 用 Shadow DOM v1 和 Custom Elements v1 实现一个原生 Web Component
原文地址:Make a Native Web Component with Custom Elements v1 and Shadow DOM v1 原文作者:Pearl Latteier 译文出自: ...
- html页面和Chrome开发者工具elements界面不一致的一个可能原因:没有在Chrome开发者工具里打开对Shadow DOM显示的支持
一个例子: 虽然UI上input field里显示的是Jerry,但是Chrome开发者工具里面并没有显示出来. 注意上图最下方,显示的input后面有#shadow-root.div. 打开sett ...
- Google Chrome 53 Beta 引入影子 DOM V1
Google Chrome 53 Beta引入影子(Shadow)DOM V1,以及支付请求(PaymentRequest)API. 与之前影子DOM V0明显不同,V1弃用了影子DOM对多个根节点的 ...
- 理解Shadow DOM
1. 什么是Shadow DOM? Shadow DOM 如果按照英文翻译的话可以理解为 影子DOM, 何为影子DOM呢?可以理解为一般情况下使用肉眼看不到的DOM结构,那如果一般情况下看不到的话,那 ...
- Shadow DOM及自定义标签
参考链接:点我 一.什么是Shadow DOM Shadow DOM,直接翻译的话就是 影子 DOM,可以理解为潜藏在 DOM 结构中并且我们无法直接控制操纵的 DOM 结构.类似于下面这种结构 Sh ...
- 纯CSS菜单样式,及其Shadow DOM,Json接口 实现
先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 先放一张效果图 Part 1:纯CSS菜单样式 先放样式代码 1 <sty ...
最新文章
- linux攻击端口,Linux 常见攻击端口封杀表
- python输入与输出165
- 使用Markdown
- 如何查看Win11系统的版本号
- 蓝桥杯第六届省赛JAVA真题----生命之树
- cnapckSurround c++builder Region 代码折叠快捷键
- C语言程序设计谭浩强版 六
- vue.js 带有正则选择的车牌控件组件
- 计算机专业论文答辩ppt,计算机毕论文答辩PPT(完整版).ppt
- 在线思维导图制作技巧汇总:超简单思维导图绘制方法
- JavaScript前端数据呈现——Table会拐弯的column,数据分多列展示
- oho,找工作有点难度
- cont在c语言用法,在S7-1500中指令TSEND_C and TRCV_C如何使用?
- .Net/C#: 一个将在线简体中文网页转为繁体中文页简单方法
- 解决腾讯地图标记多个点,只渲染最后一个点问题
- docker安全之容器资源控制 安全加固
- MC7812BTG详细参数介绍
- redis 3.0.7 cluster 集群部署
- vim代码着色 (字体控)
- 【R语言与数据分析实战】绘图
热门文章
- 如何自己制作装机工具装系统,硬装系统
- s+清辅音,读作对应的浊辅音
- 【oracle】查询===Oracle数据库 子查询(嵌套查询)简单例子
- 如何改变思维导图的导图结构
- mac双系统w ndows8,Mac安装win8.1双系统多个分区教程
- python实现视频ai换脸_python 实现 AI 换脸
- 《新理解矩阵1》:矩阵是什么?
- 微信公众号开发__微信网页授权并获取用户基本信息(是否关注公众号、头像、昵称等)
- 互联网晚报 | 11月1日 星期一 | 小米之家第10000家店开业;中国移动11月4日首发上会;中国平安总资产首破10万亿元...
- 【b503】篝火晚会