现代 CSS

译文

DIY Web Animations: Promise + rAF + Transition

Web Animation API非常的棒。除了能很好的支持平常动画之外。我发现还可以使用Promise、rAF和CSS Transition来重新创建它们,结果类似人体工程学。

如何有效的使用JavaScript Console

JavaScript中最有效的调试工具之一就是console.log()console提供了一些有用的方法可以帮助开发人员更好的调试你的代码。

CSS Animations vs Web Animations API

JavaScript提供了动画原生API,被称为Web Animations API。在这篇文章中我们称之为WAAPI。MDN有详细的文档,而且@Dan Wilson写了一个系列的文章来介绍WAAPI。在这篇文章中,我们将比较WAAPI和CSS Animation之间的差异。

JavaScript:为什么3+true=4?

3 + true === 4。学习为什么以及一起探索其他八个有趣的JavaScript方程式。跟随我往下一起探索是不是觉得奇怪?你可以打开你的Chrome浏览器的开发者控制台:Windows系统按下Ctrl + Shift + J,Mac电脑按下Cmd + Option + J。这样做的好处是,让你在控制台输入以下代码,你会可以看到这些代码会发生什么。

19个JavaScript编码小技巧

这篇文章适合任何一位基于JavaScript开发的开发者。我写这篇文章主要涉及JavaScript中一些简写的代码,帮助大家更好理解一些JavaScript的基础。希望这些代码能从不同的角度帮助你更好的理解JavaScript。

JavaScript异步函数

JavaScript的主要优势之一就是任何事情都是异步的。在大多数情况下,不同部分的代码不会影响共他的代码执行。

CSS局部变量

CSS自定义属性也被称为CSS变量。这是非常令人兴奋的,因为我们在CSS中终于拥有真正的变量。什么意思,真正的变量?我的意思是可以动态更新和修改变量。虽然CSS处理器有了变量(Sass和PostCSS),这些变量通过编译变成了CSS,但没有动态能力更新其变量。这不是真正的CSS变量,只是用来存储和更新可用的值。

CSS的状态

JavaScript越来越有一统天下的趋势,这已经不是什么秘密了。但是你可能不知道的是,CSS也同样的在进化,在创新。CSS最近已突飞猛进,得到很多的改善。甚至CSS都有可能不再是你认识的CSS了。当你不注意的时候,CSS社区开发了很多真正解决许多古怪的CSS问题,在这个过程不需要使用一些黑魔法,以前的缺陷也不再是缺陷。也使这些害群之马从前端的家庭中踢出去。在这篇文章中,将会介绍CSS中的五种老的处理方式,而今天你不再需要那样做。既然不需要那样做了,那又应该怎么做呢?接下来就一一给大家呈现。

minmax()函数如何工作

CSS Grid Layout规范中的minmax()函数是一个非常有用的新特性。这个函数能够让我们用最简单的CSS控制网格轨道的大小。这个函数包括一个最小值和最大值。

不使用Media Queries的自适应CSS

虽然标题说不用Media Queries,但我还是要在开头讲清楚,本文并不是要大家丢掉Media Queries,也不是要抨击Media Queries。Media Queries实际上非常有用,我在各种地方都会用到。但Media Queries并不能解决所有的自适应的设计问题。常常有一种需求是根据元素所在的组件本身的大小来决定元素的排列,而不是整个视窗的宽高。要解决这类问题,Element Queries的概念诞生了。然而,Element Queries只停留在概念上,Mat Marquis 也针对这个概念提出了一些问题,并且称之为container queries。不过可惜这些都只停留在概念上。也许未来有一天,这些概念会成为现实,不过与此同时,我也来分享一些小技巧,你现在就可以用来处理某一类的问题。

页面

返回顶部