shape

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.

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

Syntax

Das diskrete Merkmal shape wird als einer von zwei akzeptablen Strings angegeben: entweder rect, was ein rechteckiger Bildschirm ist, oder round, was einen kreisförmigen, ovalen oder elliptischen Bildschirm darstellt.

rect: Die Form ist ein achsenorientiertes Rechteck oder Quadrat oder eine ähnliche Form wie ein abgerundetes Rechteck, für das die traditionellen Designs geeignet sind.
round: Die Form ist abgerundet oder eine ähnliche Form wie der Kreis, beispielsweise ein Oval, eine Ellipse, für die unverwechselbar 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 wird ein spezielles Stylesheet für Geräte anwenden, die runde Bildschirme haben.

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>

Spezifikationen

Specification
CSS Round Display Level 1 # shape-media-feature

Browser-Kompatibilität

Es gibt keinen Browser, der dieses Merkmal implementiert.