CSSSupportsRule - @supportsのCSSルール

2017/10/15

CSSSupportsRuleは、@supportsのCSSルールを管理するための機能を備えたインターフェイスです。

概要

名前

CSSSupportsRule

継承

IDL

[Exposed=Window]
interface CSSSupportsRule : CSSConditionRule {
};

仕様書

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

チュートリアル

CSSSupportsRuleは、CSSRuleListの各インデックスに含まれています。先にStyleSheetList、CSSStyleSheet、CSSRuleList、CSSRuleを理解して下さい。下記のような@supportsのCSSルールがCSSSupportsRuleです。

@supports( color: red ) {
	p { color: red ; }
}

このインターフェイスに固有のプロパティやメソッドはありません。継承するCSSGroupingRule、CSSConditionRuleのプロパティやメソッドを利用できます。

デモ

{{me}}のデモです。@supportsのCSSルールのプロパティを参照しています。

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

<!DOCTYPE html>
<head>
<style>
@supports( color: red ) {
	p#hoge { color: red ; }
}
</style>
<style>
	body { tab-size: 2 ; word-break: break-all ; }
	div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<p id="hoge">SYNCER</p>
<hr>
<div id="result"></div>
<script>
var styleSheetList = document.styleSheets ;
var styleSheet = styleSheetList[0] ;
var cssRule = styleSheet.cssRules[0] ;
appendText( cssRule + "\n" ) ;
console.log( cssRule ) ;

appendText( "\t" + "conditionText: " + cssRule.conditionText + "\n" ) ;

function appendText ( text ) {
	document.getElementById( "result" ).appendChild( document.createTextNode( text ) ) ;
}
</script>
</body>
</html>