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, um rechteckige und runde Anzeigen zu unterscheiden.
Syntax
Das diskrete shape-Merkmal 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 achsenparallel ausgerichtetes 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 ähnelt der eines Kreises, 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ützt kein Browser dieses Feature.