CSS 条件付き規則

CSS 条件付き規則 (CSS Conditional Rules) は CSS のモジュールの一つで、プロセッサーの能力やスタイルシートが適用される文書の条件に基づいて一連の規則を定義することができます。

リファレンス

@-規則

• @document
• @media
• @supports
• @import

仕様書

仕様書	状態	備考
CSS Conditional Rules Module Level 3	勧告候補	初回定義

ブラウザーの対応

@document 規則

このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Edge Mobile	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
基本対応 実験的非標準	Chrome 未対応 なし	Edge ?	Firefox 完全対応 61 接頭辞付き 補足 無効 完全対応 61 接頭辞付き 補足 無効 接頭辞付き -moz- のベンダー接頭辞が必要 補足 Disabled by default in web pages, except for an empty url-prefix() value, which is supported due to its use in Firefox browser detection. Still supported in user stylesheets. 無効 From version 61: this feature is behind the layout.css.moz-document.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. 未対応 1.5 — 61 接頭辞付き 接頭辞付き -moz- のベンダー接頭辞が必要	IE 未対応 なし	Opera 未対応 なし	Safari 未対応 なし	WebView Android ?	Chrome Android ?	Edge Mobile ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android 未対応 なし
regexp() 実験的非標準	Chrome 未対応 なし	Edge ?	Firefox 完全対応 6	IE 未対応 なし	Opera 未対応 なし	Safari 未対応 なし	WebView Android 未対応 なし	Chrome Android 未対応 なし	Edge Mobile ?	Firefox Android ?	Opera Android 未対応 なし	Safari iOS 未対応 なし	Samsung Internet Android 未対応 なし

凡例

完全対応  

完全対応

未対応  

未対応

実装状況不明  

実装状況不明

実験的。動作が変更される可能性があります。

実験的。動作が変更される可能性があります。

非標準。ブラウザー間の互換性が低い可能性があります。

非標準。ブラウザー間の互換性が低い可能性があります。

実装ノートを参照してください。

実装ノートを参照してください。

ユーザーが明示的にこの機能を有効にしなければなりません。

ユーザーが明示的にこの機能を有効にしなければなりません。

使用するには、ベンダー接頭辞または異なる名前が必要です。

使用するには、ベンダー接頭辞または異なる名前が必要です。

@import 規則

このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Edge Mobile	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
基本対応	Chrome 完全対応 あり	Edge 完全対応 あり	Firefox 完全対応 あり	IE 完全対応 5.5	Opera 完全対応 あり	Safari 完全対応 あり	WebView Android 完全対応 あり	Chrome Android 完全対応 あり	Edge Mobile 完全対応 あり	Firefox Android 完全対応 あり	Opera Android 完全対応 あり	Safari iOS 完全対応 あり	Samsung Internet Android 完全対応 あり

凡例

完全対応  

完全対応

@media 規則

このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Edge Mobile	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
基本対応	Chrome 完全対応 1	Edge 完全対応 あり	Firefox 完全対応 1	IE 完全対応 6	Opera 完全対応 9.2	Safari 完全対応 1.3	WebView Android 完全対応 1	Chrome Android ?	Edge Mobile 完全対応 あり	Firefox Android 完全対応 4	Opera Android 完全対応 9	Safari iOS 完全対応 3.1	Samsung Internet Android ?
speech media type	Chrome 未対応 なし	Edge 未対応 なし	Firefox 未対応 なし	IE 未対応 なし	Opera 完全対応 9.2	Safari 未対応 なし	WebView Android 未対応 なし	Chrome Android ?	Edge Mobile 未対応 なし	Firefox Android 未対応 なし	Opera Android 完全対応 9	Safari iOS 未対応 なし	Samsung Internet Android 未対応 なし
Media feature expressions	Chrome 完全対応 1	Edge 完全対応 あり	Firefox 完全対応 1	IE 完全対応 9	Opera 完全対応 9.2	Safari 完全対応 1.3	WebView Android 完全対応 1	Chrome Android ?	Edge Mobile 完全対応 あり	Firefox Android 完全対応 4	Opera Android 完全対応 9	Safari iOS 完全対応 3.1	Samsung Internet Android ?
any-hover media feature	Chrome 完全対応 41	Edge 完全対応 16	Firefox 完全対応 64	IE 未対応 なし	Opera 完全対応 28	Safari 完全対応 9	WebView Android 完全対応 41	Chrome Android 完全対応 41	Edge Mobile 未対応 なし	Firefox Android 完全対応 64	Opera Android 完全対応 28	Safari iOS 完全対応 9.2	Samsung Internet Android 完全対応 5.0
any-pointer media feature	Chrome 完全対応 41	Edge 完全対応 12	Firefox 完全対応 64	IE 未対応 なし	Opera 完全対応 28	Safari 完全対応 9	WebView Android 完全対応 41	Chrome Android 完全対応 41	Edge Mobile 完全対応 12	Firefox Android 完全対応 64	Opera Android 完全対応 28	Safari iOS 完全対応 9.2	Samsung Internet Android ?
aspect-ratio media feature	Chrome 完全対応 4	Edge ?	Firefox 完全対応 3.5	IE 完全対応 9	Opera 完全対応 53	Safari 完全対応 あり	WebView Android 完全対応 あり	Chrome Android ?	Edge Mobile ?	Firefox Android ?	Opera Android ?	Safari iOS 完全対応 あり	Samsung Internet Android 完全対応 あり
color media feature	Chrome 完全対応 あり	Edge ?	Firefox 完全対応 あり	IE ?	Opera 完全対応 あり	Safari 完全対応 あり	WebView Android ?	Chrome Android ?	Edge Mobile ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
color-gamut media feature	Chrome 完全対応 58	Edge ?	Firefox 未対応 なし	IE 未対応 なし	Opera 完全対応 45	Safari 完全対応 あり	WebView Android ?	Chrome Android 完全対応 58	Edge Mobile ?	Firefox Android 未対応 なし	Opera Android 完全対応 45	Safari iOS ?	Samsung Internet Android ?
color-index media feature 非標準	Chrome 完全対応 あり	Edge ?	Firefox 未対応 なし	IE 未対応 なし	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Edge Mobile ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
device-aspect-ratio media feature 非推奨非標準	Chrome 完全対応 あり	Edge ?	Firefox 完全対応 あり	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android 完全対応 あり	Edge Mobile ?	Firefox Android 完全対応 あり	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
device-height media feature 非推奨非標準	Chrome 完全対応 あり	Edge ?	Firefox 完全対応 あり	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android 完全対応 あり	Edge Mobile ?	Firefox Android 完全対応 あり	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
device-width media feature	Chrome 完全対応 あり	Edge ?	Firefox 完全対応 あり	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android 完全対応 あり	Edge Mobile ?	Firefox Android 完全対応 あり	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
display-mode media feature	Chrome 完全対応 46	Edge 未対応 なし	Firefox 完全対応 47 補足 完全対応 47 補足 補足 Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android 完全対応 46	Edge Mobile 未対応 なし	Firefox Android 完全対応 47 補足 完全対応 47 補足 補足 Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.	Opera Android ?	Safari iOS ?	Samsung Internet Android 未対応 なし
grid media feature	Chrome 完全対応 あり	Edge ?	Firefox 完全対応 あり	IE ?	Opera 完全対応 あり	Safari 完全対応 あり	WebView Android ?	Chrome Android ?	Edge Mobile ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
height media feature	Chrome ?	Edge ?	Firefox ?	IE 完全対応 9	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Edge Mobile ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
inverted-colors media feature 実験的非標準	Chrome 未対応 なし	Edge ?	Firefox 未対応 なし	IE 未対応 なし	Opera 未対応 なし	Safari 完全対応 あり	WebView Android ?	Chrome Android 未対応 なし	Edge Mobile ?	Firefox Android 未対応 なし	Opera Android 未対応 なし	Safari iOS 完全対応 あり	Samsung Internet Android ?
hover media feature	Chrome 完全対応 38 補足 完全対応 38 補足 補足 Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.	Edge 完全対応 12	Firefox 完全対応 64	IE 未対応 なし	Opera 完全対応 28	Safari 完全対応 9	WebView Android ?	Chrome Android 完全対応 50	Edge Mobile 完全対応 12	Firefox Android 完全対応 64	Opera Android 完全対応 28	Safari iOS 完全対応 9.2	Samsung Internet Android ?
light-level media feature 実験的非標準	Chrome 未対応 なし	Edge ?	Firefox 未対応 なし	IE 未対応 なし	Opera 未対応 なし	Safari 未対応 なし	WebView Android 未対応 なし	Chrome Android 未対応 なし	Edge Mobile ?	Firefox Android 未対応 なし	Opera Android 未対応 なし	Safari iOS 未対応 なし	Samsung Internet Android ?
monochrome media feature	Chrome 完全対応 あり	Edge ?	Firefox 完全対応 あり	IE 未対応 なし	Opera 完全対応 あり	Safari 完全対応 あり	WebView Android ?	Chrome Android ?	Edge Mobile ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
orientation media feature	Chrome 完全対応 あり	Edge ?	Firefox 完全対応 あり	IE ?	Opera 完全対応 あり	Safari 完全対応 あり	WebView Android 完全対応 あり	Chrome Android ?	Edge Mobile ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
overflow-block media feature 実験的非標準	Chrome 未対応 なし	Edge ?	Firefox 未対応 なし 補足 未対応 なし 補足 補足 See bug 1422235.	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android 未対応 なし	Edge Mobile ?	Firefox Android 未対応 なし 補足 未対応 なし 補足 補足 See bug 1422235.	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
overflow-inline media feature 実験的非標準	Chrome 未対応 なし	Edge ?	Firefox 未対応 なし 補足 未対応 なし 補足 補足 See bug 1422235.	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android 未対応 なし	Edge Mobile ?	Firefox Android 未対応 なし 補足 未対応 なし 補足 補足 See bug 1422235.	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
pointer media feature	Chrome 完全対応 41	Edge 完全対応 12	Firefox 完全対応 64	IE ?	Opera 完全対応 28	Safari 完全対応 9	WebView Android ?	Chrome Android 完全対応 50	Edge Mobile 完全対応 12	Firefox Android 完全対応 64	Opera Android 完全対応 28	Safari iOS 完全対応 9.2	Samsung Internet Android ?
prefers-reduced-motion media feature 実験的	Chrome 未対応 なし	Edge 未対応 なし	Firefox 完全対応 63	IE 未対応 なし	Opera 未対応 なし	Safari 完全対応 10.1	WebView Android 未対応 なし	Chrome Android 未対応 なし	Edge Mobile 未対応 なし	Firefox Android 完全対応 64	Opera Android 未対応 なし	Safari iOS 完全対応 10.3	Samsung Internet Android ?
resolution media feature	Chrome 完全対応 29	Edge ?	Firefox 完全対応 8 完全対応 8 部分対応 3.5 補足 補足 Supports <integer> values only.	IE ?	Opera 完全対応 あり	Safari ?	WebView Android ?	Chrome Android ?	Edge Mobile ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
scan media feature	Chrome 未対応 なし	Edge ?	Firefox 未対応 なし	IE 未対応 なし	Opera 未対応 なし	Safari 未対応 なし	WebView Android ?	Chrome Android ?	Edge Mobile ?	Firefox Android 未対応 なし	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
scripting media feature 実験的非標準	Chrome 未対応 なし 補足 未対応 なし 補足 補足 See bug 489957.	Edge ?	Firefox 未対応 なし 補足 未対応 なし 補足 補足 See bug 1166581.	IE 未対応 なし	Opera 未対応 なし	Safari 未対応 なし	WebView Android 未対応 なし 補足 未対応 なし 補足 補足 See bug 489957.	Chrome Android 未対応 なし 補足 未対応 なし 補足 補足 See bug 489957.	Edge Mobile ?	Firefox Android 未対応 なし 補足 未対応 なし 補足 補足 See bug 1166581.	Opera Android 未対応 なし	Safari iOS 未対応 なし	Samsung Internet Android ?
update media feature 実験的	Chrome 未対応 なし	Edge ?	Firefox 未対応 なし	IE 未対応 なし	Opera 未対応 なし	Safari 未対応 なし	WebView Android ?	Chrome Android ?	Edge Mobile ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
width media feature	Chrome 完全対応 あり	Edge ?	Firefox 完全対応 あり	IE 完全対応 9	Opera 完全対応 あり	Safari 完全対応 あり	WebView Android ?	Chrome Android ?	Edge Mobile ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
-moz-device-pixel-ratio media feature 非推奨非標準	Chrome 未対応 なし	Edge ?	Firefox 完全対応 4	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Edge Mobile ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
-webkit-animation media feature 非標準	Chrome 完全対応 あり	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Edge Mobile ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
-webkit-device-pixel-ratio media feature 非標準	Chrome 完全対応 あり	Edge ?	Firefox 完全対応 49 補足 無効 完全対応 49 補足 無効 補足 Implemented as an alias for for -moz-device-pixel-ratio. 無効 From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config. 完全対応 45 補足 無効 補足 Implemented as an alias for for -moz-device-pixel-ratio. 無効 From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE 未対応 なし	Opera 完全対応 あり	Safari ?	WebView Android ?	Chrome Android ?	Edge Mobile ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
-webkit-max-device-pixel-ratio media feature 非標準	Chrome 完全対応 あり	Edge ?	Firefox 完全対応 49 補足 無効 完全対応 49 補足 無効 補足 Implemented as an alias for for max--moz-device-pixel-ratio. 無効 From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config. 完全対応 45 補足 無効 補足 Implemented as an alias for for max--moz-device-pixel-ratio. 無効 From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE 未対応 なし	Opera 完全対応 あり	Safari ?	WebView Android ?	Chrome Android ?	Edge Mobile ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
-webkit-min-device-pixel-ratio media feature 非標準	Chrome 完全対応 あり	Edge ?	Firefox 完全対応 63 補足 完全対応 63 補足 補足 Implemented as an alias for for -moz-device-pixel-ratio. 完全対応 49 補足 無効 補足 Implemented as an alias for for min--moz-device-pixel-ratio. 無効 From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config. 完全対応 45 補足 無効 補足 Implemented as an alias for for min--moz-device-pixel-ratio. 無効 From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE 未対応 なし	Opera 完全対応 あり	Safari ?	WebView Android ?	Chrome Android ?	Edge Mobile ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
-webkit-transform-2d media feature 非標準	Chrome 未対応 なし	Edge 未対応 なし	Firefox 未対応 なし	IE 未対応 なし	Opera 完全対応 あり	Safari 完全対応 1	WebView Android ?	Chrome Android ?	Edge Mobile 未対応 なし	Firefox Android 未対応 なし	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
-webkit-transform-3d media feature 非標準	Chrome 完全対応 あり	Edge ?	Firefox 完全対応 49 完全対応 49 完全対応 46 無効 無効 From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE ?	Opera 完全対応 あり	Safari 完全対応 1	WebView Android ?	Chrome Android ?	Edge Mobile ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
-webkit-transition media feature 非推奨非標準	Chrome 未対応 なし	Edge ?	Firefox 未対応 なし	IE ?	Opera 完全対応 あり	Safari 完全対応 1	WebView Android ?	Chrome Android ?	Edge Mobile ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?

凡例

完全対応  

完全対応

未対応  

未対応

実装状況不明  

実装状況不明

実験的。動作が変更される可能性があります。

実験的。動作が変更される可能性があります。

非標準。ブラウザー間の互換性が低い可能性があります。

非標準。ブラウザー間の互換性が低い可能性があります。

非推奨。新しいウェブサイトでは使用しないでください。

非推奨。新しいウェブサイトでは使用しないでください。

実装ノートを参照してください。

実装ノートを参照してください。

ユーザーが明示的にこの機能を有効にしなければなりません。

ユーザーが明示的にこの機能を有効にしなければなりません。

@supports 規則

このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Edge Mobile	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
基本対応	Chrome 完全対応 28	Edge 完全対応 12	Firefox 完全対応 22 完全対応 22 未対応 17 — ? 無効 無効 From version 17: this feature is behind the layout.css.supports-rule.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE 未対応 なし	Opera 完全対応 12.1	Safari 完全対応 9	WebView Android 完全対応 あり	Chrome Android 完全対応 28	Edge Mobile 完全対応 あり	Firefox Android 完全対応 22 完全対応 22 未対応 17 — ? 無効 無効 From version 17: this feature is behind the layout.css.supports-rule.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android 完全対応 12.1	Safari iOS 完全対応 9	Samsung Internet Android 完全対応 あり
selector() 実験的	Chrome 未対応 なし	Edge 未対応 なし	Firefox 完全対応 64 無効 完全対応 64 無効 無効 From version 64: this feature is behind the layout.css.supports-selector.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE 未対応 なし	Opera 未対応 なし	Safari 未対応 なし	WebView Android 未対応 なし	Chrome Android 未対応 なし	Edge Mobile 未対応 なし	Firefox Android 完全対応 64 無効 完全対応 64 無効 無効 From version 64: this feature is behind the layout.css.supports-selector.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android 未対応 なし	Safari iOS 未対応 なし	Samsung Internet Android 未対応 なし

凡例

完全対応  

完全対応

未対応  

未対応

実験的。動作が変更される可能性があります。

実験的。動作が変更される可能性があります。

ユーザーが明示的にこの機能を有効にしなければなりません。

ユーザーが明示的にこの機能を有効にしなければなりません。