RichTalk 快报 第 3 期

avatar
花呗借呗前端团队 @蚂蚁集团

image.png

RichTalk 是我们团队每 2 周一次的技术分享活动,前 5 分钟分享最近 2 周社区动态,接着一场技术分享

将一张纸条的一侧旋转180°后与另一侧相连,可以形成一个环,而这环没有正反面之分 - 莫比乌斯环

头条

Google I/O 2022

[TL;DR] 约 24 年前,谷歌从两名研究生、一个产品和一个重大使命开始:整合全球信息,供大众使用,使人人受益。从那以后的几十年里,Google 一直在开发技术来实现这一使命。 谷歌主要通过两种关键方式来推进这一使命的实现:其一,深化对信息的理解,从而将信息转化为知识;其二,推动计算机技术发展,不论大家身在何处,都能方便快捷地获取信息和知识。 在这次 Google I/O 开发者大会上,谷歌发布了在上述两种方式上取得的进展,以及这些进展是怎样确保谷歌的产品惠及大众。 扩展阅读:

精选

State of CSS 2022

web.dev/state-of-cs…

2022 年将有非常多的 CSS 新特性被实现,详细的列表如下

Fresh in 20222022 and beyond
2022 Browser compatibility@scope
@layer@nest
subgrid@media (prefers-reduced-data)
@container@custom-media
hwb()Media query ranges
lch, oklch, lab, oklab, display-p3, etc@property
color-mix()scroll-start
color-contrast():snap-target
Relative color syntaxsnapChanging() and snapChanged()
Gradient color spacestoggle()
accent-coloranchor()
inert
Color fonts v1
Viewport unit variants
:has()
  1. Cascade layers

没有@layer之前样式的加载顺序非常重要,因为后面会覆盖前面。使用@layer 你可以设置样式所在的图层和顺序,不收加载顺序的影响。

image.png

image.png

  1. Container queries

@container元素可以响应父容器的大小或样式,之前只能响应整个视窗。

@container calendar-day (max-width: 200px) {
  .date {
    display: block;
  }
  
  .date-num {
    font-size: 2.5rem;
    display: block;
  }
}
  1. :has()作用于父元素
.parent:has(.child) {...}
// 包含图像时设置a的样式
a:has(> img) {...}

2022 年之后计划实现的一些功能

  1. @scope 在有多主题的时候非常有用
.card__header {
  color: var(--text);
}

/* with @scope becomes */

@scope (.card) {
  header {
    color: var(--text);
  }
}


@scope (.light-theme) {
  a { color: purple; }
}

@scope (.dark-theme) {
  a { color: plum; }
}

更多的特性阅读原文了解。

Flutter 3.0 正式发布

Flutter 3.0 在 Google I/O 开发者大会正式亮相,随着 3.0 版本的发布,开发者可以通过一个代码库立足 iOS、Android、Web、Windows、macOS、Linux 六大平台 有超过 500,000 个使用 Flutter 构建的应用程序,其中包括 WeChat,字节跳动的旗下产品。

扩展阅读:

动态