译文

是时候开始使用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的机制可以说没有这么简单......

我为什么对原生CSS变量感到兴奋

几周前,CSS变量,更准确的说是CSS自定义属性——发布在Chrome Canary版的Experimental Web Platform Features flag。Chrome的工程师@Addy Osmani首次在推特发布时,遭遇到了惊人的否定敌意怀疑。至少我很吃惊,鉴于我对这个属性是如此兴奋。

理解Flexbox:你需要知道的一切

这篇文章介绍了Flexbox模块所有基本概念,而且是介绍Flexbox模块的很好的一篇文章,所以这篇文章非常的长,你要有所准备。学习Flexbox可不是件很有趣的事情,因为它将挑战你所知道的CSS布局方面的知识。当然这也是非常正常的,因为一切知识都是值得学习的。另外你要认值对待Flexbox。因为它是现代Web布局的主流方式之一,不会很快就消失。它也成为一个新的W3C标准规范。既然如此,那让我们张开双臂,开始拥抱它吧!

【转载】你的首个 Progressive Web App

Progressive Web Apps 是结合了 Web 和 原生应用中最好功能的一种体验。对于首次访问的用户它是非常有利的, 用户可以直接在浏览器中进行访问,不需要安装应用。随着时间的推移当用户渐渐地和应用建立了联系,它将变得越来越强大。它能够快速地加载,即使在比较糟糕的网络环境下,能够推送相关消息, 也可以像原生应用那样添加至主屏,能够有全屏浏览的体验。

理解关键的渲染路径

当浏览器从服务器接收到一个HTML页面的请求时,到屏幕上渲染出来要经过很多个步骤。浏览器完成这一系列的运行,或者说渲染出来我们常常称之为“关键渲染路径”(Critical Rendering Path)。理解CRP(Critical Rendering Path)相关的知识可以更好的提高网站的性能。

【转载】CSS书写模式

由于你可能没有那么多的时间,所以我将从结论开篇。你可以使用一个不常见,但是非常重要的CSS属性来使文字垂直显示。除了让文字垂直显示之外,你也可以让图标和入口按钮以这样的方式呈现。我写的CSS让浏览器重新布局文字的方向,使元素的布局在正常流的基础上旋转90度。

【转载】让CSS更完美:PostCSS-modules

我们和全局作用域的CSS斗争了多年,现在终于是时候结束它了。不管你用的是什么语言还是框架,CSS命名冲突将不再是个问题。我将给你展示一下PostCSSPostCSS-modules如何使用,并且可以在服务端使用它们。 CSS起初只是一个美化文档的工具,但是事情到1996年发生了变化。浏览器中不再单单只有文档了,即时通讯,各种软件,游戏,没什么是浏览器不能承载的。

从Sass过渡到PostCSS

Sass多年来一直是我的首选。最近我有一段时间,想尝试使用PostCSS的cssnext插件来处理CSS样式。我一直想使用工具尝试写一些CSS的新特性。同时自己的个人网站也是一个最佳测试这些新特性的实验地。

页面

返回顶部