使用 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: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的默認行為，如block為<div> table-cell的<td> inline的<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>

Answer 2

這是一個非常古老的問題，我認為這個答案不能立即適用（任何“還原”值似乎都已被刪除，“框抑制”也從未實現過），但目前實現這一目標的方法似乎是：

display: "contents";

使用這個和一個包裝元素，現在可以“撤消” 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>

Answer 3

我不認為這里的大多數海報都明白“還原”是什么？ 對於初學者來說，它僅適用於非 IE 瀏覽器。 所以不是很有幫助。 在像“display”這樣的非繼承屬性上，它會“恢復”到瀏覽器的元素的 UA 默認樣式表值，而不是作者的表，在這種情況下，作者的表將是 div 的“塊”。

你為什么不簡單地做相反的事情，只在你的媒體查詢中定義你的各種 div 顯示時？

._hidedesktop {
    display: none;
}

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

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