:-moz-window-inactive

  • Revision slug: CSS/:-moz-window-inactive
  • Revision title: :-moz-window-inactive
  • Revision id: 109222
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment clean up, add example; 115 words added, 6 words removed

Revision Content

{{ CSSRef() }}{{ gecko_minversion_header("2") }}

Summary

The :-moz-window-inactive pseudo-class matches any element while it's in an inactive window.

Note: Prior to the addition of this attribute, giving different styles to background windows was achieved by setting an attribute (active="true") on the top level XUL chrome window. This attribute is no longer used.

:-moz-window-inactive works in content HTML documents, too.

Example

This example alters the appearance of a box's background depending on whether its window is active or not.

  <style type="text/css">
    #mybox {
      background: -moz-linear-gradient(top, blue, cyan);
    }
    #mybox:-moz-window-inactive {
      background: cyan;
    }
  </style>

  <div id="mybox" style="width:200px; height:200px;">
    <p>This is a box!</p>
  </div>

You can view this as a live sample here.

This was implemented in bug 508482.

Revision Source

<p>{{ CSSRef() }}{{ gecko_minversion_header("2") }}</p>
<h3 id="Summary">Summary</h3>
<p>The <code>:-moz-window-inactive</code> pseudo-class matches any element while it's in an inactive window.</p>
<div class="note"><strong>Note:</strong> Prior to the addition of this attribute, giving different styles to background windows was achieved by setting an attribute (active="true") on the top level XUL chrome window. This attribute is no longer used.</div>
<p><code>:-moz-window-inactive</code> works in content HTML documents, too.</p>
<h3 id="Example">Example</h3>
<p>This example alters the appearance of a box's background depending on whether its window is active or not.</p>
<pre class="brush: html">  &lt;style type="text/css"&gt;
    #mybox {
      background: -moz-linear-gradient(top, blue, cyan);
    }
    #mybox:-moz-window-inactive {
      background: cyan;
    }
  &lt;/style&gt;

  &lt;div id="mybox" style="width:200px; height:200px;"&gt;
    &lt;p&gt;This is a box!&lt;/p&gt;
  &lt;/div&gt;
</pre>
<p>You can view this as a <a href="/samples/cssref/moz-window-inactive.html" title="https://developer.mozilla.org/samples/cssref/moz-window-inactive.html">live sample here</a>.</p>
<p>This was implemented in <a class=" link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=508482">bug 508482</a>.</p>
Revert to this revision