shape

非標準

この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

shapeCSSメディア特性で、端末の形状が矩形であるか丸いディスプレイであるかを区別するために使用することができます。

構文

shape は識別機能であり、四角い画面を表す rect または丸や楕円の画面を表す round の二つの文字列のうちの一つで指定します。

rect
形状は長方形か正方形、または角丸矩形などの軸であり、伝統的なデザインが適しています。
round
形状は丸や、卵型、楕円などの円に似た形状であり、独特の丸いデザインが適しています。

注: 現在この特性に対応しているブラウザーはありません。

基本的な例

HTML

<h1>Hello World!</h1>

CSS

h1 {
  text-align: left;
}

@media (shape: rect) {
  h1 {
    text-align: left;
  }
}

@media (shape: round) {
  h1 {
    text-align: center;
  }
}

カスタムスタイルシート

この HTML は、丸い画面を持つ端末に特殊なスタイルシートを適用します。

<head>
    <link rel="stylesheet" href="default.css" />
    <link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" />
    <link media="screen and (shape: round)" rel="stylesheet" href="round.css" />
</head>

仕様書

仕様書 状態 備考
CSS Round Display Level 1 草稿 初回定義