如何防止@media破坏某些 Kobo EPUB 阅读器上对 CSS 文件的解析？-解网

问：

我正在研究 EPUB 3 文件的样式。

我有一个包含查询的CSS。@media

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

在浏览器上下文或 Calibre 中呈现时，它会按预期工作。但是在 Kobo Clara HD 上，这会破坏 CSS 文件;规则根本不加载。

删除查询后，CSS 文件将再次工作。因此，问题仅限于此功能。@media

我试图将放入另一个文件中并使用 .结果：主CSS不再被破坏;但问题是，在有效的上下文中，规则的顺序不正确，因此应用的规则不是我想要的规则。换句话说，该规则必须介于我想要设置样式的元素的主要规则之间，但由于该规则必须首先根据 CSS 规范定义，因此它不符合我的要求。@media@import@media@media@import

好吧，理论上我可以将我的主 CSS 文件解构为 3 个文件（开头、媒体、其余文件），每个文件都用，但这似乎太过分了;我需要在添加规则的任何地方破坏主CSS文件。@import@media

我不能使用，因为主文件中的后续规则会重置媒体中的某些规则。!important

关于，我没有找到任何检查规则是否受支持的规则。我尝试了以下方法：@supports@supports@media

@supports selector(div) {
  /* The same rules from the previously shown code block. */
}

它使主要的 CSS 文件工作，因为现在（2023 年 11 月）仍处于实验阶段，并且在我的 Kobo 上不受支持。但它所展示的是：我们可以有一种方法可以禁用规则块。@supports selector(...)@media@supports

有什么解决方法吗？

CSS epub epub3

如何防止@media破坏某些 Kobo EPUB 阅读器上对 CSS 文件的解析？

How to prevent @media from breaking the parsing of the CSS file on some Kobo EPUB readers?

评论