CSSConditionRule

  • Revision slug: DOM/CSSConditionRule
  • Revision title: CSSConditionRule
  • Revision id: 336707
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSOMRef() }}

An object implementing the CSSConditionRule DOM interface represents a single condition CSS at-rule, which consists fo a condition and a statement block.

Properties common to all CSSConditionRule instances

The CSSConditionRule derives from {{domxref("CSSRule")}} and inherits all properties of this class. It has one specific property:

conditionText
Represents the text of the condition of the rule.
cssText
Represents the textual representation of the rule, e.g. "h1,h2 { font-size: 16pt }"
parentRule{{readonly()}}
Returns the containing rule, otherwise null. E.g. if this rule is a style rule inside an @media block, the parent rule would be that CSSMediaRule.
parentStyleSheet{{readonly()}}
Returns the CSSStyleSheet object for the style sheet that contains this rule
type{{readonly()}}
Returns one of the type constants indicating the type of CSS rule.

Methods common to all CSSConditionRule instances

The CSSConditionRule derives from {{domxref("CSSRule")}} and inherits all methods of this class. It has no specific property of its own.

Specification

Browser compatibility

To get browser compatibility information about the different type constant value, please consult the compatibility table of the associated interface.

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} 9 {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
 
{{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}

See also

Revision Source

<p>{{ CSSOMRef() }}</p>
<p>An object implementing the <code>CSSConditionRule</code> DOM interface represents a single condition CSS at-rule, which consists fo a condition and a statement block.</p>
<h2 id="Properties_common_to_all_CSSConditionRule_instances">Properties common to all CSSConditionRule instances</h2>
<p>The <code>CSSConditionRule</code> derives from {{domxref("CSSRule")}} and inherits all properties of this class. It has one specific property:</p>
<dl>
  <dt>
    <code>conditionText</code></dt>
  <dd>
    Represents the text of the condition of the rule.</dd>
</dl>
<dl>
  <dt id="cssText">
    <code><a href="/en/DOM/CSSRule/cssText" title="en/DOM/cssRule.cssText">cssText</a></code></dt>
  <dd>
    Represents the textual representation of the rule, e.g. <code>"h1,h2 { font-size: 16pt }"</code></dd>
  <dt id="parentRule">
    <a href="/en/DOM/cssRule/parentRule" title="en/DOM/cssRule/parentRule"><code>parentRule</code>{{readonly()}}</a></dt>
  <dd>
    Returns the containing rule, otherwise <code>null</code>. E.g. if this rule is a style rule inside an <code><a href="/en/CSS/@media" title="en/CSS/@media">@media</a></code> block, the parent rule would be that <code><a href="/en/DOM/CSSMediaRule" title="en/DOM/CSSMediaRule">CSSMediaRule</a></code>.</dd>
  <dt id="parentStyleSheet">
    <code><a href="/en/DOM/CSSRule/parentStyleSheet" title="en/DOM/cssRule.parentStyleSheet">parentStyleSheet</a></code>{{readonly()}}</dt>
  <dd>
    Returns the <code><a href="/en/DOM/CSSStyleSheet" title="en/DOM/CSSStyleSheet">CSSStyleSheet</a></code> object for the style sheet that contains this rule</dd>
  <dt id="type">
    <a href="/en/DOM/cssRule/type" title="en/DOM/cssRule/type"><code>type</code></a>{{readonly()}}</dt>
  <dd>
    Returns one of the <a href="/en-US/docs/DOM/cssRule#type_constants" title="/en-US/docs/DOM/cssRule#type_constants">type constants</a> indicating the type of CSS&nbsp;rule.</dd>
</dl>
<h2 id="Methods_common_to_all_CSSConditionRule_instances">Methods common to all CSSConditionRule instances</h2>
<p>The <code>CSSConditionRule</code> derives from {{domxref("CSSRule")}} and inherits all methods of this class. It has no specific property of its own.</p>
<h2 id="Specification" name="Specification">Specification</h2>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>To get browser compatibility information about the different type constant value, please consult the compatibility table of the associated interface.</p>
<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 (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>9</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</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&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}<br />
          &nbsp;</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li><a href="/en/DOM/Using_dynamic_styling_information" title="en/DOM/Using_dynamic_styling_information">Using dynamic styling information</a></li>
</ul>
Revert to this revision