#CSS

https://www.stefanjudis.com/today-i-learned/pathlength-makes-makes-svg-path-animations-easier-to-manage/

Stefanjudis

pathLength makes makes SVG path animations easier to manage

Use the "pathLength` attribute to make animating "stroke-dasharray" and "stroke-dashoffset" easier.

#CSS 本文深入解析了 CSS position: sticky 的常见“坑”：粘性元素不能大于滚动容器，也不能被尺寸过小的祖先块限制，尤其在 Flex/Grid 布局中默认的 stretch 对齐会让粘性失效；解决办法是给相关元素设置 align-self: flex-start 或限制高度并内部滚动，确保粘性元素在规范允许的包含块内自由“粘贴”。 https://frontendmasters.com/blog/the-weird-parts-of-position-sticky/

Frontend Masters

The Weird Parts of position: sticky;

Using position: sticky; is one of those CSS features that’s incredibly useful, seemingly simple, and also, frequently frustrating.

#CSS CSS 性能榜：只动 transform/opacity+transition/animation 或 WAAPI 最丝滑，别碰会触发 Layout 的几何属性与 setInterval 改样式。

https://motion.dev/blog/web-animation-performance-tier-list

motion.dev

The Web Animation Performance Tier List - Motion Blog

Learn what makes web animations fast, slow, and everything in between with our 2025 web animation performance tier list.

#CSS 后兼容时代：2025 年起 Grid3、Subgrid、Container Queries、@layer 已成新 baseline，可直接用。
- 五大布局模型：Flow、Flexbox、Grid、Container Query、Intrinsic，各司其职。
- Subgrid 正式可用：子网格继承父网格轨道，一次性解决卡片对齐地狱。
- Container Queries 全面落地：组件按自身宽度响应，无需再绑死视口。
- @layer 正式版：显式层叠顺序，告别选择器权重内卷。
- Flexbox 默认支持 gap：row-gap / column-gap 无需 display:grid 也能优雅间距。
- 新关键字 safe/unsafe：align/justify-content 增加溢出保护。
- 四套现成无媒体查询模板：Holy Grail、自适应仪表板、多列文章、一行居中。
- DevTools 升级：Chrome 可视化 Subgrid，Firefox 仿真容器查询。
- 2026+ 在途功能：masonry、@when 条件规则、相对颜色语法。

https://2ality.com/2025/10/css-layout.html

2Ality

[Web dev for beginners] CSS layout: flexbox, grid, media queries and container queries

CSS provides a variety of services for web content: In the previous chapter, we used it to format content: to change colors, typefaces, etc. In this chapter, we will use it to lay out content: to place HTML elements on a page.

#文章 #CSS 文章示范了用容器查询、:has()、clamp()等现代 CSS，让“头部+卡片网格”这一简单布局随卡片数量与宽度自动切换形态。

https://ishadeed.com/article/modern-css-section-layout/

Ishadeed

Solved By Modern CSS: Section Layout

Building a typical section design with modern CSS.

#CSS CSS 新增 linear() 时间函数，用“连点成线”方式原生实现弹簧、弹跳动画，免 JS，但需工具生成数据且要注意中断与回退。

https://www.joshwcomeau.com/animation/linear-timing-function/

Joshwcomeau

Springs and Bounces in Native CSS • Josh W. Comeau

The “linear()” timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS! That said, there are some limitations and quirks to be aware of. I’ve been experimenting with this API for a while now, and in this post, I’ll…

#CSS Styled-Components 维护模式：一个 40%更快的分支：Styled-Components 目前处于维护模式，Sanity 团队分支了它，并利用 React 18 的 useInsertionEffect 钩子（以及其他因素）使其速度大幅提升。Sanity 和 Linear 都在使用这个分支作为临时解决方案，直到他们完全迁移到更好的方案。

https://www.sanity.io/blog/cut-styled-components-into-pieces-this-is-our-last-resort

Sanity.io

styled-components maintenance mode: A 40% faster fork | Sanity

After styled-components entered maintenance mode, we forked it with React 18's useInsertionEffect. Result: 40% faster renders for Linear. Open source solution.

#CSS #文章 Josh W. Comeau 在《Color Shifting in CSS》中揭示了 CSS 颜色过渡变灰的本质：浏览器用 RGB 插值，即使写的是 HSL；他用 filter: hue-rotate() 绕过限制，实现鲜艳无缝的色调旋转，并叠加闪烁动画，让粒子效果生动又轻盈。

https://www.joshwcomeau.com/animation/color-shifting/

Joshwcomeau

Color Shifting in CSS • Josh W. Comeau

A little while ago, I was trying to animate an element’s background color, so that it cycled through the rainbow. Seems easy, but it turns out, browsers have a surprisingly big limitation when it comes to color processing! In this tutorial, we’ll dig into…

#CSS 文章介绍了CSS新特性`scroll-target-group`及其与`:target-current`伪类的结合使用，能够轻松实现滚动侦测效果（如目录高亮）。该特性目前仅在Chrome 140中支持，可通过`@supports`检测实现渐进式增强，同时在无障碍性方面符合常规要求。

https://una.im/scroll-target-group/

Una.im

Creating a scroll-spy with 2 lines of CSS

scroll-target-group is a new CSS feature that lets you create scroll-spy table of contents with basically 2 lines of CSS.

#tailwindcss #CSS 《Tailwind 与原生 CSS 结合》Tailwind CSS 4 通过全面转向原生 CSS 变量和改进的配置方式，实现了与传统 CSS 的无缝融合，解决了之前版本的争议性问题。它引入了“非病毒”模式(“Non-Viral”)，允许开发者在不影响现有 CSS 架构或设计系统的情况下灵活使用 Tailwind 的工具类或纯 CSS，极大地提升了开发体验，让作者从批评者转变为支持者，标志着 Tailwind 与原生 CSS 的完美结合。

https://thathtml.blog/2025/08/tailwind-and-css-friends-at-last/

That HTML Blog

Friends at Last: Tailwind & CSS…whodathunkit?!

Freely compose UI using native CSS variables & syntax, Tailwind design tokens in CSS, and Tailwind utility classes.

#React #CSS #文章 《如何为 React 应用程序添加样式》文章提到了语义化CSS、设计令牌（Design Tokens）、CSS-in-JS（如styled-components）和Utility-First框架（如Tailwind）四种CSS方案，作者最终推荐Utility-First（如Tailwind），因其通过原子类组合实现高效、低复杂度的组件级样式管理，并强调“复用组件而非样式”的核心原则。

https://alexkondov.com/full-stack-tao-styling/

Alexkondov

How to Style a React Application

We don’t build web applications the same way we did a decade ago. We don’t think of pages, we think of components. We don’t pass data to the template to render…

#CSS margin手动调间距？CSS的gap属性才是现代布局的终极解法！

https://kyleshevlin.com/prefer-gaps-to-margins/

Kyle Shevlin's Blog

Prefer Gaps To Margins | Kyle Shevlin

Prefer using gaps to margins when it comes to your component layouts.

#CSS 文章通过简单示例和可视化，详细介绍了SVG <path> 元素的直线命令（如M、L、H、V和Z），帮助读者理解其语法和用法，从而实现技术绘图和数据可视化的功能。

https://www.smashingmagazine.com/2025/06/decoding-svg-path-element-line-commands/

Smashing Magazine

Decoding The SVG path Element: Line Commands — Smashing Magazine

SVG is easy — until you meet `path`. However, it’s not as confusing as it initially looks. In this first installment of a pair of articles, Myriam Frisano aims to teach you the basics of `` and its sometimes mystifying commands. With simple examples and visualizations…

#CSS 动画切换导航菜单的js和css实现

https://www.smashingmagazine.com/2025/06/creating-moving-highlight-navigation-bar-javascript-css/

Smashing Magazine

Creating The “Moving Highlight” Navigation Bar With JavaScript And CSS — Smashing Magazine

In this tutorial, Blake Lundquist walks us through two methods of creating the “moving-highlight” navigation pattern using only plain JavaScript and CSS. The first technique uses the `getBoundingClientRect` method to explicitly animate the border between…

#CSS CSS 动画中部分关键帧（Partial Keyframes）的使用技巧和优势。

https://www.joshwcomeau.com/animation/partial-keyframes/

Joshwcomeau

Partial Keyframes • Josh W. Comeau

CSS Keyframe animations are so much more powerful than most developers realize. In this tutorial, I’ll show you something that completely blew my mind, a technique that makes our keyframe animations so much more reusable and dynamic! 🤯

#文章 #CSS 通过使用OKLCH颜色空间来改善颜色管理。文章首先介绍了Tailwind的优势，包括小体积、高性能和内置代码分割等。接着，文章解释了动态主题的概念及其重要性，强调了个性化对用户参与度和满意度的积极影响。

https://evilmartians.com/chronicles/better-dynamic-themes-in-tailwind-with-oklch-color-magic

evilmartians.com

Better dynamic themes in Tailwind with OKLCH color magic—Martian Chronicles, Evil Martians’ team blog

We make Tailwind CSS play nice with CSS variables, OKLCH colors, and dynamic themes. Get reliable, predictable theming.

#文章 #CSS OKLCH是一种新的色彩模型，解决了传统色彩模型（如RGB和HSL）在色彩表达上的局限性，提供了更一致、连贯、可访问且感知上均匀的色彩体验。文章详细介绍了OKLCH在CSS中的应用，以及一系列工具，如OKLCH色彩选择器、Harmonizer、apcach和Polychrom等，这些工具帮助设计师和开发者更好地使用OKLCH模型，实现更高效、更直观的色彩设计和开发。

https://evilmartians.com/chronicles/exploring-the-oklch-ecosystem-and-its-tools

evilmartians.com

Exploring the OKLCH ecosystem and its tools—Martian Chronicles, Evil Martians’ team blog

Explore a powerful set of tools built around the OKLCH color model—Harmonizer for accessible palettes, Polychrom for Figma contrast checking, apcach for color contrast calculations, and more. Perfect for frontend developers and designers building consistent…

#CSS #文章 这篇文章通过介绍起源感知动画、合适的缓动函数、自定义缓动曲线、基于弹簧的交互以及选择合适的CSS属性等实用技巧，帮助UI开发者将动画从“好”提升到“优秀”，从而显著增强用户体验。

https://emilkowal.ski/ui/good-vs-great-animations

Emil Kowalski

Good vs Great Animations

Practical tips on how to go from good to great animations.

#CSS #React 自定义浮动元素

https://github.com/floating-ui/floating-ui

GitHub

GitHub - floating-ui/floating-ui: A JavaScript library to position floating elements and create interactions for them.

A JavaScript library to position floating elements and create interactions for them. - floating-ui/floating-ui

#CSS 学习 #tailwind 布局

https://layoutsfortailwind.lalokalabs.dev/

layoutsfortailwind.lalokalabs.dev

LaLoka Layouts for Tailwind CSS

A collection of useful Tailwind CSS layouts and patterns