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

如何检查浏览器是否支持display: contents然后删除某些元素（例如通过unwrap https://api.jquery.com/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>

… to …

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

...对于不支持的浏览器display: contents。 它可以通过 jquery，但不是必须如此。

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

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

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 ]);
    }
}