web新技术双周报

112 阅读2分钟

web新技术双周报(10.15-10.29)

1. Chrome浏览器将停止支持 Windows 7/8/8.1_产品_罗燕珊_InfoQ精选文章

2. Turbopack:基于 Rust 的 Webpack 继任者。Turbopack 建立在新的增量架构上,以提供最快的开发体验。在大型应用程序上,它显示更新速度比 Vite 快 10 倍,比Webpack 快 700 倍。

Introducing Turbopack: Rust-based successor to Webpack – Vercel

3. JavaScript 装饰器终于到了第三阶段!他们的最新版本已经被 Babel 支持,并且很快就会被 TypeScript 支持。

JavaScript metaprogramming with the 2022-03 decorators API

4. 为什么会JSON.parse“破坏”大数?— 跳到您选择的 JavaScript 控制台并尝试JSON.parse('{"count": 9123372036854000123}')……您可能不会得到您期望的结果

Why does JSON.parse corrupt large numbers and how to solve this? - JSON Indepth

5. Chrome 108+ 具有对 CSS 'toggles' 的实验性支持,这意味着您可以使用 CSS 实现轮播和选项卡组件。

twitter.com/yisibl/stat…

6. Google 正在为Android 版 Chrome提供密钥支持

android-developers.googleblog.com/2022/10/bri…

html与css相关:

1. 提议的“Element Capture”API将允许站点将 HTML 元素捕获为视频流。

Element Capture · Issue #73 · WICG/proposals · GitHub

2. CSS 动画网格布局——Chrome 107 与其他浏览器现在支持grid-template-columns和grid-template-rows属性,并允许网格布局通过动画在状态之间平滑过渡

CSS Animated Grid Layouts

3. 巧用:is()或:where()伪类让scoped的style依然全局匹配 « 张鑫旭-鑫空间-鑫生活

4. 划词评论与Range开发若干经验分享 « 张鑫旭-鑫空间-鑫生活

5. 介绍2022最期待且已正式支持的CSS container容器查询 « 张鑫旭-鑫空间-鑫生活

6. 新的CSS 颜色模块添加了许多声明颜色的新方法,包括实验性的oklch()

OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evil Martians’ team blog

一些css技巧:

1. 半椭圆1/4椭圆

2. 切角效果

弧形切角

svg切角

clip-path切角

3. 梯形

4. css动画实现饼图

svg实现饼图