shape
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Das shape CSS-Medienmerkmal kann verwendet werden, um die Form des Geräts zu testen und rechteckige von runden Bildschirmen zu unterscheiden.
Syntax
Das diskrete Merkmal shape 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 darstellt.
rect-
Die Form ist ein achsenparalleles Rechteck oder Quadrat oder eine ähnliche Form wie etwa ein abgerundetes Rechteck, für das traditionelle Designs geeignet sind.
round-
Die Form ist rund oder einer Kreisform ähnlich, wie etwa ein Oval oder eine Ellipse, für die eindeutig 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 anwenden, die runde Bildschirme haben.
<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 dieses Merkmal.