web-dev-qa-db-ja.com

CSS値がブラウザでサポートされているかどうかを確認するにはどうすればよいですか？

私はJavaScriptにあまり熟練していないので、どうか我慢してください。 Safari 6以前およびそれ以前Androidモバイルブラウザーなどは、CSS値VHをサポートしていません。DIV＃idまたはクラスはビューポートの高さではありません。以下はページへのリンクです私はいくつかの有用な情報を見つけましたが、CSS値でそれを使用する方法は本当にわかりません：

CSS値がサポートされているかどうかを確認

ショートカットとして提供されるコードは次のとおりです。

if('opacity' in document.body.style) {  
   // do stuff
}

function isPropertySupported(property{
   return property in document.body.style;
 }

上記のリンクのコメントで、誰かがcss VALUEがサポートされているかどうかを確認する方法を尋ね、「あなたはそれを設定してから値を読み戻し、ブラウザが保持しているかどうかを確認します」学習し始めたばかりのJavascriptをもっと知っていれば、それが有用な情報になると確信しています。

これは私が念頭に置いているものですが、実際にこれを行う方法がわかりません。 div＃idまたはdiv.classにvh css値があるかどうかを確認します。 css値がブラウザでサポートされているかどうかを確認してください。サポートされている場合は、ロードを続けます。サポートされていない場合は、IDまたはクラスを変更します。

だから私の質問をまとめると：

JavaScriptまたはjQueryを使用して、CSS値がブラウザーでサポートされているかどうかを確認するにはどうすればよいですか？

答えへのガイダンスは本当にありがたいです。ご協力いただきありがとうございます。

javascriptjquerycssbrowserviewport
22
Guillaume Palm

vhの値がサポートされているかどうかを確認することを意図したのではなく、具体的にDIV#idがサポートされているのではないのでしょうか。

function cssPropertyValueSupported(prop, value) {
  var d = document.createElement('div');
  d.style[prop] = value;
  return d.style[prop] === value;
}
cssPropertyValueSupported('width', '1px');
// => true
cssPropertyValueSupported('width', '1vh');
// => maybe true, maybe false (true for me)
cssPropertyValueSupported('width', '1foobar');
// => false
26
Amadan

新しいAPI CSS.supports があります。 IEを除くほとんどのブラウザ でサポートされています。

console.log(
  // CSS.supports(property, value)
  1, CSS.supports("text-decoration-style", "blink"),
  2, CSS.supports("display", "flex"),
  3, CSS.supports('--foo', 'red'),
  4, CSS.supports('(--foo: red)'),

  // CSS.supports(DOMstring)
  5, CSS.supports("( transform-Origin: 5% 5% )"),
  6, CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or " 
  + "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )")
)

CSSには同様の機能、 @ supports feature query selector 、および IEを除くほとんどのブラウザーでサポート があります。

@supports (display: grid) {
  div {
    display: grid;
  }
}
@supports not (display: grid) {
  div {
    float: right;
  }
}
18
Eric Willigers

あなたが持っているコードが見えます。

var styletotest = "PutStyleHere";

if (styletotest in document.body.style)
{
    alert("The " + styletotest + " property is supported");

} else {

    alert("The " + styletotest + " property is NOT supported"); 

}

テストしたいcssプロパティを引用符で囲んでください

PutStyleHere

また、ファイルをロードすると、機能するかどうかを示すポップアップが表示されます。

ただし、これは不要なようです。

単にグーグル：

[プロパティ] css W3

[プロパティ]は、ブラウザのサポート情報を知りたいプロパティです。

検索したとき

不透明度Css W3

次に、W3リンクをクリックします。下にスクロールすると、ページのセクションに次のような情報が表示されます。

Browser SUpport

ソース

4
Trevor Clarke

CSS.supportsを含むコンテキストでCSSルールが使用可能であれば、しばらくの間JavaScriptからテストできます。

（Firefox 22/Chrome 28）以来

console.log(
CSS.supports("( transform-Origin: 5% 5% )"),
"\n",
CSS.supports("( display: flex )"),
"\n ",
CSS.supports("( background-color: #12233212 )")
)

CSS.supports（）静的メソッドは、ブラウザが特定のCSS機能をサポートしているかどうかを示すブール値を返します。

https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports

3
NVRM

Modernizrを使用することをお勧めします。

Modernizrは、訪問者のブラウザがサポートするHTML5およびCSS3機能を検出するJavaScriptライブラリです。機能のサポートを検出することで、開発者はいくつかの新しいテクノロジーをテストし、それらをサポートしないブラウザーにフォールバックを提供できます。

便利なリンク：

2
Stickers