转载

Chrome 49 Beta:CSS 自定义属性,使用 service workers 进行后台同步以及新的 ES2015 特性

英文原文: 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() 函数 在文档中的任意位置 引用这些自定义属性 。

Chrome 49 Beta:CSS 自定义属性,使用 service workers 进行后台同步以及新的 ES2015 特性

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

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

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

Post Views: 1

除非特别声明,此文章内容采用 知识共享署名 3.0 许可,代码示例采用 Apache 2.0 许可。更多细节请查看我们的 服务条款 。

原文  http://chinagdg.org/2016/02/chrome-49-beta-css-custom-properties/
正文到此结束
Loading...