`shape` CSS Media-Feature

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Das shape CSS Media-Feature kann verwendet werden, um die Form des Geräts zu testen und zwischen rechteckigen und runden Displays zu unterscheiden.

Syntax

Das shape-diskrete Feature wird als einer von zwei zulässigen Strings angegeben: entweder rect, das einen rechteckigen Bildschirm darstellt, oder round, das einen kreisförmigen, ovalen oder elliptischen Bildschirm darstellt.

rect: Die Form ist ein achsenparallel ausgerichtetes Rechteck oder Quadrat oder eine ähnliche Form wie ein abgerundetes Rechteck, für das traditionelle Designs geeignet sind.
round: Die Form ist rund oder einer dem Kreis ähnlichen Form wie ein Oval, eine Ellipse, für die charakteristisch abgerundete Designs geeignet sind.

Beispiele

Einfaches Beispiel

HTML

html

<h1>Hello World!</h1>

CSS

css

h1 {
  text-align: left;
}

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

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

Benutzerdefiniertes Stylesheet

Dieses HTML wendet ein spezielles Stylesheet für Geräte an, die runde Bildschirme haben.

html

<head>
  <link rel="stylesheet" href="/proxy/https/developer.mozilla.org/de/docs/Web/CSS/Reference/At-rules/@media/default.css" />
  <link
    media="screen and (shape: rect)"
    rel="stylesheet"
    href="/proxy/https/developer.mozilla.org/de/docs/Web/CSS/Reference/At-rules/@media/rectangle.css" />
  <link media="screen and (shape: round)" rel="stylesheet" href="/proxy/https/developer.mozilla.org/de/docs/Web/CSS/Reference/At-rules/@media/round.css" />
</head>