diff options
Diffstat (limited to 'files/ca/web/css/_colon_scope/index.html')
| -rw-r--r-- | files/ca/web/css/_colon_scope/index.html | 146 |
1 files changed, 146 insertions, 0 deletions
diff --git a/files/ca/web/css/_colon_scope/index.html b/files/ca/web/css/_colon_scope/index.html new file mode 100644 index 0000000000..3985aa7d08 --- /dev/null +++ b/files/ca/web/css/_colon_scope/index.html @@ -0,0 +1,146 @@ +--- +title: ':scope' +slug: 'Web/CSS/:scope' +tags: + - CSS + - Experimental + - Layout + - Pseudo-class + - Reference + - Scoped Elements + - Web +translation_of: 'Web/CSS/:scope' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> de <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:scope</code></strong> representa aquells elements que són un punt de referència per tal que els selectors coincideixin.</p> + +<pre class="brush: css">/* <span class="short_text" id="result_box" lang="ca"><span class="alt-edited">Selecciona un element d'àmbit </span></span>*/ +:scope { + background-color: lime; +}</pre> + +<p>Actualment, quan s'utilitza en un full d'estils, <code>:scope</code> és el mateix que {{cssxref(":root")}}, ja que, en aquest moment, no hi ha una manera d'establir explícitament un element amb àmbit. Quan s'utilitza des d'una API DOM com {{domxref("Element.querySelector", "querySelector()")}}, {{domxref("Element.querySelectorAll", "querySelectorAll()")}}, {{domxref("Element.matches", "matches()")}} o {{domxref("Element.closest()")}}, <code>:scope</code> coincideix amb l'element que es va cridar el mètode.</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox language-html">{{csssyntax}}</pre> + +<h2 id="Exemple">Exemple</h2> + +<p>En aquest exemple senzill, demostrem que l'ús de la pseudo-class <code>:scope</code> del mètode {{domxref("Element.matches()")}} coincideix amb l'element del qual és cridat.</p> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">let paragraph = document.getElementById("para"); +let output = document.getElementById("output"); + +if (paragraph.matches(":scope")) { + output.innerText = "Yep, the element is its own scope as expected!"; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p id="para"> + This is a paragraph. It is not an interesting paragraph. Sorry about that. +</p> +<p id="output"></p></pre> + +<h3 id="Resultat">Resultat</h3> + +<div>{{ EmbedLiveSample('Example') }}</div> + +<h2 id="Especificacions">Especificacions</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificació</th> + <th scope="col">Estat</th> + <th scope="col">Comentari</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#the-scope-pseudo', ':scope') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Navegadors compatibles</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatGeckoDesktop(20) }}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>15</td> + <td>7.0</td> + </tr> + <tr> + <td>En <code>querySelector()</code> i <code>querySelectorAll()</code></td> + <td>{{ CompatChrome(27) }}</td> + <td>{{CompatGeckoDesktop(32)}}<sup>[1][2]</sup></td> + <td>{{CompatNo}}</td> + <td>15</td> + <td>7.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatGeckoMobile(20) }}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>7.0</td> + </tr> + <tr> + <td>En <code>querySelector()</code> i <code>querySelectorAll()</code></td> + <td>{{ CompatChrome(27) }}</td> + <td>{{CompatGeckoMobile(32)}}<sup>[1][2]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>7.0</td> + </tr> + </tbody> +</table> +</div> + +<p>[2] Firefox 20 implementa la pseudo-class <code>:scope</code>, la funció està desactivada per defecte. Per habilitar la funció, estableix la preferència <code>layout.css.scope-pseudo.enabled</code> a <code>true</code>. A partir de Firefox 32, aquest indicador està per defecte a <code>true</code> en les versions de llançament de Firefox ({{bug(528456)}}).</p> + +<p>[3] Gecko 55 (Firefox 55) elimina el suport per a <code><style scoped></code> però <em>no</em> per a la pseudo-class <code>:scope</code>, que encara és compatible. <code><style scoped></code> va fer possible configurar explícitament els àmbits de l'element, però les discussions en curs sobre el disseny d'aquesta característica, així com la manca d'altres implementacions, van donar com a resultat la decisió d'eliminar-lo.</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>La <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> {{cssxref(":root")}}</li> +</ul> |