The Future of CSS ✨
Josh Comeau 介绍浏览器厂商 Interop 合作如何把 Subgrid 等特性一年内推到广泛可用，并展望 Interop 2027 候选与 Mozilla 对未来 CSS 能力的排序，梳理「CSS 未来」值得关注的方向。
joshwcomeau.com
站点来源 · 不代表单一作者
当前已导入的历史，每页 50 篇；不代表网站完整历史。筛选作用于当前页，更多内容可由 Grok 后续补齐。
访问原站 ↗Getting Started with Anchor Positioning
Josh 入门 CSS Anchor Positioning：让 tooltip/下拉贴住触发器并处理视口溢出，减少手写测量 JS，梳理 API 选项与常见坑。
CSS vs. JavaScript
Josh 比较 CSS 动画与 JS 动画性能：传统「CSS 一定更快」不准确，取决于合成层、主线程工作与库实现，用实验对照澄清误解。
Scroll-Driven Animations
「Scroll-Driven Animations」。要点：One of the best ways to add a bit of personality to our websites is to animate things on scroll. For example, I recently created the following scroll-driven animation on the Whimsical Animations(opens in new tab) homepage: Historically, we’ve needed to use JavaScript for this kind of effect, but an exciting new API, Animation Timeline, makes it possible to d。
Squash and Stretch
「Squash and Stretch」。要点：Have you ever heard of Disney’s 12 Basic Principles of Animation(opens in new tab)? It’s a collection of animation best practices created in 1981 by two Disney animators, intended to be used by the folks who produce animated cartoon movies like Aladdin or Beauty And The Beast. Not all of the rules are relevant to us, as web developers, but some of them are i。
Sneaky Header Blocker Trick
「Sneaky Header Blocker Trick」。要点：Have you ever noticed that the site header on this blog does something a bit peculiar? When you first start scrolling, the sticky header appears to have a mostly-opaque blue background, covering up the blog post title/metadata: As you keep scrolling, though, something kinda strange happens. First, the cloud swoops pass by normally, as though the header had a。
Sprites on the Web
「Sprites on the Web」。要点：In 2015, back when Twitter was still Twitter, their dev team had a problem. In those early days, tweets could be “favourited” by clicking a little “⭐” icon. The product team wanted to migrate to “liking” tweets, Facebook-style, with a “❤️”. As part of this update, their designers created this lovely animation: This looks super nice, but there’s kind of a lot。
Brand New Layouts with CSS Subgrid
「Brand New Layouts with CSS Subgrid」。要点：When CSS Grid layout was first released, it came with a big asterisk: only the grid’s direct children could participate in the layout. “Subgrid” is a newer addition to CSS Grid which allows us to extend the grid layout down through the DOM tree. When I first heard about subgrid, it seemed to me like a convenience, a way to make it a bit simpler to accomplish。
第 1 页