2

所以我一直在努力研究一些隐藏和显示元素的类。当一个元素应该显示时，它应该从display:none;到display: whatever-it-was-before;。在研究实现这一点的方法时，我偶然发现了看起来完美的解决方案：CSS 的revert. 不幸的是，Cascading and Inheritance Level 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

更新：下面标记的答案和我现在得到的一样好，但我想用我最终使用的代码来更新这个问题。考虑到我确实经常使用最大高度，我不确定这将如何运作，但希望它不会经常发生冲突：

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

3 回答 3

6
  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>。

  1. 有没有其他方法可以用 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>

于 2016-03-03T23:46:16.840 回答
1

这是一个非常古老的问题，我认为这个答案不会立即适用（任何“还原”值似乎已被删除，并且“框抑制”也从未实现过），但目前实现这一目标的方法似乎是是：

display: "contents";

使用 this 和 wrapper 元素，现在可以“撤消” a display: "none";，因为该"contents"类型不会在文档流中生成块（就像"none"），但它确实将其内容放入流中。

一些例子：

var toggle = 'contents'
btn = document.getElementById('showHide');
btn.onclick = function(ev) {
  toggle = ('none' === toggle) ? 'contents' : 'none'
  var disp = document.querySelectorAll('.toggle')
  disp.forEach( el => el.style.display = toggle )
}
.toggle { border: 1px dotted red; }
<section>
<p>
On first load, display is the browser default and outlines the elements under test. Each click toggles display:none/display:contents.<br>
<button id="showHide">TOGGLE DISPLAY</button>
</p>

<div>
Text above the first toggle element.
<span class="toggle">Text in the first toggle element.</span>
Text below the first toggle element. Note that everything flows together.
</div>

<p></p>

<div>
In a new div now, a list comes next.
<ol><li>AAA</li>
    <li class="toggle">BBB</li>
    <li>CCC</li>
</ol>
This text is after the list. The second &lt;li&gt; becomes its content.
<hr>

Here's a list that will toggle the display property on itself:
<ol class="toggle"><li>JJJ</li>
    <li>KKK</li>
    <li>LLL</li>
</ol>
When displayed again, the &lt;od&gt; is gone, but the &lt;li&gt; remain.
<hr>

This list has an embedded dev.
<ol><li>XXX</li>
    <div class="toggle"> <li>YYY</li> </div>
    <li>ZZZ</li>
</ol>
This is invalid HTML but after becoming display:contents it should appear normal.

</div>
</section>

于 2020-04-27T22:16:19.140 回答
1

我认为这里的大多数海报都不懂“还原”是什么意思？对于初学者，它仅适用于非 IE 浏览器。所以不是很有帮助。在未继承的属性（如“显示”）上，它将“恢复”回浏览器的 UA 默认样式表值，而不是作者的表单，在这种情况下，该表单将是 div 的“块”。

你为什么不简单地做相反的事情，只在你的媒体查询中定义你的各种 div 当它们显示时？

._hidedesktop {
    display: none;
}

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

<div class="_hidedesktop article-card">
    ...
</div>
于 2021-01-04T06:39:04.950 回答