网页上呈现的内容不完全是静态的，是可以发生变化的，因此这增加了 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，为什么只有数字/英文实现了加粗?

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

前面我们已经找到了我们的目的：让 CSS 更加好看！那么好看的目的是什么呢？是让人喜欢。让我们在需求开发时不抗拒去修改原有的代码。那么这就引出了一个问题：什么样的代码让人抗拒去修改？

作者曾所在我司广告事业部，广告承载方式是以刮刮卡、大转盘等活动页进行展示，然后用户参与出广告券弹层。

有业务方反馈，提议我们能不能做一些对页面流失率有提升的优化。

因此针对活动页面的数据情况，我们去做了测试。从测试数据反映，有些页面加载完成率（专业的可以理解为首屏加载率）偏低，但活动页面上一级入口点击率正常。

这种情况有点奇怪啊，但经验告诉我们，一般就是用户在点击上一级入口进来后，由于等待白屏时间过长，用户可能以为白屏是挂了或者忍受不了等待白屏的焦虑，没有耐心就流失了。

怎么去缩短白屏时间呢？

那就是让用户可以更快看到非“白色”，可以能联想到的，背景底色、背景图、关键部位图等。

不知道大家有没有使用过骨架屏，下面我们就是用类似骨架屏的能力去解决这个问题。

变量作为CSS体系里最高逼格的特性无之一，随着浏览器日益完善，变量可大范围在项目里使用，无需关注其兼容性，本文主题是结合另一个特性calc()玩出更多花样，主要是基于变量与JS通讯简化基于JS逻辑。

罗列多种实现水平垂直居中的方式。

在开发中遇到类似清除浮动、小图标、替换内容等场景时不可避免会遇到 content 属性，一般就是百度下解决方案，甚少细究到底，在看《CSS 世界》这本书时看了下 content 章节，今天这里就详细介绍下 content 的使用机制。

content 属性用于与 :before 及 :after 伪元素配合使用，来插入生成内容。使用 content 属性插入的内容都是匿名的可替换元素。首先我们先了解下什么是可替换元素呢？