上周发布的 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: transformCSS属性。 \\
  • 低通和高通双二阶滤波器现在支持更多滤波特性。 \\
  • --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等规范相关推荐

  1. Chrome 53 支持 Shadow DOM 等规范

    上周发布的 Chrome 53 带来了一系列实验性规范的支持,如Shadow DOM,它为复杂网页的开发提供便利.同时,针对移动平台,Chrome 53也提供了PaymentRequest接口.自定义 ...

  2. Chrome 53 Beta一些有意思的改动

    原文链接: http://blog.chromium.org/2016... 译者:Icarus 邮箱:xdlrt0111@163.com 如果没有特殊说明的话,以下都是应用在Android,Chro ...

  3. Shadow DOM的理解

    Shadow DOM的理解 Shadow DOM是HTML的一个规范,其允许在文档document渲染时插入一颗DOM元素子树,但是这棵子树不在主DOM树中,Shadow DOM如果按照英文翻译的话可 ...

  4. [译] 用 Shadow DOM v1 和 Custom Elements v1 实现一个原生 Web Component

    原文地址:Make a Native Web Component with Custom Elements v1 and Shadow DOM v1 原文作者:Pearl Latteier 译文出自: ...

  5. html页面和Chrome开发者工具elements界面不一致的一个可能原因:没有在Chrome开发者工具里打开对Shadow DOM显示的支持

    一个例子: 虽然UI上input field里显示的是Jerry,但是Chrome开发者工具里面并没有显示出来. 注意上图最下方,显示的input后面有#shadow-root.div. 打开sett ...

  6. Google Chrome 53 Beta 引入影子 DOM V1

    Google Chrome 53 Beta引入影子(Shadow)DOM V1,以及支付请求(PaymentRequest)API. 与之前影子DOM V0明显不同,V1弃用了影子DOM对多个根节点的 ...

  7. 理解Shadow DOM

    1. 什么是Shadow DOM? Shadow DOM 如果按照英文翻译的话可以理解为 影子DOM, 何为影子DOM呢?可以理解为一般情况下使用肉眼看不到的DOM结构,那如果一般情况下看不到的话,那 ...

  8. Shadow DOM及自定义标签

    参考链接:点我 一.什么是Shadow DOM Shadow DOM,直接翻译的话就是 影子 DOM,可以理解为潜藏在 DOM 结构中并且我们无法直接控制操纵的 DOM 结构.类似于下面这种结构 Sh ...

  9. 纯CSS菜单样式,及其Shadow DOM,Json接口 实现

    先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 先放一张效果图         Part 1:纯CSS菜单样式 先放样式代码 1 <sty ...

最新文章

  1. linux攻击端口,Linux 常见攻击端口封杀表
  2. python输入与输出165
  3. 使用Markdown
  4. 如何查看Win11系统的版本号
  5. 蓝桥杯第六届省赛JAVA真题----生命之树
  6. cnapckSurround c++builder Region 代码折叠快捷键
  7. C语言程序设计谭浩强版 六
  8. vue.js 带有正则选择的车牌控件组件
  9. 计算机专业论文答辩ppt,计算机毕论文答辩PPT(完整版).ppt
  10. 在线思维导图制作技巧汇总:超简单思维导图绘制方法
  11. JavaScript前端数据呈现——Table会拐弯的column,数据分多列展示
  12. oho,找工作有点难度
  13. cont在c语言用法,在S7-1500中指令TSEND_C and TRCV_C如何使用?
  14. .Net/C#: 一个将在线简体中文网页转为繁体中文页简单方法
  15. 解决腾讯地图标记多个点,只渲染最后一个点问题
  16. docker安全之容器资源控制 安全加固
  17. MC7812BTG详细参数介绍
  18. redis 3.0.7 cluster 集群部署
  19. vim代码着色 (字体控)
  20. 【R语言与数据分析实战】绘图

热门文章

  1. 如何自己制作装机工具装系统,硬装系统
  2. s+清辅音,读作对应的浊辅音
  3. 【oracle】查询===Oracle数据库 子查询(嵌套查询)简单例子
  4. 如何改变思维导图的导图结构
  5. mac双系统w ndows8,Mac安装win8.1双系统多个分区教程
  6. python实现视频ai换脸_python 实现 AI 换脸
  7. 《新理解矩阵1》:矩阵是什么?
  8. 微信公众号开发__微信网页授权并获取用户基本信息(是否关注公众号、头像、昵称等)
  9. 互联网晚报 | 11月1日 星期一 | 小米之家第10000家店开业;中国移动11月4日首发上会;中国平安总资产首破10万亿元...
  10. 【b503】篝火晚会