CODEWITHSUNDEEP
javascriptcss
Abhi Beckert
Abhi Beckert

Reputation: 33359

Hide border if box-shadow supported

I have a div with a border and a box shadow:

div.my-div
{
    border: 1px solid #555;
    box-shadow: 0px 4px 35px rgba(0,0,0,0.5);
}

The border is ugly, but it's necessary for browsers that do not support the shadow (the div's background is the same color as the surrounding elements).

How can I detect whether the browser supports box-shadow, and remove the box shadow? Perhaps with javascript?

Edit: I want to do this without any dependencies (such as modernizr).

For example:

var boxShadowSupported = ???;
if (boxShadowSupported && typeof(document.getElementsByClassName) != 'undefined') {
  var elements = document.getElementsByClassName('my-div');
  for (var i= 0; i < elements.length; i++) {
    elements[i].setAttribute('style', 'border: 0;');
  }
}

Upvotes: 0

Views: 207

Answers (2)

Alexandre Khoury
Alexandre Khoury

Reputation: 4022

Maybe you can try this:

var foo=document.createElement("div");
foo.style.boxShadow="0px 0px 0px rgb(0,0,0)";
document.body.appendChild(foo);
var boxShadowSupported=foo.style.boxShadow?1:0;

Upvotes: 0

Alireza
Alireza

Reputation: 1438

you can check box-shaddow browser support with javascript :

if ('boxShadow' in document.body.style ) 
{
    alert('I can support shadow!');
}

Upvotes: 3

Related Questions