欢迎移步我的博客阅读：《CSS 的使用中你可能不知道的 7 件事》
无论你信不信，JavaScript 和 CSS 已经开始重叠，并为 CSS 增加了更多的功能。当我在写 CSS 与 JavaScript 交互中你可能不知道的 5 种方式的时候，读者对于 CSS 与 JavaScript 已经重叠的事感到很惊讶。那么今天，我会着重为你介绍 7 个可以通过 CSS 完成的任务 —— 不使用 JavaScript 或图像处理！
CSS @supports
每个优秀的前端工程师都会在使用某个特性前测试一下，确保是否在浏览器中可以使用。而这类测试通常是由 JavaScript 完成的，当然，也有很多人用 Modernizr（拥有很多很好功能的测试工具）来测试特性。那么现在有一个 CSS 新的 API 可以让你去做特性测试：@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 Filters
你可以写一个服务去修改图片的颜色，同时还可以把它卖给 Facebook 获得大量的钱！当然，写一个图片过滤器功能只是一个简单化的实现，并非一门科学。在 Mozilla 的第一周，我写了一个小的应用（这让我赢了比赛，BTW...就说说而已），这个应用使用了一些 JS-base 的数学方法并使用 canvas 去做图片过滤器。这很麻烦，但是现在我们可以用 CSS 的特性去完成这一功能！
/* simple filter */
.myElement {
-webkit-filter: blur(2px);
}
/* advanced filter */
.myElement {
-webkit-filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);
}
这类的过滤功能只是创建一个图片的原型，并且不会保存和导出来完成过滤器的功能。这对于图片管理或想处理任何一张图片来说很方便！
Pointer Events 和点击事件
CSS 特性中的 pointer-events 提供了一个方法，能使一个元素 disable，即在用户点击某个元素时，不触发它在 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!");
});
在上述的例子中，由于 pointer-events 的值是 none，而使点击事件不被触发。大有用处的是，让你不必到处去检查类名或属性，来确认哪一个是 disabled 的了。
Slide Down & Slide Up
CSS 使我们能够创建转换和动画，但通常我们需要一个 JavaScript 库帮助我们实现。例如一个比较流行的动画效果 slide up 和 silde down，大概很多人都不知道这个可以只用 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 Counters
我们不禁地问，“counter” 在网上意味着什么呢？但是 CSS Counters 就是另外一回事了。这个特性可以把一个 counter 加到元素中，通过 :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) "]";
}
通常这个会在一些模块或是列表中用到。
Unicode CSS Classes
有大量的文章说明，去教你如何对 CSS 的类命名。但你应该不知道会有这样的文档，去教你用特殊字符命名你的 css 类：
.ಠ_ಠ {
border: 1px solid #f00;
background: pink;
}
.❤ {
background: lightgreen;
border: 1px solid green;
}
但请不要这么使用。
CSS Circles
CSS 中的圆形 与 CSS 中的三角形一样。通过使用 border-radius 就能创建一个完美的圆形！
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
/* width and height can be anything, as long as they're equal */
}
你也可以给圆形添加一些渐变效果，甚至可以添加动画。CSS 拥有更多对于图形统一的 API，当然现在你可以使用 hack 创建一个圆形。
就是这些：你可能不知道的 7 个关于 CSS 的事，一部分是临界的情况，其他一部分还是非常实用的。那么就大胆地去用它们吧！
网友评论