Note: This page does not support English, using the default language version
做博客主题这么多年，我一直有个执念：能用CSS解决的，就不动JavaScript。
不是JS不好，而是CSS更纯粹——渲染在浏览器端完成，不依赖脚本执行时机，性能天然更优，SEO友好度也更高。问题是，过去很多交互效果纯CSS做不了，只能”妥协”写一堆JS。
2026年，这个边界正在快速后退。几项CSS新特性的普及，正在改变博客主题的设计方式。我今天挑几个对博主最实用的聊聊。
:has()选择器：CSS终于有了”父选择器”这是CSS历史上最重要的更新之一。过去，CSS只能”向下选择”——从父元素选子元素。现在，:has()让我们能”向上选择”，根据子元素的状态选择父元素。
卡片布局的动态样式
/* 包含图片的卡片增加内边距 */
.card:has(img) {
padding: 1.5rem;
}
/* 不含图片的卡片调整布局 */
.card:not(:has(img)) {
padding: 2rem;
display: flex;
align-items: center;
}这在博客列表页特别有用。有的文章有封面图，有的没有，过去只能靠JS动态加类名，现在CSS自己能感知。
表单验证的视觉反馈
/* 包含无效输入的表单组高亮 */
.form-group:has(input:invalid) {
border-color: #e74c3c;
background: #ffeaea;
}
/* 包含必填项的标签加星 */
label:has(+ input[required])::after {
content: " *";
color: red;
}评论表单、联系表单，不需要JS就能做出实时验证效果。
导航菜单的展开状态
/* 包含展开子菜单的菜单项改变样式 */
.nav-item:has(.sub-menu:hover) {
background: #f5f5f5;
}过去这种效果要靠JS监听hover事件，现在纯CSS搞定。
媒体查询（Media Queries）看的是视口宽度，这在组件化设计中很尴尬——一个侧边栏组件，在不同布局中宽度不同，但媒体查询没法知道”自己有多宽”。
Container Queries解决这个问题：让组件根据自身容器宽度响应，而不是视口宽度。
侧边栏组件的自适应
.sidebar {
container-type: inline-size;
}
/* 容器宽度大于300px时，标签和输入框水平排列 */
@container (min-width: 300px) {
.search-form label {
display: inline-block;
width: auto;
}
.search-form input {
width: calc(100% - 80px);
}
}这个搜索表单，不管放在宽侧边栏还是窄侧边栏，都能自动适配布局。
文章卡片的网格自适应
.card-container {
container-type: inline-size;
}
@container (min-width: 600px) {
.card {
display: grid;
grid-template-columns: 200px 1fr;
gap: 1rem;
}
}容器宽度够时，卡片变成”左图右文”；不够时，自动变成”上图下文”。
关键点：这些样式不依赖页面布局，只依赖组件自身的容器宽度。你把组件换到另一个位置，样式自动适配，不需要改CSS。
sibling-index()与sibling-count()：列表动画的神器这两个函数在Chrome和Safari已经稳定可用。它们能获取元素在兄弟节点中的位置和总数。
li {
transition: opacity 0.3s ease;
transition-delay: calc((sibling-index() - 1) * 100ms);
}
@starting-style {
li {
opacity: 0;
}
}过去要做这种”列表项逐个淡入”的效果，得用JS遍历元素给每个设置不同延迟。现在一行CSS搞定。
交替样式
/* 奇偶项不同背景 */
.comment:nth-child(odd) {
background: #fafafa;
}
/* 用sibling-index()还能做更复杂的事 */
li::before {
content: counter(item);
counter-increment: item;
position: absolute;
left: calc((sibling-index() - 1) * 30px);
}这有点”CSS计数器”的味道，但更灵活。
@container scroll-state()：滚动状态查询这个特性还在发展中，但已经能用。它能查询容器的滚动状态：粘附（stuck）、贴靠（snapped）、可滚动（scrollable）。
.header {
container-type: scroll-state;
position: sticky;
top: 0;
}
@container scroll-state(stuck) {
.header {
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
}导航栏吸顶后自动加上阴影和半透明背景，不需要JS监听滚动事件。
内容区域的加载提示
.scrollable-area {
container-type: scroll-state;
}
@container scroll-state(scrollable: bottom) {
.load-more {
display: block;
}
}容器滚动到底部时，自动显示”加载更多”按钮。
过去很多交互效果必须用JS实现，现在纯CSS能做到的越来越多。这不仅是性能优化，更是代码简洁性的提升。
一个博客主题，如果能用CSS解决大部分布局和交互，JS只需要处理真正需要逻辑的部分（比如表单提交、搜索过滤），代码量和复杂度都会大幅下降。
Container Queries让组件真正做到了”自适应容器”。你设计的侧边栏组件、文章卡片、评论列表，放到任何博客主题里都能自动适配布局。
这对分享型主题、可复用组件库特别有价值。
CSS实现的动画和状态变化，天然比JS触发更流畅——不需要等待脚本加载、不需要事件监听、不需要考虑执行时机。
吸顶导航、列表动画、表单反馈，这些细节打磨得好，博客的用户体验会有质的提升。
这些新特性在现代浏览器（Chrome、Safari、Firefox最新版）支持良好，但老浏览器不支持。
我的建议：用渐进增强的方式引入。
我觉得这是前端”去JS化”趋势的一部分——不是不用JS，而是把CSS能做的事还给CSS。
过去十年，前端越来越重，JS承担了太多本不该它承担的工作。布局、动画、交互状态，这些其实更适合用声明式的方式描述。CSS的进步，是在还这笔”技术债”。
对博客主题来说，这是好事。博客本就是内容为主的站点，不需要复杂的业务逻辑。用更纯粹的CSS实现更优雅的效果，代码更好维护，性能也更优。
博客主题的设计，正在进入”CSS优先”的时代。
如果你在开发或定制自己的博客主题，这几项新特性值得深入学习。不是为了炫技，而是让代码更简洁、用户体验更流畅、维护成本更低。
技术的价值，最终要落到这些实处。
Loading comments...