八个CSS函数的小技巧

发布于若水

8 年前

CSS现在已经能实现比网站开发者预料到的更多的功能，并且随着时间的推移，样式表语言越来越强大，能实现许多原先需要依靠JavaScript才能实现的功能。在这篇文章中我们将会介绍CSS函数中8种有用的小技巧。

1.纯CSS Tooltip

许多网站还是在使用JavaScript来创建Tooltip效果，但实际上通过CSS能更简单的实现。最简单的方法是在你的HTML代码中添加一个带有提示文本的属性，比如data-tooltip="…"。然后你就可以在你的CSS文件中添加以下的代码通过attr()函数来显示提示文字：

.tooltip::after {
    content: attr(data-tooltip);
}

相当简单对吧？当然实际上我们还需要更多的代码来给提示增加样式，但是不用担心，已经有了为此设计的强大且纯粹的叫Hint.css的CSS库和Balloon.css。

2.使用自定义数据属性和`attr()`函数

我们已经学会如何使用attr()来创建提示，另外还有一些场景能使用到这个函数。通过与数据属性相结合，你可以通过很简单的一行HTML代码来创建带有标题和描述的缩略图：

<a class="caption" href="#" data-title="Vulture" data-description="...">
    <img src="img.jpg" alt="Illustration"/>
</a>

现在你可以通过attr()函数来显示标题与描述：

.caption::after {
    content: attr(data-title);
    ...
}

以下为具体的例子：

注意：这个方法在浏览器支持方面可能会有一些问题，具体内容你可以查看Accessibility support for CSS generated content这篇文章。

3. CSS Counters

你可以通过CSS Counters实现超棒的功能。这不是一个非常为人熟知的属性，大多数人甚至可能认为浏览器不能很好的支持这个属性，但事实上所有的浏览器都支持这个属性：

但是你不应该将CSS counters使用在有序列表<ol>上，它更适合使用在类似分页或者图片库下面显示的数字上。你可以通过下面的例子看出如何使用很少的代码（甚至不使用JavaScript）来对选中的项目进行计数：

CSS counters也非常适合显示可通过拖放进行重新排序的项目列表上动态变化的数字：

正如最后一个例子，我们需要记住，通过该方法生成的内容在可访问性上可能会有些问题。

4.CSS滤镜实现的磨砂效果

在iOS7中，苹果实现了“磨砂玻璃”的效果--半透明的，模糊的元素，看起来像覆盖了一层磨砂玻璃。受到苹果的启发，这种效果被运用到很多地方。在CSS滤镜出现之前要重现这个效果还是有些棘手的。你必须通过使用模糊图片来实现这种毛玻璃的效果。但现在CSS滤镜得到了几乎所有的主流浏览器的支持，所以要重现这个效果就简单很多了。

在未来，我们可以通过背景过滤器和filter()函数来实现这样的效果，但目前只有Safari同时支持这两个功能。

有关于CSS的filter更多的介绍可以点击这里进行了解。

5.将HTML元素作为背景

一般我们可以设置一个JPEG或者PNG文件作为背景，或者也可以设置一个渐变的背景。但是你知道可以通过使用element()函数，从而将一个<div>设置为背景图片吗？现在，element()函数只有在Firefox中得到了支持：

可能性是无止境的，这里是MDN上的一个例子。

有关于CSS的element()函数的相关介绍可以点击这里。

6.通过`calc()`创建更好的网格

流体网格虽然很棒但是仍然存在很严重的问题。比如，在顶部和底部的间距大小几乎不可能与在左边和右边的间距大小相同。另外，若使用的网格系统不一样，标记就会非常混乱。虽然弹性布局不是最终的解决方案，但是通过与calc()（可以在CSS文件中作为一个属性值）相结合，我们能够创建一个更好的网格。在这里,George Martsoukos列举了很多例子，比如拥有完美间距的画廊网格。通过使用CSS预编译语言，比如Sass，组建一个创造性的网格系统可以非常简单且易于维护。同时浏览器对calc()的支持几乎完美，因此calc()绝对是你应该掌握的一个功能。

有关于CSS的calc()函数相关的介绍可以点击这里。

7. 通过`calc()`对齐`position:fixed`元素

calc()的另一个作用是用来对齐position:fixed的元素。比如，你有一个内容封装器，它左右都有流动的间距，你希望在这个内容封装器内精确对齐position为fixed的元素，但是这种情况下要计算出left和right属性的具体赋值就很困难。通过calc(),你可以结合相对和绝对的值来精确定位你的元素：

.wrapper {
    max-width: 1060px;
    margin: 0 auto;
}
.floating-bubble {
    position: fixed;
    right: calc(50% - 530px); /* 50% - half your wrapper width */
}

比如：

有关于这方面的详细介绍可以阅读@brnnbrn写的《Aligning position:fixed Elements with CSS calc》一文。

8.使用`cubic-bezier()`实现动画

为了使一个网站或者APP的用户界面更具有吸引力，你可使用一些动画，但是可以选择的过渡效果的速度曲线是相当有限的，比如，linear或者ease-in-out。而标准的速度曲线连弹力运动的效果都实现不了。通过使用cubic-bezier()函数，你可以精确实现你想要的动画效果。

有两种方法使用cubic-bezier()——了解背后的机制后自己创建，或者是使用cubic-bezier生成器。

说实话，我使用的是后者。

有关于cubic-bezier()详细的介绍可以点击这里。

总结

更加聪明的使用CSS函数不仅仅可以解决上面的问题比如创建一个更好的网格，它还可以给你更多的创作自由。随着浏览器支持越来越好，你可以使用CSS函数比如calc()来修改和提升一下你之前的CSS代码。

本文根据@Anselm Urban的《8 Clever Tricks with CSS Functions》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处:https://www.sitepoint.com/8-clever-tricks-with-css-functions。

八个CSS函数的小技巧

1.纯CSS Tooltip

2.使用自定义数据属性和attr()函数