<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>
      Extensions to CSS3 Media Queries
    </title>
    <link href="CSSVisualEffects/base.css" rel="stylesheet" type="text/css">
    <style type="text/css">

    @media print {

    /* the following doesn't work for now,
    instead we rely on a patched version of html2ps which has this built-in */
    .dlink { display: none }

    /* the following doesn't work for now,
    instead we rely on a patched version of html2ps which has this built-in */
    div.navbar {
    display: none;
    }

    html { margin: 0 !important }
    body { font-family: serif }
    th, td { font-family: inherit }
    a { color: inherit !important }
    div.example:before { font-family: serif !important }
    pre.example:before { font-family: serif !important }
    a:link, a:visited { text-decoration: none !important }
    a:link:after, a:visited:after { /* create a cross-ref "see..." */ }
    }
    @page {
    margin: 1.5cm 1.1cm;
    }

    /* html body { margin-left: 8.5em } /* Overrides 70px in base.css */

    body {counter-reset: exampleno figure}

    h2, h3, h5, h6 { margin-top: 2em }
    h1, h2, h3, h4, h5, h6 { page-break-after: avoid; font-family: inherit }
    div.figure, div.sidefigure, pre, table.propdef, table.propdef-extra,
    div.example { page-break-inside: avoid }
    dt { page-break-after: avoid }

    span.id {float: right; font-weight: bold}

    /* p, p.note + p, p.testlink + p, p.note, p.issue { */
    p, p.testlink + p, p.issue, p.mtb {
    /* text-indent: 2em; */
    margin-bottom: 0.6em;
    margin-top: 0.6em
    }
    p + p, p + div.sidefigure + p {
    /* text-indent: 2em; */
    margin-top: 0
    }
    dd p {
    margin-top: 0
    }

    h1 + h2 {
    margin-top: 0;
    }

    pre {
    text-align: left; /* fixes justification in Mac IE 5 */
    text-indent: 0;   /* fixes indent in Mac Netscape 6 */
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 90% /*smaller*/;
    }
    /*
    var {
    font-style: normal;
    }
    */
    img {
    border-style: none;
    color: white;
    }
    .toc {
    text-indent: 0;
    }


    @media all { /* NS < 6 doesn't like borders around inline elements... */

    body {
    line-height: 1.3;
    }

    a:link, a:visited {
    /*        color: inherit;*/
    }
    a.logo:link, a.logo:visited {
    padding: 0;
    border-style: none;
    }

    /* Hmm, this seems to confuse many browsers... */
    dt { margin-left: 0; margin-top: 1em; color: #030; font-weight: bold;}
    dd { margin-left: 2em }
    dl, ul, ol { margin-left: 1em; padding-left: 0 }
    li { margin-left: 2em; padding-left: 0 }

    }
    ul.indexlist { margin-left: 0; /*column-width: 13em; columns: 13em*/ }
    ul.indexlist li { margin-left: 0; list-style: none }
    ul.indexlist li li { margin-left: 1em }

    div.example:before {
    content: "Example";
    content: "Example " counter(exampleno, upper-roman);
    font: bold small sans-serif;
    /*float: left;*/
    position: absolute;
    top: -0.6em;
    left: -2.5em;
    width: 7.5em;
    text-align: center;
    line-height: 1em;
    color: #FFF8DD;
    background: #600;
    padding: 0.1em;
    border: thin solid #999;
    /*margin: -1.3em 0 0.3em -2.5em;*/
    }
    div.example {
    counter-increment: exampleno;
    }
    pre.example:before {
    content: "Example";
    content: "Example " counter(exampleno, upper-roman);
    font: bold small sans-serif;
    /*float: left;*/
    position: absolute;
    top: -0.6em;
    left: -2.5em;
    width: 7.5em;
    text-align: center;
    line-height: 1em;
    color: #FFF8DD;
    background: #600;
    padding: 0.1em;
    border: thin solid #999;
    /*margin: -1.3em 0 0.3em -2.5em;*/
    }
    pre.example {
    counter-increment: exampleno;
    }
    div.example, div.illegal-example, div.html, div.illegal-html, div.xml,
    div.illegal-xml, pre.example, pre.illegal-example, pre.html,
    pre.illegal-html, pre.xml, pre.illegal-xml {
    background: #FFF8DD;
    padding: 0.5em;
    margin: 1em 0;
    border: thin solid #999;
    position: relative;
    }
    pre.example, pre.illegal-example, pre.html,
    pre.illegal-html, pre.xml, pre.illegal-xml {
    padding-top: 1.5em;
    }
    div.example { color: #600 }
    pre.example { color: #600 }
    pre.illegal-example { color: red }
    div.illegal-example { color: red }
    div.illegal-example p { color: black }

    div.html { color: #600 }
    pre.html { color: #600 }
    pre.illegal-html { color: red }
    div.illegal-html { color: red }
    div.illegal-html p { color: black }
    pre.deprecated-html { color: red }
    div.deprecated-html { color: red }
    div.deprecated-html p { color: black }

    div.xml { color: #600 }
    pre.xml { color: #600 }
    pre.illegal-xml { color: red }
    div.illegal-xml { color: red }
    div.illegal-xml p { color: black }

    code { font-size: 90% }
    .css { color: #800 }    /* inline CSS code (SPAN/CODE) */
    code.css { font-family: inherit; font-size: 100% }
    code.html { color: #600 } /* inline HTML */
    code.xml { color: #600 }  /* inline XML */
    .property { }     /* name of a CSS property (SPAN) */
    .prop-name { color: #2A2AA5; font-weight: bold; font-size: 90%} /* name of a CSS property (SPAN) */
    .prop-value { font-weight: bold; font-size: 90%} /* CSS property value (SPAN) */
    .descriptor { }     /* name of a CSS descriptor (SPAN) */
    .issue { color: #c00 }    /* editorial remark, open issue */
    .type { font-style: italic }  /* A <type> value for a property */

    dfn { font-weight: bolder; /*font-size: 1em*/ }

    /* Class note is a non-normative note. May be inline or a P or DIV */
    .note {
      /* font-weight: bold; */
      background-color: #cfc;
      margin-top: 2em;
      padding: 1em;
      border: 1px solid #6a6;
      border-left: 8px solid #6a6;
    }
    p.note, div.note {
    /* margin: 1em 2em; */
    }
    p.note:before, span.note:before { content: "\25B6" " " }
    div.note > p:first-child:before { content: "\25B6" " " }

    .normref { color: red } 
    .informref { color: green } 


    /* ToC not indented, but font style shows hierarchy */
    ul.toc {margin: 1em 0; padding: 0; font-weight: bold}
    ul.toc ul {margin: 0; padding: 0; font-weight: normal}
    ul.toc ul ul {margin: 0 /*0 0 2em*/; font-style: italic}
    ul.toc ul ul ul {margin: 0}
    ul.toc li {margin: 0.6em 0; padding: 0}
    ul.toc li li {margin: 0}
    /*
    ul.toc li li li, ul.toc li li li ul {margin-left: 0; display: inline}
    ul.toc li li li ul, ul.toc li li li ul li {margin-left: 0; display: inline}
    */

    @media all { /* NS4 doesn't align the floats properly :-( */

    /* Section numbers in a column of their own */
    ul.toc span.secno {margin-right: 1em} /* workaround for Opera6 */
    ul.toc span.secno {float: left; width: 4em; margin-left: -5em}
    /*ul.toc span.secno {text-align: right}*/
    ul.toc li {clear: both}
    ul.toc {margin-left: 5em}
    /* If we had 'tab', floats would not be needed here:
    ul.toc span.secno {tab: 5em right; margin-right: 1em}
    ul.toc li {text-indent: 5em hanging}
    The second line in case items wrap
    */
    }

    ul.index {
    list-style: disc;   /* Mac NS has problem with 'none' */
    list-style: none;
    }

    s, del {text-decoration: line-through; color: red}
    u, ins {text-decoration: underline; background: #bfa}

    div.figure, div.sidefigure {
    text-align: center;
    margin: 2.5em 0;
    }
    div.sidefigure {
    float: right;
    width: 50%;
    margin: 0 0 0.5em 0.5em
    }
    div.figure img, div.sidefigure img {
    display: block;
    margin: auto;
    max-width: 100%
    }
    p.caption, caption {
    text-align: center;
    font-style: italic;
    font-size: 90%;
    margin: 1.5em 2em;
    text-indent: 0;
    }
    p.caption:before {
    content: "Figure " counter(figure) ". ";
    font-weight: bold;
    }
    p.caption {
    counter-increment: figure;
    }

    /* DL list is indented, but figure inside it is not */
    dd { margin-left: 2em }
    dd div.figure { margin-left: -2em }

    sup {
    vertical-align: super;
    font-size: 80%
    }

    /* "Equations" (not real MathML, but simple HTML) are put in a
    blockquote and may have an equation number. We make sure the
    blockquote has enough margin on the right and then put the equation
    number there. */

    blockquote {
    margin: 0.5em 4em 0.5em 2em;
    text-indent: 0;
    }
    .eqno {
    text-align: right;
    float: right;
    width: 3em;
    margin: 0 -4em 0 0;
    font-weight: bold;
    /* background: silver; color: black; padding: 0.1em */
    }

    table.equiv-table { border-spacing: 0; margin: 0.5em 0 }
    table.equiv-table th, table.equiv-table td { padding: 0.3em }
    table.equiv-table th { text-align: left }
    /* table.equiv-table th:first-child { text-align: right } */
    table.equiv-table td, table.equiv-table th { border-bottom: thin solid #666 }
    table.equiv-table { border-bottom: hidden }
    table.equiv-table { empty-cells: show }
    table.equiv-table caption { margin: 0.5em 0 0 0 }

    /* Style for table of properties */
    table.proptable {
    font-size: small;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: left;
    margin: 1em 0;
    }

    @media print {      /* Use the wide margin in print */
    table.proptable {margin: 1em 0 1em -8.5em}
    }

    table.proptable td, table.proptable th {
    padding: 0.4em;
    border-style: solid none none dotted;
    border-width: thin;
    border-color: red;
    }
    table.proptable th:first-child, table.proptable td:first-child {
    border-left-style: none;
    }


    /* Style for table that defines a property or a descriptor */
    table.propdef, table.propdef-extra, table.descdef {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    background: #DEF;
    margin-top: 1.2em;
    margin-bottom: 1.2em
    }
    table.propdef td, table.propdef-extra td, table.descdef td {
    padding: 0 0.3em;
    vertical-align: baseline;
    }
    /*
    table.propdef dfn, table.propdef-extra dfn, table.descdef dfn {
    font-weight: bold;
    font-style: normal
    }
    */
    table.propdef td:first-child,
    table.propdef-extra td:first-child,
    table.descdef td:first-child {
    font-style: italic;
    width: 8.1em
    }
    table.propdef td[colspan]:first-child,
    table.propdef-extra td[colspan]:first-child,
    table.descdef td[colspan]:first-child {
    font-style: inherit
    }
    table.propdef tr:first-child,
    table.propdef-extra tr:first-child,
    table.descdef tr:first-child {
    background: #005A9C;
    color: white
    }
    /* table.propdef tr:first-child td { padding-top: 0.1em; padding-bottom: 0.1em } */

    /* This would replace :first-child for Opera, but it confuses WinIE :-( */
    /*
    table.propdef td { width: 8em }
    table.propdef td + td { width: auto }
    table.propdef tr { background: #005A9C; color: white }
    table.propdef tr + tr { background: transparent; color: black }
    */

    /* CSS modules typically don't use MUST, SHOULD etc. from RFC 2119,
    or, if they do, they don't put them in uppercase. But the following
    class is provided in case a spec wants to use RFC 2119 terms in
    uppercase in the source. */

    em.rfc2119 {
    text-transform: lowercase;
    font-variant: small-caps;
    font-style: normal
    }

    /* In Profile specs, a table of required features: */

    table.features th {
    background: #00589f;
    color: #fff;
    text-align: left;
    padding: 0.2em 0.2em 0.2em 0.5em;
    }
    table.features td {
    vertical-align: top;
    border-bottom: 1px solid #ccc;
    padding: 0.3em 0.3em 0.3em 0.7em;
    }

    body { line-height: 1.4; }

    .issue, .todo {
    //display: none;
    margin: 1em;
    border: 2px solid;
    padding: 1em;
    }
    span.issue, span.todo {
    border-width: 1px;
    margin: 0; padding: 0;
    }
    .issue { border-color: red; }
    .todo  { border-color: yellow; }
    .issue:before, .todo:before {
    content: attr(class) ": ";
    text-transform: uppercase;
    font-weight: bold;
    }
    .issue { background: rgb(255,224,224); color: black; }
    .todo { background: rgb(255,255,192); color: black; }

    .syntax {
    padding: 1em;
    margin: 1em 0;
    border: 1px black solid;
    background: rgb(224,224,255);
    color: black;
    }
    .idl-code { 
    margin: 0;
    font-family: monospace;
    border: 1px solid black;
    color: black; 
    background-color: #dfdfdf;
    }

    table {
      border-collapse: collapse;
    }

    th {
      background-color: #dfdfdf;
    }
    
    td, th {
      text-align: left;
      padding: 0.2em 1em;
      border: 1px solid black;
    }
    
    </style>
  </head>
  <body>
    <h1>
      Extensions to CSS 3 Media Queries
    </h1>
    <h2>
      19 December 2008
    </h2>
    <dl>
      <dt>
        Authors:
      </dt>
      <dd>
        Dean Jackson (<a href="mailto:dino@apple.com">dino@apple.com</a>), <a href="http://www.apple.com/">Apple</a>
      </dd>
    </dl>
    <hr>

    <!-- ======================================================================================================= -->

    <div class="note">
      NOTE: This document is a work-in-progress proposal. It should not be
      considered complete, nor does it represent the position of Apple or
      the WebKit project.
    </div>

    <h2>
      1 Introduction
    </h2>

    <p>
      This document introduces extensions to the <a
      href="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 Media Queries</a>
      specification. It allows for media queries that can test for CSS Transformations, 
      Animations and Transitions, and a new DOM interface for evaluating media
      queries from script.
    </p>

    <!-- ======================================================================================================= -->

    <h2>
      2 The <code>transform-2d</code> media feature
    </h2>
    
    <div class=media-feature>
      <span class=label>Value:</span> &lt;integer&gt;<br>
      <span class=label>Applies to:</span> visual media types<br>
      <span class=label>Accepts min/max prefixes:</span> no<br>
    </div>

    <p>
      The &lsquo;<code>transform-2d</code>&rsquo; media feature describes the
      availability of <a
      href="http://www.webkit.org/specs/CSSVisualEffects/CSSTransforms.html">
      CSS Transforms</a> for two-dimensions. This includes the <span
      class="prop-name">transform</span> property, the transformation
      functions <code>matrix</code>, <code>translate</code>,
      <code>translateX</code>, <code>translateY</code>, <code>scale</code>,
      <code>scaleX</code>, <code>scaleY</code>, <code>rotate</code>,
      <code>skew</code>, <code>skewX</code> and <code>skewY</code>, and the
      <span class="prop-name">transform-origin</span> property with X and Y
      values.
    </p>

    <p>
      The User Agent will return a value of 1 if the feature is supported,
      and a value of 0 otherwise.
    </p>

    <div class=example>
      <pre>
&lt;link rel="stylesheet" media="screen and (transform-2d)" /&gt;</span>
      </pre>

       <p>
         In the example above, the style sheet will apply only to screens that
         support two-dimensional transforms.
      </p>
    </div>

    <h2>
      3 The <code>transform-3d</code> media feature
    </h2>

    <div class=media-feature>
      <span class=label>Value:</span> &lt;integer&gt;<br>
      <span class=label>Applies to:</span> visual media types<br>
      <span class=label>Accepts min/max prefixes:</span> no<br>
    </div>

    <p>
      The &lsquo;<code>transform-3d</code>&rsquo; media feature describes the
      availability of <a
      href="http://www.webkit.org/specs/CSSVisualEffects/CSSTransforms3D.html">
      CSS Transforms</a> for three-dimensions. This includes the <span
      class="prop-name">transform</span> property, all transformation
      functions, the <span class="prop-name">transform-origin</span> property
      with X, Y and Z values, the <span
      class="prop-name">transform-style</span> property, the <span
      class="prop-name">transform-perspective</span> property, the <span
      class="prop-name">transform-perspective-origin</span> property and the
      <span class="prop-name">transform-backface-visibility</span> property.
    </p>

    <p>
      The User Agent will return a value of 1 if the feature is supported,
      and a value of 0 otherwise. Since 3D transformations are a 
      superset of 2D transformations, if &lsquo;<code>transform-3d</code>&rsquo;
      evaluates to true, &lsquo;<code>transform-2d</code>&rsquo; must also evaluate
      to true.
    </p>

    <div class=example>
      <pre>
&lt;link rel="stylesheet" media="screen and (transform-3d)" /&gt;</span>
      </pre>

       <p>
         In the example above, the style sheet will apply only to screens that
         support three-dimensional transforms.
      </p>
    </div>

    <h2>
      4 The <code>transition</code> media feature
    </h2>

    <div class=media-feature>
      <span class=label>Value:</span> &lt;integer&gt;<br>
      <span class=label>Applies to:</span> visual media types<br>
      <span class=label>Accepts min/max prefixes:</span> no<br>
    </div>

    <p>
      The &lsquo;<code>transition</code>&rsquo; media feature describes the
      availability of <a
      href="http://www.webkit.org/specs/CSSVisualEffects/CSSTransitions.html">
      CSS Transitions</a>. This includes the
      <span class="prop-name">transition-property</span> property,
      the <span class="prop-name">transition-duration</span> property,
      the <span class="prop-name">transition-timing-function</span> property,
      and the <span class="prop-name">transition-delay</span> property.
    </p>

    <p>
      The User Agent will return a value of 1 if the feature is supported,
      and a value of 0 otherwise.
    </p>

    <div class=example>
      <pre>
&lt;link rel="stylesheet" media="screen and (transition)" /&gt;</span>
      </pre>

       <p>
         In the example above, the style sheet will apply only to screens that
         support CSS Transitions.
      </p>
    </div>

    <h2>
      5 The <code>animation</code> media feature
    </h2>

    <div class=media-feature>
      <span class=label>Value:</span> &lt;integer&gt;<br>
      <span class=label>Applies to:</span> visual media types<br>
      <span class=label>Accepts min/max prefixes:</span> no<br>
    </div>

    <p>
      The &lsquo;<code>animation</code>&rsquo; media feature describes the
      availability of <a
      href="http://www.webkit.org/specs/CSSVisualEffects/CSSAnimations.html">
      CSS Animations</a>. This includes the
      <span class="prop-name">animation-name</span> property,
      the <span class="prop-name">animation-duration</span> property,
      the <span class="prop-name">animation-timing-function</span> property,
      the <span class="prop-name">animation-delay</span> property,
      the <span class="prop-name">animation-iteration-count</span> property,
      the <span class="prop-name">animation-play-state</span> property,
      the <span class="prop-name">animation-direction</span> property
      and the <code>@keyframes</code> at-rule.
    </p>

    <p>
      The User Agent will return a value of 1 if the feature is supported,
      and a value of 0 otherwise.
    </p>

    <div class=example>
      <pre>
&lt;link rel="stylesheet" media="screen and (animation)" /&gt;</span>
      </pre>

       <p>
         In the example above, the style sheet will apply only to screens that
         support CSS Animations.
      </p>
    </div>

    <h2>
      6 DOM Interface
    </h2>

      <dl>
        <dt>
          <b>Interface <i><a id = "DOM-Window" name='DOM-Window'>Window</a></i></b>
        </dt>
        <dd>
          <p>
            The following function is added to the <code>Window</code> interface.
          </p>
          <dl>

            <dt>
              <b>IDL Definition</b>
            </dt>
            <dd>
              <div class='idl-code'>
                <pre>
  interface Window {
    ...
    boolean evaluateMediaQuery(in DOMString query);
    ...
  };</pre>
              </div>
            </dd> <!-- IDL -->

            <dt>
              <b>Methods</b>
            </dt>
            <dd>
              <dl>
                <!-- ============================================================ -->
                <dt>
                  <code class='method-name'><a id="DOM-Window-evaluateMediaQuery" name='DOM-Window-evaluateMediaQuery'>evaluateMediaQuery</a></code>
                </dt>
                <dd>
                  <div class='method'>
                    The <code>evaluateMediaQuery</code> method evaluates the query parameter as a 
                    media query and returns the result.
                    <div class='parameters'>
                      <b>Parameters</b>
                      <div class='paramtable'>
                        <dl>
                          <dt>
                            <code class='parameter-name'>query</code> of type <code>DOMString</code>
                          </dt>
                          <dd>
                            The CSS 3 Media Query to evaluate.<br>
                          </dd>
                        </dl>
                      </div>
                    </div><!-- parameters -->
                    <div class='return-value'>
                      <b>Return Value</b>
                    </div>
                     <div class='returnvalue'>
                        <dl>
                          <dt>
                            <code>boolean</code>
                          </dt>
                          <dd>
                            True if the query evaluates on the current media, false otherwise.<br>
                          </dd>
                        </dl>
                      </div>
                    </div>
                    <div>
                      <b>No Exceptions</b>
                    </div>
                  </div>
                </dd>
              </dl>
            </dd> <!-- Methods -->
          </dl>
        </dd> <!-- Interface Window -->
      </dl>
    

  </body>
</html>