2021年CSS变量性能基准

自定义属性自Chrome 49(2016年3月3日)起可用。虽然Internet Explorer 11不支持它们,但也许现在是时候跳上这一行列了?性能如何呢? 我决定创建一个简单的基准来检查5000个变量是否会减慢页面的渲染速度。如果你想审查或重用我的代码,你可以在这里找到它。 测试条件 生成5000种颜色。 创建10000个HTML节点(可重复使用系数=1)。 输出一个带有标准CSS类的H

- 阅读全文 -

5大CSS网格布局生成器

现代网络应用是响应式的。尽管许多CSS库和框架支持网格系统,但使用纯CSS网格也成为一种趋势。因此,如果你知道正确的工具,你可以使从头开始生成网格布局变得容易得多。 因此,在这篇文章中,我将介绍5个最好的CSS布局生成器,并进行功能比较,以帮助你直观地生成CSS网格。 1. Griddy Griddy是设计师和开发人员中最常用的CSS网格生成器之一。 使用Griddy,你只需配置行、列、间隙

- 阅读全文 -

2021年Chrome开发峰会上宣布的一切

这篇文章总结了2021年Chrome开发峰会的所有重要公告,并提供了你需要的链接以了解更多信息。 让网络更具有互操作性 网络兼容性是网络开发者面临的最大挑战之一,因此谷歌一直在与其他浏览器供应商合作,修复五大兼容性痛点。 flexbox, grid, position: sticky, aspect-ratio, and transforms. 这项工作已经导致了这些关键领域的改进。你可以在Co

- 阅读全文 -

7个有用的CSS小抄来提高你的技能

学习CSS有时会让人不知所措。有很多概念需要你去学习。CSS并不难学,但你需要大量的练习才能成为好手。 无论你想学习什么技术,建造东西都是提高技能的最好方法。这就是为什么在这篇文章中,我想与你分享一个很棒的CSS小抄清单,以帮助你提高你的知识。因此,让我们直接进入主题。 1. CSS animations & effects 如果你想轻松地学习CSS动画和效果,CSS animatio

- 阅读全文 -

如何用CSS创建Emojis

今天,Emojis被广泛用于通信目的。因此,我想看看用基本的HTML、CSS和JavaScript来创建它们有多容易,而不是打字。 因此,在这篇文章中,我将向你展示如何用鼠标创建一个简单的舞动眼睛的表情符号,具体有5个步骤。 第1步 - 创建一个新的HTML文件。 因此,我创建了一个新文件,命名为index.html,并添加了一个新的背景颜色。 <!DOCTYPE html> &l

- 阅读全文 -