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。不过可惜这些都只停留在概念上。也许未来有一天,这些概念会成为现实,不过与此同时,我也来分享一些小技巧,你现在就可以用来处理某一类的问题。

探讨CSS Grid Layout在原生客户端中运用

CSS Grid Layout是W3C规范中专门为Web布局提供的一个特性。CSS Grid Layout将改变传统的布局模式,他将让布局从一维布局变成了二维布局。简单的说,有了CSS Grid Layout之后,布局不再局限于单个维度了。这个时候你要实现类似九宫格,拼图之类的布局效果显得格外的容易。虽然CSS Grid Layout给Web布局带了革命性的变化,那么他在原生客户端(也就是APP)开发中,其运用是否也能像Web一样呢?接下来我们就一起来探讨。

使用浏览器开发者工具检测CSS动画性能

CSS动画性能非常好。虽然是简单的几个动画元素,如果你的代码没有让动画表现出其意义或者说使用页面变得更为复杂,网站的用户可能很快就会发现,并且有可能让用户觉得恶心。反而得不到相应的好评。在这篇文章中,我将介绍浏览器开发者工具的一些有用的功能,这些功能将能帮助你检查出你的CSS动画在渲染引擎下会发生些什么。这样,当你的动画看起来有点卡(帧率图有点波涛汹涌),你会找到地应的方法知道为什么为会这样以及如何解决它。

阐述CSS Grid实现限宽容器全屏效果

在《如何使用CSS Grid布局实现限宽容器全屏效果》一文中介绍了使用CSS Grid布局实现限宽容器全屏效果,特别是全屏图片的效果时常可见。但这篇文章并没有详细阐述为什么使用CSS Grid这种方法。@Rachel Andrew新发的博文尝试阐述其中的原理。

CSS即将具备的6种处理器特性

今天看到@Dennis Gaebel分享的一篇博文。觉得很有意思。同时感觉老外分享出来的东西就是不一样,尽管自己也专门整整CSS,但从新特性的发掘和敏锐性就差十万八千里。不吐槽了,还是回到正题来吧。

学习CSS Grid

CSS Grid是一个强大的工具,它允许在Web上创建二维布局。这一篇学习CSS Grid的指南,通过图形的方式帮助您更好的理解和学习CSS Grid。花时间整理和阅读这篇文章都是非常有意义的。我们要特别感谢Mozilla开发人员W3C规范中有关于CSS Grid的资源。同时也需要特别感谢@Jen Simmons@Rachel Andrews两位女士,她们是CSS Grid的主要贡献者,可以说要是没有她们,就没有今天的CSS Grid。

页面

返回顶部