[cssom] Introduce CSS.escape(). http://lists.w3.org/Archives/Public/public-whatwg-archive/2013Oct/0075.html

Thu, 10 Oct 2013 14:57:26 +0200

author
Simon Pieters <simonp@opera.com>
date
Thu, 10 Oct 2013 14:57:26 +0200
changeset 9368
09466af95185
parent 9367
9fdbb4a5fffe
child 9369
0484cb7926ab

[cssom] Introduce CSS.escape(). http://lists.w3.org/Archives/Public/public-whatwg-archive/2013Oct/0075.html

cssom/Overview.html file | annotate | diff | comparison | revisions
cssom/Overview.src.html file | annotate | diff | comparison | revisions
     1.1 --- a/cssom/Overview.html	Wed Oct 09 23:48:58 2013 -0700
     1.2 +++ b/cssom/Overview.html	Thu Oct 10 14:57:26 2013 +0200
     1.3 @@ -16,7 +16,7 @@
     1.4   <h1>CSS Object Model (CSSOM)</h1>
     1.5  
     1.6  
     1.7 - <h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 7 October 2013</h2>
     1.8 + <h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 10 October 2013</h2>
     1.9  
    1.10   <dl>
    1.11  
    1.12 @@ -90,7 +90,7 @@
    1.13  can be found in the
    1.14  <a href="http://www.w3.org/TR/">W3C technical reports index at http://www.w3.org/TR/.</a></em>
    1.15  
    1.16 -<p class="dontpublish">This is the 7 October 2013 Editor's Draft of CSSOM. Please send comments to
    1.17 +<p class="dontpublish">This is the 10 October 2013 Editor's Draft of CSSOM. Please send comments to
    1.18  <a href="mailto:www-style@w3.org?subject=%5Bcssom%5D%20">www-style@w3.org</a>
    1.19  (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
    1.20  with <samp>[cssom]</samp> at the start of the subject line.
    1.21 @@ -181,10 +181,13 @@
    1.22     <li><a href="#the-getstyleutils-interface"><span class="secno">7.3 </span>The <code title="">GetStyleUtils</code> Interface</a></li>
    1.23     <li><a href="#extensions-to-the-element-interface"><span class="secno">7.4 </span>Extensions to the <code title="">Element</code> Interface</a></li>
    1.24     <li><a href="#the-pseudoelement-interface"><span class="secno">7.5 </span>The <code title="">PseudoElement</code> Interface</a></ul></li>
    1.25 - <li><a href="#resolved-values"><span class="secno">8 </span>Resolved Values</a></li>
    1.26 - <li><a href="#iana-considerations"><span class="secno">9 </span>IANA Considerations</a>
    1.27 + <li><a href="#utility-apis"><span class="secno">8 </span>Utility APIs</a>
    1.28    <ul class="toc">
    1.29 -   <li><a href="#default-style"><span class="secno">9.1 </span><code title="">Default-Style</code></a></ul></li>
    1.30 +   <li><a href="#the-css.escape()-method"><span class="secno">8.1 </span>The <code title="">CSS.escape()</code> Method</a></ul></li>
    1.31 + <li><a href="#resolved-values"><span class="secno">9 </span>Resolved Values</a></li>
    1.32 + <li><a href="#iana-considerations"><span class="secno">10 </span>IANA Considerations</a>
    1.33 +  <ul class="toc">
    1.34 +   <li><a href="#default-style"><span class="secno">10.1 </span><code title="">Default-Style</code></a></ul></li>
    1.35   <li><a class="no-num" href="#references">References</a></li>
    1.36   <li><a class="no-num" href="#change-history">Change History</a>
    1.37    <ul class="toc">
    1.38 @@ -3113,7 +3116,32 @@
    1.39  <a href="#pseudoelement">PseudoElement</a> implements <a href="#getstyleutils">GetStyleUtils</a>;</pre>
    1.40  
    1.41  
    1.42 -<h2 id="resolved-values"><span class="secno">8 </span>Resolved Values</h2>
    1.43 +<h2 id="utility-apis"><span class="secno">8 </span>Utility APIs</h2>
    1.44 +
    1.45 +<h3 id="the-css.escape()-method"><span class="secno">8.1 </span>The <code title="">CSS.escape()</code> Method</h3>
    1.46 +
    1.47 +<p>The <code title="">CSS</code> interface is defined in CSS Conditional Rules Module. <a href="#refsCSSCONDITIONAL">[CSSCONDITIONAL]</a>
    1.48 +
    1.49 +<pre class="idl">partial interface CSS {
    1.50 +  static DOMString <a href="#dom-css-escape" title="dom-CSS-escape">escape</a>(DOMString ident);
    1.51 +};</pre>
    1.52 +
    1.53 +<p>The <dfn id="dom-css-escape" title="dom-CSS-escape"><code>escape(<var>ident</var>)</code></dfn> method must return the result of invoking <a href="#serialize-an-identifier">serialize an identifier</a> of
    1.54 +<var>ident</var>. Any exceptions thrown must be re-thrown.
    1.55 +
    1.56 +<div class="example">
    1.57 + <p>For example, to escape a string for use as part of a selector, the <code title="dom-CSS-escape"><a href="#dom-css-escape">escape()</a></code> method can be used:
    1.58 + <pre>var element = document.querySelector('#' + CSS.escape(id) + ' &gt; img');</pre>
    1.59 +</div>
    1.60 +
    1.61 +<div class="example">
    1.62 + <p>The <code title="dom-CSS-escape"><a href="#dom-css-escape">escape()</a></code> method can also be used for escaping strings, although it escapes characters that don't strictly need to be
    1.63 + escaped:
    1.64 + <pre>var element = document.querySelector('a[href="#' + CSS.escape(fragment) + '"]');</pre>
    1.65 +</div>
    1.66 +
    1.67 +
    1.68 +<h2 id="resolved-values"><span class="secno">9 </span>Resolved Values</h2>
    1.69  
    1.70  <p><code title="dom-Window-getComputedStyle"><a href="#dom-window-getcomputedstyle">getComputedStyle()</a></code> was
    1.71  historically defined to return the "computed value" of an element or
    1.72 @@ -3190,10 +3218,10 @@
    1.73  </dl>
    1.74  
    1.75  
    1.76 -<h2 id="iana-considerations"><span class="secno">9 </span>IANA Considerations</h2>
    1.77 -
    1.78 -
    1.79 -<h3 id="default-style"><span class="secno">9.1 </span><dfn title="http-default-style"><code title="">Default-Style</code></dfn></h3>
    1.80 +<h2 id="iana-considerations"><span class="secno">10 </span>IANA Considerations</h2>
    1.81 +
    1.82 +
    1.83 +<h3 id="default-style"><span class="secno">10.1 </span><dfn title="http-default-style"><code title="">Default-Style</code></dfn></h3>
    1.84  
    1.85  <p>This section describes a header field for registration in the Permanent
    1.86  Message Header Field Registry.
    1.87 @@ -3223,6 +3251,9 @@
    1.88  <dt id="refsCSSCASCADE">[CSSCASCADE]
    1.89  <dd><cite><a href="http://dev.w3.org/csswg/css-cascade/">CSS Cascading and Inheritance</a></cite>, HÃ¥kon Wium Lie, fantasai and Tab Atkins Jr..
    1.90  
    1.91 +<dt id="refsCSSCONDITIONAL">[CSSCONDITIONAL]
    1.92 +<dd><cite><a href="http://dev.w3.org/csswg/css-conditional/">CSS Conditional Rules Module</a></cite>, L. David Baron.
    1.93 +
    1.94  <dt id="refsCSSNAMESPACES">[CSSNAMESPACES]
    1.95  <dd><cite><a href="http://dev.w3.org/csswg/css-namespaces/">CSS Namespaces Module</a></cite>, Elika J. Etemad and Anne van Kesteren. W3C.
    1.96  
     2.1 --- a/cssom/Overview.src.html	Wed Oct 09 23:48:58 2013 -0700
     2.2 +++ b/cssom/Overview.src.html	Thu Oct 10 14:57:26 2013 +0200
     2.3 @@ -3033,6 +3033,31 @@
     2.4  <span>PseudoElement</span> implements <span>GetStyleUtils</span>;</pre>
     2.5  
     2.6  
     2.7 +<h2>Utility APIs</h2>
     2.8 +
     2.9 +<h3>The <code title>CSS.escape()</code> Method</h3>
    2.10 +
    2.11 +<p>The <code title>CSS</code> interface is defined in CSS Conditional Rules Module. <span data-anolis-ref>CSSCONDITIONAL</span>
    2.12 +
    2.13 +<pre class=idl>partial interface CSS {
    2.14 +  static DOMString <span title=dom-CSS-escape>escape</span>(DOMString ident);
    2.15 +};</pre>
    2.16 +
    2.17 +<p>The <dfn title=dom-CSS-escape><code>escape(<var>ident</var>)</code></dfn> method must return the result of invoking <span>serialize an identifier</span> of
    2.18 +<var>ident</var>. Any exceptions thrown must be re-thrown.
    2.19 +
    2.20 +<div class=example>
    2.21 + <p>For example, to escape a string for use as part of a selector, the <code title=dom-CSS-escape>escape()</code> method can be used:
    2.22 + <pre>var element = document.querySelector('#' + CSS.escape(id) + ' > img');</pre>
    2.23 +</div>
    2.24 +
    2.25 +<div class=example>
    2.26 + <p>The <code title=dom-CSS-escape>escape()</code> method can also be used for escaping strings, although it escapes characters that don't strictly need to be
    2.27 + escaped:
    2.28 + <pre>var element = document.querySelector('a[href="#' + CSS.escape(fragment) + '"]');</pre>
    2.29 +</div>
    2.30 +
    2.31 +
    2.32  <h2>Resolved Values</h2>
    2.33  
    2.34  <p><code title="dom-Window-getComputedStyle">getComputedStyle()</code> was

mercurial