12 个强大的现代 CSS 技术

每日分享前端插件干货，欢迎关注！

现代CSS技术是美化网页设计过程的最佳方式之一。如果你一直在使用CSS，那么肯定遇到过关于布局或跨浏览器兼容性方面的问题。例如，CSS3样式不适用于旧版本的Internet Explorer。

同时，随着网络技术的发展，开发人员也在努力应对其他问题。例如，利用其他库来优化大页面网站的加载时间，或使div标签更具响应性，而无需过多依赖Bootstrap。随着时代的进步和挑战的增加，CSS也在不断发展。

本次高级CSS教程将讨论12个现代CSS技术用于克服CSS带来的旧问题。

1. 高级CSS选择器

如果你打算开发可用于其他页面或UI组件的可重用CSS文件，那么了解CSS选择器的工作原理至关重要。

现在让我们来看看一些高级选择器。

通用选择器

通用选择器可用于网站的所有元素。例如，如果你想为页面中的所有元素设置特定的边距，那么需要这样写：

*?{
??margin:?1.5rem;
}

属性选择器

如果想将特定样式应用于某些具有相似属性但类名不同的元素，怎么办？可以使用属性选择器。

[class*="component_"]?{
??border:?2px?solid?blue;
}

属性选择器将对类名为component_title和component_label的元素应用边框。

子组合选择器

如果你想将导航栏中菜单的字体大小设置为粗体但导航内容是动态生成的，怎么办？它们没有任何特定的类。但你可以使用子组合选择器。

.navigation-menu?>?ul?>?li?>?a?{
??font-weight:?bold;
}

伪类

不同颜色交替的表格怎么实现？猜猜如何只用几行CSS就做到这一点吗？答案是伪类。

tbody?tr:nth-child(odd)?{
??background-color:?green;
}

代码将对表格中的奇数行应用绿色背景。

除了odd或even，还可以使用n+1或3n+1等属性应用不同的属性到不同的行。

2. 更换旧的网格系统

bootstrap网格解决了在不同分辨率的设备中均匀分布响应容器的问题。但随着时间的推移，只用于网格的库越发繁重，因此开发人员需要另一种解决方案。

现代CSS技术，例如网格，为我们提供了一种简化的解决方案。

$minColumnWidth:?10rem;
.grid?{
??display:?grid;
??grid-template-columns:?repeat(auto-fit,?minmax($minColWidth,?1fr));
??grid-gap:?2rem;

&?+?.grid?{
????margin-top:?$gridGap;
??}
}

这些代码做了什么？

首先定义了网格元素的最小宽度。

grid-template-columns中使用了repeat函数，以便CSS将相同的参数应用于每一列。此外，使用auto-fit而不是数字的原因是，列将具有相同的宽度——无论使用多少列，都会拉伸并填充可用空间。

代码中还使用了minmax()函数来设置每列的最大宽度，并将1fr作为最大值。这可以确保内容填满一列直至达到总可用空间。

最后还添加了gap和可选规则，以在连续容器之间应用相同的值。

结果如下：

只有一个缺点。对于三个以上的列，在某些视图中，可能会出现孤立的列。

我们可以通过媒体查询来解决问题，但需要为多个媒体尺寸编写大量代码。

3. 保持元素高度的一致

曾几何时，我们通过jQuery计算以确保容器高度相等。那时，两个容器的内容不相等的时候，我们就想办法让它们的高度等于UX。

但是现代CSS技术——网格系统——可以让这个过程变得更简单。

/*Parent?container*/
.parent?{
??display:?grid;
??grid-auto-flow:?column;
}
/*Child?elements*/
.child?{
????height:?100%;
}

通过将grid-auto-flow切换为row或column，我们可以拥有统一宽度或高度的容器。

CSS flexbox允许我们通过更简单的代码来使用相同的功能。

/*Parent?elements*/
.parent?{
??display:?flex;

/*?Child?elements?*/
??.child?{
????height:?100%;
??}
}

那么，哪一个更好呢？答案是，两者各有优势。如果你想解决等高元素的问题，那么flexbox更优。但是，在flexbox中，元素的宽度可能并不相等。

当然，如果你需要，网格也可以处理等宽的元素。此外，如果想要每一行拥有最大列数，则可以使用网格处理数学。但是如果你使用flexbox，则需要为此定义计算。

4. 提升流畅滚动的用户体验

虽然现如今back to top链接用的少了，但曾经有一段时间确实很流