怎么判斷瀏覽器是否支持css3

  
  
  


  
Modernizr Demo
  

Modernizr 的 JS 文件應該放在 head 標簽中，以保證在頁面渲染之前加載。在上面的示例中，我們添加了一個名為“box”的 div 元素，并通過 Modernizr 檢測瀏覽器是否支持圓角特性。在 CSS 樣式中，我們定義了圓角樣式：

.box {
  background-color: #ccc;
  border-radius: 10px; /* 圓角 */
}

/* 如果瀏覽器支持圓角特性，則會添加“border-radius”類 */
.border-radius .box {
  border-radius: 10px;
}

在此之后，我們檢測瀏覽器是否支持“border-radius”類。如果瀏覽器支持，就會添加該類；如果不支持，則不會添加。我們可以通過以下方式來檢測：

if (Modernizr.borderradius) {
  document.querySelector('.box').classList.add('border-radius');
}

這就是使用 Modernizr 檢測瀏覽器是否支持 CSS3 的方法之一。它可以很好地檢測到瀏覽器是否支持特定的特性，但是需要引入一款 JavaScript 庫，增加了頁面的加載時間。

二、使用 @supports

CSS3 引入了一個新的特性——@supports 規(guī)則。這些規(guī)則讓我們能夠檢測瀏覽器是否支持某些特定的 CSS3 屬性。下面是一個示例代碼：

/* 如果瀏覽器支持“border-radius”屬性，則會應用該樣式 */
@supports (border-radius: 10px) {
  .box {
    background-color: #ccc;
    border-radius: 10px;
  }
}

在上面的代碼中，我們使用 @supports 規(guī)則檢測瀏覽器是否支持“border-radius”屬性。如果支持，就會應用該樣式；如果不支持，則不會應用。

@supports 規(guī)則可以更精確地檢測出某些特定的 CSS3 屬性，但是該規(guī)則只能對屬性進行檢測，不能檢測具體的屬性值。

三、使用 JavaScript

我們還可以用 JavaScript 檢測瀏覽器是否支持 CSS3。下面是一個示例代碼：

function supportCss3(style) {
 var prefix = ['webkit', 'Moz', 'ms', 'o'],
 i,
 humpString = [],
 htmlStyle = document.documentElement.style,
 _toHumb = function (string) {
     return string.replace(/-(w)/g, function ($0, $1) {
         return $1.toUpperCase();
     });
 };

 for (i in prefix)
     humpString.push(_toHumb(prefix[i] + '-' + style));

 humpString.push(_toHumb(style));

 for (i in humpString)
     if (humpString[i] in htmlStyle) return true;

 return false;
}

通過該函數(shù)，我們可以判斷某個 CSS3 屬性是否被支持。這種方式很方便，不需要引入額外的庫，但是需要添加一些 JavaScript 代碼到頁面中。

“怎么判斷瀏覽器是否支持css3”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網站，小編將為大家輸出更多高質量的實用文章！