| <!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> <integer><br> |
| <span class=label>Applies to:</span> visual media types<br> |
| <span class=label>Accepts min/max prefixes:</span> no<br> |
| </div> |
| |
| <p> |
| The ‘<code>transform-2d</code>’ 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> |
| <link rel="stylesheet" media="screen and (transform-2d)" /></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> <integer><br> |
| <span class=label>Applies to:</span> visual media types<br> |
| <span class=label>Accepts min/max prefixes:</span> no<br> |
| </div> |
| |
| <p> |
| The ‘<code>transform-3d</code>’ 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 ‘<code>transform-3d</code>’ |
| evaluates to true, ‘<code>transform-2d</code>’ must also evaluate |
| to true. |
| </p> |
| |
| <div class=example> |
| <pre> |
| <link rel="stylesheet" media="screen and (transform-3d)" /></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> <integer><br> |
| <span class=label>Applies to:</span> visual media types<br> |
| <span class=label>Accepts min/max prefixes:</span> no<br> |
| </div> |
| |
| <p> |
| The ‘<code>transition</code>’ 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> |
| <link rel="stylesheet" media="screen and (transition)" /></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> <integer><br> |
| <span class=label>Applies to:</span> visual media types<br> |
| <span class=label>Accepts min/max prefixes:</span> no<br> |
| </div> |
| |
| <p> |
| The ‘<code>animation</code>’ 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> |
| <link rel="stylesheet" media="screen and (animation)" /></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> |
