欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-04 13:50:51
...
英文原文: 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 已弃用,以更好地符合规范要求。

Post Views: 1

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