如何檢測瀏覽器是否支持某個偽類

Nosee 發(fā)布于2019-08-22 17:07 / 498人閱讀

摘要：如何檢測瀏覽器是否支持某個偽類例如錯誤方法此法檢測的是瀏覽器是否支持一個名為的屬性，且值可以為，當(dāng)然不支持。。。正確方法原理如果解析器不認(rèn)識某個偽類，會認(rèn)為其整條規(guī)則都不合法，并將其忽略。

如何檢測瀏覽器是否支持某個 CSS 偽類（例如 :focus-within）

錯誤方法

@supports (div:focus-within) {}

CSS.supports("div:focus-within`);

此法檢測的是瀏覽器是否支持一個名為 div 的屬性，且值可以為 focus-within，當(dāng)然不支持。。。

正確方法

function supportsPseudoClass(clazz) {
  const style = document.createElement("style");
  style.innerHTML = clazz + "{}";
  document.head.appendChild(style); // required, or style.sheet === null
  const result = style.sheet.cssRules.length === 1;
  style.remove(); // document.head.removeChild(style);
  return result;
}

supportsPseudoClass(":focus-within"); // => true

原理：如果 CSS 解析器不認(rèn)識某個偽類，CSS 會認(rèn)為其整條規(guī)則都不合法，并將其忽略。style.sheet.cssRules 只會存放解析成功的規(guī)則，所以如果瀏覽器不認(rèn)識這個偽類，就不會把這條規(guī)則存入 cssRules

同理，如果用到偽類的 polyfill，一定不能將 polyfill 生成的類名和原始偽類連用。例如：

#div:focus-within, #div.focus-within {
}

如果瀏覽器不認(rèn)識 :focus-within，CSS 解析器會把整條規(guī)則全部忽略掉，起不到 polyfill 的效果。#div:focus-within, #div.focus-within 是一條選擇器

可以這么寫（scss）：

@mixin div {
}

#div:focus-within {
  @include div;
}
#div.focus-within {
  @include div;
}

完

下一篇文章預(yù)計講講 :focus-within 的用處

云服務(wù)器 GPU云服務(wù)器檢測瀏覽器是否有webrtc權(quán)限判斷瀏覽器是否支持webrtc 微信瀏覽器是否支持webrtc 是否包含某個值

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/94876.html

相關(guān)文章

如何使用純 CSS 制作四子連珠游戲

摘要：序言你是否想過單純使用也可以制作一款游戲甚至可以雙人對決這是一篇非常有趣的文章，作者詳細(xì)講解了使用純制作四子連珠游戲的思路以及使用奇淫巧技解決困難問題的方法。在本文中，我將介紹使用純制作的四子連珠游戲的關(guān)鍵思想。序言：你是否想過單純使用 CSS 也可以制作一款游戲？甚至可以雙人對決！這是一篇非常有趣的文章，作者詳細(xì)講解了使用純 CSS 制作四子連珠游戲的思路以及使用奇淫巧技解決困難問...

I_Am 2019-08-02 16:05 評論0 收藏0
如何使用純 CSS 制作四子連珠游戲

摘要：序言你是否想過單純使用也可以制作一款游戲甚至可以雙人對決這是一篇非常有趣的文章，作者詳細(xì)講解了使用純制作四子連珠游戲的思路以及使用奇淫巧技解決困難問題的方法。在本文中，我將介紹使用純制作的四子連珠游戲的關(guān)鍵思想。序言：你是否想過單純使用 CSS 也可以制作一款游戲？甚至可以雙人對決！這是一篇非常有趣的文章，作者詳細(xì)講解了使用純 CSS 制作四子連珠游戲的思路以及使用奇淫巧技解決困難問...

waltr 2019-08-29 16:43 評論0 收藏0
前端面試題總結(jié)

摘要：還有天，年便過去了，回頭看看，這段時間自己有出去面試過，也遇到了很多面試題，以下是我的一些總結(jié)，這篇關(guān)于面試的文章，我也會不定時的更新。然而，如果前一個定時器尚未執(zhí)行，其實就是將其替換為一個新的定時器。還有7天，2018年便過去了，回頭看看，這段時間自己有出去面試過，也遇到了很多面試題，以下是我的一些總結(jié)，這篇關(guān)于面試的文章，我也會不定時的更新。 HTML 1.說一下你對HTML語義...

ztyzz 2019-08-30 15:55 評論0 收藏0
前端面試題總結(jié)

摘要：還有天，年便過去了，回頭看看，這段時間自己有出去面試過，也遇到了很多面試題，以下是我的一些總結(jié)，這篇關(guān)于面試的文章，我也會不定時的更新。然而，如果前一個定時器尚未執(zhí)行，其實就是將其替換為一個新的定時器。還有7天，2018年便過去了，回頭看看，這段時間自己有出去面試過，也遇到了很多面試題，以下是我的一些總結(jié)，這篇關(guān)于面試的文章，我也會不定時的更新。 HTML 1.說一下你對HTML語義...

tinysun1234 2019-08-02 13:57 評論0 收藏0
前端面試題總結(jié)

摘要：還有天，年便過去了，回頭看看，這段時間自己有出去面試過，也遇到了很多面試題，以下是我的一些總結(jié)，這篇關(guān)于面試的文章，我也會不定時的更新。然而，如果前一個定時器尚未執(zhí)行，其實就是將其替換為一個新的定時器。還有7天，2018年便過去了，回頭看看，這段時間自己有出去面試過，也遇到了很多面試題，以下是我的一些總結(jié)，這篇關(guān)于面試的文章，我也會不定時的更新。 HTML 1.說一下你對HTML語義...

VishKozus 2019-08-23 14:17 評論0 收藏0