文章摘要
这篇文章介绍了如何使用CSS完成7种无需JavaScript或图片的工作，涵盖了当前CSS技术的各种高级功能。以下是文章的核心内容总结： 1. **CSS@supports特性**：这是一个新的特性，允许开发者在浏览器支持的特性范围内进行测试。通过@supports，开发者可以轻松实现JavaScript traditionally supported features，例如特性测试功能。 2. **CSS滤镜**：CSS滤镜为图像处理提供了新的方式。通过使用`-webkit-filter`属性，开发者可以实现复杂的图像效果，如模糊、色调调整等，而无需依赖外部工具。 3. **Pointr Events和Bricking Clicks**：通过CSS的`pointer-events`属性，开发者可以禁止元素的pointer events（如单击、拖放等），从而阻止JavaScript事件的触发。这种方法非常适合用于禁止点击已禁用的链接或按钮。 4. **CSS slider效果**：使用CSS和`transition`属性，可以轻松创建滑动效果，例如展开和折叠菜单。通过`transition-duration`和`transition-timing-function`属性，开发者可以控制动画效果。 5. **CSS计数器**：通过在HTML元素中使用`:before`和`:after`伪类，开发者可以实现CSS计数器功能。这种技术常用于创建幻灯片效果或表单内容的列表。 6. **Unicode CSS样式名**：文章提醒开发者避免使用非Unicode字符作为CSS样式名，除非在特定情况下非常熟练且需要这样做。 7. **CSS圆**：通过巧妙使用`border-radius`属性和`width/height`属性，开发者可以创建完美的圆形，并进一步通过渐变和动画使其更具表现力。 这篇文章展示了CSS技术的多样性和强大功能，提醒开发者在日常工作中灵活运用这些技巧，提升开发效率。
在我写“你未必知道的JavaScript和CSS交互的5种方法”一文时，人们对于JavaScript和CSS是如何重叠的感到惊讶。今天，我将重点强调你能用CSS完成的7种工作——不需要通过JavaScript或图片。
CSS@supports
在使用一些浏览器可能没有的特性时，每一个优秀的前端开发者都需要进行特性测试。特性测试一直以来都是由JavaScript来做的，许多人使用Modernizr，一个由许多测试良好的案例构成的优秀实用工具，来做特性测试。一个新API：@supports，不管怎样，已经出现在开发人员面前，它能让你用CSS来做特性测试。以下是一些@supports如何工作的简单例子：
复制代码 代码如下:
@supports(prop:value) {
}
@supports (display: flex) {
div { display: flex; }
}
@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就能创建图像滤镜了。
复制代码 代码如下:
.myElement {
-webkit-filter: blur(2px);
}
.myElement {
-webkit-filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);
}
这个类型的滤镜只是改变了下图像的原来样子而已，保存或导出图像时并没有用所说的滤镜，但当你需要给照片美化或处理海报时这很好用。
Pointr Events和 Bricking Clicks
CSS的Pointr Events属性提供了一个方法来有效的禁用一个元素，正因为如此，通过JavaScript，点击一个链接不会触发一个单击事件：
复制代码 代码如下:
.disabled { pointer-events: none; }
document.getElementById(“disabled-element”).addEventListener(“click”, function(e) {
alert(“Clicked!”);
});
在上面的例子中，由于CSS pointer-events值的原因，单击事件将不会触发。我发现了它的巨大作用，你不需要每处都检查className或属性来确保一些元素是否已经禁用了。
折叠、展开菜单
CSS让我们可以创建过渡效果和动画，但是很多时候我们需要JavaScript库来帮助我们修改一些东西和控制动画。一个很流行的动画就是折叠、展开菜单效果，很多人都不知道只用CSS就可以实现！
复制代码 代码如下:
.slider {
overflow-y: hidden;
max-height: 500px;
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.slider.closed {
max-height: 0;
}
Max-height的一个巧妙使用能让元素按想要的效果来折叠和展开。
CSS计数器
“计数器”这个术语在网络上表示的意思经常让我们傻笑，但CSS 计数器是另一件更让我们傻笑的事。CSS计数器允许开发人员在指定的元素上用:before和:after来增加一个计数器：
复制代码 代码如下:
ol.slides {
counter-reset: slideNum;
}
ol.slides > li {
counter-increment: slideNum;
}
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;
}
你可以给你的圆增加渐变，你甚至可以使用CSS动画来让你的圆动起来！CSS即将有更多统一的API提供给这些图形，但现在你可以用这种方法来创建圆了。
你看到了，7件你能用CSS做的事让你很惊讶，其中一些是很有用的，一些可以在工作中用不到。请告诉我，我是否遗漏了一些在工作你经常使用优秀CSS方法。
您可能感兴趣的文章:CSS3实例分享之多重背景的实现(Multiple backgrounds)你未必知道的JavaScript和CSS交互的5种方法
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
