优先使用media属性或JavaScript实现条件加载CSS，如通过<link media="screen and (max-width: 768px)">按屏幕尺寸加载，或用JS动态插入样式文件，提升兼容性与性能。
通过 link 标签实现条件加载 CSS，主要是根据浏览器类型、版本或设备环境来决定是否加载某个样式文件。虽然现代开发中这类需求逐渐减少（尤其是对旧版 IE 的兼容），但在特定场景下仍有使用价值。
使用 HTML 条件注释（仅限 IE 浏览器）
注意：该方法仅适用于 Internet Explorer 9 及更早版本。 IE 支持一种特殊的 HTML 条件注释语法，可以在特定版本的 IE 中加载对应的 CSS 文件。例如，只在 IE8 中加载 special.css：
<!--[if IE 8]> <link rel="stylesheet" type="text/css" href="ie8.css" /> <![endif]-->
常见写法：
-
<!--[if IE]>：所有 IE 版本（不包括 Edge） -
<!--[if IE 7]>：仅 IE7 -
<!--[if lt IE 9]>：IE9 以下版本（不含 IE9） -
<!--[if gte IE 10]>：IE10 及以上（但 IE10+ 已不支持条件注释）
说明：从 IE10 开始，微软不再支持条件注释作为解析特性，因此该方法基本只用于维护老项目。
立即学习“前端免费学习笔记（深入）”；
通过 JavaScript 动态加载 CSS（通用方案）
现代浏览器中推荐使用 JavaScript 判断条件，再动态插入 link 标签来实现条件加载。
示例：根据屏幕宽度加载不同 CSS：
<script>
if (window.innerWidth < 768) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'mobile.css';
document.head.appendChild(link);
}
</script>
也可以根据用户代理（UA）判断设备或浏览器类型：
<script>
if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.userAgent.indexOf('Trident') !== -1) {
// 加载 IE 兼容样式
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'ie-fix.css';
document.head.appendChild(link);
}
</script>
使用媒体查询（media 属性）
最标准且广泛支持的方式是利用 link 标签的 media 属性，按设备类型或屏幕尺寸加载 CSS。
示例：
<link rel="stylesheet" href="print.css" media="print" /> <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)" /> <link rel="stylesheet" href="desktop.css" media="screen and (min-width: 769px)" />
这种方式无需 JavaScript，性能好，被所有浏览器支持，适合响应式设计。
基本上就这些。对于现代前端开发，优先使用 media 属性 或 JavaScript 动态控制，避免依赖老旧的 IE 条件注释。条件加载的关键是明确判断依据：设备、屏幕、浏览器或用户行为。合理使用能有效提升页面性能和兼容性。
