HTML4作为早期网页开发的标准，在很多存量项目中仍被广泛使用，但HTML5带来的语义化标签、本地存储、Canvas等新特性，能大幅提升开发效率和用户体验。让HTML4页面支持HTML5特性，不需要完全重构原有代码，通过渐进增强和polyfill技术就能实现平稳过渡。
渐进增强的核心思路
渐进增强是一种开发策略，先保证页面在旧环境（如仅支持HTML4的浏览器）中能实现基础功能，再为支持HTML5的新环境添加增强特性，不会因为新特性不支持导致页面完全不可用。
比如我们要在HTML4页面中使用<header>、<footer>这类HTML5语义化标签，旧浏览器无法识别这些标签，会将其当作未知行内元素处理，我们可以通过CSS将其转为块级元素，让旧浏览器也能正常渲染布局：
/* 让HTML4浏览器识别HTML5语义化标签为块级元素 */
header, footer, nav, section, article {
display: block;
}
polyfill技术的作用与实现
polyfill是一段代码，用于为旧环境提供它没有原生支持的新特性，相当于给旧浏览器打补丁，让它能模拟实现HTML5的API或标签行为。
1. HTML5新标签的polyfill
除了用CSS让旧浏览器渲染HTML5标签，还需要通过JS创建这些标签，让旧浏览器能识别并操作它们：
// 为不支持HTML5标签的浏览器创建标签
if (typeof document.createElement('header') === 'undefined') {
var html5Tags = ['header', 'footer', 'nav', 'section', 'article', 'aside'];
for (var i = 0; i < html5Tags.length; i++) {
document.createElement(html5Tags[i]);
}
}
2. HTML5 API的polyfill
比如HTML5的<canvas>元素，旧浏览器不支持的话，可以用excanvas这类polyfill库模拟实现基础绘图能力，下面是简单的使用示例：
<!-- 仅在浏览器不支持canvas时加载polyfill -->
<!--[if lt IE 9]>
<script src="excanvas.js"></script>
<![endif]-->
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
// 旧浏览器下polyfill会让getContext方法可用
var ctx = canvas.getContext('2d');
if (ctx) {
ctx.fillStyle = '#ff0000';
ctx.fillRect(10, 10, 50, 50);
}
</script>
两种技术的结合使用
实际项目中通常会把渐进增强和polyfill结合：先通过渐进增强保证基础功能可用，再针对需要的新特性按需引入polyfill，避免加载不必要的代码影响页面性能。
比如本地存储特性，我们可以先判断浏览器是否原生支持localStorage，不支持的话再用polyfill模拟，或者用cookie做降级处理：
// 检测并兼容本地存储
var storage = {
setItem: function(key, value) {
if (window.localStorage) {
localStorage.setItem(key, value);
} else {
// 降级使用cookie存储
document.cookie = key + '=' + encodeURIComponent(value) + ';path=/';
}
},
getItem: function(key) {
if (window.localStorage) {
return localStorage.getItem(key);
} else {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.indexOf(key + '=') === 0) {
return decodeURIComponent(cookie.substring(key.length + 1));
}
}
return null;
}
}
};
// 使用兼容后的存储方法
storage.setItem('test', 'hello');
console.log(storage.getItem('test'));
注意事项
- polyfill不要盲目全量引入，只加载项目实际需要的新特性补丁，减少性能损耗
- 渐进增强要保证基础功能在所有目标浏览器中都能正常运行，不能因为新特性添加导致旧环境功能失效
- 测试时要覆盖目标用户使用的旧浏览器版本，确认polyfill的兼容性符合预期