スタイルシートの文字セットを定義します。
@charset 'charset'; @charset "charset";@charset - CSS | MDN
スタイルシートをインポートします。
@import 'url'; @import "url"; @import "url" media1, media2, ...; @import url(url); @import url('url'); @import url("url"); @import url("url") media1;@import - CSS | MDN
XML名前空間を、スタイルシートで使用することを宣言します。
@namespace url("XML-namespace-URL"); @namespace prefix url("XML-namespace-URL");@namespace - CSS | MDN
モジュール レベル3では、次のように記述します。
@namespace "XML-namespace-URL"; @namespace prefix "XML-namespace-URL";CSS Namespaces Module Level 3
@namespace url(http://www.w3.org/1999/xhtml); @namespace svg url(http://www.w3.org/2000/svg); /* XHTMLが既定の名前空間と宣言されているため、これはXHTMLのa要素にマッチする */ a {} /* これはSVGのa要素にマッチする */ svg|a {} /* これはXHTMLとSVGの、両方のa要素にマッチする */ *|a {}Examples - @namespace - CSS | MDN
スタイルを適用するかどうかを、条件によって決定できます。
@media [only | not]? media_type [ and ( media_feature [: value]? ) ] {
/* media-specific rules */
}
| 真と評価される条件 | |
|---|---|
| not | あるクエリの評価が偽 |
| and | いずれのクエリも真 |
| , | いずれか1つのクエリが真。つまりor演算子 |
| only | すべてのクエリが真 |
適用対象とするmedia_typeには、以下のような値を指定できます。メディアタイプ - @media - CSS | MDN
これ以外にも、ttv、tv、projection、handheld、braille、embossed、auralがありますが、これらはすべてMedia Queries 4で非推奨とされています。Internet Explorerでは、9以降でこの@mediaがサポートされます。Browser compatibility - @media - CSS | MDN
省略すると、allが指定されたと見なされます。
@media ( media_feature : value)
メディアタイプも同時に指定するならば、それと結合するために論理演算子のandが必要となります。
@media media_type and ( media_feature : value)
| メディア特性 | 作用 |
|---|---|
| color | 出力デバイスの色深度 |
| color-index | 参照する色テーブルに含まれている色の数 |
| aspect-ratio | 出力デバイスの表示部分のアスペクト比 |
| device-aspect-ratio | |
| device-height | |
| device-width | |
| display-mode | |
| grid | |
| height | |
| monochrome | |
| orientation | |
| resolution | |
| scan | |
| width | 出力デバイスのレンダリング領域の横幅 |
| prefers-color-scheme | カラーテーマ (color themes) が明色 (light) か暗色 (dark) かの判定 |
| forced-colors | 強制カラーモード (forced colors mode) が有効かどうか。Windowsのハイコントラストモードなど |
width - CSS: カスケーディングスタイルシート | MDN
| コード | スタイルが適用される条件 |
|---|---|
@media handheld and (min-width: 20em),
screen and (min-width: 20em) { ... }
|
モバイル端末でレンダリング領域の幅が20emより大きいか、PCでレンダリング領域の幅が20emより大きい |
@media screen and (min-width: 500px)
and (max-width: 800px) { ... }
|
レンダリング領域の幅が500px以上800px以下 (500pxと800pxの時点を含む) |
カラーテーマ (color themes) がライト モードやダーク モードに設定されていることを検出できます。
@media screen and (prefers-color-scheme: light) {
body { color: black; background-color: white; }
}
@media screen and (prefers-color-scheme: dark) {
body { color: white; background-color: black; }
}
prefers-color-scheme - CSS: カスケーディングスタイルシート | MDN
| ブラウザでの変更方法 | 開発ツールでの変更方法 | |
|---|---|---|
| Firefox | 設定の[ウェブサイトの外観]で変更できます。Change web appearance settings in Firefox | Firefox Help | インスペクターに表示されるcolor scheme simulator buttonsの[このページの暗いカラースキームのシミュレーションを切り替えます (Toggle dark color scheme simulation for the page)]などを選択することで変更できます。View @media rules for prefers-color-scheme - Examine and edit CSS — Firefox Source Docs documentation |
| Chrome | [Rendering]の[Emulate CSS media feature prefers-color-scheme]で選択します。css - How can I emulate prefers-color-scheme media query in Chrome? - Stack Overflow |