Медиавозможность CSS `shape`

Экспериментальная: Это экспериментальная технология
Перед использованием в production внимательно ознакомьтесь с таблицей совместимости с браузерами.

Медиавозможность shape CSS позволяет проверить форму устройства, чтобы различать прямоугольные и круглые дисплеи.

Синтаксис

Дискретная функция 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, уровень 1 # shape-media-feature

Совместимость с браузерами

В настоящее время эта функция не поддерживается ни одним браузером.

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/shape