9
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

メディアクエリの(hover: hover)は(hover)って省略できるらしい

9
Last updated at Posted at 2023-02-15

Media Queries Level 4の仕様です。

Media Queries Level 4のドキュメントによると以下のようにあります。

While media features normally have a syntax similar to CSS properties, they can also be written more simply as just the feature name, like (color).

When written like this, the media feature is evaluated in a boolean context. If the feature would be true for any value other than the number 0, a with the value 0, or the keyword none, the media feature evaluates to true. Otherwise, it evaluates to false.

(hover)のように書いた場合、hoverが「数値0」、「値が0の<dimension>」、「'none'」以外の値のメディア特性を指定するようです。

@media (hover: hover) { ... }

@media (hover) { ... }

と書けますし、

@media (pointer: fine) or (pointer: coarse) { ... }

@media not (pointer: none) { ... }

@media (pointer) { ... }

と書けます。

数値

使う頻度は高くないかもしれないですが、例えばcolorは以下のMDNの例にあるように、白黒機器以外のメディアクエリを書けます。
これは(color > 0)を意味します。

/* すべてのカラー機器 */
@media (color) {
  p {
    color: red;
  }
}

おまけ

Boolean Contextは関係ないですが、Media Queries Level 4でrangeが定義され、

@media (max-width: 700px) { ... }

が以下のように書けるようです。

@media (width <= 700px) { ... }

また、このような指定もできるそうです。

@media (400px <= width <= 700px) { ... }

Ref

9
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?