このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

メディア・クエリ~“any-pointer”メディア・フィーチャーMedia Queries Level 4 で追加

記事Jan. 16th,2019
July 30th,2021
出力デバイスの入力メカニズムにポインティング・デバイスがあるかどうかを条件とするためのメディア・フィーチャー
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

any-pointer”メディア・フィーチャーについて

キーワード値(“none”、“coarse”、“fine”)
タイプ 離散型

any-pointer”メディア・フィーチャーは文書が出力されるデバイスの入力メカニズムにポインティング・デバイスがあるかどうかと、ポインティング・デバイスの正確さを表すメディア・フィーチャーです。

複数のポインティング・デバイスがあるデバイスでは“fine”と“coarse”のどちらも“真”となる場合があります。

ポインティング・デバイスがない(“none”)のはすべての入力メカニズムがポインティング・デバイスでない場合のみです。

指定できる値

説明
none 出力デバイスにはポインティング・デバイスはない
coarse 出力デバイスには正確性に制約があるポインティング・デバイスがある
fine 出力デバイスには正確性が高いポインティング・デバイスがある

サンプルコード

@media all and (any-pointer: none) {
p.sample {
background-color: #00a497; /**/
text-decoration: underline dotted;
}
}

@media all and (any-pointer: coarse) {
p.sample {
background-color: #e198b4; /**/
text-decoration: underline wavy;
font-style: italic;
}
}

@media all and (any-pointer: fine) {
p.sample {
background-color: #fabf14; /**/
text-decoration: underline dashed;
font-weight: bold;
}
}
<p class="sample">
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
</p>

夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク