八个CSS函数的小技巧

   <p>CSS现在已经能实现比网站开发者预料到的更多的功能，并且随着时间的推移，样式表语言越来越强大，能实现许多原先需要依靠JavaScript才能实现的功能。在这篇文章中我们将会介绍CSS函数中8种有用的小技巧。</p>    <h2>1.纯CSS Tooltip</h2>    <p>许多网站还是在使用JavaScript来创建Tooltip效果，但实际上通过CSS能更简单的实现。最简单的方法是在你的HTML代码中添加一个带有提示文本的属性，比如 data-tooltip="…" 。然后你就可以在你的CSS文件中添加以下的代码通过 attr() 函数来显示提示文字：</p>    <pre>  <code class="language-css">.tooltip::after {      content: attr(data-tooltip);  }</code></pre>    <p>相当简单对吧？当然实际上我们还需要更多的代码来给提示增加样式，但是不用担心，已经有了为此设计的强大且纯粹的叫 <a href="/misc/goto?guid=4959544972115938823" rel="nofollow,noindex"> Hint.css </a> 的CSS库和 <a href="/misc/goto?guid=4959713382800784955" rel="nofollow,noindex"> Balloon.css </a> 。</p>    <h2>2.使用自定义数据属性和 attr() 函数</h2>    <p>我们已经学会如何使用 attr() 来创建提示，另外还有一些场景能使用到这个函数。通过与数据属性相结合，你可以通过很简单的一行HTML代码来创建带有标题和描述的缩略图：</p>    <pre>  <code class="language-css"><a class="caption" href="#" data-title="Vulture" data-description="...">      <img src="img.jpg" alt="Illustration"/>  </a></code></pre>    <p>现在你可以通过 attr() 函数来显示标题与描述：</p>    <pre>  <code class="language-css">.caption::after {      content: attr(data-title);      ...  }</code></pre>    <p>以下为具体的例子：</p>    <p>注意：这个方法在浏览器支持方面可能会有一些问题，具体内容你可以查看 <a href="/misc/goto?guid=4959713382895183038" rel="nofollow,noindex">Accessibility support for CSS generated content</a> 这篇文章。</p>    <h2>3. CSS Counters</h2>    <p>你可以通过CSS Counters实现超棒的功能。这不是一个非常为人熟知的属性，大多数人甚至可能认为浏览器不能很好的支持这个属性，但事实上所有的浏览器都支持这个属性：</p>    <p>但是你不应该将CSS counters使用在有序列表 <ol> 上，它更适合使用在类似分页或者图片库下面显示的数字上。你可以通过下面的例子看出如何使用很少的代码（甚至不使用JavaScript）来对选中的项目进行计数：</p>    <p>CSS counters也非常适合显示可通过拖放进行重新排序的项目列表上动态变化的数字：</p>    <p>正如最后一个例子，我们需要记住，通过该方法生成的内容在可访问性上可能会有些问题。</p>    <h2>4.CSS滤镜实现的磨砂效果</h2>    <p>在iOS7中，苹果实现了“磨砂玻璃”的效果--半透明的，模糊的元素，看起来像覆盖了一层磨砂玻璃。受到苹果的启发，这种效果被运用到很多地方。在CSS滤镜出现之前要重现这个效果还是有些棘手的。你必须通过使用 <a href="/misc/goto?guid=4959713382978199177" rel="nofollow,noindex">模糊图片</a> 来实现这种毛玻璃的效果。但现在CSS滤镜得到了几乎所有的主流浏览器的支持，所以要 <a href="/misc/goto?guid=4959713383066711967" rel="nofollow,noindex">重现这个效果</a> 就简单很多了。</p>    <p>在未来，我们可以通过背景过滤器和 <a href="/misc/goto?guid=4959713383143652132" rel="nofollow,noindex"> filter() 函数 </a> 来实现这样的效果，但目前只有 Safari 同时支持这两个功能。</p>    <p>有关于CSS的 filter 更多的介绍可以点击这里进行了解。</p>    <h2>5.将HTML元素作为背景</h2>    <p>一般我们可以设置一个JPEG或者PNG文件作为背景，或者也可以设置一个渐变的背景。但是你知道可以通过使用 element() 函数，从而将一个 <div> 设置为背景图片吗？现在， element() 函数只有在Firefox中得到了支持：</p>    <p>可能性是无止境的， <a href="/misc/goto?guid=4959713383227610246" rel="nofollow,noindex">这里</a> 是MDN上的一个例子。</p>    <p>有关于CSS的 element() 函数的相关介绍可以点击这里。</p>    <h2>6.通过 calc() 创建更好的网格</h2>    <p>流体网格虽然很棒但是仍然存在很严重的问题。比如，在顶部和底部的间距大小几乎不可能与在左边和右边的间距大小相同。另外，若使用的网格系统不一样，标记就会非常混乱。虽然弹性布局不是最终的解决方案，但是通过与 calc() （可以在CSS文件中作为一个属性值）相结合，我们能够创建一个更好的网格。在 <a href="/misc/goto?guid=4959713383318202024" rel="nofollow,noindex">这里</a> ,George Martsoukos列举了很多例子，比如拥有完美间距的画廊网格。通过使用CSS预编译语言，比如Sass， <a href="/misc/goto?guid=4959713383399642606" rel="nofollow,noindex">组建一个创造性的网格系统</a> 可以非常简单且易于维护。同时浏览器对 calc() 的支持几乎完美，因此 calc() 绝对是你应该掌握的一个功能。</p>    <p>有关于CSS的 calc() 函数相关的介绍可以点击这里。</p>    <h2>7. 通过 calc() 对齐 position:fixed 元素</h2>    <p>calc() 的另一个作用是用来对齐 position:fixed 的元素。比如，你有一个内容封装器，它左右都有流动的间距，你希望在这个内容封装器内精确对齐 position 为 fixed 的元素，但是这种情况下要计算出 left 和 right 属性的具体赋值就很困难。通过 calc() ,你可以结合相对和绝对的值来精确定位你的元素：</p>    <pre>  <code class="language-css">.wrapper {      max-width: 1060px;      margin: 0 auto;  }  .floating-bubble {      position: fixed;      right: calc(50% - 530px); /* 50% - half your wrapper width */  }</code></pre>    <p>比如：</p>    <p>有关于这方面的详细介绍可以阅读 <a href="/misc/goto?guid=4959713383482128098" rel="nofollow,noindex">@brnnbrn</a> 写的《 <a href="/misc/goto?guid=4959713383569438384" rel="nofollow,noindex">Aligning position:fixed Elements with CSS calc</a> 》一文。</p>    <h2>8.使用 cubic-bezier() 实现动画</h2>    <p>为了使一个网站或者APP的用户界面更具有吸引力，你可使用一些动画，但是可以选择的过渡效果的速度曲线是相当有限的，比如， linear 或者 ease-in-out 。而标准的速度曲线连弹力运动的效果都实现不了。通过使用 cubic-bezier() 函数，你可以精确实现你想要的动画效果。</p>    <p>有两种方法使用 cubic-bezier() ——了解 <a href="/misc/goto?guid=4959713383652440707" rel="nofollow,noindex">背后的机制</a> 后自己创建，或者是使用 <a href="/misc/goto?guid=4959637431433101601" rel="nofollow,noindex"> cubic-bezier 生成器 </a> 。</p>    <p>说实话，我使用的是后者。</p>    <p>有关于 cubic-bezier() 详细的介绍可以点击这里。</p>    <h2>总结</h2>    <p>更加聪明的使用CSS函数不仅仅可以解决上面的问题比如创建一个更好的网格，它还可以给你更多的创作自由。随着浏览器支持越来越好，你可以使用CSS函数比如 calc() 来修改和提升一下你之前的CSS代码。</p>    <p>本文根据 <a href="/misc/goto?guid=4959713383757489239" rel="nofollow,noindex">@Anselm Urban</a> 的 <a href="/misc/goto?guid=4959713383845877157" rel="nofollow,noindex">《8 Clever Tricks with CSS Functions》</a> 所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处: <a href="/misc/goto?guid=4959713383924562581" rel="nofollow,noindex">https://www.sitepoint.com/8-clever-tricks-with-css-functions</a> 。</p>    <h3>若水</h3>    <p>在校研究生，计算机相关专业。一个喜欢看书和写作的女孩，热爱前端，享受成长。最喜欢的一句话：宁鸣而死，不默而生。</p>    <p> </p>    <p>来自：http://www.w3cplus.com/css/8-clever-tricks-with-css-functions.html</p>    <p> </p>