好文章推荐系列——CSS

深入浅出 CSS 动画

本文将比较全面细致的梳理一下 CSS 动画的方方面面，针对每个属性用法的讲解及进阶用法的示意，希望能成为一个比较好的从入门到进阶的教程。

Towards an animation smoothness metric

Learn about measuring animations, how to think about animation frames, and overall page smoothness.

最近学习css的时候，真的有好多地方都用到了content。例如《这一篇你不知道的美化列表的两种方案！》用到了content来美化列表，还有这一篇《还不会动态渐变文字，试试这几种解决方案！》用到了content+attr来实现动态渐变文字。还有其他文章中，也用到了content.所以我决定整理一下，关于content，我的应用。
在MDN上列举了content可以设置的各种内容。例如颜色，图片，表情符号，unicode等。有兴趣的可以自己研究：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/content

RTL Styling 101

Over 292 million people around the world speak Arabic as their first language. Arabic (al-Arabiyyah, pronounced /al ʕarabijja/, /ʕarabiː/) is my native language, and I sometimes build websites that need to support both left-to-right (LTR) and right-to-left (RTL) styles.

What does 100% mean in CSS?

One of the CSS units I use most is the wonderful % — so handy for positioning elements on the page.
Unfortunately, the rules aren’t exactly straightforward. One question I’m always asking myself is:

Percent of what?

Hopefully this guide can help clear things up.

深入理解 flex-grow、flex-shrink、flex-basis

任何一个容器都可以用 Flex 进行布局，而且 Flex 是发生在父容器和子容器之间的布局关系的，那么父容器与子容器的关系是怎么样子的，又是怎么计算子容器所占用的空间的呢，怎么进行弹性布局的呢？
欲要解决上面的问题，首先得了解 flex-grow 和 flex-shrink 是怎么计算的？flex-basis 和 width 又有什么关系和区别？

灵活运用CSS开发技巧

我整理下三年来自己使用到的一些CSS开发技巧，希望能让你写出耳目一新、容易理解、舒服自然的代码：

Layout Skill：布局技巧
Behavior Skill：行为技巧
Color Skill：色彩技巧
Figure Skill：图形技巧
Component Skill：组件技巧

Pure CSS Custom Styled Radio Buttons

Using a combination of the following properties, we can create custom, accessible, cross-browser, theme-able, scalable radio buttons in pure CSS:

currentColor for theme-ability
em units for relative sizing
appearance: none for full restyling access
CSS grid layout to align the input and label

Less Absolute Positioning With Modern CSS

在本文中，我将探讨几个使用绝对定位（position: absolute）的用例，它们实际上并不需要。

Designing Beautiful Shadows in CSS

In this tutorial, we’ll learn how to transform typical box-shadows into beautiful, life-like ones:

2021年你可能不知道的 CSS 特性

来自大漠，虽然聊的是“新特性”，但其中有些特性并不怎么“新”，或许已在你的项目中，或许已接触过，只是不太了解而以。接下来，就和大家一起来简单地回顾一下这些特性，希望大家能喜欢，也希望对大家平时工作有所帮助。

CSS 实现多行文本“展开收起”

多行文本展开收起是一个很常见的交互，实现这一类布局和交互难点主要有以下几点

位于多行文本右下角的“展开收起”按钮
“展开”和“收起”两种状态的切换
当文本不超过指定行数时，不显示“展开收起”按钮

一文详解 CSS-in-JS

CSS 做为 Web 的样式表来呈现丰富多彩的 Web 应用已经不再是唯一的选择了，我们或许应该多考虑其他的扩展性和移植性尝试未来的 CSS-in-JS。

Getting started with CSS Font Loading

I was in the mood to learn something new and so I decided to take a look at the CSS Font Loading API.

在 CSS3 没有普及的时候，创建一个网站 header 是一项既可怕又困难的任务 ?。那时，Flexbox 还是个新东西，我们不得不使用老方法，比如 float和clearfix技术。今天，情况完全不同了，Flexbox 得到了广泛的支持，大大的减少了我们的开发工作，同时也为我们提供了更多的可能性。

有人可能会说，现在 CSS3 这么普及，制作一个网站 header 不是很容易么 ?？并非如此，因为有一些有趣的挑战需要解决,在本文中我们会介绍其中的几种。

Ten modern layouts in one line of CSS

This post highlights a few powerful lines of CSS that do some serious heavy lifting and help you build robust modern layouts.

移动端UI一致性解决方案

外卖UI一致性项目是外卖UI设计团队与研发团队共建的项目，目的是改善用户端体验的一致性，提升多技术方案间组件的通用性和复用率，降低整体视觉改版带来的研发成本。外卖技术团队通过在实践中不断总结经验，开发了一套完整的UI一致性解决方案，目前已经取得了一些成果，本文系实践经验分享。

Line Clampin’ (Truncating Multiple Line Text)

作者总结了多行文本省略的各种解决方案，最后给出了“最佳实践”

Full-Bleed Layout Using CSS Grid

如何使用 CSS Grid 实现一个现在非常常见的布局：

10 Ways to Hide Elements in CSS

There are multiple ways to hide an element in CSS, but they differ in the way they affect accessibility, layout, animation, performance, and event handling.

How Do You Remove Unused CSS From a Site?

有时候你用到一个库，但是这个库会默认加载所有样式，但其实你用到的只有很小一部分，那这时候应该如何把没有用到的删除呢？

Everything You Need To Know About CSS Margins

You now know most of what there is to know about margins! In short:

Margin collapsing is a thing. Understanding why it happens and when it doesn’t will help you solve any problems it may cause.
Setting margins in one direction only solves many margin related headaches.
As with anything in CSS, share with your team the decisions you make, and comment your code.
Thinking about block and inline dimensions rather than the physical top, right, bottom and left will help you as the web moves towards being writing mode agnostic.