CSS New Features

F(X) TEAM · 午夜识堂 C S S新特性 @⼤漠# 2 0 2 1 - 0 5 - 1 2 #杭州 × × 联合出品

相关资源 CSS is simple, but not easy! F(X) TEAM · 午夜识堂

F(X) TEAM · 午夜识堂

CSS新特性 F(X) TEAM · 午夜识堂 https://2020.stateofcss.com/en-US/features/

CSS新特性 ① CSS伪类选择器 ⑨ CSS Gap(沟槽) ② CSS颜⾊ ⑩ CSS逻辑属性 ③ CSS背景 ⑪ CSS媒体查询 ④ CSS蒙层和剪切 ⑫ CSS比较函数 ⑤ CSS混合模式 ⑬ CSS内容可⻅性 ⑥ CSS⾃定义属性 ⑭ CSS外在尺⼨和内在尺⼨ ⑦ CSS等比缩放 ⑮ CSS的Display ⑧ CSS滚动捕捉 F(X) TEAM · 午夜识堂

CSS新特性 ① CSS伪类选择器 ⑨ CSS Gap(沟槽) ② CSS颜⾊ ⑩ CSS逻辑属性 ③ CSS背景 ⑪ CSS媒体查询 ④ CSS蒙层和剪切 ⑫ CSS比较函数 ⑤ CSS混合模式 ⑬ CSS内容可⻅性 ⑥ CSS⾃定义属性 ⑭ CSS外在尺⼨和内在尺⼨ ⑦ CSS等比缩放 ⑮ CSS的Display ⑧ CSS滚动捕捉 F(X) TEAM · 午夜识堂

CSS 伪类选择器 ① ② ③ ④ :is() vs. :where() :not() vs. :has() :empty vs. :blank :focus-visible vs. :focus-within F(X) TEAM · 午夜识堂

CSS 伪类选择器 — :is() vs. :where() Tweet ⇥ F(X) TEAM · 午夜识堂 CodePen ⇥

CSS 伪类选择器 — :is() vs. :where() F(X) TEAM · 午夜识堂

CSS 伪类选择器 — :is() vs. :where() F(X) TEAM · 午夜识堂

CSS 伪类选择器 — :is() vs. :where() CodePen ⇥ F(X) TEAM · 午夜识堂

CSS 伪类选择器 — :not() vs. :has() F(X) TEAM · 午夜识堂

CSS 伪类选择器 — :not() vs. :has() CodePen ⇥ F(X) TEAM · 午夜识堂

CSS 伪类选择器 — :not() vs. :has() F(X) TEAM · 午夜识堂

CSS 伪类选择器 — :empty vs. :blank F(X) TEAM · 午夜识堂

CSS 伪类选择器 — :empty vs. :blank CodePen ⇥ F(X) TEAM · 午夜识堂

CSS 伪类选择器 — :empty vs. :blank CodePen ⇥ F(X) TEAM · 午夜识堂

CSS 伪类选择器 — :focus-visible vs. :focus-within F(X) TEAM · 午夜识堂

CSS 伪类选择器 — :focus-visible vs. :focus-within CodePen ⇥ F(X) TEAM · 午夜识堂

CSS 伪类选择器 — :focus-visible vs. :focus-within Image URL ⇥ F(X) TEAM · 午夜识堂

CSS 伪类选择器 — :focus-visible vs. :focus-within Codepen ⇥ F(X) TEAM · 午夜识堂

CSS 伪类选择器 — :focus-visible vs. :focus-within Codepen ⇥ F(X) TEAM · 午夜识堂

CSS新特性 ① CSS伪类选择器 ⑨ CSS Gap(沟槽) ② CSS颜⾊ ⑩ CSS逻辑属性 ③ CSS背景 ⑪ CSS媒体查询 ④ CSS蒙层和剪切 ⑫ CSS比较函数 ⑤ CSS混合模式 ⑬ CSS内容可⻅性 ⑥ CSS⾃定义属性 ⑭ CSS外在尺⼨和内在尺⼨ ⑦ CSS等比缩放 ⑮ CSS的Display ⑧ CSS滚动捕捉 F(X) TEAM · 午夜识堂

CSS 颜⾊ Codepen ⇥ F(X) TEAM · 午夜识堂

CSS 颜⾊ F(X) TEAM · 午夜识堂

CSS 颜⾊ F(X) TEAM · 午夜识堂

CSS 颜⾊ F(X) TEAM · 午夜识堂

CSS 颜⾊ F(X) TEAM · 午夜识堂

CSS新特性 ① CSS伪类选择器 ⑨ CSS Gap(沟槽) ② CSS颜⾊ ⑩ CSS逻辑属性 ③ CSS背景 ⑪ CSS媒体查询 ④ CSS蒙层和剪切 ⑫ CSS比较函数 ⑤ CSS混合模式 ⑬ CSS内容可⻅性 ⑥ CSS⾃定义属性 ⑭ CSS外在尺⼨和内在尺⼨ ⑦ CSS等比缩放 ⑮ CSS的Display ⑧ CSS滚动捕捉 F(X) TEAM · 午夜识堂

CSS 背景 — background-position F(X) TEAM · 午夜识堂

CSS 背景 — background-position F(X) TEAM · 午夜识堂

CSS 背景 — background-position Codepen ⇥ F(X) TEAM · 午夜识堂

CSS 背景 — background-repeat F(X) TEAM · 午夜识堂

CSS 背景 — background-repeat Codepen ⇥ F(X) TEAM · 午夜识堂

CSS 背景 — background-repeat Codepen ⇥ F(X) TEAM · 午夜识堂

CSS新特性 ① CSS伪类选择器 ⑨ CSS Gap(沟槽) ② CSS颜⾊ ⑩ CSS逻辑属性 ③ CSS背景 ⑪ CSS媒体查询 ④ CSS蒙层和剪切 ⑫ CSS比较函数 ⑤ CSS混合模式 ⑬ CSS内容可⻅性 ⑥ CSS⾃定义属性 ⑭ CSS外在尺⼨和内在尺⼨ ⑦ CSS等比缩放 ⑮ CSS的Display ⑧ CSS滚动捕捉 F(X) TEAM · 午夜识堂

CSS masking & clipping F(X) TEAM · 午夜识堂

CSS masking & clipping Codepen ⇥ F(X) TEAM · 午夜识堂

CSS masking & clipping mask-image Codepen ⇥ F(X) TEAM · 午夜识堂

CSS masking & clipping Codepen ⇥ F(X) TEAM · 午夜识堂

CSS masking & clipping Clippy ⇥ F(X) TEAM · 午夜识堂

CSS masking & clipping CodePen ⇥ F(X) TEAM · 午夜识堂

CSS新特性 ① CSS伪类选择器 ⑨ CSS Gap(沟槽) ② CSS颜⾊ ⑩ CSS逻辑属性 ③ CSS背景 ⑪ CSS媒体查询 ④ CSS蒙层和剪切 ⑫ CSS比较函数 ⑤ CSS混合模式 ⑬ CSS内容可⻅性 ⑥ CSS⾃定义属性 ⑭ CSS外在尺⼨和内在尺⼨ ⑦ CSS等比缩放 ⑮ CSS的Display ⑧ CSS滚动捕捉 F(X) TEAM · 午夜识堂

CSS 混合模式 CodePen ⇥ F(X) TEAM · 午夜识堂

CSS 混合模式 原图 SVG Path CodePen ⇥ F(X) TEAM · 午夜识堂

CSS新特性 ① CSS伪类选择器 ⑨ CSS Gap(沟槽) ② CSS颜⾊ ⑩ CSS逻辑属性 ③ CSS背景 ⑪ CSS媒体查询 ④ CSS蒙层和剪切 ⑫ CSS比较函数 ⑤ CSS混合模式 ⑬ CSS内容可⻅性 ⑥ CSS⾃定义属性 ⑭ CSS外在尺⼨和内在尺⼨ ⑦ CSS等比缩放 ⑮ CSS的Display ⑧ CSS滚动捕捉 F(X) TEAM · 午夜识堂

CSS ⾃定义属性 F(X) TEAM · 午夜识堂

CSS ⾃定义属性 当⼀个⾃定义属性的值是initial时，var()函数不能使⽤它进⾏替换。除⾮ 指定了⼀个有效的回退值，否则会使声明在计算值时⽆效。 W3C ⇥ F(X) TEAM · 午夜识堂

CSS ⾃定义属性 F(X) TEAM · 午夜识堂

CSS ⾃定义属性 CodePen ⇥ F(X) TEAM · 午夜识堂

CSS ⾃定义属性 CodePen ⇥ F(X) TEAM · 午夜识堂

CSS ⾃定义属性 CodePen ⇥ F(X) TEAM · 午夜识堂

CSS ⾃定义属性 F(X) TEAM · 午夜识堂

CSS ⾃定义属性 CodePen ⇥ F(X) TEAM · 午夜识堂

CSS ⾃定义属性 CodePen ⇥ F(X) TEAM · 午夜识堂

CSS ⾃定义属性 CodePen ⇥ F(X) TEAM · 午夜识堂

CSS新特性 ① CSS伪类选择器 ⑨ CSS Gap(沟槽) ② CSS颜⾊ ⑩ CSS逻辑属性 ③ CSS背景 ⑪ CSS媒体查询 ④ CSS蒙层和剪切 ⑫ CSS比较函数 ⑤ CSS混合模式 ⑬ CSS内容可⻅性 ⑥ CSS⾃定义属性 ⑭ CSS外在尺⼨和内在尺⼨ ⑦ CSS等比缩放 ⑮ CSS的Display ⑧ CSS滚动捕捉 F(X) TEAM · 午夜识堂

CSS 等比缩放（aspect-ratio） F(X) TEAM · 午夜识堂

CSS 等比缩放（aspect-ratio） F(X) TEAM · 午夜识堂

CSS 等比缩放（aspect-ratio） CodePen ⇥ F(X) TEAM · 午夜识堂

CSS 等比缩放（aspect-ratio） CodePen ⇥ F(X) TEAM · 午夜识堂

CSS新特性 ① CSS伪类选择器 ⑨ CSS Gap(沟槽) ② CSS颜⾊ ⑩ CSS逻辑属性 ③ CSS背景 ⑪ CSS媒体查询 ④ CSS蒙层和剪切 ⑫ CSS比较函数 ⑤ CSS混合模式 ⑬ CSS内容可⻅性 ⑥ CSS⾃定义属性 ⑭ CSS外在尺⼨和内在尺⼨ ⑦ CSS等比缩放 ⑮ CSS的Display ⑧ CSS滚动捕捉 F(X) TEAM · 午夜识堂

CSS 滚动捕捉 F(X) TEAM · 午夜识堂

CSS 滚动捕捉 CodePen ⇥ F(X) TEAM · 午夜识堂

CSS 滚动捕捉 CodePen ⇥ F(X) TEAM · 午夜识堂

CSS 滚动捕捉 CodePen ⇥ F(X) TEAM · 午夜识堂

CSS新特性 ① CSS伪类选择器 ⑨ CSS Gap(沟槽) ② CSS颜⾊ ⑩ CSS逻辑属性 ③ CSS背景 ⑪ CSS媒体查询 ④ CSS蒙层和剪切 ⑫ CSS比较函数 ⑤ CSS混合模式 ⑬ CSS内容可⻅性 ⑥ CSS⾃定义属性 ⑭ CSS外在尺⼨和内在尺⼨ ⑦ CSS等比缩放 ⑮ CSS的Display ⑧ CSS滚动捕捉 F(X) TEAM · 午夜识堂

CSS Gap F(X) TEAM · 午夜识堂

CSS新特性 ① CSS伪类选择器 ⑨ CSS Gap(沟槽) ② CSS颜⾊ ⑩ CSS逻辑属性 ③ CSS背景 ⑪ CSS媒体查询 ④ CSS蒙层和剪切 ⑫ CSS比较函数 ⑤ CSS混合模式 ⑬ CSS内容可⻅性 ⑥ CSS⾃定义属性 ⑭ CSS外在尺⼨和内在尺⼨ ⑦ CSS等比缩放 ⑮ CSS的Display ⑧ CSS滚动捕捉 F(X) TEAM · 午夜识堂

CSS 逻辑属性 F(X) TEAM · 午夜识堂

CSS 逻辑属性 F(X) TEAM · 午夜识堂

CSS 逻辑属性 F(X) TEAM · 午夜识堂

CSS 逻辑属性 F(X) TEAM · 午夜识堂

CSS 逻辑属性 CodePen ⇥ F(X) TEAM · 午夜识堂

CSS 逻辑属性 CodePen ⇥ F(X) TEAM · 午夜识堂

CSS新特性 ① CSS伪类选择器 ⑨ CSS Gap(沟槽) ② CSS颜⾊ ⑩ CSS逻辑属性 ③ CSS背景 ⑪ CSS媒体查询 ④ CSS蒙层和剪切 ⑫ CSS比较函数 ⑤ CSS混合模式 ⑬ CSS内容可⻅性 ⑥ CSS⾃定义属性 ⑭ CSS外在尺⼨和内在尺⼨ ⑦ CSS等比缩放 ⑮ CSS的Display ⑧ CSS滚动捕捉 F(X) TEAM · 午夜识堂

CSS 媒体查询 F(X) TEAM · 午夜识堂

CSS 媒体查询 CodePen ⇥ F(X) TEAM · 午夜识堂

CSS 媒体查询 F(X) TEAM · 午夜识堂

CSS 媒体查询 CodePen ⇥ F(X) TEAM · 午夜识堂

CSS 媒体查询 F(X) TEAM · 午夜识堂

CSS 媒体查询 F(X) TEAM · 午夜识堂

CSS 媒体查询 F(X) TEAM · 午夜识堂

CSS新特性 ① CSS伪类选择器 ⑨ CSS Gap(沟槽) ② CSS颜⾊ ⑩ CSS逻辑属性 ③ CSS背景 ⑪ CSS媒体查询 ④ CSS蒙层和剪切 ⑫ CSS比较函数 ⑤ CSS混合模式 ⑬ CSS内容可⻅性 ⑥ CSS⾃定义属性 ⑭ CSS外在尺⼨和内在尺⼨ ⑦ CSS等比缩放 ⑮ CSS的Display ⑧ CSS滚动捕捉 F(X) TEAM · 午夜识堂

CSS 比较函数 min()/max()/clamp() F(X) TEAM · 午夜识堂

CSS 比较函数 min()/max()/clamp() CodePen ⇥ F(X) TEAM · 午夜识堂

CSS 比较函数 min()/max()/clamp() CodePen ⇥ F(X) TEAM · 午夜识堂

CSS 比较函数 min()/max()/clamp() CodePen ⇥ F(X) TEAM · 午夜识堂

CSS 比较函数 min()/max()/clamp() F(X) TEAM · 午夜识堂

CSS 比较函数 min()/max()/clamp() F(X) TEAM · 午夜识堂

CSS 比较函数 min()/max()/clamp() F(X) TEAM · 午夜识堂

CSS 比较函数 min()/max()/clamp() F(X) TEAM · 午夜识堂

CSS 比较函数 min()/max()/clamp() CodePen ⇥ F(X) TEAM · 午夜识堂

CSS 比较函数 min()/max()/clamp() CodePen ⇥ F(X) TEAM · 午夜识堂

CSS新特性 ① CSS伪类选择器 ⑨ CSS Gap(沟槽) ② CSS颜⾊ ⑩ CSS逻辑属性 ③ CSS背景 ⑪ CSS媒体查询 ④ CSS蒙层和剪切 ⑫ CSS比较函数 ⑤ CSS混合模式 ⑬ CSS内容可⻅性 ⑥ CSS⾃定义属性 ⑭ CSS外在尺⼨和内在尺⼨ ⑦ CSS等比缩放 ⑮ CSS的Display ⑧ CSS滚动捕捉 F(X) TEAM · 午夜识堂

CSS 内容可⻅性content-visibility F(X) TEAM · 午夜识堂

CSS 内容可⻅性content-visibility F(X) TEAM · 午夜识堂

CSS新特性 ① CSS伪类选择器 ⑨ CSS Gap(沟槽) ② CSS颜⾊ ⑩ CSS逻辑属性 ③ CSS背景 ⑪ CSS媒体查询 ④ CSS蒙层和剪切 ⑫ CSS比较函数 ⑤ CSS混合模式 ⑬ CSS内容可⻅性 ⑥ CSS⾃定义属性 ⑭ CSS外在尺⼨和内在尺⼨ ⑦ CSS等比缩放 ⑮ CSS的Display ⑧ CSS滚动捕捉 F(X) TEAM · 午夜识堂

CSS 外在尺⼨ vs. 内在尺⼨ F(X) TEAM · 午夜识堂

CSS 外在尺⼨ vs. 内在尺⼨ 由元素内部内容来决定: ①m i n - c o n t e n t ②m a x - c o n t e n t ③f i t - c o n t e n t F(X) TEAM · 午夜识堂

CSS 外在尺⼨ vs. 内在尺⼨ CodePen ⇥ F(X) TEAM · 午夜识堂

CSS 外在尺⼨ vs. 内在尺⼨ CodePen ⇥ F(X) TEAM · 午夜识堂

CSS 外在尺⼨ vs. 内在尺⼨ CodePen ⇥ F(X) TEAM · 午夜识堂

CSS 外在尺⼨ vs. 内在尺⼨ CodePen ⇥ F(X) TEAM · 午夜识堂

CSS 外在尺⼨ vs. 内在尺⼨ fit-content 相当于mincontent 和 max-content,其 取值: ① 如果元素的可⽤空间（Available）充⾜，fit-content 将使 ⽤ max-content ② 如果元素的可⽤空间（Available）不够充⾜，比 maxcontent ⼩点，那就是⽤可⽤空间的值，不会导致内容溢出 ③ 如果元素的可⽤空间（Available）很⼩，比 min-content 还⼩,那就使⽤ min-content F(X) TEAM · 午夜识堂 imgURL ⇥

CSS 外在尺⼨ vs. 内在尺⼨ min/max/fit-content使⽤: ① min/max/fit-content ⽤于 flex-basis ⽆效 ② fit-content ⽤于设置⽹格轨道尺⼨的属性上⽆效 ③ ⽹格项⽬或Flex项⽬上显式设置width:fit-content也⽆效,因为它们的默认宽度是mincontent ④ 最好不要在 min-width 或 max-width 上使⽤ fit-content，易造成混乱，建议在 width 上使⽤fit-content F(X) TEAM · 午夜识堂

CSS新特性 ① CSS伪类选择器 ⑨ CSS Gap(沟槽) ② CSS颜⾊ ⑩ CSS逻辑属性 ③ CSS背景 ⑪ CSS媒体查询 ④ CSS蒙层和剪切 ⑫ CSS比较函数 ⑤ CSS混合模式 ⑬ CSS内容可⻅性 ⑥ CSS⾃定义属性 ⑭ CSS外在尺⼨和内在尺⼨ ⑦ CSS等比缩放 ⑮ CSS的Display ⑧ CSS滚动捕捉 F(X) TEAM · 午夜识堂

CSS 的display F(X) TEAM · 午夜识堂

CSS 的display F(X) TEAM · 午夜识堂

CSS 的display 设置了display: contents的元素⾃⾝将不会 产⽣任何盒⼦，但是它的⼦元素能正常展⽰ https://www.w3.org/TR/css-display-3/#box-generation F(X) TEAM · 午夜识堂

CSS 的display F(X) TEAM · 午夜识堂

CSS 的display 设置了display: contents的 元素本身不会被渲染，但是 其⼦元素能够正常被渲染 CodePen ⇥ F(X) TEAM · 午夜识堂

CSS 的display 可以让非⽹格容器或Flexbox容器的⼦元素顺利变成⽹格项⽬或Flex项⽬ F(X) TEAM · 午夜识堂

CSS 的display F(X) TEAM · 午夜识堂

CSS 的display CodePen ⇥ F(X) TEAM · 午夜识堂

CSS 的display CodePen ⇥ F(X) TEAM · 午夜识堂

待续… F(X) TEAM · 午夜识堂

THANK YOU F(X) TEAM · 午夜识堂