CSS 数学函数与容器查询的完美配合！

针对 CSS 优先级，我们的认知可能是这样：内联、CSS各种选择器、!important，

你是否遇到过优先级覆盖成本太高、优先级无法覆盖等情况？本文将带你重新认识 CSS 优先级。

倒影的 N 种实现方式~

大吃一斤的高阶技巧 -- 渐隐消失术。

本文将回顾各种 CSS 最佳实践的演变过程，它们伴随着时间而发展和变化。最后，将探讨如何在大型项目上实现可扩展的 CSS，以及 Tailwind 等一系列工具是如何解决这些问题的。

原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。

在上集裡面，我們知道了基本的 CSS 偷資料原理，並且以 HackMD 作為實際案例示範，成功偷到了 CSRF token，而這篇則是要深入去看 CSS injection 的一些細節，解決以下問題：

1. HackMD 因為可以即時同步內容，所以不需要重新整理就可以載入新的 style，那其他網站呢？該怎麼偷到第二個以後的字元？
2. 一次只能偷一個字元的話，是不是要偷很久呢？這在實際上可行嗎？
3. 有沒有辦法偷到屬性以外的東西？例如說頁面上的文字內容，或甚至是 JavaScript 的程式碼？
4. 針對這個攻擊手法的防禦方式有哪些？

在講到針對網頁前端的攻擊時，你我的心中浮現的八成會是 XSS，但如果你沒辦法在網頁上執行 JavaScript，有沒有其他的攻擊手法呢？例如說，假設可以插入 style 標籤，你能夠做些什麼？

在 2018 年的時候，我有寫過一篇 CSS keylogger：攻擊與防禦，那時剛好在 Hacker News 上面看到相關的討論，於是就花了點時間研究了一下。

而 4 年後的現在，我從資安的角度重新認識了這個攻擊手法，因此打算寫一兩篇文章來好好講解 CSS injection。

鼠标拖拽元素移动，算是一个稍微有点点复杂的交互。

而在本文，我们就将打破常规，向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果。

BEM:Block（块）、Element（元素）、Modifier（修饰符）的简写，是一种组件化的CSS命名规范，由俄罗斯Yandex团队所提出。使用BEM主要是为了将用户界面划分成独立的块，使开发更为简单和快速，有利于团队协作，方便维护。

One of the most powerful and convenient CSS Grid features is that, in addition to explicit column sizing, we have the option to repeat-to-fill columns in a Grid, and then auto-place items in them. More specifically, our ability to specify how many columns we want in the grid and then letting the browser handle the responsiveness of those columns for us, showing fewer columns on smaller viewport sizes, and more columns as the screen estate allows for more, without needing to write a single media query to dictate this responsive behavior.

:has伪类是一个非常强大的伪类，强大到难以置信，可以做很多梦寐以求的事情，很多以前只能更改 dom 结构 或者只能用 JS 才能实现的功能现在也能纯 CSS 实现了。

Houdini 是一组底层 API，它们公开了 CSS 引擎的各个部分，从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展 CSS。Houdini 使开发人员可以直接访问CSS 对象模型 （CSSOM），使开发人员可以编写浏览器可以解析为 CSS 的代码，从而创建新的 CSS 功能，而无需等待它们在浏览器中本地实现。

整个动画效果是在一个标签内，借助了 SVG PATH 实现。其核心在于对渐变（Gradient）的究极利用。

文案来回在指定区域内水平滚动，并且在头尾处停留一段时间。

最近有个需求，要给系统做个主题切换功能，网上关于主题的方案挺多，准备做一些调研，因为项目是react+antd的一个后台系统，开始从antd官方文档中开始着手，做下整理对比，最后选一个最佳的方案用于实践。