FFFF make it more clear that media type defaults to all; that there's a me… · xfq/csswg-drafts@bfa3228 · GitHub
Skip to content

Commit bfa3228

Browse files
annevkannevk
committed
make it more clear that media type defaults to all; that there's a media query list which 'defaults' to all when empty; add some examples
1 parent ff13ec1 commit bfa3228

2 files changed

Lines changed: 88 additions & 98 deletions

File tree

‎css3-mediaqueries/Overview.html‎

Lines changed: 46 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -380,9 +380,7 @@ <h2 id=media0><span class=secno>2. </span>Media Queries</h2>
380380
<p>A media query consists of a media type and zero or more <span
381381
class=index id=expressions>expressions</span> that check for the
382382
conditions of particular <span class=index id=media-features>media
383-
features</span>. If the media type is omitted it is assumed to be
384-
&lsquo;<code class=css>all</code>&rsquo;.</p>
385-
<!-- XXX maybe say, "by default the media type is all"? -->
383+
features</span>.
386384

387385
<p>Statements regarding media queries in this section assume the <a
388386
href="#syntax">syntax section</a> is followed. Media queries that do not
@@ -409,64 +407,71 @@ <h2 id=media0><span class=secno>2. </span>Media Queries</h2>
409407
<div class=example>
410408
<p>Here the same media query written in an @import-rule in CSS:</p>
411409

412-
<pre>
413-
<span class=css-example>@import url(color.css) screen and (color);</span>
414-
</pre>
410+
<pre><span class=css-example>@import url(color.css) screen and (color);</span></pre>
415411
</div>
416412

417413
<p>A media query is a logical expression that is either true or false. A
418414
media query is true if the media type of the media query matches the media
419415
type of the device where the user agent is running (as defined in the
420-
"Applies to" line), and all expressions in the media query are true. Also,
421-
a media query which is otherwise false becomes true if the &lsquo;<code
422-
class=css>not</code>&rsquo; keyword is present.
416+
"Applies to" line), and all expressions in the media query are true.
423417

4 93D4 24-
<p>When a media query is true, the corresponding style sheet is applied as
425-
per the normal cascading rules.
418+
<p>If the media type is not explicitly given it is &lsquo;<code
419+
class=css>all</code>&rsquo;.
420+
421+
<div class=example>
422+
<p>I.e. these are identical:</p>
423+
424+
<pre><span class=css-example>@media all and (min-width:500px) { &hellip; }</span></pre>
425+
426+
<pre><span class=css-example>@media (min-width:500px) { &hellip; }</span></pre>
427+
</div>
426428

427-
<p>Several media queries can be combined in a comma-separated list. If one
428-
or more of the media queries in the comma-separated list is true, the
429-
associated style sheet is applied, otherwise the associated style sheet is
430-
ignored.
429+
<p>Several media queries can be combined in a media query list. A
430+
comma-separated list of media queries. If one or more of the media queries
431+
in the comma-separated list are true, the whole list is true, and
432+
otherwise false. In the media queries syntax, the comma expresses a
433+
logical OR, while the &lsquo;<code class=css>and</code>&rsquo; keyword
434+
expresses a logical AND.
431435

432436
<div class=example>
433 77EC 437
<p>Here is an example of several media queries in a comma-separated list
434438
using the an @media-rule in CSS:</p>
435439

436-
<pre>
437-
<span class=css-example>@media <em>screen and (color), projection and (color)</em> { ... }</span>
438-
</pre>
440+
<pre><span class=css-example>@media <em>screen and (color), projection and (color)</em> { ... }</span></pre>
439441
</div>
440442

441-
<p>In the media queries syntax, the comma expresses a logical OR, while the
442-
&lsquo;<code class=css>and</code>&rsquo; keyword expresses a logical AND.
443+
<p>If the media query list is empty (i.e. the declaration is the empty
444+
string or consists solely of whitespace) it is as if &lsquo;<code
445+
class=css>all</code>&rsquo; is specified.
446+
447+
<div class=example>
448+
<p>I.e. these are equivalent:</p>
449+
450+
<pre><span class=css-example>@media all { &hellip; }</span></pre>
451+
452+
<pre><span class=css-example>@media { &hellip; }</span></pre>
453+
</div>
443454

444455
<p>The logical NOT can be expressed through the &lsquo;<code
445-
class=css>not</code>&rsquo; keyword.
456+
class=css>not</code>&rsquo; keyword. The presence of the keyword
457+
&lsquo;<code class=css>not</code>&rsquo; at the beginning of the media
458+
query negates the result. I.e., if the media query had been true without
459+
the &lsquo;<code class=css>not</code>&rsquo; keyword it will become false,
460+
and vice versa. User agents that only support media types (as described in
461+
HTML4) will not recognize the &lsquo;<code class=css>not</code>&rsquo;
462+
keyword and the associated style sheet is therefore not applied.
446463

447464
<div class=example>
448-
<pre>
449-
<span class=html-example>&lt;link rel="stylesheet" media="<em>not screen and (color)</em>" href="example.css" /&gt;</span>
450-
</pre>
465+
<pre><span class=html-example>&lt;link rel="stylesheet" media="<em>not screen and (color)</em>" href="example.css" /&gt;</span></pre>
451466
</div>
452467

453-
<p>The presence of the keyword &lsquo;<code class=css>not</code>&rsquo; at
454-
the beginning of the query negates the result. I.e., if the media query
455-
had been true without the &lsquo;<code class=css>not</code>&rsquo; keyword
456-
it will become false, and vice versa. User agents that only support media
457-
types (as described in HTML4) will not recognize the &lsquo;<code
458-
class=css>not</code>&rsquo; keyword and the associated style sheet is
459-
therefore not applied.
460-
461468
<p>The keyword &lsquo;<code class=css>only</code>&rsquo; can also be used
462469
to hide style sheets from older user agents. User agents must process
463470
media queries starting with &lsquo;<code class=css>only</code>&rsquo; as
464471
if the &lsquo;<code class=css>only</code>&rsquo; keyword was not present.
465472

466473
<div class=example>
467-
<pre>
468-
<span class=html-example>&lt;link rel="stylesheet" media="<em>only screen and (color)</em>" href="example.css" /&gt;</span>
469-
</pre>
474+
<pre><span class=html-example>&lt;link rel="stylesheet" media="<em>only screen and (color)</em>" href="example.css" /&gt;</span></pre>
470475
</div>
471476

472477
<p>The media queries syntax can be used with HTML, XHTML, XML <a
@@ -477,17 +482,15 @@ <h2 id=media0><span class=secno>2. </span>Media Queries</h2>
477482
<p>Here is the same example written in HTML, XHTML, XML, @import and
478483
@media:</p>
479484

480-
<pre>
481-
<span class=html-example>&lt;link rel="stylesheet" media="<em>screen and (color), projection and (color)</em>" rel="stylesheet" href="example.css"&gt;</span>
485+
<pre><span class=html-example>&lt;link rel="stylesheet" media="<em>screen and (color), projection and (color)</em>" rel="stylesheet" href="example.css"&gt;</span>
482486

483487
<span class=html-example>&lt;link rel="stylesheet" media="<em>screen and (color), projection and (color)</em>" rel="stylesheet" href="example.css" /&gt;</span>
484488

485489
<span class=xml-example>&lt;?xml-stylesheet media="<em>screen and (color), projection and (color)</em>" rel="stylesheet" href="example.css" ?&gt;</span>
486490

487491
<span class=css-example>@import url(example.css) screen and (color), projection and (color);</span>
488492

489-
<span class=css-example>@media screen and (color), projection and (color) { ... }</span>
490-
</pre>
493+
<span class=css-example>@media screen and (color), projection and (color) { ... }</span></pre>
491494

492495
<p class=note>Just like HTML, the <a href="#XMLSTYLE"
493496
rel=biblioentry>[XMLSTYLE]<!--{{XMLSTYLE}}--></a> specification has not
@@ -505,9 +508,7 @@ <h2 id=media0><span class=secno>2. </span>Media Queries</h2>
505508
class=css>device-aspect-ratio</code>&rsquo; will therefore always be
506509
false:</p>
507510

508-
<pre>
509-
<span class=html-example>&lt;link rel="stylesheet" media="aural and (device-aspect-ratio: 16/9)" href="example.css" /&gt;</span>
510-
</pre>
511+
<pre><span class=html-example>&lt;link rel="stylesheet" media="aural and (device-aspect-ratio: 16/9)" href="example.css" /&gt;</span></pre>
511512
</div>
512513

513514
<p>Expressions will always be false if the unit of measurement does not
@@ -518,9 +519,7 @@ <h2 id=media0><span class=secno>2. </span>Media Queries</h2>
518519
&lsquo;<code class=css>speech</code>&rsquo; devices so the following
519520
media query is always false:</p>
520521

521-
<pre>
522-
<span class=html-example>&lt;link rel="stylesheet" media="speech and (min-device-width: 800px)" href="example.css" /&gt;</span>
523-
</pre>
522+
<pre><span class=html-example>&lt;link rel="stylesheet" media="speech and (min-device-width: 800px)" href="example.css" /&gt;</span></pre>
524523

525524
<p>Note that the media queries in this example would have been true if the
526525
keyword &lsquo;<code class=css>not</code>&rsquo; had been added to the
@@ -534,10 +533,8 @@ <h2 id=media0><span class=secno>2. </span>Media Queries</h2>
534533
<div class=example>
535534
<p>These two media queries are equivalent:</p>
536535

537-
<pre>
538-
@media all and (orientation: portrait) { ... }
539-
@media (orientation: portrait) { ... }
540-
</pre>
536+
<pre>@media all and (orientation: portrait) { ... }
537+
@media (orientation: portrait) { ... }</pre>
541538
</div>
542539

543540
<p>To avoid circular dependencies, it is never necessary to apply the style

‎css3-mediaqueries/Overview.src.html‎

Lines changed: 42 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -249,9 +249,7 @@ <h2 id="media0">Media Queries</h2>
249249

250250
<p>A media query consists of a media type and zero or more
251251
<span class="index">expressions</span> that check for the conditions of
252-
particular <span class="index">media features</span>. If the media type is
253-
omitted it is assumed to be ''all''.</p>
254-
<!-- XXX maybe say, "by default the media type is all"? -->
252+
particular <span class="index">media features</span>.</p>
255253

256254
<p>Statements regarding media queries in this section assume the
257255
<a href="#syntax">syntax section</a> is followed. Media queries that do not
@@ -274,81 +272,82 @@ <h2 id="media0">Media Queries</h2>
274272

275273
<div class="example">
276274
<p>Here the same media query written in an @import-rule in CSS:</p>
277-
<pre>
278-
<span class="css-example">@import url(color.css) screen and (color);</span>
279-
</pre>
275+
<pre><span class="css-example">@import url(color.css) screen and (color);</span></pre>
280276
</div>
281277

282278
<p>A media query is a logical expression that is either true or
283279
false. A media query is true if the media type of the media query
284-
matches the media type of the device where the user agent is running (as defined in the "Applies to" line),
285-
and all expressions in the media query are true. Also, a media query
286-
which is otherwise false becomes true if the ''not'' keyword is
287-
present.</p>
280+
matches the media type of the device where the user agent is running (as
281+
defined in the "Applies to" line), and all expressions in the media query
282+
are true.</p>
283+
284+
<p>If the media type is not explicitly given it is ''all''.</p>
288285

289-
<p>When a media query is true, the corresponding style sheet is
290-
applied as per the normal cascading rules.</p>
286+
<div class="example">
287+
<p>I.e. these are identical:</p>
288+
<pre><span class="css-example">@media all and (min-width:500px) { &hellip; }</span></pre>
289+
<pre><span class="css-example">@media (min-width:500px) { &hellip; }</span></pre>
290+
</div>
291291

292-
<p>Several media queries can be combined in a comma-separated list.
293-
If one or more of the media queries in the comma-separated list is
294-
true, the associated style sheet is applied, otherwise the
295-
associated style sheet is ignored.</p>
292+
<p>Several media queries can be combined in a media query list. A
293+
comma-separated list of media queries. If one or more of the media queries
294+
in the comma-separated list are true, the whole list is true, and otherwise
295+
false. In the media queries syntax, the comma
296+
expresses a logical OR, while the ''and'' keyword expresses a logical
297+
AND.</p>
296298

297299
<div class="example">
298300

299301
<p>Here is an example of several media queries in a comma-separated
300302
list using the an @media-rule in CSS:</p>
301303

302-
<pre>
303-
<span class="css-example">@media <em>screen and (color), projection and (color)</em> { ... }</span>
304-
</pre>
304+
<pre><span class="css-example">@media <em>screen and (color), projection and (color)</em> { ... }</span></pre>
 10986
305+
</div>
306+
307+
<p>If the media query list is empty (i.e. the declaration is the empty
308+
string or consists solely of whitespace) it is as if ''all'' is
309+
specified.</p>
305310

311+
<div class="example">
312+
<p>I.e. these are equivalent:</p>
313+
<pre><span class="css-example">@media all { &hellip; }</span></pre>
314+
<pre><span class="css-example">@media { &hellip; }</span></pre>
306315
</div>
307316

308-
<p>In the media queries syntax, the comma expresses a logical OR, while the
309-
''and'' keyword expresses a logical AND.</p>
310317

311-
<p>The logical NOT can be expressed through the ''not'' keyword. </p>
318+
<p>The logical NOT can be expressed through the ''not'' keyword. The
319+
presence of the keyword ''not'' at the beginning of the media query negates
320+
the result. I.e., if the media query had been true without the ''not''
321+
keyword it will become false, and vice versa. User agents that only support
322+
media types (as described in HTML4) will not recognize the ''not'' keyword
323+
and the associated style sheet is therefore not applied.</p>
312324

313325
<div class="example">
314-
<pre>
315-
<span class="html-example">&lt;link rel="stylesheet" media="<em>not screen and (color)</em>" href="example.css" /&gt;</span>
316-
</pre>
326+
<pre><span class="html-example">&lt;link rel="stylesheet" media="<em>not screen and (color)</em>" href="example.css" /&gt;</span></pre>
317327
</div>
318328

319-
<p>The presence of the keyword ''not'' at the beginning of the query
320-
negates the result. I.e., if the media query had been true without the
321-
''not'' keyword it will become false, and vice versa. User agents that
322-
only support media types (as described in HTML4) will not recognize
323-
the ''not'' keyword and the associated style sheet is therefore not
324-
applied.</p>
325-
326329
<p>The keyword ''only'' can also be used to hide style sheets from
327330
older user agents. User agents must process media queries starting
328331
with ''only'' as if the ''only'' keyword was not present.</p>
329332

330333
<div class="example">
331-
<pre>
332-
<span class="html-example">&lt;link rel="stylesheet" media="<em>only screen and (color)</em>" href="example.css" /&gt;</span>
333-
</pre>
334+
<pre><span class="html-example">&lt;link rel="stylesheet" media="<em>only screen and (color)</em>" href="example.css" /&gt;</span></pre>
334335
</div>
335336

336337
<p>The media queries syntax can be used with HTML, XHTML, XML [[XMLSTYLE]] and the @import and @media rules of CSS.</p>
337338

338339
<div class="example">
339340
<p>Here is the same example written in HTML, XHTML, XML, @import and @media:</p>
340341

341-
<pre>
342-
<span class="html-example">&lt;link rel="stylesheet" media="<em>screen and (color), projection and (color)</em>" rel="stylesheet" href="example.css"&gt;</span>
342+
<pre><span class="html-example">&lt;link rel="stylesheet" media="<em>screen and (color), projection and (color)</em>" rel="stylesheet" href="example.css"&gt;</span>
343343

344344
<span class="html-example">&lt;link rel="stylesheet" media="<em>screen and (color), projection and (color)</em>" rel="stylesheet" href="example.css" /&gt;</span>
345345

346346
<span class="xml-example">&lt;?xml-stylesheet media="<em>screen and (color), projection and (color)</em>" rel="stylesheet" href="example.css" ?&gt;</span>
347347

348348
<span class="css-example">@import url(example.css) screen and (color), projection and (color);</span>
349349

350-
<span class="css-example">@media screen and (color), projection and (color) { ... }</span>
351-
</pre>
350+
<span class="css-example">@media screen and (color), projection and (color) { ... }</span></pre>
352351

353352
<p class="note">Just like HTML, the [[XMLSTYLE]] specification has not yet
354353
been updated to use media queries in the <code>media</code> pseudo-attribute.</p>
@@ -363,9 +362,7 @@ <h2 id="media0">Media Queries</h2>
363362
visual devices. On an aural device, expressions involving
364363
''device-aspect-ratio'' will therefore always be false:</p>
365364

366-
<pre>
367-
<span class="html-example">&lt;link rel="stylesheet" media="aural and (device-aspect-ratio: 16/9)" href="example.css" /&gt;</span>
368-
</pre>
365+
<pre><span class="html-example">&lt;link rel="stylesheet" media="aural and (device-aspect-ratio: 16/9)" href="example.css" /&gt;</span></pre>
369366
</div>
370367

371368
<p>Expressions will always be false if the unit of measurement does
@@ -374,9 +371,7 @@ <h2 id="media0">Media Queries</h2>
374371
<div class="example">
375372
<p>The ''px'' unit does not apply to ''speech'' devices so the following media query is always false:</p>
376373

377-
<pre>
378-
<span class="html-example">&lt;link rel="stylesheet" media="speech and (min-device-width: 800px)" href="example.css" /&gt;</span>
379-
</pre>
374+
<pre><span class="html-example">&lt;link rel="stylesheet" media="speech and (min-device-width: 800px)" href="example.css" /&gt;</span></pre>
380375

381376
<p>Note that the media queries in this example would have
382377
been true if the keyword ''not'' had been added to the beginning of
@@ -390,10 +385,8 @@ <h2 id="media0">Media Queries</h2>
390385
<div class="example">
391386
<p>These two media queries are equivalent:</p>
392387

393-
<pre>
394-
@media all and (orientation: portrait) { ... }
395-
@media (orientation: portrait) { ... }
396-
</pre>
388+
<pre>@media all and (orientation: portrait) { ... }
389+
@media (orientation: portrait) { ... }</pre>
397390
</div>
398391

399392
<p>To avoid circular dependencies, it is never necessary to apply the

0 commit comments

Comments
 (0)