如何避免Kobo EPUB阅读器中@media导致CSS文件解析失败？

针对Kobo Clara HD因无法解析@media规则导致整个CSS文件失效的问题，以下是几种简洁可行的方案：

方案1：用标准@supports包裹@media规则 #

选择Kobo Clara HD不支持的标准CSS特性（如CSS Grid）作为检测条件，将@media规则嵌套在@supports块内。旧设备会跳过整个@supports块，不会触发解析错误；支持该特性的设备（浏览器、Calibre）则会正常解析内部的@media规则，同时保持规则顺序符合需求。

示例代码：

/* 主样式规则：aside的基础样式 */
aside {
  /* 你的基础样式 */
}

@supports (display: grid) {
  @media (min-width: 460pt) {
    aside {
      float: right;
      max-width: 40%;
      margin: 10pt 0 10pt 15pt;
    }
  }
}

/* 主样式的后续规则 */
aside {
  /* 后续重置样式，不会影响@media内的规则（因@media优先级更高） */
}

优点：无需拆分CSS文件，规则顺序完全可控，依赖标准CSS特性而非实验性语法。
缺点：若未来Kobo设备更新内核支持CSS Grid，该方案会失效，但短期适用。

方案2：通过EPUB OPF的媒体条件加载独立样式表 #

将@media相关规则单独放入一个小CSS文件，然后在EPUB的content.opf中通过media属性指定仅在符合条件的设备上加载该文件。Kobo Clara HD不支持媒体条件加载，会忽略该样式表，主CSS保持正常；支持的设备则会加载并应用该文件中的规则。

步骤： #

1. 创建styles-medium.css文件，写入内容（无需再嵌套@media，因为OPF的media属性已过滤设备）：

aside {
  float: right;
  max-width: 40%;
  margin: 10pt 0 10pt 15pt;
}

2. 在content.opf的<manifest>中添加该样式表的条目：

<item href="styles-medium.css" id="styles-medium" media="screen and (min-width: 460pt)" properties="stylesheet"/>

3. 在<spine>或<guide>中确保该样式表的引用顺序在主CSS之后（保证优先级符合需求）。

优点：主CSS完全无需修改，规则顺序通过加载顺序控制，无兼容性风险。
缺点：多了一个独立文件，但相比拆分三个主文件要简洁得多。

方案3：CSS优先级技巧替代@media（仅适用于简单场景） #

如果响应式样式仅针对aside元素，可通过给父容器添加类（如wide-view），在支持的环境中触发样式。但该方案依赖EPUB的JS支持，Kobo可能禁用JS，仅作为备选。

示例代码：

aside.wide-view {
  float: right;
  max-width: 40%;
  margin: 10pt 0 10pt 15pt;
}

内容的提问来源于stack exchange，提问作者NemuLumeN