摘要:在中,针对属性的一个子集实现了类型对象模型,这些属于的一部分。返回一个对象,该对象指定每个受限制属性的值或值范围。例如,这会在导航请求期间发生。按照规范,已被删除。
原文链接:Chrome 66 Beta: CSS Typed Object Model, Async Clipboard API, AudioWorklet
除非另有说明,否则下文所述的更改适用于 Android,Chrome OS,Linux,macOS 和 Windows 的最新 Chrome Beta 版本。在 ChromeStatus 上查看 Chrome 66 中完整的特性列表。
的 ImageBitmap 渲染上下文从历史上看,将图像渲染到画布上首先要创建一个 标签,然后将其内容呈现到画布上。这会导致图像的多个副本存储在内存中。新的渲染上下文可以流线化 ImageBitmap 对象的显示,因而可以避免内存重复,并且更高效。
这个例子展示了如何使用 ImageBitmapRenderingContext。例子主要演示了关于图像像素的转移。这个例子是把像素从 blob 转移到 ,但像素也可以在 元素之间移动。请注意,blob 是压缩的,因此它不是内存中的完整副本。
const image = await createImageBitmap(imageBlob); const canvas = document.createElement("canvas"); const context = canvas.getContext("bitmaprenderer"); context.transferFromImageBitmap(image); canvas.toBlob((outputJPEGBlob) => { // Do something with outputJPEGBlob. }, "image/jpeg");
如果不使用 createImageBitmap(),那么 imageBlob 的解码会被延后(lazily decoded),这会导致问题。另一方面,createImageBitmap() 是异步的,它可以让你在使用之前对它进行完整解码。例如,在 WebGL 游戏运行过程种,可以使用它来随时加载新的纹理。
CSS 类型对象模型从历史上看,想要操纵 CSS 属性的开发人员必须只能操纵字符串,然后再将其转换为类型化表示。更糟的是,当开发人员试图读取 Javascrip 中 CSS 属性的值时,这种类型的值被转换为字符串。
在 Chrome 66 中,针对 CSS 属性的一个子集实现了 CSS 类型对象模型(OM)Level 1,这些属于 Houdini 的一部分。Type OM 通过将 CSS 值暴露为类型化的 JavaScript 对象而不是字符串来减轻开发人员和浏览器的负担。除了允许对赋值给 CSS 属性的值进行高效处理外,Typed OM 还允许开发人员编写更易于维护且易于理解的代码。
一个简单的例子说明了这一点。以前,如果我想设置元素的不透明度,我可以这样做:
el.style.opacity = 0.3; el.style.opacity === "0.3"
使用 CSSOM:
el.attributeStyleMap.set("opacity", CSS.number("0.3")); el.attributeStyleMap.get("opacity").value === 0.3
上面返回值的类型是 CSSUnitValue,比字符串更容易操作。
异步剪贴板 API(译者(justjavac)注:Google 开发者中心有一篇文章介绍异步剪贴板 API Unblocking Clipboard Access,我也已经翻译了中文版 Async Clipboard API:异步剪贴板 API)
AudioWorklet传统 ScriptProcessorNode 是异步的,而且需要线程跳跃(译者注:会在 UI 线程和用户线程之间跳跃),这可能会产生不稳定的音频输出。AudioWorklet 对象提供了一个新的同步 JavaScript 执行上下文,它允许开发人员以编程方式控制音频,而不会在输出音频中产生额外延迟,更加稳定高效。
您可以在 Google Chrome Labs 查看示例代码以及其他示例代码。
除了 AudioWorklet 之外,其他 worklet API 正在构建中。PaintWorklet 在 Chrome 65 / Opera 52 中已经发布。AnimationWorklet 计划中。ScriptProcessorNode 会在 AudioWorklet 发布一段时间后会被弃用。
本发行版中的其他功能 Blink > AnimationThe add and accumulate compositing operations are intended for building modularized animations. The add and accumulate keywords will be supported in Chrome soon. Until then, they will no longer throw errors. This is to maintain compatibility with Firefox and other implementations.
Blink > CSSCSS 有 2 个新功能。
CSS Values and Units Module Level 4 支持了数学表达式 calc(), min(),max()。
rgb() 和 rgba() 函数中现在允许浮点值。
Blink > Feature Policy默认情况下,deviceorientation,deviceorientationabsolute,和 devicemotion 事件仅限于顶级文档和相同来源的子框架,就如同 feature policy 对这些特性设置为 "self" 一样。要修改此行为,请明确 enable or disable the specific feature。
Blink > File API尝试从无效或不存在的 BLOB URL 读取时 ,File API 会导致网络错误,而不是 404。
Blink > FormsHTML 表单有 2 个新功能。
按照规范, 和 支持 autocomplete 属性。
按照 HTML 规范的要求),一个可变的复选框现在触发 3 个事件:click 事件,然后是 input 事件,然后是 change 事件。以前只有 click 和 change 事件被触发。
Blink > Fullscreen如果全屏模式下的页面打开弹出窗口并调用 window.focus(), 该页面会退出全屏。如果弹出窗口以其他方式接收焦点,则不会发生这种情况。
Blink > GetUserMediaMediaStreamTrack 接口有一个新方法 getCapabilities()。
返回一个 MediaTrackCapabilities 对象,该对象指定每个受限制属性的值或值范围。该功能因设备而异。
Blink > JavaScript几个 JavaScript 更改。
Function.prototype.toString() 函数现在返回源代码中写入的内容。这包括可能已经使用的空白和其他文本。例如,如果函数关键字和函数名称之间存在注释,则除了关键字和名称之外,现在还返回注释。
JSON 现在是 ECMAScript 的一个语法子集,它允许字符串文本中的行分隔符(U+2028)和段落分隔符(U+2029)符号。
try 语句的 catch 子句现在可以在没有参数的情况下使用。
除了之前早已实现的 String.prototype.trim() 外,Chrome 66 实现了 String.prototype.trimStart() 和 String.prototype.trimLeft() 用来将字符串两侧的空白去除。而 trimLeft() 和 trimRight() 是为了保持为向后兼容性而提供的非标准的方法别名。
Array.prototype.values() 方法返回一个新的数组迭代器对象,该对象包含数组中每个索引的值。
Blink > Layout布局有 2 个新功能。
grid 前缀:
grid-gap 变 gap
grid-row-gap 变 row-gap
grid-column-gap 变 column-gap
所有三者的默认值是 normal,前缀属性是新名称的别名。请注意,column-gap 属性已经存在并被 css-multicol 使用。
当元素的 display 属性是 table-row,table-row-group, table-header-group,table-footer-group,table-cell,table-caption,并具有 transform 属性时,此元素可以作为 fixed-position 元素的包含块。Blink 目前不能把 媒体有 2 个新功能。 正如之前博客所介绍的那样,autoplay 只有当媒体不会播放声音时,用户主动点击后,或者(桌面版)如果用户以前在该网站上表现出对媒体的兴趣时才允许播放。这样做会在第一次打开网页时减少意外的视频播放和声音。 (译者(justjavac)注:目前运行被自动播放的内容包括:内容被静音、内容只包含视频(无音频)、用户在浏览会话期间点击网站上的某个地方、在移动设备上如果该网站已被用户添加到主屏幕、如果用户在桌面版浏览器上频繁播放该媒体)
Media Capabilities, Decoding Info API 允许网站获取有关客户端的解码能力的更多信息。这为用户提供了更多关于媒体流的选择权,可以使客户端更加平滑高效地解码,而非仅仅基于可用带宽和屏幕大小分辨率进行解码。 Fetch API 有 2 个新功能。
Request 对象现在支持 keepalive 属性,该属性允许在关闭标签后继续 fetch。通过在构造函数的初始化对象中传递布尔值来调用此功能。它的值可以从对象本身读回。该属性也可以和 sendBeacon() 一起使用。 新的 AbortSignal 和 AbortController 接口允许取消 fetch 操作。创建一个 AbortController 对象并将其 signal 属性作为 option 传递给 fetch。调用 abortController.abort() 取消 fetch。 我们之前撰写的 abortable fetch article 中有更多信息,下面是一个代码示例。 (题外话:cancelable-promises 提案在进入 stage 1 的时候被取消掉了) ServiceWorker 有两个变化。 如果 request 的模式是 same-origin,而 response 的模式是 CORS,ServiceWorker 不能再响应。这是最近添加到 Fetch 规范的安全措施。
FetchEvent.clientId 现在返回一个空字符串,而不是 null。例如,这会在导航请求期间发生。 Chrome 现在支持 RTCRtpSender.dtmf 属性。这取代了 CreateDTMFSender() 尚未弃用的功能。 object-position 和 perspective-origin 属性不再接受 3 个部分组成的值,例如 top right 20%。此更改也适用于基本形状和渐变。有效位置值必须始终有 1, 2 或 4 个部分。 按照规范,ImageCapture.prototype.setOptions() 已被删除。 按照规范,document.createTouch() 和 document.createTouchList() 已被删除。 在规范更改之后,AudioParam.prototype.value 的自动解压缩功能从 Chrome 中移除。如果您需要平滑处理 AudioParam 的更改,请使用 AudioParam.prorotype.setTargetAtTime()。 文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。 转载请注明本文地址:https://www.ucloud.cn/yun/52080.html 摘要:在中,针对属性的一个子集实现了类型对象模型,这些属于的一部分。返回一个对象,该对象指定每个受限制属性的值或值范围。例如,这会在导航请求期间发生。按照规范,已被删除。
原文链接:Chrome 66 Beta: CSS Typed Object Model, Async Clipboard API, AudioWorklet
除非另有说明,否则下文所述的更改适用于 Android,Ch... 摘要:它很适合用于阅读剪贴板文本的新异步方法安全和权限剪贴板访问一直为浏览器带来安全问题。让网页不受限制地读取剪贴板更加麻烦。为了防止滥用,只有当页面处于活动选项卡时才允许剪贴板访问。
在过去的几年里我们只能使用 document.execCommand 来操作剪贴板。不过,这种操作剪贴板的操作是同步的,并且只能读取和写入 DOM。
现在 Chrome 66 已经支持了新的 Async Cl... 摘要:它很适合用于阅读剪贴板文本的新异步方法安全和权限剪贴板访问一直为浏览器带来安全问题。让网页不受限制地读取剪贴板更加麻烦。为了防止滥用,只有当页面处于活动选项卡时才允许剪贴板访问。
在过去的几年里我们只能使用 document.execCommand 来操作剪贴板。不过,这种操作剪贴板的操作是同步的,并且只能读取和写入 DOM。
现在 Chrome 66 已经支持了新的 Async Cl... 摘要:发布一直是数据可视化的不错选择。本次发布的版本的更新包括使用代替回调函数,等高线图和密度图。详情发布该版本更新包括模块调整,模块新增函数判断终端是否支持颜色,弃用函数和等。
01. D3.js 5.0 发布
D3 一直是 JavaScript 数据可视化的不错选择。本次发布的 5.0 版本的更新包括:使用 Promise 代替回调函数,等高线图和密度图。
详情:https://gith... 摘要:发布一直是数据可视化的不错选择。本次发布的版本的更新包括使用代替回调函数,等高线图和密度图。详情发布该版本更新包括模块调整,模块新增函数判断终端是否支持颜色,弃用函数和等。
01. D3.js 5.0 发布
D3 一直是 JavaScript 数据可视化的不错选择。本次发布的 5.0 版本的更新包括:使用 Promise 代替回调函数,等高线图和密度图。
详情:https://gith... 阅读 1459·2021-10-14 09:43 阅读 1405·2021-10-09 09:58 阅读 1917·2021-09-28 09:42 阅读 3698·2021-09-26 09:55 阅读 1732·2021-08-27 16:23 阅读 2684·2021-08-23 09:46 阅读 890·2019-08-30 15:55 阅读 1354·2019-08-30 15:54,,, 作为 fixed-position 元素的包含块。
Blink > Media
const controller = new AbortController();
const signal = controller.signal;
const requestPromise = fetch(url, { signal });
// Abort the fetch:
controller.abort();
相关文章
Chrome 66 Beta:CSS 类型对象模型,异步剪贴板 API,AudioWorklet,等
Chrome 66 新增异步剪贴板 API
Chrome 66 新增异步剪贴板 API
FCC 成都社区·前端周刊 第 5 期
FCC 成都社区·前端周刊 第 5 期
发表评论
0条评论
张宪坤
男|高级讲师
TA的文章
阅读更多
针对Python初学者,这13个好用到起飞的小技巧!
VMShell公司ASN:147002正式SpeedTest生效香港CMI线路VPS,即将增加G口美
NCCK:香港CN2服务器,双E5-处理器,24核32G内存,10M无限流量CN2GIA,五折$69
Python爬虫:通过做项目,小编了解了酷狗音乐的加密过程
马斯克承认特斯拉最新的“完全自动驾驶测试版”仍存在不足
腾讯云秒杀:云服务器74元/年起,1C2G6M三年仅219元起
纯css实现叉号
如何让被遮挡层可以进行事件点击?(纯CSS方法)