你不知道的CSS：下一代网页样式
时间：2023-03-30 17:09:40
CSS
背景最近看了ChromeDevSummit2019大会视频，学到了很多以前不知道的CSS新特性，挺有意思的。下面我将介绍几个令人兴奋的功能。文字功能概述：StickyStickeyStackSticySlideStickyDesperadoFocus-withinprefers-reduced-motionScrollSnapScrollSnapHorizo??ntalScrollSnapVerticalScrollSnapMatrixBackdrop-filterGapPaintAPI1。我们可能听说过StickyStacksticky属性，它常用于天花板需求。官方描述：positionCSS属性设置元素在文档中的定位方式。top、right、bottom和left属性确定定位元素的最终位置。官方示例：当我们滚动容器时，粘性元素会脱离Documentflow，如上图。利用该属性，我们可以轻松满足日常生活中的吊顶需求：示意图：核心属性：position：sticky；顶部：0；完整的示例代码：//htmldl.sticky-stackdtAddAceyaloneddAesopRockddAngelHazeddAtmospheredtBddBabbletronddBikeForThreeddBinaryStarddBlackaliciousddBlackSheepddBlueprintddBlueScholarsdtCddCecilOtterddChali2naddChanceTheRapperddCommonMarketddCoolCalmPeteddCzarfacedtDddDangerDoomddDarcMindddDemAtlasddDessa//css@usepostcss-nested;.sticky-stack{背景：hsl(265100%47%);白颜色;保证金：0；高度：80vh；最大高度：40ex；-半径：1rem；溢出-y：自动；&dt{位置：粘性；顶部：0；字体粗细：粗体；背景：hsl(265100%27%)；颜色：hsl(265100%80%)；填充：.25rem1rem；}&dd{保证金：0;填充：.75rem1rem；&+dt{顶部边距：1rem;}}}body{显示：网格；放置项目：中心；最小高度：100vh；字体系列：系统m-ui;}切换不同的属性值可以实现不同的吊顶效果：例如：StickySlideStickySlide在线演示：https://codepen.io/argyleink/pen/abbJOjPStickyDesperado在线演示：https://codepen.io/argyleink/pen/qBBrbyx官方文档：https://developer.mozilla.org/en-US/docs/Web/CSS/position2。focus-within也是一个很有意思的特性，适用于一个元素本身，或者比如当子孙元素收到focus事件时：
//cssform{border:1pxsolid;颜色：灰色；padding:4px;}form:focus-within{背景：黄色;color:black;}form:focus-withininput{color:red;}当我们focusintoinput时，输入两个词时：以前需要用js控件类为其祖先节点添加样式，但是现在可以通过:focus-within来实现，很漂亮。通过这个功能，我们可以实现一个简单的tab页切换：在线演示地址：https://codepen.io/una/pen/RMmogp3。prefers-reduced-motionprefers-reduced-motionCSS媒体功能用于检测用户是否已请求系统最小化其使用的动画或动作量。即：该特征用于检测用户是否要最小化动画。示例demo：在线地址：https://codepen.io/argyleink/pen/RwwZMKm
animatedbox .animation{animation:vibrate0.3slinearinfiniteboth;}@media(prefers-reduced-motion:reduce){.animation{animation:none;}}官方示例：https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion4.ScrollSnap这是一个非常有趣的功能。以往，在一个滑动的列表中，我们总是希望滑动之后能看到一个完整的子项。例如，一行图片滑动后，你在视口中看到的只是一个完整的图像。这个可以通过js处理滑动事件，动态计算X坐标来实现。现在也支持CSS，这个特性就是ScrollSnap。该属性有三种表现形式：1.ScrollSnapHorizo??ntal水平滚动2.ScrollSnapVertical垂直垂直滚动3.ScrollSnapMatrix双向滚动与第一个ScrollSnapHorizo??ntal水平滚动示例：原理图：官方示例：在这里滑动，发送后离开，反弹完成1：示例代码：//html
XMand。LTR
2
3
4
5
//css.container{display:flex;溢出：自动；轮廓：1px浅灰色虚线；弹性：无；}.container.x{宽度：100%；高度：128px；flex-flow:rownowrap;}/*scroll-snap*/.x.mandatory-scroll-snapping{scroll-snap-type:xmandatory;}在线体验地址：https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type另外两个分别是垂直滚动和双向滚动，不多说了，大家可以去官方的例子中体验一下。5.背景滤镜功能还在实验阶段。正如属性名称所描述的，此功能将图形效果应用于元素的背面，例如模糊或颜色过渡。由于它应用在元素后面，因此请确保该元素或其背景至少部分透明。示例：代码：//html
Hello,World
//cssh1{位置：绝对；顶部：0；左：0；边框：2px虚线；填充：1em；背景滤镜：模糊（10px）；白颜色;字体系列：等宽；font-weight:100;}官方文档：https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter6。Gapgap允许我们直观地设置行和列之间的间距。它是row-gap和column-gap的简写。以前我们在做列表的时候，为了控制元素与其他元素之间的间距，往往会使用margin来利用重叠外边距的特性。这就是图中多余的间距。现在有了差距，我们就有了更优雅的解决方案：看两个示意图：这样，无论是单列还是多列。都有很好的性能：在线演示：https://codepen.io/argyleink/pen/abbVqEv官方文档：https://developer.mozilla.org/en-US/docs/Web/CSS/gap7.PaintAPIPaintApi提供了更贴近浏览器底层的绘图机制。目前，该API还处于Level1阶段。看一个演示：//html
HelloWorld！多么美好的生活！我可以继续前进！//css*,*::before,*::after{box-sizing:border-box;}body{font-size:20px;字体系列：等宽字体；text-align:center;}.speech{背景图片:paint(rainbowtize);填充：1em；显示：内联块；border-radius:20px;}在线演示：https://codepen.io/una/以上pen/VXzRxp的特性很有意思，简单介绍给大家，希望能给大家带来一些启发。就几个特点，昨晚看了视频，今天花了一下午整理资料和动图，很费时间。如果内容对您有所启发，请点赞鼓励。谢谢你们。会议视频链接在最后附上：https://www.youtube.com/watch?v=-oyeaIirVC0&feature=youtu.be最后，关注我如果你觉得这篇内容对你很有启发，那就关注我吧~更多exciting:说说ESM、Bundleless、Vite、Snowpack想起一个“无限列表”滚动优化《面试三轴》代码切分（上）《面试三轴》缓存（上）《面试三轴》缓存（下）《HTTP》《采访三斧头》的（上篇）HTTP（下篇）《采访三斧头》这个
