为了优化页面性能、提升首屏加载速度并节省用户流量，在过去我们常常需要依赖各种 JavaScript 库，或者手动基于 Intersection Observer API 来实现一套复杂的图片懒加载逻辑。

现代浏览器早已内置了原生解决方案，只需添加一个简单属性，就能轻松实现高效、可靠的图片懒加载效果。

问题描述

在网页开发中，我们经常需要实现内容的展开/折叠效果，但使用传统的 CSS 过渡方式存在一个限制：无法为 height: auto 的元素添加过渡动画。当我们尝试从固定高度（如 height: 0）过渡到 height: auto 时，元素会直接跳变，没有平滑的动画效果。

这个主题切换按钮可以在明/暗模式之间平滑切换，通过 CSS 过渡实现了滑块移动、背景色变化等流畅动画效果，同时支持用户主题偏好记忆功能。

HTML5 的 <input> 标签是表单中最常用的元素之一，它提供了丰富的类型和功能，用于收集用户的各种输入数据。本文将详细介绍 HTML5 中支持的 22 种 input 类型及其用法。

这个搜索框平时显示为一个圆形图标，点击聚焦后会平滑展开为输入框，同时搜索图标也会优雅地消失。