The shape
CSS media feature can be used to test the shape of the device to distinguish recrangular and round displays.
Syntax
The shape
descrete feature is specified as one of two acceptable strings, either rect
reprsenting a rectangular screen or round
representing a circular, oval or elliptical screen.
rect
- The shape is an axis aligned rectangle or square, or a similar shape such as rounded rectangle for which the traditional designs are appropriate.
round
- The shape is rounded or a similar shape to the circle such as an oval, an ellipse for which distinctively rounded designs are appropriate.
Examples
Basic example
HTML
<h1>Hello World!</h1>
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.
<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 | Status |
---|---|
CSS Round Display Level 1 The definition of 'shape' in that specification. |
Working Draft |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
No compatibility data found. Please contribute data for "css.at-rules.media.shape" (depth: 1) to the MDN compatibility data repository.