CSS可以做的几个令你叹为观止的实例分享

在我写“你未必知道的JavaScript和CSS交互的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计数器被用在幻灯片效果上,和像表单内容的列表上。

Unicode CSS样式名

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

复制代码 代码如下:._ {border: 1px solid
#f00;background: pink;}

. {background: lightgreen;border: 1px solid green;}

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

CSS圆

CSS三角形是一个技术活,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动画来让你的圆动起来!CSS即将有更多统一的API提供给这些图形,但现在你可以用这种方法来创建圆了。

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