7件你不知道但可以用CSS做的事

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

不管你信不信，CSS和JavaScript开始重叠，就像CSS增加了更多功能一新。在我写“你可能不知道的CSS和JavaScript互相影响的5种方式”一文时，人们对于JavaScript和CSS是如何重叠的感到惊讶。今天，我将重点强调你能用CSS完成的7种工作——不需要通过JavaScript或图片。

CSS@supports

在使用一些浏览器可能没有的特性时，每一个优秀的前端开发者都需要进行特性测试。特性测试一直以来都是由JavaScript来做的，许多人使用Modernizr，一个由许多测试良好的案例构成的优秀实用工具，来做特性测试。一个新API：@supports，不管怎样，已经出现在开发人员面前，它能让你用CSS来做特性测试。以下是一些@supports如何工作的简单例子：

/* basic usage */
@supports(prop:value) {
/* more styles */
}/* real usage */
@supports (display: flex) {
div { display: flex; }
}/* testing prefixes too */
@supports (display: -webkit-flex) or
(display: -moz-flex) or
(display: flex) { section {
display: -webkit-flex;
display: -moz-flex;
display: flex;
float: none;
}
}

这个新的@supports特性，同样有一个对应的JavaScript版本，但已经过期了，我们期待着早点使用它！

CSS滤镜

写一个服务来修改图片的色调，然后你可以以数十亿美元把它卖给Facebook。当然，那是一件很简单的事，但是写图像滤镜并不是一门科学。我到Mozilla 的第一个星期写的一个小程序（得了奖，额，我只是随便说说而已）用了一些基于JS的数学用canvas来创建图像滤镜，但现在我们用CSS就能创建图像滤镜了。

/* simple filter */
.myElement {
-webkit-filter: blur(2px);
}/* advanced filter */
.myElement {
-webkit-filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);
}

这个类型的滤镜只是改变了下图像的原来样子而已，保存或导出图像时并没有用所说的滤镜，但当你需要给照片美化或处理海报时这很好用。

Pointr Events和 Bricking Clicks

CSS的Pointr Events属性提供了一个方法来有效的禁用一个元素，正因为如此，通过JavaScript，点击一个链接不会触发一个单击事件：

/* do nothing when clicked or activated */
.disabled { pointer-events: none; }/* this will _not_ fire because of the pointer-events: none application */

document.getElementById("disabled-element").addEventListener("click", function(e) {
alert("Clicked!");
});

在上面的例子中，由于CSS pointer-events值的原因，单击事件将不会触发。我发现了它的巨大作用，你不需要每处都检查className或属性来确保一些元素是否已经禁用了。

折叠、展开菜单

CSS让我们可以创建过渡效果和动画，但是很多时候我们需要JavaScript库来帮助我们修改一些东西和控制动画。一个很流行的动画就是折叠、展开菜单效果，很多人都不知道只用CSS就可以实现！

/* slider in open state */
.slider {
overflow-y: hidden;
max-height: 500px; /* approximate max height */transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}/* close it with the "closed" class */
.slider.closed {
max-height: 0;
}

Max-height的一个巧妙使用能让元素按想要的效果来折叠和展开。

CSS计数器

“计数器”这个术语在网络上表示的意思经常让我们傻笑，但CSS 计数器是另一件更让我们傻笑的事。CSS计数器允许开发人员在指定的元素上用:before和:after来增加一个计数器：

/* initialize the counter */
ol.slides {
counter-reset: slideNum;
}/* increment the counter */
ol.slides > li {
counter-increment: slideNum;
}/* display the counter value */
ol.slides li:after {
content: "[" counter(slideNum) "]";
}

你经常见到CSS计数器被用在幻灯片效果上，和像表单内容的列表上。