Airen的博客

CSS自定义属性制作动画

CSS自定义属性又称为CSS的变量或者原生变量。其和CSS处理器里的变量还是略有不同,但这篇文章我们要聊的并不是这个东东,咱们想聊聊CSS自定义属性怎么制作动画。

深入了解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的机制可以说没有这么简单......

【转载】你所不知道的setTimeout

JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()setInterval()这两个函数来完成。它们向任务队列添加定时任务。初始接触它的人都觉得好简单,实际上真的如此么?这里记载下,一路对其使用姿势变迁的历程。

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

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

CSS中的基本图形和路径

在CSS中有些属性是允许CSS绘制图形形状,比如常见的是使用border或者box-shadow来绘制图形或者形状。除此之外,在CSS中还有类似circle()函数也可以绘制圆形。除此之外,在CSS中有一些形状是为CSS其它属性服务,比如clip-pathmask服务和在shape-outside让文本围绕形状排版。还有一些CSS属性使用像SVG中的图形做一些事情,比如offset-path中使用path()函数实现路径动画。而其中path()是一个非常棒的功能,可以绘制任何图形。在接下来的内容中,来介绍一下CSS中的基本图形和路径。希望对大家有所帮助。

【转载】你的首个 Progressive Web App

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

【转载】下一代Web应用模型:Progressive Web App

近年来,Web 应用在整个软件与互联网行业承载的责任越来越重,软件复杂度和维护成本越来越高,Web 技术,尤其是 Web 客户端技术,迎来了爆发式的发展。包括但不限于基于 Node.js 的前端工程化方案;诸如 Webpack、Rollup 这样的打包工具;Babel、PostCSS 这样的转译工具;TypeScript、Elm 这样转译至 JavaScript 的编程语言;React、Angular、Vue 这样面向现代 Web 应用需求的前端框架及其生态,也涌现出了像同构 JavaScript通用 JavaScript 应用这样将服务器端渲染(Server-side Rendering)与单页面应用模型(Single-page App)结合的 Web 应用架构方式,可以说是百花齐放。

CSS Exclusions:让布局变得更有意思

最早接触到CSS Exclusions名词是在2013年@Peter Gasston写的《The future of CSS layouts》(译文点击这里)。至于“Exclusions”译成中文不知道使用什么词更为合适,文章下面暂且直接使用英文,或许更好些。

理解关键的渲染路径

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

【转载】CSS书写模式

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

页面

返回顶部