检查浏览器是否支持显示：内容答案

【问题标题】：Check for browser support of display: contents检查浏览器是否支持显示：内容
【发布时间】：2021-07-06 01:01:09
【问题描述】：

如何检查浏览器是否支持display: contents，如果不支持则删除某些元素（例如通过unwrap）？

我想更改以下结构……

<header class="ifDisplayContents">
    <div id="logo">…</div>
    <nav id="nav">…</div>
</header>
<main class="ifDisplayContents">
    <div id="content1">…</div>
    <div id="content2">…</div>
    <div id="content3">…</div>
</main>

…到…

<div id="logo">…</div>
<nav id="nav">…</div>
<div id="content1">…</div>
<div id="content2">…</div>
<div id="content3">…</div>

... 对于不支持 display: contents 的浏览器。它可以通过 jquery，但不一定是。

背景信息：用于能够保持良好的语义结构，并且仍然将子元素定位在一个集合网格中，尽可能少地排除旧浏览器。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

浏览器通常拒绝应用无效的样式属性值。因此，如果您在创建的元素上设置显示值，然后检查该属性返回的内容，如果支持，它们应该匹配。

function isvalidDisplay(val){
   var el = document.createElement('div');
   el.style.display = val;
   return el.style.display === val;
}

['inline','block','foobar','contents'].forEach(v=> console.log(v,isvalidDisplay(v)))

请注意，由于对它们进行了内部转换，某些使用颜色或尺寸而非像素的属性比这更复杂

提问者编辑——整体解决方案：

function isvalidDisplay(val){
    var el = document.createElement('div');
    el.style.display = val;
    return el.style.display === val;
}
if (!isvalidDisplay('contents')){
    var el = document.getElementsByClassName('ifDisplayContents');
    while(el.length) {
        var fragment = document.createDocumentFragment();
        while(el[ 0 ].firstChild) fragment.appendChild(el[ 0 ].firstChild);
        el[ 0 ].parentNode.replaceChild(fragment, el[ 0 ]);
    }
}

【讨论】：

谢谢你，这对我帮助很大！我已将与我的示例相匹配的工作代码 sn-p 添加到您的问题中。我希望这没问题。如果您不喜欢它，请随意删除它。
认为最好只回答“检查支持”部分，我认为这是您的主要障碍。展开是相当常见且直接的。
好的，谢谢，对我来说，后者也不是那么容易 ;-) 但我的编辑无论如何都没有被批准（“只有在得到受信任的社区成员批准之前，你才能看到它”）。

【解决方案2】：

您可以使用CSS.supports DOM API：

const isSupported = CSS.supports('display', 'contents');

如果您的浏览器（例如 IE）不支持 CSS.supports DOM API，display: contents 可能也不支持。

MDN

【讨论】：

非常感谢！我喜欢这种解决方案，它简洁明了。我读过一些浏览器可能对此做出错误的反应：stackoverflow.com/questions/51072444/… 我不确定这是否真的是一个问题，以及它是否可能适用于其他解决方案。你怎么看？