CSS.supports() - 対応状況を確認する

2017/10/15

supports()は、CSSのメソッドです。スタイルシートのプロパティと値に対応しているか否かを返します。

概要

名前

supports

所属

IDL

static boolean supports(CSSOMString property, CSSOMString value);
static boolean supports(CSSOMString conditionText);

typedef USVString CSSOMString;

仕様書

https://drafts.csswg.org/css-conditional-3/#dom-css-supports

説明

引数を1つ指定する場合は、引数(conditionText)に@supports()内と同じ文字列を指定して下さい。

引数を2つ指定する場合は、第1引数(property)にプロパティ名、第2引数(value)に値を指定して下さい。

対応ならtrue、非対応ならfalseを返します。

デモ

CSS.supports()のデモです。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
body {
	white-space: pre-wrap ;
}
	</style>
</head>
<body>
<script>
/** try it! **/
var a = CSS.supports( "display", "flow-root" ) ;
var b = CSS.supports( "display", "flex" ) ;
var c = CSS.supports( "tab-size", "8px" ) ;
var d = CSS.supports( "color", "cmyk(100, 100%, 100%, 1)" ) ;
var e = CSS.supports( "color: red" ) ;
/** try it! **/

var results = { a:a, b:b, c:c, d:d, e:e, } ;

for( var name in results ) {
	console.log( name, results[name] ) ;
	document.body.appendChild( document.createTextNode( name + " = " + results[name] + "\n" ) ) ;
}
</script>
</body>
</html>