现代前端推荐用类名控制、媒体查询和动态加载替代条件注释。1. 通过JavaScript给html或body添加类名，再用CSS定义对应样式；2. 使用CSS自定义属性结合JS切换主题；3. 动态创建link标签按需加载CSS；4. 利用@media根据设备特征应用样式。这些方法更灵活、可维护，且符合现代标准。
![如何在css中实现条件注释加载样式_通过<!--[if]>兼容旧版ie浏览器](https://img.php.cn/upload/article/000/969/633/176424084751289.jpeg)
在现代前端开发中，直接使用“条件注释”来加载样式的方式已经不再推荐，尤其是针对旧版IE浏览器的写法。但如果你确实需要根据某些条件动态加载或切换CSS样式，可以通过以下几种更现代、更灵活的方法实现。
使用HTML中的条件类名控制样式
通过JavaScript判断运行环境或用户行为，给<html>或<body>添加特定类名，再用CSS针对这些类定义样式。
示例：
<script>
if (navigator.userAgent.indexOf('MSIE') !== -1) {
document.documentElement.classList.add('is-ie');
}
</script>
.is-ie .header {
height: 40px;
}
这种方式替代了老旧的IE条件注释，更加可控且易于维护。
立即学习“前端免费学习笔记（深入）”；
使用CSS自定义属性（CSS Variables）实现逻辑控制
利用CSS变量结合JavaScript动态设置值，可以实现“条件性”的样式表现。
:root {
--text-color: black;
}
.dark-mode {
--text-color: white;
}
.text {
color: var(--text-color);
}
通过JS切换dark-mode类即可改变全局颜色逻辑，无需加载新样式表。
动态插入或移除样式表
在JavaScript中根据条件创建link标签，按需加载外部CSS文件。
function loadStyleSheet(url) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
document.head.appendChild(link);
}
// 条件满足时加载
if (window.innerWidth < 768) {
loadStyleSheet('/mobile.css');
}
这种方法真正实现了“条件加载”，节省资源，适合响应式或设备适配场景。
利用媒体查询替代部分条件判断
CSS原生支持通过屏幕尺寸、分辨率、色彩偏好等条件应用样式，无需JavaScript介入。
@media (max-width: 768px) {
.sidebar { display: none; }
}
@media (prefers-color-scheme: dark) {
body { background: #111; }
}
这是最标准的“条件样式”实现方式，性能好且语义清晰。
基本上就这些实用方法。现代浏览器已不再支持IE特有的条件注释（如<!--[if IE]>），所以建议用类名控制、媒体查询和动态脚本加载来替代，更灵活也更符合当前开发规范。
