OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

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


分享到
分类 心得体会   关键字 前端   发布 andrewleeson  1399651176802
注意 转载须保留原文链接,译文链接,作者译者等信息。  

不管你信不信,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计数器被用在幻灯片效果上,和像表单内容的列表上。

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方法。

 


原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 编程是一个没有前途的工作
  2. 你已经毁了JavaScript
  3. 为什么我不建议你将JavaScript作为主力语言
  4. 你用什么工具开发JavaScript?
  5. 将JavaScript 作为第一编程语言
  6. 静态web的回归
  7. 什么是最优秀的JavaScript框架?Angular or Backbone?
  8. 使用Backbone构建精美应用的7条建议
  9. 抛弃jQuery,深入原生的JavaScript
  10. OpenSSL是坑货写的
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 心得体会
  1. 每周工作不要超过40小时
  2. 软件开发中最流行的错误观点有哪些?
  3. 10位顶级PHP大师的开发原则
  4. 14条建议,使你的IT职业生涯更上一层楼
  5. 不能和老板做亲密朋友
  6. 老码农教你学英语
  7. 不要盲目的在项目中使用LESS CSS
  8. 做为技术人员为什么要写博客
  9. 幸福和成功的十条诫律
  10. 在创业型软件公司的收获

 关键字 - 前端
  1. 15个最好的HTML5前端响应式框架(2014)
  2. 5个经典的前端面试问题
  3. 用css禁用input、checkbox、select等html控件,实现disable效果
  4. 用纯css改变下拉列表select框的默认样式
  5. 我们抛弃了AngularJS:单页面应用的5大缺陷
  6. 超简易——Bootstrap可关闭tab标签页
  7. Animate.css让添加CSS动画像喝水一样容易
  8. 用纯CSS停止冒泡和阻止浏览器默认行为及事件响应,达到禁用(disable)的目的
  9. 我为什么选择 D3.js
  10. CSS3实现的响应式字体:自适应视图窗口大小的新单位

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号