mozilla

Revision 37434 of MediaQueryList

  • Revision slug: DOM/MediaQueryList
  • Revision title: MediaQueryList
  • Revision id: 37434
  • Created:
  • Creator: Caesarsgrunt
  • Is current revision? No
  • Comment IE10 supports MediaQueryList; 1 words added, 2 words removed

Revision Content

{{ draft() }}

A MediaQueryList object maintains a list of media queries on a {{ domxref("document") }}, and handles sending notifications to listeners when the media queries on the document change.

This makes it possible to observe a document to detect when its media queries change, instead of polling the values periodically, if you need to programmatically detect changes to the values of media queries on a document.

Method overview

void addListener(MediaQueryListListener listener);
void removeListener(MediaQueryListListener listener);

Properties

Property Type Description
matches boolean true if the {{ domxref("document") }} currently matches the media query list; otherwise false. Read only.
media DOMString The serialized media query list.

Methods

addListener()

Adds a new listener to the media query list. If the specified listener is already in the list, this method has no effect.

void addListener(
  MediaQueryListListener listener
); 
Parameters
listener
The {{ domxref("MediaQueryListListener") }} to invoke when the media query's evaluated result changes.

removeListener()

Removes a listener from the media query list. Does nothing if the specified listener isn't already in the list.

void removeListener(
  MediaQueryListListener listener
); 
Parameters
listener
The {{ domxref("MediaQueryListListener") }} to stop calling on changes to the media query's evaluated result.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatUnknown() }} {{ CompatGeckoDesktop("6.0") }} {{ 10 }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Specification

See also

Revision Source

<p>{{ draft() }}</p>
<p>A <code>MediaQueryList</code> object maintains a list of <a href="/En/CSS/Media_queries" title="En/CSS/Media queries">media queries</a> on a {{ domxref("document") }}, and handles sending notifications to listeners when the media queries on the document change.</p>
<p>This makes it possible to observe a document to detect when its media queries change, instead of polling the values periodically, if you need to programmatically detect changes to the values of media queries on a document.</p>
<h2 id="Method_overview" name="Method_overview">Method overview</h2>
<table class="standard-table"> <tbody> <tr> <td><code>void <a href="/en/DOM/MediaQueryList#addListener()" title="en/DOM/MediaQueryList#addListener()">addListener</a>(MediaQueryListListener listener);</code></td> </tr> <tr> <td><code>void <a href="/en/DOM/MediaQueryList#removeListener()" title="en/DOM/MediaQueryList#removeListener()">removeListener</a>(MediaQueryListListener listener);</code></td> </tr> </tbody>
</table>
<h2 id="Properties">Properties</h2>
<table class="standard-table"> <tbody> <tr> <td class="header">Property</td> <td class="header">Type</td> <td class="header">Description</td> </tr> <tr> <td><code>matches</code></td> <td><code>boolean</code></td> <td><code>true</code> if the {{ domxref("document") }} currently matches the media query list; otherwise <code>false</code>. <strong>Read only.</strong></td> </tr> <tr> <td><code>media</code></td> <td><code>DOMString</code></td> <td>The serialized media query list.</td> </tr> </tbody>
</table>
<h2 id="Methods">Methods</h2>
<h3 id="addListener()">addListener()</h3>
<p>Adds a new listener to the media query list. If the specified listener is already in the list, this method has no effect.</p>
<pre>void addListener(
  MediaQueryListListener listener
); 
</pre>
<h6 id="Parameters">Parameters</h6>
<dl> <dt><code>listener</code></dt> <dd>The {{ domxref("MediaQueryListListener") }} to invoke when the media query's evaluated result changes.</dd> <h3 id="removeListener()">removeListener()</h3> <p>Removes a listener from the media query list. Does nothing if the specified listener isn't already in the list.</p> <pre>void removeListener(
  MediaQueryListListener listener
); 
</pre>
</dl>
<h6 id="Parameters">Parameters</h6>
<dl> <dt><code>listener</code></dt> <dd>The {{ domxref("MediaQueryListListener") }} to stop calling on changes to the media query's evaluated result.</dd>
</dl>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoDesktop("6.0") }}</td> <td>{{ 10 }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h3 id="Specification" name="Specification">Specification</h3>
<ul> <li><a class="external" href="http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface" title="http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface">The CSSOM View Module: The MediaQueryList Interface</a></li>
</ul><h2 id="See_also">See also</h2>
<ul> <li><a href="/En/CSS/Media_queries" title="En/CSS/Media queries">Media queries</a></li> <li><a href="/en/CSS/Using_media_queries_from_code" title="en/CSS/Using media queries from code">Using media queries from code</a></li> <li>{{ domxref("window.matchMedia()") }}</li> <li>{{ domxref("MediaQueryListListener") }}</li>
</ul>
Revert to this revision