mozilla

Revision 296922 of CSSSupportsRule

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

Revision Content

{{ CSSOMRef() }}

{{ SeeCompatTable() }}

The CSSSupportsRule interface describes an object representing a single CSS {{ cssxref("@supports") }} at-rule. It implements the {{ domxref("CSSRule") }} interface, with a type value of 12 (CSSRule.SUPPORTS_RULE).

Syntax

The syntax is described using the WebIDL format.

interface CSSSupportsRule : CSSRule {
    attribute DOMString conditionText;
    readonly attribute CSSRuleList cssRules;
    unsigned long insertRule (DOMString rule, unsigned long index);
    void deleteRule (unsigned long index);
}

Properties

As a {{ domxref("CSSRule") }}, CSSSupportsRule also implements the properties of that interface. It has some specific properties:

conditionText
Sets, or returns, a {{ domxref("DOMString") }} containing the text of the support condition used.
cssRules
Returns a {{ domxref("CSSRuleList") }} with all the rules contained in the associated {{ cssxref("@supports") }} at-rule.

Methods

As a {{ domxref("CSSRule") }}, CSSNamespaceRule also implements the methods of that interface. It has some specific methods:

insertRule
Inserts a new rule, given as a {{ domxref("DOMString") }} at the given position in cssRules. Returns the index of the inserted rule.
deleteRule
Removes the rule at the given index from cssRules.

Specification

Specification Status Comment
{{ SpecName('CSS3 Conditional', '#the-csssupportsrule-interface', 'CSSSupportsRule') }} {{ Spec2('CSS3 Conditional') }} Initial definition.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatNo() }} {{ CompatGeckoDesktop("17") }} [*] {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatNo() }} {{ CompatGeckoMobile("17") }} [*] {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

[*] As prefixing this at-rule has no sense, the CSSSupportsRule is only supported if the user enables it by setting the config value layout.css.supports-rule.enable to true.

See also

  • {{ domxref("CSSRule") }}
  • {{ cssxref("@supports") }}

Revision Source

<p>{{ CSSOMRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<p>The <code>CSSSupportsRule</code> interface describes an object representing a single CSS {{ cssxref("@supports") }} <a href="/en-US/docs/CSS/At-rule" title="/en-US/docs/CSS/At-rule">at-rule</a>. It implements the {{ domxref("CSSRule") }} interface, with a type value of <code>12</code> (<code>CSSRule.SUPPORTS_RULE</code>).</p>
<h2 id="Properties" name="Properties">Syntax</h2>
<p>The syntax is described using the <a href="http://dev.w3.org/2006/webapi/WebIDL/" title="http://dev.w3.org/2006/webapi/WebIDL/">WebIDL</a> format.</p>
<pre>
interface CSSSupportsRule : CSSRule {
    attribute DOMString conditionText;
    readonly attribute CSSRuleList cssRules;
    unsigned long insertRule (DOMString rule, unsigned long index);
    void deleteRule (unsigned long index);
}
</pre>
<h2 id="Properties" name="Properties">Properties</h2>
<p>As a {{ domxref("CSSRule") }}, <code>CSSSupportsRule</code> also implements the properties of that interface. It has some specific properties:</p>
<dl>
  <dt id="cssRules">
    <code>conditionText</code></dt>
  <dd>
    Sets, or returns, a {{ domxref("DOMString") }} containing the text of the support condition used.</dd>
  <dt>
    <code>cssRules</code></dt>
  <dd>
    Returns a {{ domxref("CSSRuleList") }} with all the rules contained in the associated {{ cssxref("@supports") }} at-rule.</dd>
</dl>
<h2 id="Methods" name="Methods">Methods</h2>
<p>As a {{ domxref("CSSRule") }}, <code>CSSNamespaceRule</code> also implements the methods of that interface. It has some specific methods:</p>
<dl>
  <dt id="cssRules">
    <code>insertRule</code></dt>
  <dd>
    Inserts a new rule, given as a {{ domxref("DOMString") }} at the given position in <code>cssRules</code>. Returns the index of the inserted rule.</dd>
  <dt>
    <code>deleteRule</code></dt>
  <dd>
    Removes the rule at the given index from <code>cssRules</code>.</dd>
</dl>
<dl>
</dl>
<h2 id="Specification" name="Specification">Specification</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Conditional', '#the-csssupportsrule-interface', 'CSSSupportsRule') }}</td>
      <td>{{ Spec2('CSS3 Conditional') }}</td>
      <td>Initial definition.</td>
    </tr>
  </tbody>
</table>
<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 (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("17") }} [*]</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</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>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoMobile("17") }} [*]</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>[*] As prefixing this at-rule has no sense, the <code>CSSSupportsRule</code> is only supported if the user enables it by setting the config value <code>layout.css.supports-rule.enable</code> to true.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ domxref("CSSRule") }}</li>
  <li>{{ cssxref("@supports") }}</li>
</ul>
Revert to this revision