shape
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The shape CSS media feature can be used to test the shape of the device to distinguish rectangular and round displays.
Syntax
The shape discrete feature is specified as one of two acceptable strings, either rect representing a rectangular screen or round representing a circular, oval or elliptical screen.
Examples
Basic example
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;
}
}
Custom stylesheet
This HTML will apply a special stylesheet for devices that have round screens.
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>
Specifications
| Specification |
|---|
| CSS Round Display Level 1 # shape-media-feature |
Browser compatibility
Currently, no browsers support this feature.