一张 favicon 撑起整站，CSS 硬核绘出波多黎各山间厨房

一个纯 HTML 与 CSS 构建的页面，精细度能到什么地步？Niebla 给出了答案：全站只有一张 favicon，连 <img> 标签、内联 SVG、CSS url() 全部没有。锅体、汤底、升腾水汽、窗外雨滴，每一帧都是样式算出来的。这种近乎自虐的约束，反倒逼出了极硬核的实现。

项目模拟的是波多黎各山区的厨房场景。最巧妙的设计在于用 CSS 自定义属性驱动动态：汤的沸腾程度、水汽上升速度、汤色深浅，全靠改两个变量即时生效，完全不触发 DOM 重渲染。JS 的克制做到了极致，只负责状态同步。比如食材交互，逻辑全在样式层，脚本只改变量、改 ARIA：

// 通过自定义属性控制沸腾状态
const updateSimmer = (speed, hue) => {
  document.documentElement.style.setProperty('--steam-speed', speed);
  document.documentElement.style.setProperty('--soup-hue', hue);
};

## 无障碍播报如何在不重绘下同步食材状态？

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

首屏揭晓动画为何导致无JS用户空白？

作者在首屏渲染上踩过的坑最值得参考。早期用 IntersectionObserver 做“进视口再显示”的揭晓动画，导致 headless 浏览器抓到空页面，禁用 JS 的用户也什么都看不见。教训很直接：核心内容的可见性不能靠 JS 动画托底，First Paint 必须自带完整文档。

纯CSS绘图如何做到全宽度无溢出？

性能上，Lighthouse 几乎跑满分。除去零外部资源请求的加分，HTML 结构极度精简且严格符合 W3C 标准，从 320px 到 1440px 全宽度无溢出，在纯 CSS 绘图项目里属于罕见的工程级完成度。