使用CSS的“还原"关键词 [英] Using CSS's "revert" keyword

问题描述

所以我一直在尝试一些隐藏和显示元素的类.当应该显示一个元素时，它应该从 display:none; 变为 display:what-it-was-before; .在研究执行此操作的方法时，我偶然发现了看起来最完美的解决方案:CSS的 revert .不幸的是，级联和继承级别4受支持还有很长的路要走，而且Windows上的任何主流浏览器都未实现此功能.

So I've been trying to work on some classes that hide and show elements. When an element is supposed to show, it should go from display:none; to display: whatever-it-was-before;. In researching ways to do this, I stumbled across what looks to be the perfect solution: CSS's revert. Unfortunately, Cascading and Inheritance Level 4 is a long ways from being supported, and this feature doesn't appear to be implemented in any of the major browsers on Windows.

为了说明我正在尝试做的事情，下面是一些CSS:

To illustrate what I'm trying to do, here's some CSS:

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

以及一些随附的HTML:

And some accompanying HTML:

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

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

The idea is to have generic classes that can be used on any element, without overriding the intended CSS of an element. This would allow me to show and hide elements that are display:flex;, display:block;, display:inline-block;, or display:inline; all with the same set of classes.

所以，我有两个问题:

1. 这里是否有任何填充料?我尝试四处搜索，但不幸的是，由于版本控制系统的缘故，还原"和填充"这两个词同时出现了.
2. 还有其他使用CSS的方法吗?我一直在考虑使用 visibility:hidden; ，因为我几乎从来没有在项目中使用 visibility 属性，但这不会从流程中删除元素，并且我想不出任何方法来删除它，而不会与其他代码冲突.

1. Is there any polyfill out there for this? I tried searching around, but unfortunately the terms "revert" and "polyfill" show up together a lot thanks to version control systems.
2. Is there any other way to do this with CSS? I was looking in to using visibility:hidden;, as I almost never use the visibility property in my projects, but this doesn't remove an element from the flow, and I couldn't think of any way to remove it that wouldn't conflict with other code.

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

更新:下面标记的答案与我现在要得到的一样好，但是我想用最终使用的代码来更新此问题.考虑到我经常使用max-height，我不确定这将如何运作，但是希望它不会经常发生冲突:

Update: The answer marked below is as good as I'm going to get for now, but I wanted to update this question with the code I ended up using. I'm not sure how well this will work, considering I do often use max-height, but hopefully it won't conflict very often:

._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;
    }
}

推荐答案

1. 这里是否有任何填充料?我尝试四处搜寻，但是很遗憾，还原"和填充"这两个词一起出现了非常感谢版本控制系统.

可能不是. revert 会回滚级联，这是不平凡的事情.

Probably not. revert rolls back the cascade, that's a non-trivial thing.

此外，我不确定这对您的情况是否会有帮助.您可以使用 display:flex 为元素设置样式，但是 display:none 可以赢得级联.如果我理解正确，则要撤消 display:none 并获取 display:flex .但是， 还原

Moreover, I'm not sure it would be helpful in your case. You style an element with display: flex but display: none wins the cascade. If I understand correctly, you want to undo display: none and get display: flex. However, revert

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

Rolls back the cascade to the user level, so that the specified value is calculated as if no author-level rules were specified for this property.

也就是说，您的作者级显示:flex 也将被忽略.

That is, your author-level display: flex will be ignored too.

相反，当您想将 display 重置为默认行为时， display:revert 很有用.用于< div> 的 block ，用于< td> 的 table-cell ，内联< span> 的code>.

Instead, display: revert is useful when you want to reset display to the default behavior, e.g. block for <div>, table-cell for <td>, inline for <span>.

1. 还有其他使用CSS的方法吗?我一直在考虑使用 visibility:hidden; ，因为我几乎从不使用 visibility 属性在我的项目中，但这不会从中删除元素流动，我想不出任何方法将其删除与其他代码冲突.

1. Is there any other way to do this with CSS? I was looking in to using visibility:hidden;, as I almost never use the visibility property in my projects, but this doesn't remove an element from the flow, and I couldn't think of any way to remove it that wouldn't conflict with other code.

是的.您可能会怀疑， display:none 是一个奇特的东西，不应该存在. CSS显示级别3 通过引入名为 box-suppress :

Yes. As you suspect, display: none is an oddity which should have never existed. CSS Display Level 3 addresses this issue by introducing a new property, called box-suppress:

显示:无 值在历史上曾被用作切换"在显示和隐藏元素之间切换.使其可逆需要精心设置CSS 层叠，或者记住 display 值是什么在它被设定为 无 .为了简化此通用用例，此模块引入了单独的 box-suppress 属性执行相同的操作事物，以便切换元素是否出现在现在可以完成格式化树，而不会影响其显示类型当显示 时.

The display: none value was historically used as a "toggle" to switch between showing and hiding an element. Making this reversible requires either setting up the CSS cascade carefully, or remembering what the display value was before it was set to none. To make this common use-case easier, this module introduces the separate box-suppress property to do the same thing, so that toggling whether or not an element appears in the formatting tree can now be done without affecting its display type when it is displayed.

唯一"的问题是没有主流浏览器不支持 box-suppress .

The "only" problem is that no major browser supports box-suppress neither.

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

So meanwhile, the best approach is applying display: none only when you need it, so that you won't have to undo it. In your example,

.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>

这篇关于使用CSS的“还原"关键词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！