Check For Browser Support Of Display: Contents

Question

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 …

Solution 1:

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.

functionisvalidDisplay(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:

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

Solution 2:

There is the CSS.supports DOM API which you can use for this:

Baca Juga

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

If the CSS.supports DOM API is not supported by your browser (for example IE), display: contents would probably not be either.

MDN

JavaScript Sample

Check For Browser Support Of Display: Contents

Solution 1:

Solution 2:

Post a Comment for "Check For Browser Support Of Display: Contents"