你可能不知道的 5 个 CSS 属性

为了提高我作为前端开发人员的水平，我一直在研究许多新的 CSS 属性。

我最近在项目中遇到并使用了一些新的 CSS 属性，这些属性让我非常着迷。因此，我将分享 5 个你可能不知道的 CSS 属性。

1. @media (hover: none) 或@media (hover: hover)
您如何知道用户是使用触摸屏设备（例如手机）还是非触摸屏设备（例如台式机/笔记本电脑）查看您的 Web 应用程序？

您可以使用上面的媒体查询来确定这一点。

这一点很重要，因为一些 CSS 属性，比如hover，在触摸屏设备上可能就没那么重要了。hover 效果在触摸屏设备上可能不太明显。

@media all and(hover: none) {
为触摸屏设备（例如手机）应用样式
}

@media all and(hover: hover) {
为非触摸屏设备应用样式
}

以下 Codepen 中的 CSS 属性仅在非触摸屏设备上，当用户将鼠标悬停在文本上时才会生效。因此，如果您在手机上查看此代码，则悬停效果将不起作用。

2. 选择伪类
选择伪类允许您定义当用户尝试在您的 Web 应用程序上复制文本时出现的自定义颜色和背景颜色。

3. 连字符
通过将连字符属性设置为自动，网页上的文本将自动使用连字符。

在下面的代码中，尝试调整浏览器大小并查看连字符是否自动应用于文本

4. background-clip ：
当设置为text时，background-clip 属性可用于在文本上创建线性渐变。
但是，要在 Chrome 浏览器上正常工作，您需要添加-webkit前缀。

5 @supports
这是一个非常有用的 CSS 属性。它允许你设置仅在浏览器支持该 CSS 属性时才应用的样式。

在下面的 codepen 中，@supports属性将确保backdrop-filter CSS 属性仅在支持该属性的浏览器上生效。因此，如果您使用不支持该属性的浏览器（例如 Firefox）查看网页，则​​backdrop-filter将不会生效。您需要设置一个应该应用的默认属性。在本例中，我使用了 background-color 作为 fallback 属性。

点击按钮查看模态框

就是这样！

如果您发现任何 CSS 属性有趣，请在下方留言。我也很乐意了解您最近遇到的新 CSS 属性。

谢谢阅读。