现代 CSS

anna_nju的博客

惊艳的动画

我们采用错开动画的方式来重建这样的效果,而不是一次就控制一组动画。随着每一个项目动画延迟时间的增加,它们表现的就像是一个个独立的个体,但仍然会作为一个整体正确的移动。这样的结果感觉更加迷人且真实。

八个CSS函数的小技巧

CSS现在已经能实现比网站开发者预料到的更多的功能,并且随着时间的推移,样式表语言越来越强大,能实现许多原先需要依靠JavaScript才能实现的功能。在这篇文章中我们将会介绍CSS函数中8种有用的小技巧。

font-display的用法

如果你已经对CSS有了一定的了解,也许你之前已经掌握了一些字体加载的方法,那么你使用过font-display吗?font-display是CSS中新添加的属性,它能实现之前类似于Font Loading APIBram Stein's Font Face Observer这种第三方脚本实现的功能。如果这是你第一次接触这类知识,那也没有关系,我们会先简单介绍一下浏览器加载字体的默认方法。

提高前端性能的一个案例

De Voorhoede,我们尽所能地为客户推进前端性能。虽然不是很容易就能说服客户完全按照我们的指令去做,但我们一直在尽全力和他们沟通,解释提高性能的重要性,或者将他们的性能与他们主要竞争对手进行比较。最近更新了我们的网站,除了设计上进行了大修,这也是一个将性能提高到最优的理想机会。我们的目标是有效控制,注重性能,与未来技术兼容,并将创建网站变为了一件有趣的事。以下是我们如何改进网站的具体做法。

如何更好的使用BEM

BEM是由Yandex团队提出的一种CSS Class 命名方法,旨在更好的创建CSS/Sass模块。他需要遵循一些特殊规定,有些人认为这些规定很冗余,但是我发现他们对于理解DOM有着很大的帮助。你可以去查看我之前的文章去了解为什么BEM如此伟大。或者你可以去查看这几篇中文文章来了解BEM(《BEM的定义》《为什么我们需要BEM》)。今天这篇文章,是我在假设你对BEM和Sass已经有所了解甚至熟悉的基础上完成的。

Sass: @mixin指令介绍

为了有效的维护和开发项目,代码的重复利用就显得尤为重要。在Sass中,除了@import@extend可以使你的代码更加具有重复利用性,@mixin指令也同样能提高你代码的重复使用率并简化你的代码。

返回顶部