Skip to content

Commit 5631d74

Browse files
committed
[mediaqueries] markup tweak
1 parent 21c4e84 commit 5631d74

2 files changed

Lines changed: 636 additions & 499 deletions

File tree

mediaqueries/Overview.bs

Lines changed: 150 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,16 @@ Units</h3>
125125
defined by the user agent or the user's preferences,
126126
not any styling on the page.
127127

128+
<!--
129+
██ ██ ███████
130+
███ ███ ██ ██
131+
████ ████ ██ ██
132+
██ ███ ██ ██ ██
133+
██ ██ ██ ██ ██
134+
██ ██ ██ ██
135+
██ ██ █████ ██
136+
-->
137+
128138

129139
<h2 id="media">
130140
Media Queries</h2>
@@ -304,6 +314,16 @@ Hiding a Media Query From Legacy User Agents: the ''only'' keyword</h4>
304314
such legacy user agents are extremely rare,
305315
and so using the ''only'' modifier is rarely, if ever, necessary.
306316

317+
<!--
318+
████████ ██ ██ ████████ ████████ ██████
319+
██ ██ ██ ██ ██ ██ ██ ██
320+
██ ████ ██ ██ ██ ██
321+
██ ██ ████████ ██████ ██████
322+
██ ██ ██ ██ ██
323+
██ ██ ██ ██ ██ ██
324+
██ ██ ██ ████████ ██████
325+
-->
326+
307327
<h3 id='media-types'>
308328
Media Types</h3>
309329

@@ -362,6 +382,15 @@ Media Types</h3>
362382
Note: It is expected that all of the media types will also be deprecated in time,
363383
as appropriate <a>media features</a> are defined which capture their important differences.
364384

385+
<!--
386+
████████ ████████ ███ ████████ ██ ██ ████████ ████████ ██████
387+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
388+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
389+
██████ ██████ ██ ██ ██ ██ ██ ████████ ██████ ██████
390+
██ ██ █████████ ██ ██ ██ ██ ██ ██ ██
391+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
392+
██ ████████ ██ ██ ██ ███████ ██ ██ ████████ ██████
393+
-->
365394

366395
<h3 id='mq-features'>
367396
Media Features</h3>
@@ -466,6 +495,16 @@ Media Feature Types: “range” and “discrete”</h4>
466495
If it's less or greater than ''600px'', it'll be false.
467496
</div>
468497

498+
<!--
499+
████████ ███████ ███████ ██ ████████ ███ ██ ██
500+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██
501+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██
502+
████████ ██ ██ ██ ██ ██ ██████ ██ ██ ██ ██ ██
503+
██ ██ ██ ██ ██ ██ ██ ██ █████████ ██ ████
504+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███
505+
████████ ███████ ███████ ████████ ████████ ██ ██ ██ ██
506+
-->
507+
469508
<h4 id='mq-boolean-context'>
470509
Evaluating Media Features in a Boolean Context</h4>
471510

@@ -515,6 +554,15 @@ Evaluating Media Features in a Boolean Context</h4>
515554
as there's no value that means “false”.
516555
</div>
517556

557+
<!--
558+
████████ ███ ██ ██ ██████ ████████
559+
██ ██ ██ ██ ███ ██ ██ ██ ██
560+
██ ██ ██ ██ ████ ██ ██ ██
561+
████████ ██ ██ ██ ██ ██ ██ ████ ██████
562+
██ ██ █████████ ██ ████ ██ ██ ██
563+
██ ██ ██ ██ ██ ███ ██ ██ ██
564+
██ ██ ██ ██ ██ ██ ██████ ████████
565+
-->
518566

519567
<h4 id="mq-range-context">
520568
Evaluating Media Features in a Range Context</h4>
@@ -580,6 +628,16 @@ Evaluating Media Features in a Range Context</h4>
580628
(but not equal to either).
581629
</div>
582630

631+
<!--
632+
██ ██ ████ ██ ██ ██ ██ ██ ███ ██ ██
633+
███ ███ ██ ███ ██ ██ ███ ███ ██ ██ ██ ██
634+
████ ████ ██ ████ ██ ██ ████ ████ ██ ██ ██ ██
635+
██ ███ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██ ███
636+
██ ██ ██ ██ ████ ██ ██ ██ █████████ ██ ██
637+
██ ██ ██ ██ ███ ██ ██ ██ ██ ██ ██ ██
638+
██ ██ ████ ██ ██ ██ ██ ██ ██ ██ ██ ██
639+
-->
640+
583641
<h4 id='mq-min-max'>
584642
Using “min-” and “max-” Prefixes On Range Features</h4>
585643

@@ -613,6 +671,15 @@ Using “min-” and “max-” Prefixes On Range Features</h4>
613671
as it accepts the values ''0'' and ''1''.)
614672
</div>
615673

674+
<!--
675+
██████ ██ ██ ██ ██ ████████ ███ ██ ██
676+
██ ██ ██ ██ ███ ██ ██ ██ ██ ██ ██
677+
██ ████ ████ ██ ██ ██ ██ ██ ██
678+
██████ ██ ██ ██ ██ ██ ██ ██ ███
679+
██ ██ ██ ████ ██ █████████ ██ ██
680+
██ ██ ██ ██ ███ ██ ██ ██ ██ ██
681+
██████ ██ ██ ██ ██ ██ ██ ██ ██
682+
-->
616683

617684
<h2 id='mq-syntax'>
618685
Syntax</h2>
@@ -812,6 +879,15 @@ Error Handling</h3>
812879
with an invalid selector and contents.
813880
</div>
814881

882+
<!--
883+
████████ ████ ██ ██ ████████ ██ ██ ██████ ████ ███████ ██ ██ ██████
884+
██ ██ ██ ███ ███ ██ ███ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██
885+
██ ██ ██ ████ ████ ██ ████ ██ ██ ██ ██ ██ ████ ██ ██
886+
██ ██ ██ ██ ███ ██ ██████ ██ ██ ██ ██████ ██ ██ ██ ██ ██ ██ ██████
887+
██ ██ ██ ██ ██ ██ ██ ████ ██ ██ ██ ██ ██ ████ ██
888+
██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██ ██ ██ ██ ███ ██ ██
889+
████████ ████ ██ ██ ████████ ██ ██ ██████ ████ ███████ ██ ██ ██████
890+
-->
815891

816892
<h2 id="mf-dimensions">
817893
Screen/Device Dimensions Media Features</h2>
@@ -1002,6 +1078,15 @@ device-aspect-ratio</h3>
10021078
</pre>
10031079
</div>
10041080

1081+
<!--
1082+
████████ ████ ██████ ████████ ███████ ██ ██ ███ ██ ████ ████████ ██ ██
1083+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
1084+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████
1085+
██ ██ ██ ██████ ████████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
1086+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ █████████ ██ ██ ██ ██
1087+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
1088+
████████ ████ ██████ ██ █████ ██ ███████ ██ ██ ████████ ████ ██ ██
1089+
-->
10051090

10061091
<h2 id='mf-display-quality'>
10071092
Display Quality Media Features</h2>
@@ -1245,7 +1330,15 @@ overflow-inline</h3>
12451330
so there is intentionally no ''paged'' value for '@media/overflow-inline'.
12461331

12471332

1248-
1333+
<!--
1334+
██████ ███████ ██ ███████ ████████
1335+
██ ██ ██ ██ ██ ██ ██ ██ ██
1336+
██ ██ ██ ██ ██ ██ ██ ██
1337+
██ ██ ██ ██ ██ ██ ████████
1338+
██ ██ ██ ██ ██ ██ ██ ██
1339+
██ ██ ██ ██ ██ ██ ██ ██ ██
1340+
██████ ███████ ████████ ███████ ██ ██
1341+
-->
12491342

12501343
<h2 id='mf-colors'>
12511344
Color Media Features</h2>
@@ -1371,6 +1464,16 @@ monochrome</h3>
13711464
</pre>
13721465
</div>
13731466

1467+
<!--
1468+
████ ██ ██ ████████ ████████ ████████ ███ ██████ ████████ ████ ███████ ██ ██
1469+
██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██
1470+
██ ████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██
1471+
██ ██ ██ ██ ██ ██████ ████████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
1472+
██ ██ ████ ██ ██ ██ ██ █████████ ██ ██ ██ ██ ██ ██ ████
1473+
██ ██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███
1474+
████ ██ ██ ██ ████████ ██ ██ ██ ██ ██████ ██ ████ ███████ ██ ██
1475+
-->
1476+
13741477
<h2 id='mf-interaction'>
13751478
Interaction Media Features</h2>
13761479

@@ -1549,6 +1652,15 @@ any-pointer and any-hover</h3>
15491652
More than one of their values can match,
15501653
if different input devices have different characteristics.
15511654

1655+
<!--
1656+
████████ ██ ██ ██ ██
1657+
██ ███ ██ ██ ██
1658+
██ ████ ██ ██ ██
1659+
██████ ██ ██ ██ ██ ██
1660+
██ ██ ████ ██ ██
1661+
██ ██ ███ ██ ██
1662+
████████ ██ ██ ███
1663+
-->
15521664

15531665
<h2 id='mf-environment'>
15541666
Environment Media Features</h2>
@@ -1637,7 +1749,15 @@ light-level</h3>
16371749
</pre>
16381750
</div>
16391751

1640-
1752+
<!--
1753+
██████ ██████ ████████ ████ ████████ ████████ ████ ██ ██ ██████
1754+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██
1755+
██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██ ██
1756+
██████ ██ ████████ ██ ████████ ██ ██ ██ ██ ██ ██ ████
1757+
██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██ ██
1758+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██
1759+
██████ ██████ ██ ██ ████ ██ ██ ████ ██ ██ ██████
1760+
-->
16411761

16421762
<h2 id='mf-scripting'>
16431763
Scripting Media Features</h2>
@@ -1690,6 +1810,16 @@ scripting</h3>
16901810
<p class='issue'>
16911811
Is there a use-case for distinguishing between "UA doesn't support scripting" and "scripting is supported, but turned off"?
16921812

1813+
<!--
1814+
████ ██████ ██████ ██ ██ ████████ ██████
1815+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
1816+
██ ██ ██ ██ ██ ██ ██
1817+
██ ██████ ██████ ██ ██ ██████ ██████
1818+
██ ██ ██ ██ ██ ██ ██
1819+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
1820+
████ ██████ ██████ ███████ ████████ ██████
1821+
-->
1822+
16931823
<h2 id='assorted-issues'>
16941824
Assorted Issues</h2>
16951825

@@ -1736,7 +1866,15 @@ Assorted Issues</h2>
17361866
</div>
17371867

17381868

1739-
1869+
<!--
1870+
██████ ██ ██ ██████ ████████ ███████ ██ ██ ██ ██ ███████
1871+
██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ███ ███ ███ ██ ██
1872+
██ ██ ██ ██ ██ ██ ██ ████ ████ ████ ████ ██ ██
1873+
██ ██ ██ ██████ ██ ██ ██ ██ ███ ██ ██ ███ ██ ██ ██
1874+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
1875+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
1876+
██████ ███████ ██████ ██ ███████ ██ ██ ██ ██ █████ ██
1877+
-->
17401878

17411879
<h2 id='custom-mq'>
17421880
Custom Media Queries</h2>
@@ -1807,6 +1945,15 @@ Script-based Custom Media Queries</h3>
18071945
</pre>
18081946
</div>
18091947

1948+
<!--
1949+
██████ ██████ ██████ ███████ ██ ██
1950+
██ ██ ██ ██ ██ ██ ██ ██ ███ ███
1951+
██ ██ ██ ██ ██ ████ ████
1952+
██ ██████ ██████ ██ ██ ██ ███ ██
1953+
██ ██ ██ ██ ██ ██ ██
1954+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
1955+
██████ ██████ ██████ ███████ ██ ██
1956+
-->
18101957

18111958
<h3 id='custom-mq-cssom'>
18121959
CSSOM</h3>

0 commit comments

Comments
 (0)