纯css表格热图需用--value变量归一化数值，结合linear-gradient与calc(var(--value) * 100%)控制色带宽度，并设background-position: right实现右对齐填充；safari需will-change: background-size优化，ie11降级为离散class方案。
如何用纯CSS实现表格单元格热图色阶
不需要JavaScript或额外库，background-image: linear-gradient() + background-size 配合 CSS 变量就能动态控制色阶强度。关键不是“画颜色”，而是把数值映射到背景渐变的裁剪比例上。
- 每个单元格需绑定一个
--value自定义属性，范围建议归一化为 0–1（例如style="--value: 0.65;"） - 使用
background-image: linear-gradient(90deg, #e0f7fa, #00838f);定义色阶方向与起止色 - 用
background-size: calc(var(--value) * 100%) 100%;控制色带宽度，再配合background-repeat: no-repeat;和background-position: right;让颜色从右向左填充 - 注意：Chrome 和 Firefox 支持良好，但 Safari 对
calc()在background-size中的变量计算有延迟，需加will-change: background-size;触发渲染优化
处理多列不同量纲数据时的归一化陷阱
直接拿原始数值设 --value 会导致整行失真——比如一列是销售额（万元），另一列是转化率（%），数值量级差三个数量级，热图完全看不出差异。
- 必须按列独立归一化：
normalized = (x - min_col) / (max_col - min_col + 1e-6)，避免除零 - 服务端渲染时，在生成 HTML 前对每列分别计算
min/max；客户端 JS 处理则用Array.prototype.reduce()按data-col-id分组提取极值 - 别用全表最大最小值做归一化——这会让局部高值在全局背景下“灰掉”，失去列内对比意义
- 如果某列含空值或非数字，
NaN会破坏calc()，务必提前转为 0 或跳过该单元格
IE11 兼容方案：降级为 class 控制的离散色阶
IE11 不支持 CSS 变量和 calc() 在背景属性中的使用，必须放弃连续渐变，改用预设的几档 class。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 定义 5 个 class：
heat-0（浅蓝）、heat-1、heat-2、heat-3、heat-4（深青），对应归一化后的区间 [0,0.2)、[0.2,0.4)… - 服务端或 JS 根据数值落入区间，直接写入
class="heat-2"，避免运行时计算 - 注意 IE11 的
background-position对百分比支持不稳定，改用像素偏移（如background-position: -20px 0;）更可靠 - 若项目已弃用 IE，可安全移除这套逻辑——强行兼容会增加 DOM 属性冗余和维护成本
性能瓶颈常出现在 tbody 渲染后批量重绘
当表格超过 200 行 × 10 列，逐个设置 style="--value:..." 会触发大量 layout/reflow，滚动卡顿明显。
- 优先用
document.createDocumentFragment()批量插入行，避免反复操作 DOM - 不要在循环中读写
offsetHeight或getComputedStyle()——这会强制同步 layout - 对长表格启用
contain: paint;在table或tbody上，限制浏览器重绘范围 - 移动端 Safari 对渐变背景的 GPU 加速不充分，若发现闪烁，可加
transform: translateZ(0);强制硬件加速（但会增加内存占用）
热图的本质是视觉编码，不是炫技。颜色跨度太宽容易误读，跨度太窄又失去区分度——实际调试时，盯着几个典型值反复调 linear-gradient 的色标位置，比套公式更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
