译文

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动画性能

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

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

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

学习CSS Grid

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

CSS Animations vs Web Animations API

上周,我写了一篇关于如何使用CSS制作bitsofcode logo的动画效果。之后收到一些建议,尝试比较一下CSS动画和Web Animations API。所以今天写了这篇文章。

是时候开始使用CSS自定义属性

今天,CSS处理器已是Web开发流程中的一个标准。预处理器的主要优点之一就是它们能够使用变量。这可以帮助你避免复制粘贴代码,也简化了开发和重构。我们使用预处理器可以存储颜色、字体和布局等细节——一切我们想使用的CSS都可以。

你真的理解CSS的linear-gradient?

想要在你的网站有一个好看的渐变背景吗?background-image:linear-gradient(red,blue),就能很轻易的实现一个redblue的渐变背景图片。就是这么的简单。感觉老话重提,有点无聊。如果您想了解更多这方面的知识,建议你阅读以前整理过的相关文章。我也推荐css-tricksMDN上的相关文章。

深入了解CSS字体度量,行高和vertical-align

line-heightvertical-align在CSS中是两个简单的属性。如此简单,大多数人都相信自己已经完全理解它们是如何工作的以及如何使用它们。但事实上并不如此。他们其实很复杂,也是CSS中难点之一,而且也是CSS中特性之一:内联格式化上下文(inline formatting context)。比如可以设置line-height带有长度单位的值或一个无单位的值,但其默认值是normal。那么在CSS中normal是什么呢?我们常常认为它是(或者应该是)1或者1.2,甚至也可以说,CSS规范都不清楚是哪一个。我们也知道,没有单位的line-height是相对于font-size的,但问题是,font-size: 100px;在使用不同的字体(font-family)表现的行为是不一样的,所以line-height总是相同或不同的吗?真的是1还是1.2吗?另外vertical-alignline-height的影响又是什么呢?要深入研究CSS的机制可以说没有这么简单......

页面

返回顶部