金大大

### scroll-timeline 开发中，滚动到那个位置，触发什么样的操作是很常见的需求，但是现在大都采用js来帮助实现 现在又一个关于这方面的CSS草案，即 [Scroll-linked Animations](https://drafts.csswg.org/scroll-animations-1/#scroll-driven-animations)。也就是说，在未来，我们可以直接使用CSS的 [scroll-timeline](https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-at-rule)属性来实现前面提到的一些动画效果。 ```html main { height: 1000vh; text-align: center; line-height: 100vh; } body { margin: 0; background: linear-gradient(to right top, #0089f2 50%, #DDD 50%); background-size:...

### [gap](https://developer.mozilla.org/zh-CN/docs/Web/CSS/gap) 用来设置网格行与列之间的间隙 chrome 66+ safari 不支持 ```html /** */ body { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; } body > div { width: calc((100% - 20px) /...

### prefers-color-scheme CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。 chrome 76+ safari 12+ [prefers-color-scheme](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-color-scheme) ```html body { margin: 0; background: green; } @media (prefers-color-scheme: dark) { body { background: red; } } ```

### CSS.registerProperty chrome 78+ safari 不支持 [registerProperty](https://developer.mozilla.org/en-US/docs/Web/API/CSS/registerProperty) [https://www.w3.org/TR/css-variables-1/](https://www.w3.org/TR/css-variables-1/) ```html /** https://www.w3.org/TR/css-variables-1/ */ :root { --color: orange; } body { font-size: 60px; color: var(--color); /** --colorPrimary: yellow; */ background-color: var(--colorPrimary); /*...

### 利用svg实现文字外边框

### aspect-ratio chrome 不支持 safari 不支持 aspect-ratio 是 [CSS Box Sizing Module Level 4](https://www.w3.org/TR/css-sizing-4/#aspect-ratio) 模块中的一个用来计算元素盒子宽高比的属性 ```html content ```

## canvas的内存占用情况 占用浏览器的渲染进程的内存占用 宽高为16384 * 16384的canvas大概占用1G 

## 将canvas的宽高设置成0是否可以真的清除占用 `chrome` 下可以 `safari` 在dom挂载的不可以, 不再dom中挂载的可以 不执行getContext在safari中是不会创建图形的 ```js var i = 0; setTimeout(() => { test(); }, 10000); function test() { const canvas = document.createElement("canvas"); canvas.width = 16384; canvas.height...

## 是否可以验证当前浏览器的canvas限制/剩余空间限制 验证限制可以, 剩余空间暂时没找到好的办法

## canvas绘制内容的改变会触发浏览器的重排和重绘吗, 绘制是在渲染进程中进行的吗？ 不会, 它不涉及dom，也就不涉及dom树、样式计算、布局、分层 canvas绘制流程很简单，就是调用api直接在画布上绘制，没有DOM，所有的绘制都是自己程序控制的