目前市面上有很多页面搭建方案，其中一种是基于运行时的lowcode/nocode搭建平台，主要是面向运营、产品及部分开发人员；另外一种则是基于DSL或代码，将可视化能力作为代码编写的辅助能力集成进现有项目中，主要是面向开发人员。AUX辅助工具（下文简称AUX）属于后者。

AUX是架构前端内部研发的一套可视化开发工具，旨在为前后端研发同学提供页面开发的可视化交互和代码生成能力。它侵入性弱，直接对代码进行修改，因此在兼顾易用性的同时产生的代码具有很强的可维护性和二次开发能力。同时，也由于完全基于代码本身，和其他低码平台不同，除了代码没有更加详细的元数据，所以AUX的很大一部分工作，在于努力实现基础的从运行时到编译时的反向处理能力，这样才能保证用户在浏览器中的各种操作能够被分解，并还原到真正的源代码中。

AUX工具提供了很多有趣的功能，其中一个是关于在浏览器中对css样式进行可视化编辑。可视化样式编辑的目的是让开发者能够在开发环境的浏览器端通过编辑器修改页面中的css样式，并实时更新页面中的样式渲染结果，最终在完成编辑后能够直接生成代码并写入用户的项目中。其中，怎么样在浏览器中获取到css代码的元数据，就是首先需要解决的问题，本文将主要围绕这个问题进行讨论。

本文将介绍 CSS 当中，几种有意思的，可能可以动态改变弧形线条长短的方式。

众所周知，网页上呈现的内容不完全是静态的，是可以发生变化的，因此这增加了 CSS 出现问题的可能性。我们希望用一些方法来避免 CSS 出现某些意料之外的样式问题。本文介绍一系列防御性 CSS 的代码片段，帮助我们编写出更健壮的 CSS 代码，减少因内容动态的变化引起样式上的问题。点击 编写防御性 CSS 实践 (Part I) 、编写防御性 CSS 实践 (Part Ⅱ)、编写防御性 CSS 实践 (Part Ⅲ)可查看前几篇文章。

网页上呈现的内容不完全是静态的，是可以发生变化的，因此这增加了 CSS 出现问题的可能性。本文介绍一系列防御性 CSS 的代码片段，帮助我们编写出更健壮的 CSS 代码。

本文讨论讨论：

1. 使用 CSS 如何制作如上所示磨砂（毛玻璃）质感效果的渐变背景图
2. 如何借助 CSS-doodle 工具，批量产生该效果图，并且附带动画效果

网页上呈现的内容不完全是静态的，是可以发生变化的，因此这增加了 CSS 出现问题的可能性。本文介绍一系列防御性 CSS 的代码片段，帮助我们编写出更健壮的 CSS 代码。

网页上呈现的内容不完全是静态的，是可以发生变化的，因此这增加了 CSS 出现问题的可能性。本文介绍一系列防御性 CSS 的代码片段，帮助我们编写出更健壮的 CSS 代码。

我们在项目中常常会使用CSS伪元素对页面进行辅助设计，避免无关的标签元素布局，让代码结构变得清晰明了，同时达到自己想要的视觉效果。本文将介绍天际集成开放平台如何借助CSS伪元素:before与:after来合理地进行页面辅助设计。

在本教程中，我们将介绍这个自定义的 CSS 重置样式。并深入研究其中的每一条规则，除了讨论每条规则的作用之外，还将深入浅出的解析使用该规则的原因！

通常我们见到的输入框都是宽度固定的，但有时也会碰到自适应内容宽度的。

目前我所知道的有两种方式，相信不难找到：

1. 给普通 div 标签设置 contenteditable="true"，设置 inline-block 以后，就可以自适应内容宽度了
2. 将 input 的输入内容同步到一个透明的 div ，父级宽度跟随 div 的宽度，然后设置 input 为绝对定位并覆盖在上面，设置宽度为 100%

都是很不错的方案。这次带来一个全新的纯 CSS 实现方案，相信能带来不一样的感受。

Have you ever come across a case where position: sticky isn’t working as expected with a child of a grid container? A few days ago, I was helping a friend in fixing that exact problem and wanted to finally write about it.

依稀记得，某年广东语文高考作文的相关描述 -- “有时，常识虽易知而难行，有时，常识须推陈而出新”。人的想象力和创造力很容易在对常识的一贯认知中被削弱。

CSS 更新之快，只能不断鞭策自己持续学习，一直呆在舒适区中，很容易就跟不上节奏。当然，不仅仅是 CSS，对于任何技术任何行业也可以套用这句话。

回归本文的主题 -- 新时代布局。运用现有的 CSS 技术，我们是否可以大胆的跳出常规思维，不再局限于矩形框框一块一块，试着更加艺术一些？

顾名思义，mask 译为遮罩。在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

其实 mask 的出现已经有一段时间了，只是没有特别多实用的场景，在实战中使用的非常少，本文将罗列一些使用 mask 创造出来的有意思的场景。

当我们在从事大项目或团队开发工作时，我们经常会发现我们写的代码，凌乱、难以阅读并且难以扩展。尤其是当一段时候后我们回头再看自己的代码，必须回想起当初自己写的时候的思路才能看懂。

因此，人们尝试在代码风格上保持统一，然而，最大的困难是：修改一个较小的问题，都可能创建更多丑陋的 hack，也可能 CSS 的小改变会影响 JavaScript 的功能。但是这些问题能在我们的项目开始的时候精心规划，就能很大程度上避免这些问题。

CSS keyframe animations are awesome. They're one of the most powerful, versatile tools in CSS, and we can use them for all sorts of nifty things.

But they're also often misunderstood. They're a bit quirky, and if you don't understand those quirks, using them can be quite frustrating.

In this tutorial, we're diving deep into CSS keyframes. We'll figure out how they work, and see how to build some pretty swanky animations with them.

最近在开发遇到了两个一直困扰我的问题：

• 当 font-family 为 PingFangSC-Regular 时，为什么设置了 font-weight 为 500 和 font-weight 为 400 的现象一样？
• 在某些Android 系统手机中，中文和数字/英文同时设置了 font-weight 为 500，为什么只有数字/英文实现了加粗?

看到这两个神奇的现象的时候，让我陷入了深深的沉思，原来我撸了这么多代码，还是没能真正了解字体。不甘心被这魔性的字体困扰，发誓一定要拿出一个解决方案，在不断翻箱倒柜查阅资料之后，我想我现在开始有点懂了。