shape
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die shape CSS Medienfunktion kann verwendet werden, um die Form des Geräts zu testen, um zwischen rechteckigen und runden Bildschirmen zu unterscheiden.
Syntax
Die diskrete shape-Eigenschaft wird als einer von zwei akzeptablen Zeichenfolgen angegeben: entweder rect, das einen rechteckigen Bildschirm darstellt, oder round, das einen kreisförmigen, ovalen oder elliptischen Bildschirm repräsentiert.
rect-
Die Form ist ein achsenausgerichtetes Rechteck oder Quadrat oder eine ähnliche Form wie ein abgerundetes Rechteck, für das traditionelle Designs geeignet sind.
round-
Die Form ist abgerundet oder ähnelt einem Kreis, wie ein Oval oder eine Ellipse, für die charakteristisch abgerundete Designs geeignet sind.
Beispiele
Einfaches Beispiel
HTML
<h1>Hello World!</h1>
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 mit runden Bildschirmen anwenden.
<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
Derzeit unterstützen keine Browser diese Funktion.