You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -59,109 +59,96 @@ The detailed description of Positioned Layout is defined in [[CSS3-POSITIONING]]
59
59
60
60
<h2 id="extending-media-queries">Extending Media Queries for a round display</h2>
61
61
<p>
62
-
Media Queries [[MEDIAQUERIES-4]] define mechanisms to support media-dependent style sheets, tailored for different environments. We propose to extend Media Queries by adding the 'device-radius' media feature to support a round display. This will allow web authors to apply different styles to a web page on the rounded display.
62
+
Media Queries [[MEDIAQUERIES-4]] define mechanisms to support media-dependent style sheets, tailored for different environments. We propose to extend Media Queries by adding the shape media feature to support various types of displays. This will allow web authors to apply different styles to a web page on the rounded display.
63
63
</p>
64
64
<section>
65
-
<h3 id="device-radius-media-feature">The 'device-radius' media feature</h3>
66
-
To use different style sheets for a rectangle display and for a round display, media queries should support some properties to identify the display shape. The 'device-radius' media feature describes the property of rounded borders of a display.
67
-
<div class='example'>
68
-
This media query indicates that different style sheets will be applied depending on the display shape.
69
-
<pre>
70
-
<link media="screen and (device-radius: 0%)" rel="stylesheet" href="rectangle.css" />
71
-
<link media="screen and (device-radius: 50%)" rel="stylesheet" href="round.css" />
72
-
</pre>
73
-
<p>
74
-
By the mechanism of media queries, if the value of the 'device-radius' media feature is less than 50%, '<code>rectangle.css</code>' is applied. If it is 50%, '<code>round.css</code>' is applied.
75
-
</p>
76
-
</div>
77
-
<p>As in the '<code>border-radius</code>' property, the 'device-radius' media feature can describe various round shapes of displays, such as rectangle, regular circle, ellipse, and rectangle with round corners.
78
-
</p>
65
+
<h3 id="device-radius-media-feature">The 'shape' media feature</h3>
66
+
To use different style sheets for a rectangle display and for a round display, media queries should support some properties to identify the display shape.
67
+
79
68
<pre class='descdef mq'>
80
-
Name: device-radius
81
-
Type: range
69
+
Name: shape
70
+
Type: discrete
82
71
For: @media
83
-
Value: [ <<length>> | <<percentage>> ]
84
-
Percentage: Refer to corresponding dimension of the display
72
+
Value: rect | round
85
73
</pre>
86
74
<p class="note">
87
-
Note: To define a '<code>range</code>' type media feature, the feature may be written as a normal media feature, but with a '<code>min-</code>' or '<code>max-</code>' prefix on the feature name. '<code>min-</code>' or '<code>max-</code>' prefixes express 'greater or equal to' or 'smaller or equal to' constraints respectively.
88
-
</p>
89
-
<p>
90
-
The length or percentage value of the '<code>device-radius</code>' property defines a radius of a quarter ellipse in terms of the shape of the corner of the outer screen edge (This is similar to the '<code>border-radius</code>' property. See the 'border-radius' description). If the length is zero, the shape of screen is a rectangle, otherwise it is a rectangle with rounded corners or a circle or an ellipse. A percentage value of the '<code>device-radius</code>' is proportional to a width and a height of the screen, which have relevance to a horizontal radius and a vertical radius of the screen according to the length of width and height of the screen each. If the screen shape is the regular circle, '<code>device-radius</code>': 50% has a true value since a half of the width(=height) of the regular circle is the radius of the screen shape. In case of an ellipse with 200x100, '<code>device-radius</code>': 50% means that horizontal-radius of the screen is 100px and vertical-radius of the screen is 50px. It can't be described in length, not percentage. A negative value is not allowed.
75
+
Note: To define a 'discrete' type media feature, the feature is evaluated in a boolean context.
91
76
</p>
92
77
93
-
<div class='example'>
94
-
The example below shows how a web page looks in the different shapes of displays. This is a simple clock written in HTML. (without 'device-radius')
95
-
<pre><!DOCTYPE html>
78
+
The ‘shape’ media feature describes the general shape of the targeted display area of the output device. It accepts the following values:
96
79
97
-
<html>
98
-
<head>
99
-
<link rel="stylesheet" href="rectangle.css" />
100
-
</head>
101
-
<body>
102
-
<div id="clockLayer">
80
+
<dl dfn-type=value dfn-for="@media/shape">
81
+
<dt><dfn>rect</dfn>
82
+
<dd>
83
+
The shape is an axis aligned rectangle or square, or a similar shape for which the traditional designs are appropriate.
84
+
85
+
<dt><dfn>round</dfn>
86
+
<dd>
87
+
The shape is rounded or a similar shape to the circle such as an oval, an ellipse for which distinctively rounded designs are appropriate.
88
+
</dl>
89
+
90
+
<div class='example'>
91
+
The example below shows how a web page looks in the different shapes of displays.
92
+
This is a simple clock written in HTML without 'shape'.
<img alt="An image of a rectangle clock within a rectangle display" src="images/device_radius_clock_a.png">
114
+
<p>(A) Rectangle Display</p>
115
+
</div>
116
+
<div style="float: left; ">
117
+
<img alt="An image of a round clock within a rectangle display" src="images/device_radius_clock_b.png">
118
+
<p>(B) Round Display</p>
119
+
</div>
117
120
</div>
118
-
<div style="float: left; ">
119
-
<img alt="An image of a round clock within a rectangle display" src="images/device_radius_clock_b.png">
120
-
<p>(B) Round Display</p>
121
+
<div style="width: 700px">
122
+
<p class="caption">Devices where the 'shape' media feature is not applicable</p>
121
123
</div>
122
-
</div>
123
-
<div style="width: 700px">
124
-
<p class="caption">Devices where the 'device-radius' media feature is not applicable</p>
125
-
</div>
126
-
On the other hand, the example below shows how the 'device-radius' media feature works in the different shapes of displays. This is the same as the code above except for media queries usage. The 'device-radius' media feature can be used as follows:
127
-
<pre><!-- index.html -->
128
124
129
-
<head>
130
-
<link media="screen and (device-radius: 0%)" rel="stylesheet" href="rectangle.css" />
131
-
<link media="screen and (device-radius: 50%)" rel="stylesheet" href="round.css" />
132
-
</head>
133
-
</pre>
134
-
If this example code is loaded in a regular round display, '<code>round.css</code>' will be applied by the media queries mechanism. To render the clock properly, '<code>round.css</code>' could be written as follows.
On the other hand, the example below shows how the ‘shape’ media feature works in the different shapes of displays. This is the same as the code above except for media queries usage. The shape media feature can be used as follows:
126
+
<pre><!-- index.html -->
127
+
128
+
<head>
129
+
<link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" />
130
+
<link media="screen and (shape: round)" rel="stylesheet" href="round.css" />
131
+
</head>
132
+
</pre>
133
+
If this example code is loaded in a round display, 'round.css' will be applied by the media queries mechanism.
<p class="caption">Devices where the 'shape' media feature is applicable</p>
155
146
</div>
156
147
</div>
157
-
<div style="width: 700px">
158
-
<p class="caption">Devices where the 'device-radius' media feature is applicable</p>
159
-
</div>
160
-
</div>
161
-
<p class="note">Note: For other shapes, such as polygons, we need to extend the media features with additional parameters. The current features have limitations to support the diversity beyond round shapes. How can we express star-shaped polygons? (e.g. SVG syntax, etc.) Of course, there is a trade-off between simplicity and expressiveness.
148
+
149
+
<p class="note">Note: There are cases when the UA may know the shape even in the absence of OS APIs. For example, when rendering to PDF, the shape is known to be a rectangle, so 'shape: rect' evaluates to ''true'' while ''shape: round'' to ''false''
162
150
</p>
163
-
<p class="issue">
164
-
The current 'device-radius' media feature was derived from the syntax of 'border-radius' to specify various shapes, but its usage is a little complicated with several issues. For simplicity and obviousness, 'device-radius' would be changed with the revised syntax. (e.g. Am I round or rounded corners?)
151
+
<p class="note">Note: For other shapes, such as polygons, we need to extend the media features with additional parameters. The current features have limitations to support the diversity beyond round shapes. How can we express star-shaped polygons? (e.g. SVG syntax, etc.) Of course, there is a trade-off between simplicity and expressiveness.
165
152
</p>
166
153
167
154
<h2 id="extending-viewport-rule">Extending the @viewport rule</h2>
0 commit comments