每个前端都需要知道这些面向未来的CSS技术

写在前端技术日新月异，我们需要不断学习更新自己的前端知识并应用到我们的项目中。这次笔者整理了一些将来会普及或者现在同学们可能会用到的CSS特性，包括SVG图标、滚动特性、CSS自定义属性、CSS现代伪类、CSS中的JS、WebLayout、blending模式和过滤器、CSS计数器等等。如果滚动功能可以用CSS实现，您就不必费心了。JavaScript文章提到了滚动捕获的特性。关于容器滚动其实有很多CSS新特性，比如：自定义滚动条的外观scroll-behavior指的是容器的滚动行为，让滚动效果更丝滑Overscroll-behavior优化滚动边界，尤其是外观可以帮助我们滚动自定义滚动条默认窗口外观和mac外观windowsmac在CSS中，我们可以使用--webkit-scrollbar来自定义滚动条的外观。该属性提供了七个伪元素：::-webkit-scrollbar：整个滚动条::-webkit-scrollbar-button：滚动条上的按钮（上下箭头）：::-webkit-scrollbar-thumb：上scrollbar::-webkit-scrollbar-track:Scrollbartrack::-webkit-scrollbar-track-piece:trackpartofscrollbarwithoutslider::-webkit-scrollbar-corner:当同时有垂直和水平的时候滚动的部分barmeets::-webkit-resizer：部分元素相遇部分的样式（类似于textarea的可拖动按钮）html{--maxWidth:1284px;滚动条颜色：线性渐变（到底部，#ff8a00，#da1b60）；滚动条宽度：30px；背景：#100e17；颜色：#fff；overflow-x:hidden}html::-webkit-scrollbar{width:30px;高度：30px}html::-webkit-scrollbar-thumb{背景：-webkit-gradient（线性，左上，左下，从（#ff8a00），到（#da1b60））;背景：线性渐变（到底部，#ff8a00，#da1b60）；边框-半径：30px；-webkit-box-shadow:inset2px2px2pxrgba(255,255,255,.25),inset-2px-2px2pxrgba(0,0,0,.25);box-shadow:inset2px2px2pxrgba(255,255,255,.25),inset-2px-2px2pxrgba(0,0,0,.25)}html::-webkit-scrollbar-track{背景:linear-gradient(toright,#201c29,#201c291px,#100e171px,#100e17)}通过这些伪元素，你可以实现自己喜欢的滚动条外观，比如下面的例子：CSS自编完整演示定义属性您可能听说过CSS自定义属性，也称为CSS变量。估计熟悉SCSS和LESS的话，上手会很快。这些概念是相似的，它们都使我们的CSS易于维护。目前，最新版本的Edge已经支持该功能，这意味着CSS自定义属性现在可以在实际项目中使用了。我相信在不久的将来，开发人员将严重依赖此功能。定义属性的兼容性支持。什么是自定义属性？简单的说就是开发者可以独立命名和使用的CSS属性。当浏览器处理颜色和位置等属性时，需要接收特定的属性值，而自定义属性在开发人员为其分配属性值之前是没有意义的。那么如何给CSS自定义属性赋值呢？这和习惯没什么两样。foo{颜色：红色；--theme-color:gray;}自定义元素的定义以--开头，以便浏览器区分自定义属性和原生属性，分别对待。如果只定义了一个自定义元素及其属性值，浏览器是不会响应的。如上面代码，.foo的字体颜色由color决定，但--theme-color对.foo没有影响。您可以使用CSS自定义元素来存储任何有效的CSS属性value.foo{--theme-color:blue;--间隔宽度：8px；--最喜欢的数字：3；--问候语：“嘿，有什么事吗？”；--reusable-shadow:03px1px-2pxrgba(0,0,0,0.85);}如果自定义属性只能用于设置值，则使用它们是无用的。至少浏览器必须能够获取它们的属性值。使用var()方法实现：.button{background-color:var(--theme-color);}在下面的代码中，我们将.button的background-color属性的值赋值给--theme-color价值。这个例子看起来自定义属性没什么特别的，但这是一个硬编码的案例。您是否意识到--theme-color属性值可以与任何选择器和属性一起使用？这很棒。.button{background-color:var(--theme-color);}.title{color:var(--theme-color);}.image-grid>.image{border-color:var(--theme-color);}默认值如果开发者没有定义--theme-color变量怎么办？var()可以接收第二个参数作为默认值：.button{background-color:var(--theme-color,gray);}注意：如果你想使用另一个自定义属性作为默认值，语法It应该是background-color:var(--theme-color,var(--fallback-color))在传递参数时总是传入一个默认值是一个好习惯，尤其是在构建web组件时。为了让你的页面在不支持自定义属性的浏览器上正常显示，不要忘记添加兼容代码：.button{background-color:gray;背景颜色：var（--主题颜色，灰色）；}CSSmodernpseudo-classes这些最新的伪类特性，我们也需要知道。使用:is()减少重复您可以使用:is()伪类来删除选择器列表中的重复项。/*BEFORE*/.embed.save-button:hover,.attachment.save-button:hover{opacity:1;}/*AFTER*/:is(.embed,.attachment).save-button:hover{opacity:1;}该特性主要用于未处理的标准CSS代码。如果您使用Sass或类似的CSS预处理器，您可能更喜欢嵌套。注意：浏览器还支持非标准的:-webkit-any()和:-moz-any()伪类，它们类似于:is()但限制更多。WebKit在2015年弃用了:-webkit-any()，Mozilla更新了Firefox的用户代理样式表以使用:is()而不是:-moz-any()。使用:where()保持低特异性：where()伪类具有与:is()相同的语法和功能。它们之间的唯一区别是:where()不会增加整体选择器的特异性（即CSS规则越具体，使用的样式就越具体）。:where()伪类及其任何参数都不会影响选择器特异性，它始终具有零特异性。此功能对于应该易于覆盖的样式很有用。例如，基本样式表sanitize.css包含以下样式规则，如果缺少属性，它会设置默认填充颜色：svg:not([fill]){fill:currentColor;}由于其更高的特殊性特异性（B=1，C=1），站点不能用单个类选择器（B=1）覆盖此声明，并被迫添加！重要或人为增加选择器的特异性（例如.share-icon.share-图标）。.share-icon{填充：蓝色；/*N/Aduetolowspecificity*/}CSS库和基本样式表可以通过使用:where()包装它们的属性选择器来避免这个问题，以保持选择器的整体低特异性（C=1）。/*sanitize.css*/svg:where(:not([fill])){fill:currentColor;}/*作者样式表*/.share-icon{fill:blue;/*由于特异性高*/}其他新的伪类特征有兴趣的同学可以照图参考相关文档。JS在CSS中的完整演示前面提到，在使用CSS自定义属性时，可以通过JavaScript来操作自定义属性的值。事实上，它可以更强大。如果你熟悉CSSHoudini，你可以利用它的特性直接在CSS代码中操作CSS自定义属性：root{--property:document.write('helloworld!');}window.onload=()=>{constdoc=window.getComputedStyle(document.documentElement);constcssProp=doc.getPropertyValue('--property');newFunction((cssProp))();}FullDemoWeblayout对于weblayout，前端一直在讨论这方面的最优方式。早期的表格布局，随后出现了浮动和位置相关布局、多列布局、Flexbox布局和Grid布局等。随着Flexbox和Grid的出现，Web布局的灵活性越来越高。如图所示，CSSGrid提供了很多强大的特性，比如fr单位，可以帮助我们计算容器的可用空间。repeat()函数允许我们为网格的多个列指定相同的值。价值。它还接受两个值：重复次数和重复值。minmax()函数可以让我们用最简单的CSS来控制网格轨道的大小，它包括一个最小值和一个最大值的自动填充和自动适应，配合repeat()函数使用，可以用来替换网格的重复次数、列数max-content和min-content可以根据每列的宽度灵活改变，列的宽度可以根据单元格网格的内容来确定-suto-flow可以更好的让CSSGrid在布局的时候自动排列组合这些功能点，布局会变得更简单。比如我们要实现响应式布局，往往依赖媒体查询（@media）进行处理。事实上，有了CSSGridLayout，这一切都变得更加简单，无需依赖任何媒体查询即可很好地实现响应式布局。尤其是当今时代，要面对的终端设备数量只会增加不会减少，所以如果想要布局更容易适应这些终端的布局，那么CSSGridLayout将发挥很大的作用。完整示例Grid和flex是面向未来的最佳布局解决方案。我们不应该讨论谁好谁坏，而应该结合长处和短处。混合模式和过滤器可以使用CSS实现，而无需JavaScript的麻烦——文章第2部分提到了混合模式。CSS混合模式和过滤器主要用于处理图像。熟悉PS等软件的同学很容易理解里面的属性。完整代码演示CSS计数器CSS计数器实际上涉及三个属性：counter-increment、counter-reset和counter()。通常，它与CSS伪元素::before和::after内容一起使用。可以用来统计完整的demoSVG图标对于SVG来说，它是一个独立的成熟系统，它也有自己的相关规范（ScalableVecgtorGraphics2），即SVG2。尽管该规范已经存在了很长时间，但不同浏览器对许多SVG相关特性的支持也并不一致。特别是SVG中的渐变和过滤器相关功能。但是随着技术的革新，SVG在Web应用中的使用越来越多，尤其是SVG图标的应用。它是第一个使用标签来引用图标的（每个图标一个文件）。为了节省请求，提出了Sprites的概念，即将多个图标合并在一起，使用一个图片文件，使用背景相关的属性来实现图标图片。Bitmap，面对各种设备终端，或者更容易控制图标的颜色和大小，我开始使用IconFont来制作网页图标。当然，字体图标解决了很多问题，但是我每次使用不同的图标，都需要自定义字体，必须加载相应的字体文件，这也带来了一定的问题，比如跨域问题，字体加载问题。随着对SVG的支持越来越强，大家开始想到SVG，开始用SVG来制作图标。这项技术可以解决我们之前遇到的大部分问题，尤其是在涉及到很多终端设备的时候，它的优势就越来越明显。SVG和img有点相似。我们还可以使用标签和标签将所有的SVG图标拼接在一起，有点类似Sprites技术，只不过这里叫SVGSprites...