使用 CSS 的“revert”关键字

Question

所以我一直在尝试研究一些隐藏和显示元素的类。当一个元素应该显示时，它应该从display:none;到display: whatever-it-was-before;。在研究如何做到这一点时，我偶然发现了看似完美的解决方案：CSS 的revert. 不幸的是，级联和继承级别 4 距离支持还有很长的路要走，而且 Windows 上的任何主要浏览器似乎都没有实现此功能。

为了说明我正在尝试做的事情，这里有一些 CSS：

.article-card {
    display: flex;
}
._showdesktop {
    display: none !important;
}
@media screen and (min-width: 1024px) {
    ._showdesktop {
        display: revert !important;
    }
}

以及一些随附的 HTML：

<div class="article-card _showdesktop">
    ...
</div>

这个想法是拥有可以在任何元素上使用的通用类，而不会覆盖元素的预期 CSS。这将使我要显示和隐藏的元素是display:flex;，display:block;，display:inline-block;，或display:inline;都具有相同的组类。

所以，我有两个问题：

1. 是否有任何 polyfill 用于此？我尝试四处搜索，但不幸的是，由于版本控制系统，术语“revert”和“polyfill”经常一起出现。
2. 有没有其他方法可以用 CSS 做到这一点？我正在考虑使用visibility:hidden;，因为我几乎从不visibility在我的项目中使用该属性，但这不会从流程中删除元素，而且我想不出任何不会与其他代码冲突的方法来删除它.

https://drafts.c​​sswg.org/css-cascade/#default

---

更新：下面标记的答案和我现在要得到的一样好，但我想用我最终使用的代码更新这个问题。我不确定这会有多好，考虑到我经常使用 max-height，但希望它不会经常发生冲突：

._hidemobile,
._showtablet,
._showdesktop {
    max-height: 0 !important;
    visibility: hidden !important;
}

._showmobile {
    max-height: none !important;
    visibility: visible !important;
}

@media screen and (min-width: 768px) {
    ._showmobile,
    ._hidetablet {
        max-height: 0 !important;
        visibility: hidden !important;
    }

    ._showtablet {
        max-height: none !important;
        visibility: visible !important;
    }
}

@media screen and (min-width: 1024px) {
    ._showtablet,
    ._hidedesktop {
        max-height: 0 !important;
        visibility: hidden !important;
    }

    ._showdesktop {
        max-height: none !important;
        visibility: visible !important;
    }
}

Answer 1

1. 是否有任何 polyfill 用于此？我尝试四处搜索，但不幸的是，由于版本控制系统，术语“revert”和“polyfill”经常一起出现。

可能不是。revert回滚级联，这是一件非常重要的事情。

此外，我不确定这对您的情况是否有帮助。您为元素设置样式，display: flex但display: none赢得了级联。如果我理解正确，您想撤消display: none并获取display: flex. 然而，revert

将级联回滚到用户级别，以便计算指定的值，就好像没有为此属性指定作者级别的规则一样。

也就是说，您的作者级别display: flex也将被忽略。

相反，display: revert当您想重置display为默认行为时很有用，例如blockfor <div>、table-cellfor <td>、inlinefor <span>。

2. 有没有其他方法可以用 CSS 做到这一点？我正在考虑使用visibility:hidden;，因为我几乎从不visibility 在我的项目中使用该属性，但这不会从流程中删除元素，而且我想不出任何不会与其他代码冲突的方法来删除它.

是的。正如您所怀疑的那样，这display: none是一种不应该存在的奇怪现象。CSS Display Level 3通过引入一个名为 的新属性来解决这个问题box-suppress：

该display: none值历来用作“切换”以在显示和隐藏元素之间切换。使这个可逆需要仔细设置 CSS级联，或者记住display它在设置为 之前的值是 什么none。为了这个共同的用例更容易，这个模块引入了独立的box-suppress财产做同样的事情，使切换是否在格式树中的元素出现，现在没有，当它影响它的显示类型来完成的显示。

“唯一”的问题是没有主流浏览器支持box-suppress两者。

因此，最好的方法是display: none仅在您需要时才应用，这样您就不必撤消它。在你的例子中，

.article-card {
  display: flex;
}
@media screen and (min-width: 1024px) { /* This rule is optional */
  ._showdesktop {
    /* Use current display */
  }
}
@media screen and (max-width: 1024px) {
  ._showdesktop {
    display: none;
  }
}

<div class="article-card _showdesktop">Hello world</div>