Skip to content

Commit 63b15a8

Browse files
annevkannevk
committed
serializing media queries
1 parent f4fb145 commit 63b15a8

2 files changed

Lines changed: 270 additions & 170 deletions

File tree

‎cssom/Overview.html‎

Lines changed: 142 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,14 @@
2929
<div class=head>
3030
<h1 id=cssom>Cascading Style Sheets Object Model (<abbr>CSSOM</abbr>)</h1>
3131

32-
<h2 class="no-num no-toc" id="">Editor's Draft 28 December 2007</h2>
32+
<h2 class="no-num no-toc" id="">Editor's Draft 30 December 2007</h2>
3333

3434
<dl>
3535
<dt>This version:
3636

3737
<dd><a
3838
href="http://dev.w3.org/csswg/cssom/">http://dev.w3.org/csswg/cssom/</a></dd>
39-
<!--<dd><a href="http://www.w3.org/TR/2007/ED-cssom-20071228/">http://www.w3.org/TR/2007/WD-cssom-20071228/</a></dd>-->
39+
<!--<dd><a href="http://www.w3.org/TR/2007/ED-cssom-20071230/">http://www.w3.org/TR/2007/WD-cssom-20071230/</a></dd>-->
4040

4141
<dt>Latest version:
4242

@@ -236,14 +236,6 @@ <h2 class="no-num no-toc" id=toc>Table of Contents</h2>
236236
</ul>
237237
</ul>
238238

239-
<li><a href="#canon"><span class=secno>5. </span>Canonicalization</a>
240-
<ul class=toc>
241-
<li><a href="#media0"><span class=secno>5.1. </span>Media queries</a>
242-
<ul class=toc>
243-
<li><a href="#examples1"><span class=secno>5.1.1. </span>Examples</a>
244-
</ul>
245-
</ul>
246-
247239
<li class=no-num><a href="#references">References</a>
248240

249241
<li class=no-num><a href="#acknowledgements">Acknowledgements</a>
@@ -491,9 +483,8 @@ <h4 id=the-stylesheetlist><span class=secno>3.1.2. </span>The <code
491483
title="">index</var>)</code></dfn> method, when invoked, <em
492484
class=ct>must</em> return the <code><a
493485
href="#stylesheet">StyleSheet</a></code> object in the list given by
494-
<var>index</var>. If <var>index</var> is less than zero or greater than or
495-
equal to the number of objects in the list then this method <em
496-
class=ct>must</em> raise an <code>INDEX_SIZE_ERR</code> exception.
486+
<var>index</var>, or <code>null</code>, if <var>index</var> is greater
487+
than or equal to the number of items in the list.
497488

498489
<h3 id=media><span class=secno>3.2. </span>Media Queries</h3>
499490

@@ -509,10 +500,112 @@ <h3 id=media><span class=secno>3.2. </span>Media Queries</h3>
509500
for parsing a list of media queries</dfn> ...
510501

511502
<p>The <dfn id=serializing-media-query title="serializing media
512-
query">rules for serializing a media query</dfn>
503+
query">rules for serializing a media query</dfn> are as follows:
504+
505+
<ol>
506+
<li>
507+
<p>Let <var>s</var> be the empty string.
508+
509+
<li>
510+
<p>If the media query is negated append the literal string
511+
"<code>not</code>", followed by a U+0020 character, to <var>s</var>.
512+
513+
<li>
514+
<p>If the media query does not contain media features append the
515+
canonical form of the media type (as specified in the syntax) to
516+
<var>s</var>, then return <var>s</var> and terminate this algorithm.
517+
518+
<li>
519+
<p>If the media type is not <code>all</code> append the canonical form of
520+
the media type, followed by a U+0020 character, followed by the literal
521+
string "<code>and</code>", followed by a U+0020 character, to
522+
<var>s</var>.
523+
524+
<li>
525+
<p>Remove all duplicate media features.
526+
527+
<li>
528+
<p>Convert each media feature name and media feature value to its
529+
canonical form (as specified in the syntax).
530+
531+
<li>
532+
<p>Sort the media features in lexicographical order.
533+
534+
<li>
535+
<p>Then, for each media feature:</p>
536+
537+
<ol>
538+
<li>Append a U+0028 (<code>(</code>) character, followed by the media
539+
feature name, to <var>s</var>.
540+
541+
<li>
542+
<p>If a value is given append a U+003A (<code>:</code>) character,
543+
followed by a U+0020 character, followed by the media feature value,
544+
to <var>s</var>.</p>
545+
546+
<li>
547+
<p>Append a U+0029 (<code>)</code>) character to <var>s</var>.
548+
549+
<li>
550+
<p>If this is not the last media feature append a U+0020 character,
551+
followed by the literal string "<code>and</code>", followed by a
552+
U+0020 character, to <var>s</var>.</p>
553+
</ol>
554+
555+
<li>
556+
<p>Return <var>s</var>.
557+
</ol>
558+
559+
<div class=example>
560+
<p>Here are some examples of input and output:</p>
561+
562+
<table>
563+
<thead>
564+
<tr>
565+
<th>Input
566+
567+
<th>Output
568+
569+
<tbody>
570+
<tr>
571+
<td><code>not screen and (min-WIDTH:5px) AND (max-width:40px )</code>
572+
573+
<td><code>not screen and (max-width: 40px) and (min-width: 5px)</code>
574+
575+
<tr>
576+
<td><code>all and (color) and (color)</code>
577+
578+
<td><code>(color)</code>
579+
</table>
580+
</div>
513581

514582
<p>The <dfn id=serializing-media-queries title="serializing media
515-
queries">rules for serializing a list of media queries</dfn>
583+
queries">rules for serializing a list of media queries</dfn> are as
584+
follows:
585+
586+
<ol>
587+
<li>
588+
<p>Let <var>s</var> be the empty string.
589+
590+
<li>
591+
<p>If the list is empty return <var>s</var> and terminate this algorithm.
592+
593+
<li>
594+
<p>For each media query in the list:</p>
595+
596+
<ol>
597+
<li>
598+
<p>Append the result of <span title=serializing-media-query>serializing
599+
the media query</span> to <var>s</var>.
600+
601+
<li>
602+
<p>If this is not the last media query append a U+002C (<code>,</code>)
603+
character, followed by a U+0020 character to <var>s</var>.
604+
</ol>
605+
606+
<li>
607+
<p>Return <var>s</var>.
608+
</ol>
516609

517610
<p>The <dfn id=compare-media-queries title="compare media queries">rules
518611
for comparing media queries</dfn> <var>m1</var> and <var>m2</var> are to
@@ -555,22 +648,22 @@ <h4 id=the-medialist><span class=secno>3.2.1. </span>The <code><a
555648
title=medialist-mediatext><code>mediaText</code></dfn> attribute, on
556649
getting, <em class=ct>must</em> return a <a
557650
href="#serializing-media-queries" title="serializing media
558-
queries">serialization of the media qeuries</a>. On setting, the media
559-
queries currently in the collection <em class=ct>must</em> be replaced
560-
with the result of <a href="#parsing-media-queries" title="parsing media
561-
queries">parsing a list of media queries</a>.
651+
queries">serialization of the media qeuries</a>. On setting, setting <em
652+
class=ct>must</em> be ignored if the return value of <a
653+
href="#parsing-media-queries" title="parsing media queries">parsing</a>
654+
the setted string is <i>null</i>. Otherwise the return values of parsing
655+
<em class=ct>must</em> be used as the new media queries.</p>
656+
<!-- XXX empty string -->
562657

563658
<p>The <dfn id=medialist-length
564659
title=medialist-length><code>length</code></dfn> attribute, on getting,
565660
<em class=ct>must</em> return the number of items in the collection.
566661

567662
<p>The <dfn id=medialist-item title=medialist-item><code>item(<var
568663
title="">index</var>)</code></dfn> method, when invoked, <em
569-
class=ct>must</em> return the item in the collection given by
570-
<var>index</var>. If <var>index</var> is less than zero or greater than or
571-
equal to the number of media queries currently in the collection then this
572-
method <em class=ct>must</em> raise an <code>INDEX_SIZE_ERR</code>
573-
exception.
664+
class=ct>must</em> return the item in the list given by <var>index</var>,
665+
or <code>null</code>, if <var>index</var> is greater than or equal to the
666+
number of items in the list.
574667

575668
<p>The <dfn id=medialist-appendmedium
576669
title=medialist-appendmedium><code>appendMedium(<var
@@ -586,8 +679,21 @@ <h4 id=the-medialist><span class=secno>3.2.1. </span>The <code><a
586679

587680
<h3 id=style1><span class=secno>3.3. </span>Style Sheet Types</h3>
588681

589-
<p>Lets see, we have persistent style sheets, alternative style sheet sets,
590-
preferred style sheet sets
682+
<p>A <dfn id=persistent-style-sheet>persistent style sheet</dfn> is a <a
683+
href="#style-sheet">style sheet</a> whose <a
684+
href="#style-sheet-title">style sheet title</a> is the empty string.
685+
686+
<p>A <dfn id=style-sheet-set>style sheet set</dfn> is a collection of one
687+
or more <a href="#style-sheet" title="style sheet">style sheets</a> which
688+
have an identical <a href="#style-sheet-title">style sheet title</a> that
689+
is not the empty string.
690+
691+
<p>An <dfn id=alternative-style-sheet-set>alternative style sheet set</dfn>
692+
is a <a href="#style-sheet-set">style sheet set</a> of which the <a
693+
href="#style-sheet-alternate-flag">style sheet alternate flag</a> is
694+
<i>true</i>.
695+
696+
<p class=issue><dfn id=preferred>preferred style sheet set</dfn>
591697

592698
<h3 id=accessing><span class=secno>3.4. </span>Accessing Style Sheets</h3>
593699

@@ -739,9 +845,9 @@ <h4 id=the-documentstyle><span class=secno>3.4.5. </span>The <code
739845
of type <code>DOMString</code>
740846

741847
<dd>
742-
<p>This attribute indicates which <span>style sheet set</span> is in use.
743-
This attribute is <span>live</span>; changing the <code
744-
title=stylesheet-disabled><a
848+
<p>This attribute indicates which <a href="#style-sheet-set">style sheet
849+
set</a> is in use. This attribute is <span>live</span>; changing the
850+
<code title=stylesheet-disabled><a
745851
href="#stylesheet-disabled">disabled</a></code> attribute on style
746852
sheets directly will change the value of this attribute.</p>
747853

@@ -1505,8 +1611,8 @@ <h3 id=the-cssrulelist><span class=secno>4.3. </span>The <code
15051611
title="">CSSRuleList</code> Interface</h3>
15061612

15071613
<p>The <code><a href="#cssrulelist">CSSRuleList</a></code> object
1508-
represents an ordered collection of CSS statements.</p>
1509-
<!-- starting at 0 -->
1614+
represents an ordered collection of CSS statements. Items in this
1615+
collection are accessible through an integral index, starting from zero.
15101616

15111617
<pre class=idl>interface <dfn id=cssrulelist>CSSRuleList</dfn> {
15121618
readonly attribute unsigned long <a href="#cssrulelist-length" title=cssrulelist-length>length</a>;
@@ -1519,13 +1625,11 @@ <h3 id=the-cssrulelist><span class=secno>4.3. </span>The <code
15191625
object.
15201626

15211627
<p>The <dfn id=cssrulelist-item title=cssrulelist-item><code>item(<var
1522-
title="">index</var>)</code></dfn> method, when invoked, if <var
1523-
title="">index</var> is equal or greater than the <code
1524-
title=cssrulelist-length><a href="#cssrulelist-length">length</a></code>
1525-
this method <em class=ct>must</em> return <code>null</code>. Otherwise,
1526-
this method <em class=ct>must</em> return the <code><a
1527-
href="#cssrule">CSSRule</a></code> in the list given by <var
1528-
title="">index</var>. <!-- XXX negative numbers -->
1628+
title="">index</var>)</code></dfn> method, when invoked, <em
1629+
class=ct>must</em> return the <code><a href="#cssrule">CSSRule</a></code>
1630+
object in the list given by <var>index</var>, or <code>null</code>, if
1631+
<var>index</var> is greater than or equal to the number of items in the
1632+
list.
15291633

15301634
<h3 id=interfaces><span class=secno>4.4. </span>Interfaces for CSS
15311635
Statements</h3>
@@ -2049,63 +2153,6 @@ <h4 id=the-css2properties><span class=secno>4.6.2. </span>The <code
20492153

20502154
<p class=issue>...
20512155

2052-
<h2 id=canon><span class=secno>5. </span>Canonicalization</h2>
2053-
2054-
<p class=issue>This section will be integrated with the Cascading Style
2055-
Sheets APIs section in due course.
2056-
2057-
<p>This section defines canonicalization of the various objects you
2058-
typically encounter in <span>CSS style sheets</span>.
2059-
2060-
<p>The definitions from this section are used later to define attribute
2061-
values, et cetera.
2062-
2063-
<h3 id=media0><span class=secno>5.1. </span>Media queries</h3>
2064-
2065-
<p>The <dfn id=canon-media title=canon-media>canonicalization of a media
2066-
query</dfn> can be determined as follows:
2067-
2068-
<ol>
2069-
<li>Convert each part of the media query to the case specified in the
2070-
syntax. For example, <code>MaX-width</code> becomes
2071-
<code>max-width</code>.
2072-
2073-
<li>Replace one or more consecutive <a href="#whitespace">whitespace</a>
2074-
characters with a U+0020 SPACE.
2075-
2076-
<li>Remove leading and trailing <a href="#whitespace">whitespace</a>.
2077-
2078-
<li>Remove <a href="#whitespace">whitespace</a> between the media feature
2079-
and the U+003A COLON.
2080-
2081-
<li>Remove <a href="#whitespace">whitespace</a> between the media feature
2082-
and the U+0028 LEFT PARENTHESIS.
2083-
2084-
<li>Remove <a href="#whitespace">whitespace</a> between the media feature
2085-
value and the U+0029 RIGHT PARENTHESIS.
2086-
2087-
<li>Make sure there's exactly one U+0020 SPACE after the U+003A COLON
2088-
which is then followed by its value.
2089-
2090-
<li>Sort the media features alphabetically ([a-z]).
2091-
</ol>
2092-
2093-
<p class=issue>Did I miss anything?
2094-
2095-
<p class=issue>duplicate features?
2096-
2097-
<h4 id=examples1><span class=secno>5.1.1. </span>Examples</h4>
2098-
2099-
<div class=example>
2100-
<p>The canonical form of the following query:</p>
2101-
2102-
<pre>not screen and (min-width:5px) and (max-width:40px ) </pre>
2103-
2104-
<p>would be:</p>
2105-
2106-
<pre>not screen and (max-width: 40px) and (min-width: 5px)</pre>
2107-
</div>
2108-
21092156
<h2 class=no-num id=references>References</h2>
21102157

21112158
<p class=issue>This section will be done when going to Last Call. Before

0 commit comments

Comments
 (0)