use modernizr.js classes

by evpozdniakov

HTML

<script src="http://static.contentabc.com/xxxtalentcash/base/cdn/common/js/vendor/modernizr-2.6.1.min.js"></script>
<div class="msg shadow"></div>

CSS

body {
    background-color: #f9f9f9;
}

div.msg {
    position: fixed;
    left: 50%;
    top: 50%;
    margin: -37px 0 0 -150px;
    padding: 10px;
    width: 300px;
    height: 74p;
    background-color: #fff;
    font-size: 2em;
}

div.msg b {
    color: red;
    font-weight: 400;
}

.no-boxshadow div.shadow {
    border-width: 0 1px 3px;
    border-color: #ccc;
    border-style: solid;
}

.boxshadow div.shadow {
    -moz-box-shadow:    0px 3px 4px 1px #ccc;
    -webkit-box-shadow: 0px 3px 4px 1px #ccc;
    box-shadow:         0px 3px 4px 1px #ccc;
}

JavaScript

$(function(){
    var msg = $('html').is('.no-boxshadow')
        ? 'Your browser <b>doesn\'t support</b> css box shadow'
        : 'Your browser <b>support</b> css box shadow';
    $('.msg').html(msg);
})