全站除了 favicon 没有任何图片文件

一个纯 HTML 和 CSS 堆出来的页面能细腻到什么程度？我看了一个项目，全站唯一的一张图片文件是 favicon。没有 <img> 标签，没有内联 SVG，甚至 CSS 里一个 url() 都没有。锅、汤底、升腾的水汽、窗外的雨滴，全部是用 CSS 绘制出来的。这种极致的约束反而让页面变得极其硬核。

这个项目叫 Niebla，它把一个波多黎各山区的厨房场景给模拟出来了。最巧妙的是它用 CSS 自定义属性（Custom Properties）来驱动动态效果。比如汤的沸腾程度，通过修改两个变量就实现了水汽速度和汤色深浅的实时变化，完全不需要重新渲染 DOM。

我在研究它的实现逻辑时，发现作者在 JS 的克制上做得非常到位，基本只负责状态同步。一个典型的实操细节是处理食材的交互：

// 模拟食材移除逻辑，通过修改自定义属性和 aria 状态
const updateSimmer = (speed, hue) => {
  document.documentElement.style.setProperty('--steam-speed', speed);
  document.documentElement.style.setProperty('--soup-hue', hue);
};

![全站除了 favicon 没有任何图片文件](/uploads/articles/7a3eadc1aa6bc883.webp)

// 动态更新碗中剩余食材的描述，利用 aria-live 增强无障碍体验
const updateBowlDescription = (ingredientsLeft) => {
  const descriptions = {
    5: 'La Completa',
    4: 'La Tuya',
    // ...其他状态
  };
  const readout = document.getElementById('readout');
  readout.textContent = descriptions[ingredientsLeft] || 'El Caldo';
};

这个项目最值得开发者思考的是关于“首屏渲染”的踩坑经历。作者最初用了 IntersectionObserver 做一个元素进入视口才显示的“揭晓”动画，结果导致 headless 浏览器抓取时页面是空的，而且对禁用 JS 的用户极其不友好。结论很直接：不要依赖 JS 动画来承载核心内容的可见性，First Paint 必须携带完整文档。

从性能指标来看，这个项目几乎跑满了 Lighthouse 的分值，不仅是因为没有外部资源请求，更因为它的 HTML 结构极其精简且符合 W3C 标准。在 320px 到 1440px 的所有宽度下都没有溢出，这在纯 CSS 绘图的项目里很难得。