Chrome 111 beta发布!新增6大CSS,8大Web API功能?

更新日期: 2023-05-06阅读: 1.4k标签: api

1.Canary、Dev、Beta、正式版区分

除去开源的 Chromium,Chrome 一共有Canary、Dev、Beta 以及正式版 Stable。虽然 Chrome 这几个版本名称各不相同,但都沿用了相同的版本号,只是更新早晚的区别。

Chrome Canary

Chrome Canary 是更新速度最快的 Chrome 版本,几乎每天更新。相当于支持自动更新、同时添加谷歌自家服务、商业闭源插件的 Chromium,功能更加强大。

Canary是功能、代码最先进的 Chrome 版本,但是因为测试不全面,极不稳定。谷歌将其设定为可独立安装、与其他版本共存,因此适合进阶用户安装备用,尝鲜最新功能。

Chrome Dev

Chrome Dev 最初是以 Chromium 为基础、更新最快的 Chrome,后来则被 Canary 取代。Dev 版每周更新一次,虽然不太稳定,但可勉强满足日常使用,适合 Web 开发者用来测试新功能和网页。

Chrome Beta

Chrome Beta 以 Dev 为基础,每月更新一次。它是正式发布前的最后测试版本,所有功能都已在前面几个版本中得到测试、修改,已经十分稳定,普通用户也可日常使用。

Chrome Stable

Chrome Stable 就是正式版,它以 Beta 为基础,几个月更新一次。由于所有的功能都已经过数个月反复测试,是稳定性最高的 Chrome 版本。


2.Chrome 111 Beta发布

Chrome 111 Beta支持新的 css 颜色类型和颜色空间、CSS 三角函数和 View Transitions api。 Chrome 111 于 2023 年 2 月 9 日开始测试。可以在桌面版 Google.com 或 Android 版 Google Play 商店中下载最新版本。

2.1 支持新的 CSS 颜色类型和空间

CSS Color Level 4 中描述的所有功能现已启用。 包括四种与设备无关的颜色类型(lab、Oklab、lch 和 Oklch)、color() 函数以及用于渐变和动画的用户定义颜色空间。

color-mix() 函数

CSS Color 5 的 color-mix() 函数已支持。此功能可以在任何支持的色彩空间中将一定百分比的一种颜色混合到另一种颜色中。以下示例将 10% 的蓝色混合到 SRGB 中的白色中。

.item { 
background-color: color-mix(in srgb, blue 10%, white);
}

CSS 选择器 4 伪类 :nth-child(an + b of S)

扩展 :nth-child(an + b) 和 :nth-last-child() 选择器。 例如,:nth-child(3 of .c) 是给定父级下的第三个 .c。

:nth-child(2): 选中第二个子元素
:nth-child(2n): 选中偶数子元素 (2nd, 4th, 6th, 8th, and so on).
:nth-child(2n+1): 选中奇数子元素 (1st, 3rd, 5th, 7th, and so on).
:nth-child(5n+1): 选中1st (=(5×0)+1), 5th (=(5×1)+1), 10th (=(5×2)+1), …child.
:nth-child(5n+2): 选中 2nd (=(5×0)+2), 6th (=(5×1)+2), 11th (=(5×2)+2), … child.

CSS 根字体单位

将根字体单位:ex、ch、ic 和 lh 添加到 rem 的现有根字体单位。

CSS 三角函数

三角函数 sin()、cos()、tan()、asin()、acos()、atan()、atan2() 已添加到 CSS 数学表达式中。

selector { 
property: functional-notation( [argument]? [, argument]! );
}

语法以函数符号的名称开头,后跟左括号(接下来是符号参数,函数以右括号结束)。

函数可以接受多个参数,其格式类似于 CSS 属性值。 空格是允许的,但它们在括号内是可选的。 在一些函数符号中,多个参数用逗号分隔,而其他的则使用空格。

/* Single values */ 
transform: rotate(asin(-0.2));
transform: rotate(asin(2 * 0.125));
/* Other values */
transform: rotate(asin(pi / 5));
transform: rotate(asin(e / 3));

CSS 自定义属性的样式容器查询

将 style() 函数添加到 @container 规则,以便可以根据祖先元素的自定义属性的计算值应用样式。

main { container: inline-size / name; } 
@container name (max-width: 800px) {
span { color: gray; }
}

baseline-source 属性

允许 web 开发人员指定行内级框是否应使用第一个或最后一个基线在行框内进行对齐。目前该属性也就chrome自己支持。

2.2 Web APIs新增

窗口管理权限和权限策略字符串

Chrome 111 添加了窗口管理作为窗口放置权限和权限策略字符串的别名。 这是通过最终弃用和删除窗口放置来重命名字符串的更大努力的一部分。 随着 Window Management API 随的发展,术语更改提高了描述符的寿命。

Media Session API

演示幻灯片操作,将上一张幻灯片previousslide和下一张幻灯片nextslide操作添加到现有的媒体会话 API。

Resizable ArrayBuffer 和growable SharedArrayBuffer

扩展 ArrayBuffer 构造函数以获取额外的最大长度,从而允许增长和缩小缓冲区。 类似地,SharedArrayBuffer 被扩展为采用允许就地增长的额外最大长度。

referrer policy key

扩展了推测规则语法,允许开发人员指定引用策略以用于推测规则触发的推测请求。 这也重新引入了“足够严格的推荐人政策(sufficiently-strict referrer policy)”要求。

Streaming declarative shadow dom

通过在开始而不是结束的模板标签上附加影子根来增加对流的支持。

const shadowOpen = elementRef.attachShadow({ mode: "open" }); 
const shadowClosed = elementRef.attachShadow({ mode: "closed" });

View Transitions API

通过快照视图并允许 DOM 更改而状态之间没有任何重叠,可以在单页应用程序 (SPA) 中创建完美的过渡。 使用视图过渡来构建自定义过渡,或使用简单的淡入淡出默认值来改善用户体验。

function spaNavigate(data) { // Fallback for browsers that don't support this API: 
if (!document.startViewTransition) {
updateTheDOMSomehow(data);
return;
}
// With a transition:
document.startViewTransition(() => updateTheDOMSomehow(data)); }

WebRTC 可扩展视频编码

此扩展定义了一种标准方法,用于在传出的 WebRTC 视频轨道上选择可能的可伸缩视频编码 (SVC) 配置。

WebXR enabledFeatures 属性

返回由 XRSessionInit 指定的为此 XRSession 启用的功能集以及给定模式和功能的规范所需的隐含功能。


链接: https://www.fly63.com/article/detial/12470

浏览器中的图像识别 API

在 Native 开发中,Android 和 IOS 平台都在系统层面直接提供给了应用开发识别图像的一些能力,比如对于二维码/条形码的识别,Android 可以使用 barcode API 、 iOS 可以使用 CIQRCodeFeature API 。

JavaScript的API设计原则

Js的API设计原则总共包含了七个大块。系卤煮自己总结的一些经验和教训。本篇博文同时也参考了其他一些文章,相关地址会在后面贴出来。很难做到详尽充实,如果有好的建议或者不对的地方,还望不吝赐教斧正。

适合写api接口文档的管理工具有哪些?

现在越来越流行前后端分离开发,使用ajax交互。所以api接口文档就变的十分有意义了,目前市场有哪些比较优秀的接口文档管理工具呢?比如:MinDoc,eoLinker,apizza,RAML,Swagger等等

前后端分离,如何防止api接口被恶意调用或攻击

无论网站,还是App目前基本都是基于api接口模式的开发,那么api的安全就尤为重要了。目前攻击最常见的就是“短信轰炸机”,由于短信接口验证是App,网站检验用户手机号最真实的途径,使用短信验证码在提供便利的同时,也成了呗恶意攻击的对象,那么如何才能防止被恶意调用呢?

JSON API免费接口_ 免费的天气预报、地图、IP、手机信息查询、翻译、新闻等api接口

整理提供最新的各种免费JSON接口,其中有部分需要用JSONP调用。方面前端同学的学习或在网站中的使用,包括:免费的天气预报、地图、IP、手机信息查询、翻译、新闻等api接口

什么是RESTful API?

要弄清楚什么是RESTful API,首先要弄清楚什么是REST。REST -- REpresentational State Transfer,英语的直译就是“表现层状态转移”。如果看这个概念,估计没几个人能明白是什么意思。

认识 Fetch API

Fetch API 已经作为现代浏览器中异步网络请求的标准方法,其使用 Promise 作为基本构造要素。Fetch 在主流浏览器中都有很好的支持,除了IE。

用一个通俗的例子讲清楚API

随着移动互联网的发展, 基于互联网的应用正变得越来越普及,在这个过程中,更多的平台将自身的资源开放给开发者来调用。对外提供的API 调用使得平台之间的内容关联性更强,同时这些开放的平台也为用户、开发者和中小网站带来了更大的价值。

docker提供api访问

环境centos,添加deamon.json后,dockerd命令可以启动docker,这时请求 127.0.0.1:2375 可以正常访问,使用systemctl无法启动docker的情况.无法启动docker:查看当前的docker配置

构建API的最佳编程语言是什么?

你是否正在设计第一个Web应用程序?也许你过去已经建立了一些,但是目前也正在寻找语言的变化以提高你的技能,或尝试新的东西。有了所有信息,就很难决定为下一个产品或项目选择哪种编程语言。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!