检查浏览器是否支持显示:内容 [英] Check for browser support of display: contents

问题描述

如何检查浏览器是否支持 display:contents 然后删除某些元素(fe via 展开) 如果没有?

我想改变以下结构......

<div id="logo">...</div><nav id="nav">...</div></标题><主类=ifDisplayContents"><div id="content1">...</div><div id="content2">...</div><div id="content3">...</div></main>

…到…

...
<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;返回 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;返回 el.style.display === val;}if (!isvalidDisplay('contents')){var el = document.getElementsByClassName('ifDisplayContents');而(el.length){var fragment = document.createDocumentFragment();while(el[ 0 ].firstChild) fragment.appendChild(el[ 0 ].firstChild);el[ 0 ].parentNode.replaceChild(fragment, el[ 0 ]);}}

How to check if the browser supports display: contents and then remove certain elements (f. e. via unwrap) if it does not?

I would like to change the following structure …

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

… for browsers not supporting display: contents. It can be via jquery, but it doesn't have to be.

Background information: it is used to be able to keep a good semantic structure and still position the sub-elements in one collective grid, excluding as few old browsers as possible.

解决方案

Browsers typically reject applying invalid style property values. So if you set the display value on a created element then check what that property returns they should match if supported.

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

Note that certain properties that use color or dimensions other than pixels are more complex than this due to internal conversions done to them

Editing from the questioner – the overall solution:

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

这篇关于检查浏览器是否支持显示:内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！