如何檢測(cè)瀏覽器是否支持某個(gè)偽類

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

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

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

錯(cuò)誤方法

@supports (div:focus-within) {}

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

此法檢測(cè)的是瀏覽器是否支持一個(gè)名為 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)識(shí)某個(gè)偽類，CSS 會(huì)認(rèn)為其整條規(guī)則都不合法，并將其忽略。style.sheet.cssRules 只會(huì)存放解析成功的規(guī)則，所以如果瀏覽器不認(rèn)識(shí)這個(gè)偽類，就不會(huì)把這條規(guī)則存入 cssRules

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

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

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

可以這么寫（scss）：

@mixin div {
}

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

完

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/94876.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

VishKozus 2019-08-23 14:17 評(píng)論0 收藏0