使用Modernizr检测浏览器css3支持

时间:2013-10-17 12:48:06

标签: modernizr

我想在我的网站上检查客户端浏览器的css3支持,如果它不支持css3,我想向用户显示一条消息。

这是我用来检查用户浏览器边框半径的代码。但它始终无法正常工作。我已经在Mac上使用最新版本的Chrome(它可以使用)进行了检查,但是在家中使用最新版本的Chrome时,它没有显示任何消息。

    if (!Modernizr.borderRadius) {
               $(function brwsalert(){
           $("<div>")
           .css({
       'position': 'absolute',
       'top': '0px',
         'left': '0px',
         backgroundColor: 'black',
        'opacity': '0.75',
         'width': '100%',
         'height': $(window).height(),
         zIndex: 5000
        })
       .appendTo("body");

             $("<div><br/><p style='direction: rtl;'>بازدید کننده گرامی،<br/>جهت مشاهده وب سایت می بایست از مرورگرهای بروز استفاده نمایید. جهت دریافت نسخه بروز مرورگر دلخواه بر روی آیکون آن کلیک نمایید.</p><br/><p style='text-align:center;'><a href='https://www.google.com/intl/en/chrome/browser/'><img src='images/chrome.png' width='64px' height='64px'></a>  <a href='https://www.mozilla.org/en-US/firefox/new/'> <img src='images/firefox.png'/></a>  <a href='http://windows.microsoft.com/en-us/internet-explorer/download-ie'><img src='images/ie.png'/></a>  <a href='http://www.opera.com/'><img src='images/opera.png' width='64px' height='64px'></a>  </p>")      
        .css({
         backgroundColor: 'white',
         'top': '50%',
         'left': '50%',
         marginLeft: -210,
         marginTop: -100,
         width: 410,
         paddingRight: 10,
         height: 200,
         'position': 'absolute',
         zIndex: 6000
       })
       .appendTo("body");
           });  
          }

1 个答案:

答案 0 :(得分:0)

我认为语法应为Modernizr.borderradius

我使用Modernizr 2.6.2对此进行了测试,这在Chrome和Safari for Windows中正常运行,而Modernizr.borderRadius在两种情况下都返回undefined。我目前没有Mac可供测试。