在我写“你未必知道的JavaScript和CSS交互的5种方法”一文时，人们对于JavaScript和CSS是如何重叠的感到惊讶。今天，我将重点强调你能用CSS完成的7种工作——不需要通过JavaScript或图片。

CSS@supports

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

/*basicusage*/

@supports(prop:value){

/*morestyles*/

}

/*realusage*/

@supports(display:flex){

div{display:flex;}

}

/*testingprefixestoo*/

@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就能创建图像滤镜了。

/*simplefilter*/

.myElement{

-webkit-filter:blur(2px);

}

/*advancedfilter*/

.myElement{

-webkit-filter:blur(2px)grayscale(.5)opacity(0.8)hue-rotate(120deg);

}

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

PointrEvents和BrickingClicks

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

/*donothingwhenclickedoractivated*/

.disabled{pointer-events:none;}/*thiswill_not_firebecauseofthepointer-events:noneapplication*/

document.getElementById("disabled-element").addEventListener("click",function(e){

alert("Clicked!");

});

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

折叠、展开菜单

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

/*sliderinopenstate*/

.slider{

overflow-y:hidden;

max-height:500px;/*approximatemaxheight*/

transition-property:all;

transition-duration:.5s;

transition-timing-function:cubic-bezier(0,1,0.5,1);

}

/*closeitwiththe"closed"class*/

.slider.closed{

max-height:0;

}

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

CSS计数器

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

/*initializethecounter*/

ol.slides{

counter-reset:slideNum;

}

/*incrementthecounter*/

ol.slides>li{

counter-increment:slideNum;

}

/*displaythecountervalue*/

ol.slidesli:after{

content:"["counter(slideNum)"]";

}

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

UnicodeCSS样式名

有许多CSS最好的实践文档，它们都是由如何给CSS样式命名开始的。你永远不会见到有个文档说的的用unicode符号来命名你的样式：

.ಠ_ಠ{

border:1pxsolid#f00;

background:pink;

}

.❤{

background:lightgreen;

border:1pxsolidgreen;

}

请别用这些符号。除非你能行！

CSS圆

CSS三角形是一个技术活，CSS圆也同样如此。通过滥用CSSborder-radius，你能创建很完美的圆！

circle{

border-radius:50%;

width:200px;

height:200px;

/*widthandheightcanbeanything,aslongasthey'reequal*/

}

你可以给你的圆增加渐变，你甚至可以使用CSS动画来让你的圆动起来！CSS即将有更多统一的API提供给这些图形，但现在你可以用这种方法来创建圆了。

你看到了，7件你能用CSS做的事让你很惊讶，其中一些是很有用的，一些可以在工作中用不到。请告诉我，我是否遗漏了一些在工作你经常使用优秀CSS方法。