Chrome 49 Beta：CSS 自定义属性，使用 service workers 进行后台同步以及新的 ES2015 特性_html/css

首页

web前端

html教程

Chrome 49 Beta：CSS 自定义属性，使用 service workers 进行后台同步以及新的 ES2015 特性_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:25 AM

英文原文： Chrome 49 Beta: CSS custom properties, background sync with service workers, and new ES2015 features

作者：Josh Karlin，Syncing Samurai

除非另外注明，下面介绍的更新适用于最新 Chrome Beta 版（Android、Chrome OS、Linux、Mac 和 Windows）。

CSS 自定义属性

现代网站的 CSS 文件中常常含有重复的值，例如，在整个页面中重复使用一个配色方案中的少数几种颜色。更改此数据非常繁琐且容易出错，因为它分散在一个或多个 CSS 文件中。为改善这种情况，Chrome 现在支持 CSS 自定义属性，允许开发者无需使用外部框架就可以在 CSS 中定义属性变量。然后，开发者可以使用 var() 函数在文档中的任意位置引用这些自定义属性。

更改自定义属性可以更新网站中的多个组件

CSS 自定义属性也可以跨 shadow root 继承，因此，Web 组件可以提供“样式 API”，从而可以在不知道组件内容的情况下调整组件并设置主题。Polymer 库利用此平台功能简化定制组件。

使用 service workers 进行后台同步

以前，在通过网络发送更新之前，如果用户没有停留在网站上，网站可能会丢失本地修改或不同步。例如，如果用户点击“发送”并迅速离开，电子邮件网页客户端可能会丢失发送中的消息。新的 Background Sync API 通过在设备下一次连接到网络（即使并未打开该网站）时，由 service worker 执行一次性同步用户的本地更改来提升网络可靠性。

改进的 ECMAScript 2015 支持

ES2015 规范 (ES6) 是对 JavaScript 进行的重大更新，使开发者可以编写更清晰易读、更强大、更省内存的应用逻辑。最新版本的 Chrome V8 引擎支持 91% 的 JavaScript ES2015 功能。现在，从数组和对象提取数据时或设置函数参数默认值时，开发者可以使用解构和默认参数来避免样板文件代码。代理对象和 Reflect API 可以定制以前隐藏的对象行为，如属性查找和分配。最新版本的 Chrome 还可以构建代码块级结构，如在 strict mode 之外可用的 class 和 let 。

Keygen 和 application/x-x509-user-cert

元素用于生成密钥对，后者是 HTML 表单的一部分。尽管这可以用于增强用户安全性，但和通过 MIME 类型 application/x-x509-user-cert 发送的用户证书也可能被人利用来中断用户的安全通信，干扰其设备的运行或在未经用户同意的情况下跟踪用户。今后，将默认返回一个空字符串，并将不再自动下载和安装通过 MIME 类型 application/x-x509-user-cert 发送的用户证书。

此版本中的其他特性

经用户同意，网站可以通过使用新的 MediaRecorder API 录制音频和视频，无需依靠插件。
开发者现在可以使用 CSS font-display 控制字体加载方式，从而提升页面加载速度。
现在，网站可以检查哪个 service worker 客户端发起了 fetch 请求，并使用 FetchEvent.clientID 属性返回专用响应。
对于不连续的滚动设备，如鼠标滚轮，Chrome 现在以动画方式呈现滚动，从而可以实现更顺畅的用户体验。
Chrome 现在更加严格地保护安全的 Cookie ，并允许开发者使用 Cookie 前缀标识安全的 Cookie。
现在，网站可以使用 disableRemotePlayback 属性（作为 Remote Playback API 一部分）防止远程播放媒体。
Event.timeStamp 现在使用 DOMHighResTimeStamp 取代 DOMTimeStamp ，从而可以实现高精度的滚动延迟和指针速度测量。
Promise 拒绝处理功能现在可以使用 UnhandledRejection 和 RejectionHandled 事件进行跟踪。
现在，通过使用 URLSearchParams ，开发者可以更轻松地与 URL 的 GET 参数交互。
WebAudio API 现在支持 IIR Filters 、 OfflineAudioContext.suspend() 和 resume() ，以及 DecodeAudioData 中的 promise。
WindowClient.navigate() 允许 service worker 将受控窗口定位到新的 URL。
网站可以检测用户是否已请求减少数据使用，并通过选择 Save-Data 头字段以更轻快便捷地作出响应。

细微更改

Chrome 的内容安全政策现在允许“script-src http:”与 HTTP 和 HTTPS 匹配，从而防止开发者无意中拒绝安全资源。
Fetch API 的 Request.mode 枚举现在支持导航模式，从而更好地符合规范要求。
现在，匹配属性选择器时，开发者可以选择忽略大小写。
现在，开发者可以创建不公开的弹出窗口，页面使用 ‘rel=noopener’ 打开此窗口。
addEventListener() 和 removeEventListener() 现在需要它们的前两个参数，同时使用字典语法指定“capture”选项，从而更好地符合规范要求和提高灵活性。
Chromium 现在支持 TLS 中的标准版 ChaCha-Poly1305 加密套件。
Navigator.getStorageUpdates() 已删除，因为它不再存在于 Navigator 规范中。
MouseEvent.webkitMovementX/Y 已删除，代之以无前缀版本。
initTouchEvent 已弃用，代之以 TouchEvent 构造函数，以更好地符合规范要求，并将在 Chrome 53 中一起删除。
Object.observe() 已弃用，因为它不再适应标准化的趋势要求，并将在未来的版本中删除。
getComputedStyle(e).cssX 行为已弃用，因为它并非正式的规范的组成部分。
某些 RTCPeerConnection 旧有方法的非标准用法已弃用，以实现基于 promise 的 WebRTC 规范实施。
Document.defaultCharset 已弃用，以更好地符合规范要求。