css相关的贡献

animo.js

A powerful little tool for managing CSS animations Stack animations, create cross-browser blurring, set callbacks on animation completion, make magic.

Browserhacks:不断更新的浏览器Hack集合

Browserhacks涵盖了各种浏览器的Hack(包括CSS、Javascript),所涉及到的浏览器几乎囊括了你开发时用到的主流浏览器:IE6~IE11、Chrome、FF、还有Android、Safari。发现需要hack时还在到处求索?把这个收藏起来吧~

解密CSS3中的动画属性

CSS3中的动画属性有translate,rotate,perspective,使用得当能为你的页面增添几分姿色,很多同学容易把这些混淆,或者搞不清楚到底都是啥意思,不同于枯燥的标准文档,这里只有Demo,看完之后你马上就清楚了~

StyleStats:向你汇报样式表的健康指标

StyleStats 是1款能够汇报样式表各项指标的小工具,内容涵盖样式大小、DataURI大小、字体多少、选择符多少、颜色等。如果你想对项目中的样式有个总体上的认识,肯定能用得上 StyleStats。

CSS Gradients

Just as you can declare the background of an element to be a solid color in CSS, you can also declare that background to be a gradient. Using gradients declared in CSS, rather using an actual image file, is better for control and performance.

很有创意的加载按钮样式

用户点击某个按钮之后,你需要做很多事情才能给用户反馈?可以试试这些Demo中的按钮,虽然那个操作很耗时,在用户看来,操作还是很流畅的~

几个视觉效果很棒的过场动画

这里有几个视觉效果非常棒的过场动画,Demo 在文中有链接,虽然好的应用应该是简洁朴素的,但是如果你能结合自己的业务场景,为用户提供符合预期的过度动画,那么用户的产品体验肯定会上去的~

Interview Questions and Exercises About CSS

If you're in the position of needing to interview someone about their skill and knowledge about CSS, it can be a little hard to think of things to ask on-the-fly. I thought I'd think up and round up some ideas for reference.

实现 CSS Overlay 的6种技巧

你的网页里面肯定会有弹窗,你有自己亲手实现过弹窗么?只知道用绝对定位的元素来实现?思路还是太狭窄,这里介绍了很多方法~

Looking Into the Future of Sass

Sass is a CSS preprocessor. This is now common knowledge. First commit in 2007 by Hampton Catlin. Now the most used CSS preprocessor. Sass has come a long way since its beginning. It's been a while Nathan Weizenbaum and Chris Eppstein are working on version 3.3. As of today, the alpha version is already available (with its bugs of course) and I'm pretty confident saying the official version will be released anytime soon (no date announced).

CSS Reference, Properties and Values, CSS3

A tool I built a while back. Just a simple interface to search for CSS properties and get all the possible values for that property. In the future I plan to add browser support for each property, to make it a little more practical.

用CSS实现的全文检索

看到这个我都惊呆了,仅仅使用data-*属性、CSS3的属性选择符和几行简单的js就能实现浏览器中的全文检索?极大的提高了应用的可用性,可能你也用得着~

再说 CSS 性能:选择符和属性

虽说优化 CSS 的性能远没有优化网站后端和静态资源分发速度见效那么明显,但是站在用户的角度,即使是再小的优化,用户也能从中受益。使用不当的 CSS 会占用用户电脑更多的资源,也可能会让页面变的卡顿,有关 CSS 性能的方方面面~

DevTools: Visually Re-engineering CSS For Faster Paint Times

Sometimes it’s the small, seemingly insignificant things that can be the greatest performance bottlenecks in your application. Watch your CSS and also keep in mind that it’s quite plausible to have poor paint times due to non-optimal JS, such as onscroll handlers firing multiple times or occupying a great deal of time.

uCSS:冗余CSS猎手

很多代码经年不用,但是你不确定该不该删掉,因为网站上的页面太多,你无法全部测到?uCSS可能帮到你,他能爬下整个网站,并计算CSS的使用情况~

BEM:见名知意的 CSS 命名规则

相信所有的程序员都希望自己的代码可读性高,因为这样维护交接的成本就不会太高,在 CSS 领域,已经产生诸如 OOCSS、SMACSS、BEM 等方法论帮你达到目的,这篇文章介绍了 BEM 这种选择符命名规则和思考方式,SASS 的最新版本甚至对 BEM 做了内置的支持,还不熟悉的同学可以仔细看看了~

助你实现CSS自动化的4个工具

除非每次修改CSS时你对所有的页面进行了回归测试,否则,总有1天某人修改了某处,而影响其他页面的展示,墨菲定律就是这么说的,CSS自动化测试就能帮你节省不少麻烦。

Nicolas Gallagher: WEB应用的CSS架构

多人维护的WEB项目自然会有越来越多的CSS、HTML,但是市面上还没有非常好的工具来帮你有条有理的管理这些代码,没有精心设计的CSS架构,团队开发很快就会变成1个噩梦,Nicolas Gallagher为你带来:WEB应用的CSS架构。不知道他是谁,去github上看看~

如何在CSS预处理器中实现继承

我们都知道CSS中的样式是可以层叠和继承的,而3大CSS预处理器也都是可以实现继承的,此继承非彼继承,那么试用SASS、LESS、Stylus的时候如何实现继承,会遇到什么问题呢?文中详解。

Rework:随心所以的CSS预处理引擎

使用过SASS、LESS或者Stylus?这些CSS预处理器能够帮助你做很多事情,可还是有很多事情貌似是他们鞭长莫及的,想自己定制对CSS的预处理?看看这个开源库,会让你相见恨晚~

哪些CSS属性可以实现动画?

理论上来说,那些有具体的属性值,并且指定了开始值和结束值的CSS属性都可以进行动画,比如布局属性、定位属性、字号、颜色等。那么哪些CSS属性又不能实现动画呢?

如何抽取网页所需的关键 CSS?

页面下载的 CSS 非常多,可是首屏渲染会用到的 CSS 可能连 20% 都不到,为了让首屏渲染的更快,可以考虑将首屏需要的 CSS 剥离出来内联到页面中,那么如何抽取首屏渲染所需要的 CSS?这个基于 CasperJS 的脚本能帮你完成~

三栏式布局的 FlexBox 实现

这个 GitHub 仓库把很多经典的 CSS 问题挨个用 FlexBox 解决了1遍,从代码上来说确实简洁了很多,这篇文章就是三栏式布局的解决方案,20多行代码,不仅能满足各种栏宽需求,还让布局具备了自适应的能力~

FlexBox 进阶资源汇总

用 FlexBox 能够非常容易的实现各种布局需求,需要写的代码更少,也不需要使用各种浮动、定位属性。来自 Smashing Conference 的这篇文章,汇集了很多这方面的资料,虽然浏览器支持没达到100%,但在某些项目中使用还是很省事儿的。

开始使用 Sass 的流程控制语法

SASS 中的 Mixin 和 Extend 已经能够为编写 CSS 带来了非常大的遍历,更为逆天的是新版本的 SASS 中又加入了 @if, @for, @each 和 @while 这些流程控制语法,让 CSS 编写更轻松,不得不感叹,这个现在真的进化成1门编程语言了~

浏览器中的小像素取余差异

CSS中可以用百分比设置节点大小,当用户缩放浏览器窗口时,节点大小也会随着改变?我们都知道计算机的数值计算肯定是存在误差的,不同的浏览器如何处理节点大小计算时的像素差异呢?

用CSS形状实现非矩形的布局

有人竟然能拿CSS来写漫画?真令人瞠目结舌,不过貌似都是真的,这篇文章里面,作者教你如何用CSS形状实现非矩形的布局,不一定适用,但还是值得看看~

你能从Yandex前端团队学到什么?

Yandex听过么?俄罗斯的1家公司,他的前端团队大概150左右,经过多年的技术积累,逐渐形成了前端开发方面的1套方法论和工具集,里面都有些什么东西?有如何能帮到你?

如何编写可维护的CSS?

CSS本身很简单,没有作用域,没有命名空间,没有函数,更没有变量,简单到我们经常干蠢事,比如过长的选择符,大量的ID和tag选择符,对于大型项目,该如何编写CSS保证其可用性呢?这个Slide可能会给你些方向。

你应该知道的组合式 CSS 选择符

这篇文章列举了几种组合式 CSS 选择符,有些可能你用的非常顺溜,有些可能你还不太熟悉,因为并不是所有的浏览器都支持这些,提前了解下也好对 CSS 选择符的未来也有所期待嘛~

CSS中的框架和方法论

BEM?OOCSS?SMACSS这些名词是什么?能帮你解决什么问题?作为1个从自由开发者向团队开发者转型的工程师,跟你分享了如何在他们之间做选择。

Fuel UX:弥补Bootstrap不足的控件库

Fuel UX 提供了很多Bootstrap不提供的网页控件,样式和Bootstrap保持了高度的一致,并且源代码模块化做的非常好,觉得Bootstrap提供的控件太少?这里可能就有你需要的~

Tether:精巧的网页元素定位库

我首次注意到 Tether 是在浏览 Bootstrap 4 的网站发现的,Tether 是一款非常小巧、灵活、强大的网页元素定位库,调用的语法也非常的语义化,体积非常小,Bootstrap 都使用了,你应该也看看。

想看更多类似内容?