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 Medienabfrage-Funktion kann verwendet werden, um die Form des Geräts zu testen und zwischen rechteckigen und runden Anzeigen zu unterscheiden.
Syntax
Die diskrete shape-Funktion wird als einer von zwei zulässigen Zeichenfolgen angegeben, entweder rect, was einen rechteckigen Bildschirm darstellt, oder round, was einen kreisförmigen, ovalen oder elliptischen Bildschirm darstellt.
rect-
Die Form ist ein achsenparalleles Rechteck oder Quadrat, oder eine ähnliche Form wie ein abgerundetes Rechteck, für die traditionelle Designs angemessen sind.
round-
Die Form ist gerundet oder einer ähnlichen Form wie ein Kreis, wie ein Oval oder eine Ellipse, für die speziell gerundete Designs angemessen 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 wendet ein spezielles Stylesheet für Geräte mit runden Bildschirmen an.
<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.