diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
| commit | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (patch) | |
| tree | d4a40e13ceeb9f85479605110a76e7a4d5f3b56b /files/ca/web/css | |
| parent | 33058f2b292b3a581333bdfb21b8f671898c5060 (diff) | |
| download | translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.gz translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.bz2 translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.zip | |
initial commit
Diffstat (limited to 'files/ca/web/css')
108 files changed, 16732 insertions, 0 deletions
diff --git a/files/ca/web/css/_colon_active/index.html b/files/ca/web/css/_colon_active/index.html new file mode 100644 index 0000000000..ee066e1a03 --- /dev/null +++ b/files/ca/web/css/_colon_active/index.html @@ -0,0 +1,166 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - CSS + - CSS Pseudo-class + - Layout + - Reference + - Web +translation_of: 'Web/CSS/:active' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> CSS <code>:active</code> representa un element (com un botó) que està sent activat per l'usuari. Quan s'usa un ratolí, l'"activació" normalment comença quan l'usuari pressiona el botó primari del ratolí i acaba quan es deixa anar. La pseudo-classe <code>:active</code> s'usa comunament en elements {{HTMLElement("a")}} i {{HTMLElement("button")}}, però també pot usar-se en altres elements.</p> + +<pre class="brush: css no-line-numbers">/* Selects any <a> that is being activated */ +a:active { + color: red; +}</pre> + +<p>Els estils definits per la pseudo-class <code>:active</code> seran anul·lats per qualsevol pseudo-class subsegüent relacionada amb l'enllaç ({{cssxref(":link")}}, {{cssxref(":hover")}} o {{cssxref(":visited")}}) que tingui almenys la mateixa especificitat. Per donar un estil apropiat als enllaços, poseu la regla <code>:active</code> després de totes les altres regles relacionades amb els enllaços, tal com ho defineix l'ordre <em>LVHA-order</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> + +<div class="note"><strong>Nota:</strong> En sistemes amb ratolins de múltiples botons, CSS 3 especifica que la pseudo-class <code>:active</code> només s'ha d'aplicar al botó primari; en ratolins destres, normalment és el botó més a l'esquerra.</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Exemple</h2> + +<div id="example"> +<h3 id="HTML">HTML</h3> + +<pre class="brush: html;"><a href="#">This link will turn lime while you click on it.</a> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css;">a:link { color: blue; } /* Unvisited links */ +a:visited { color: purple; } /* Visited links */ +a:hover { <span class="st">background: yellow</span>; } /* User hovers */ +a:active { color: lime; } /* Active links */</pre> +</div> + +<h3 id="Resultat">Resultat</h3> + +<div>{{EmbedLiveSample('Example')}}</div> + +<h2 id="Especificacions"><span>Especificacions</span></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('HTML WHATWG', 'scripting.html#selector-active', ':active')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Sense canvis.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Sense canvis.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Sense canvis.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4.0</td> + <td>5.0</td> + <td>1.0</td> + </tr> + <tr> + <td><span class="short_text" id="result_box" lang="ca"><span>Suport en elements no</span></span> <code><a></code></td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>8.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + <tr> + <td><span class="short_text" id="result_box" lang="ca"><span>Suport en elements no</span></span> <code><a></code></td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} [1]</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Per defecte, Safari Mobile no utilitza l'estat {{cssxref(":active")}} a menys que hi hagi un controlador d'esdeveniments <a href="/en-US/docs/Web/Reference/Events/touchstart"><code>touchstart</code></a> en l'element rellevant o en el {{HTMLElement("body")}}.</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>Enllaços relacionats amb pseudo-classes: {{cssxref(":link")}}, {{cssxref(":visited")}} i {{cssxref(":hover")}}.</li> +</ul> diff --git a/files/ca/web/css/_colon_any-link/index.html b/files/ca/web/css/_colon_any-link/index.html new file mode 100644 index 0000000000..30d729e862 --- /dev/null +++ b/files/ca/web/css/_colon_any-link/index.html @@ -0,0 +1,78 @@ +--- +title: ':any-link' +slug: 'Web/CSS/:any-link' +tags: + - CSS + - Experimental + - Layout + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:any-link' +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe CSS</a> <strong><code>:any-link</code></strong> representa un element que actua com a àncora font d'un hiperenllaç, independentment de si s'ha visitat. En altres paraules, coincideix amb cada element {{HTMLElement("a")}}, {{HTMLElement("area")}} o {{HTMLElement("link")}} que té un atribut <code>href</code>. D'aquesta manera, es correspont amb tots els elements que coincideixen amb {{cssxref(":link")}} o {{cssxref(":visited")}}.</p> + +<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="selector token"><span class="pseudo-class token">/* </span></span></code> Selecciona qualsevol element que coincideixi amb <code class="language-css"><span class="selector token"><span class="pseudo-class token">:link o :visited */ +:-any-link</span> </span><span class="punctuation token">{</span> + <span class="property token">color</span><span class="punctuation token">:</span> green<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><a href="https://example.com">External link</a><br> +<a href="#">Internal target link</a><br> +<a>Placeholder link (won't get styled)</a></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">a:any-link { + border: 1px solid blue; + color: orange; +} + +/* WebKit browsers */ +a:-webkit-any-link { + border: 1px solid blue; + color: orange; +} +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Example')}}</p> + +<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-any-link-pseudo", ":any-link")}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Definició inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p class="hidden">La taula de compatibilitat d'aquesta pàgina es genera a partir de dades estructurades. Si voleu contribuir a les dades, consulteu <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i envieu-nos una sol·licitud d'extracció.</p> + +<p>{{Compat("css.selectors.any-link")}}</p> diff --git a/files/ca/web/css/_colon_any/index.html b/files/ca/web/css/_colon_any/index.html new file mode 100644 index 0000000000..fa4bcea79c --- /dev/null +++ b/files/ca/web/css/_colon_any/index.html @@ -0,0 +1,197 @@ +--- +title: ':any' +slug: 'Web/CSS/:any' +tags: + - CSS + - Experimental + - Pseudo-class + - Reference +translation_of: 'Web/CSS/:is' +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La <a href="/en-US/docs/CSS/Pseudo-classes" title="CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:any()</code></strong> permet crear un selector que contingui múltiples opcions, algun dels quals seran aparellats. Aquesta és una alternativa més senzilla que repetir un selector sencer diverses vegades perquè un element dins d'ell varia.</p> + +<pre class="brush: css no-line-numbers">/* Select any h2 inside a section, article, aside, or nav */ +/* Currently supported with -moz- and -webkit- prefixes */ +:-moz-any(section, article, aside, nav) h2 { + font-size: 4.5rem; +} + +:-webkit-any(section, article, aside, nav) h2 { + font-size: 4.5rem; +} +</pre> + +<div class="note"><strong>Nota : </strong>Aquesta pseudo-classe està en curs de ser estandarditzada en <em><a href="http://dev.w3.org/csswg/selectors4/#matches">CSS Selectors Level 4</a></em> sota el nom <code>:matches()</code>. És probable que la sintaxi i el nom de <em><code>:-vendor-any()</code></em> seran canviats perquè es reflecteixi en un futur proper.</div> + +<h2 id="Syntax" name="Syntax">Sintaxi</h2> + +<h3 id="Examples" name="Examples">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h3 id="Values" name="Values">Valors</h3> + +<dl> + <dt><code>selector</code></dt> + <dd>Un selector. Això pot ser un selector simple o un selector múltiple compost de <a href="http://www.w3.org/TR/css3-selectors/#simple-selectors">selectors simples CSS 3</a> i pot incloure el combinador descendent.</dd> +</dl> + +<div class="note"><strong>Nota:</strong> Els selectors <strong>no</strong> poden contenir pseudo-elements i l'únic combinador permès és el combinador descendent.</div> + +<h2 id="Examples" name="Examples">Exemples</h2> + +<p><span class="short_text" id="result_box" lang="ca"><span>Per</span> <span>exemple</span><span>, el següent</span> <span>CSS</span></span>:</p> + +<pre class="brush: css">/* 3 deep (or more) unordered lists use a square */ +ol ol ul, ol ul ul, ol menu ul, ol dir ul, +ol ol menu, ol ul menu, ol menu menu, ol dir menu, +ol ol dir, ol ul dir, ol menu dir, ol dir dir, +ul ol ul, ul ul ul, ul menu ul, ul dir ul, +ul ol menu, ul ul menu, ul menu menu, ul dir menu, +ul ol dir, ul ul dir, ul menu dir, ul dir dir, +menu ol ul, menu ul ul, menu menu ul, menu dir ul, +menu ol menu, menu ul menu, menu menu menu, menu dir menu, +menu ol dir, menu ul dir, menu menu dir, menu dir dir, +dir ol ul, dir ul ul, dir menu ul, dir dir ul, +dir ol menu, dir ul menu, dir menu menu, dir dir menu, +dir ol dir, dir ul dir, dir menu dir, dir dir dir { + list-style-type: square; +} +</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>Pot</span> <span>substituir-se per</span></span>:</p> + +<pre class="brush: css">/* 3 deep (or more) unordered lists use a square */ +:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul, +:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu, +:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir { + list-style-type: square; +}</pre> + +<p>No obstant això, no utilitzeu el següent: (Veure <a href="#Issues_with_performance_and_specificity">la secció sobre el rendiment </a>més endavant.)</p> + +<pre class="brush: css">:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) { + list-style-type: square; +}</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Aquesta propietat és particularment útil quan es tracta de<a href="https://developer.mozilla.org/en-US/docs/Sections_and_Outlines_of_an_HTML5_document"> seccions i encapçalaments</a> en HTML5. Des {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}} es poden niar, sense <code>:any()</code> , l'estil d'aquests perquè coincideixin entre si pot ser difícil.</p> + +<p>Per exemple, sense <code>:any()</code>, donar estil a tot els elements {{HTMLElement("h1")}} a diferents profunditats podria ser molt complicat:</p> + +<pre class="brush: css">/* Level 0 */ +h1 { + font-size: 30px; +} +/* Level 1 */ +section h1, article h1, aside h1, nav h1 { + font-size: 25px; +} +/* Level 2 */ +section section h1, section article h1, section aside h1, section nav h1, +article section h1, article article h1, article aside h1, article nav h1, +aside section h1, aside article h1, aside aside h1, aside nav h1, +nav section h1, nav article h1, nav aside h1, nav nav h1, { + font-size: 20px; +} +/* Level 3 */ +/* ... don't even think about it*/ +</pre> + +<p>Usant <code>:-any()</code>, és molt més fàcil:</p> + +<pre class="brush: css">/* Level 0 */ +h1 { + font-size: 30px; +} +/* Level 1 */ +:-moz-any(section, article, aside, nav) h1 { + font-size: 25px; +} +/* Level 2 */ +:-moz-any(section, article, aside, nav) +:-moz-any(section, article, aside, nav) h1 { + font-size: 20px; +} +/* Level 3 */ +:-moz-any(section, article, aside, nav) +:-moz-any(section, article, aside, nav) +:-moz-any(section, article, aside, nav) h1 { + font-size: 15px; +}</pre> + +<h3 id="Issues_with_performance_and_specificity" name="Issues_with_performance_and_specificity"><span class="short_text" id="result_box" lang="ca"><span>Problemes</span> <span>amb</span> <span>el rendiment</span> <span>i</span> <span>l'especificitat</span></span></h3> + +<p><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=561154" title="https://bugzilla.mozilla.org/show_bug.cgi?id=561154">Bug 561154</a> registra un problema amb Gecko en el qual l'especificitat de: <code>:-moz-any()</code> és incorrecta. La implementació actual (com Firefox 12) posa: <code>:-moz-any()</code> en la categoria de regles universals, la qual cosa significa que usar-ho com el selector dret serà més lent que usar un ID, una classe o una etiqueta com el selector dret.</p> + +<p>Per exemple:</p> + +<pre class="brush: css">.a > :-moz-any(.b, .c) +</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>és</span> <span>més</span> <span>lent que</span><span>:</span></span></p> + +<pre class="brush: css">.a > .b, .a > .c +</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>i</span> <span>el següent és</span> més <span>ràpid</span><span>:</span></span></p> + +<pre class="brush: css">:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c +</pre> + +<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>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}</td> + <td>12.0 (534.30){{property_prefix("-webkit")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>5<br> + {{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>5<br> + {{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ca/web/css/_colon_checked/index.html b/files/ca/web/css/_colon_checked/index.html new file mode 100644 index 0000000000..1f0915eefc --- /dev/null +++ b/files/ca/web/css/_colon_checked/index.html @@ -0,0 +1,252 @@ +--- +title: ':checked' +slug: 'Web/CSS/:checked' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:checked' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <strong><code>:checked</code></strong> representa qualsevol <strong>radio </strong>(<code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>), <strong>checkbox </strong>(<code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>) o <strong>option</strong> ({{HTMLElement("option")}} en un element {{HTMLElement("select")}}) que està marcat o commutat a un estat on (activat).</p> + +<pre class="brush: css no-line-numbers">/* Matches any checked/selected radio, checkbox, or option */ +:checked { + margin-left: 25px; + border: 1px solid blue; +} +</pre> + +<p>L'usuari pot activar aquest estat marcant/seleccionant un element o desactivar-ho desmarcant/deseleccionant l'element.</p> + +<div class="note"> +<p><strong>Nota:</strong> Com que els navegadors sovint tracten <code><option></code>s com a <a href="/en-US/docs/Web/CSS/Replaced_element">elements reemplaçats</a>, el grau en què poden ser dissenyats amb la pseudo-class <code>:checked</code> varia d'un navegador a un altre.</p> +</div> + +<h2 id="Syntax" name="Syntax">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Exemples</h2> + +<h3 id="Basic_example">Basic example</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div> + <input type="radio" name="my-input" id="yes"> + <label for="yes">Yes</label> + + <input type="radio" name="my-input" id="no"> + <label for="yes">No</label> +</div> + +<div> + <input type="checkbox" name="my-checkbox" id="opt-in"> + <label for="opt-in">Check me!</label> +</div> + +<select name="my-select" id="fruit"> + <option value="opt1">Apples</option> + <option value="opt2">Grapes</option> + <option value="opt3">Pears</option> +</select> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">div, +select { + margin: 8px; +} + +/* Labels for checked inputs */ +input:checked + label { + color: red; +} + +/* Radio element, when checked */ +input[type="radio"]:checked { + box-shadow: 0 0 0 3px orange; +} + +/* Checkbox element, when checked */ +input[type="checkbox"]:checked { + box-shadow: 0 0 0 3px hotpink; +} + +/* Option elements, when selected */ +option:checked { + box-shadow: 0 0 0 3px lime; + color: red; +} +</pre> + +<h4 id="Resultat">Resultat</h4> + +<p>{{EmbedLiveSample("Basic_example")}}</p> + +<h3 id="Alternar_elements_amb_una_casella_de_selecció_oculta">Alternar elements amb una casella de selecció oculta</h3> + +<p>En aquest exemple s'utilitza la pseudo-class <code>:checked</code> per permetre a l'usuari que alterni el contingut en funció de l'estat d'una casella de selecció (checkbox), tot sense utilitzar <a href="/en-US/docs/Web/JavaScript">JavaScript</a>.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><input type="checkbox" id="expand-toggle" /> + +<table> + <thead> + <tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr> + </thead> + <tbody> + <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> + <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> + <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> + <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> + <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> + </tbody> +</table> + +<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">/* Oculta la casella de selecció (checkbox) */ +#expand-toggle { + display: none; +} + +/* Oculta el contingut expandible per defecte */ +.expandable { + visibility: collapse; + background: #ddd; +} + +/* Estil del botó */ +#expand-btn { + display: inline-block; + margin-top: 12px; + padding: 5px 11px; + background-color: #ff7; + border: 1px solid; + border-radius: 3px; +} + +/* <span id="result_box" lang="ca"><span>Mostra el contingut ocult quan es marca la casella de selecció</span></span> */ +#expand-toggle:checked ~ * .expandable { + visibility: visible; +} + +/* Estil del botó quan està marcada la casella de selecció */ +#expand-toggle:checked ~ #expand-btn { + background-color: #ccc; +}</pre> + +<h4 id="Resultat_2">Resultat</h4> + +<p>{{EmbedLiveSample("Toggling_elements_with_a_hidden_checkbox", "auto", 220)}}</p> + +<h3 id="Using_hidden_radioboxes_in_order_to_store_some_CSS_boolean_values" name="Using_hidden_radioboxes_in_order_to_store_some_CSS_boolean_values"><span id="result_box" lang="ca"><span>Galeria d'imatges</span></span></h3> + +<p>Podeu utilitzar la pseudo-class <code>:checked</code> per construir una galeria d'imatges amb imatges de grandària completa que només es mostrin quan l'usuari faci clic a una miniatura. Vegeu <a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">aquesta demostració</a> com un possible exemple.</p> + +<div class="note"><strong>Nota:</strong> Per a un efecte anàleg, però basat en la pseudo-classe <a class="internal" href="/en-US/docs/CSS/:hover" title="CSS/:hover"><code>:hover</code></a> i sense caixes de ràdio (radioboxes) ocultes, vegeu <a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">aquesta demostració,</a> presa de la pàgina de referència <a class="internal" href="/en-US/docs/CSS/:hover" title="CSS/:hover">:hover</a>.</div> + +<h2 id="Specifications" name="Specifications">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('HTML WHATWG', '#selector-checked', ':checked') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Sense canvis.</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>Defineix</span> <span>la semàntica</span> <span>respecte</span> <span>HTML</span><span>.</span></span></td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Sense canvis.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked') }}</td> + <td>{{ Spec2('CSS3 Basic UI') }}</td> + <td>Enllaç a Selectors Level 3.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td><span id="result_box" lang="ca"><span>Defineix</span> <span>la</span> <span>pseudo</span><span>-</span><span>classe,</span> <span>però no</span> <span>la semàntica</span> <span>associada</span></span></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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(1.0) }}</td> + <td>9.0</td> + <td>9.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(1.0) }}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/ca/web/css/_colon_default/index.html b/files/ca/web/css/_colon_default/index.html new file mode 100644 index 0000000000..1cec2992e7 --- /dev/null +++ b/files/ca/web/css/_colon_default/index.html @@ -0,0 +1,145 @@ +--- +title: ':default' +slug: 'Web/CSS/:default' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:default' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <strong><code>:default</code></strong> representa qualsevol element de formulari que sigui el predeterminat entre un grup d'elements relacionats.</p> + +<p>Aquest selector es pot utilitzar en els elements {{htmlelement("button")}}, <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code> i {{htmlelement("option")}}.</p> + +<pre class="brush: css no-line-numbers">/* Selects any default <input> */ +input:default { + background-color: lime; +}</pre> + +<p>Els elements agrupats que permeten seleccions múltiples també poden tenir múltiples valors predeterminats, és a dir, poden tenir diversos elements seleccionats inicialment. En aquest cas, <em>tots</em> els valors predeterminats es representen utilitzant la pseudo-classe <code>:default</code>. Per exemple, podeu aplicar un estil a les caselles de selecció predeterminades d'un grup de caselles de selecció.</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input type="radio" name="season" id="spring"> +<label for="spring">Spring</label> + +<input type="radio" name="season" id="summer" checked> +<label for="spring">Summer</label> + +<input type="radio" name="season" id="fall"> +<label for="spring">Fall</label> + +<input type="radio" name="season" id="winter"> +<label for="spring">Winter</label> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input:default { + box-shadow: 0 0 2px 1px coral; +} + +input:default + label { + color: coral; +} +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<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('HTML WHATWG', '#selector-default', ':default')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sense canvis.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-default', ':default')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><span id="result_box" lang="ca"><span>Defineix la semàntica HTML associada i la validació de restriccions.</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Sense canvis.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#pseudo-default', ':default')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td><span id="result_box" lang="ca"><span>Definició inicial, però sense la semàntica associada</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">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>10.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>10.0</td> + <td>5.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>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>10.0</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ca/web/css/_colon_dir/index.html b/files/ca/web/css/_colon_dir/index.html new file mode 100644 index 0000000000..75ce09caef --- /dev/null +++ b/files/ca/web/css/_colon_dir/index.html @@ -0,0 +1,105 @@ +--- +title: ':dir()' +slug: 'Web/CSS/:dir' +tags: + - CSS + - CSS Pseudo-class + - Experimental + - Reference +translation_of: 'Web/CSS/:dir' +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:dir()</code></strong> coincideix amb elements basats en la direccionalidad del text contingut en ells</p> + +<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Selecciona qualsevol element amb text de dreta a esquerr</span></span>a */ +:dir(rtl) { + background-color: red; +}</pre> + +<p>La pseudo-class <code>:dir()</code> utilitza només el valor <em>semàntic</em> de la direccionalitat, és a dir, el definit en el mateix document. No té en compte la direccionalitat de l'<em>estil</em>, és a dir, la direccionalitat establerta per les propietats CSS com {{cssxref("direction")}}.</p> + +<div class="note"> +<p><strong>Nota:</strong> Tingueu en compte que el comportament de la pseudo-class <code>:dir()</code> no és equivalent als <a href="/en-US/docs/Web/CSS/Attribute_selectors">selectors d'atribut</a> <code>[dir=…]</code>. Aquest últim coincideix amb l'atribut HTML {{htmlattrxref("dir")}}, i ignora els elements que no ho tenen, fins i tot si hereten una direcció del seu pare. (De la mateixa manera, <code>[dir=rtl]</code> i <code>[dir=ltr]</code> no coincideixen amb el valor <code>auto</code>.) En canvi, <code>:dir()</code> coincideix amb el valor calculat pel {{glossary("user agent")}}, fins i tot si s'hereta.</p> +</div> + +<div class="note"> +<p><strong>Nota:</strong> En HTML, la direcció està determinada per l'atribut {{htmlattrxref("dir")}}. Altres tipus de document poden tenir mètodes diferents.</p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<p>La pseudo-class <code>:dir()</code> requereix un paràmetre, que representa la direccionalitat de text que voleu orientar.</p> + +<h3 id="Parametres">Parametres</h3> + +<dl> + <dt><code>ltr</code></dt> + <dd>Direcciona els elements d'esquerra a dreta.</dd> + <dt><code>rtl</code></dt> + <dd>Direcciona els elements de dreta a esquerra.</dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html;"><div dir="rtl"> + <span>test1</span> + <div dir="ltr">test2 + <div dir="auto">עִבְרִית</div> + </div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">:dir(ltr) { + background-color: yellow; +} + +:dir(rtl) { + background-color: powderblue; +}</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{ EmbedLiveSample('Example') }}</p> + +<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('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sense camvis.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Definició inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{Compat("css.selectors.dir")}}</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>pseudo-classes relacionades amb el llenguatge: {{cssxref(":lang")}}, {{cssxref(":dir")}}</li> +</ul> diff --git a/files/ca/web/css/_colon_disabled/index.html b/files/ca/web/css/_colon_disabled/index.html new file mode 100644 index 0000000000..ded833befe --- /dev/null +++ b/files/ca/web/css/_colon_disabled/index.html @@ -0,0 +1,182 @@ +--- +title: ':disabled' +slug: 'Web/CSS/:disabled' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:disabled' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:disabled</code></strong> representa qualsevol element deshabilitat. Un element queda deshabilitat si no es pot activar (seleccionar, fer clic, teclejar, etc.) o acceptar l'enfocament. L'element també té un estat habilitat, en el qual es pot activar o acceptar l'enfocament.</p> + +<pre class="brush: css no-line-numbers">/* <span class="short_text" id="result_box" lang="ca"><span>Selecciona qualsevol</span></span> <input> <span class="short_text" id="result_box" lang="ca"><span>deshabilitat</span></span> */ +input:disabled { + background: #ccc; +}</pre> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemple">Exemple</h2> + +<p>Aquest exemple mostra un formulari d'enviament bàsic. Utilitza l'esdeveniment <a href="/en-US/docs/Web/JavaScript">JavaScript</a> {{event("change")}} per permetre que l'usuari habiliti/deshabiliti els camps de facturació.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form action="#"> + <fieldset id="shipping"> + <legend>Shipping address</legend> + <input type="text" placeholder="Name"> + <input type="text" placeholder="Address"> + <input type="text" placeholder="Zip Code"> + </fieldset> + <br> + <fieldset id="billing"> + <legend>Billing address</legend> + <label for="billing_is_shipping">Same as shipping address:</label> + <input type="checkbox" id="billing-checkbox" checked> + <br> + <input type="text" placeholder="Name" disabled> + <input type="text" placeholder="Address" disabled> + <input type="text" placeholder="Zip Code" disabled> + </fieldset> +</form> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input[type="text"]:disabled { + background: #ccc; +} +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">// Wait for the page to finish loading +document.addEventListener('DOMContentLoaded', function () { + // Attach `change` event listener to checkbox + document.getElementById('billing-checkbox').onchange = toggleBilling; +}, false); + +function toggleBilling() { + // Select the billing text fields + var billingItems = document.querySelectorAll('#billing input[type="text"]'); + + // Toggle the billing text fields + for (var i = 0; i < billingItems.length; i++) { + billingItems[i].disabled = !billingItems[i].disabled; + } +} +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Example', 300, 250)}}</p> + +<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('HTML WHATWG', '#selector-disabled', ':disabled')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sense canvis</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Defineix la semàntica d'HTML i els formularis.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Sense canvis</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':disabled')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>Enllaços a Selectors Nivell 3</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td><span id="result_box" lang="ca"><span>Defineix</span> <span>la</span> <span>pseudo</span><span>-</span><span>class,</span> <span>però no</span> <span>la semàntica</span> <span>associada.</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>9.0</td> + <td>9.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Internet Explorer no reconeix <code>:disabled</code> en l'element {{HTMLElement("fieldset")}}.</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li> + <p>{{Cssxref(":enabled")}}</p> + </li> +</ul> diff --git a/files/ca/web/css/_colon_empty/index.html b/files/ca/web/css/_colon_empty/index.html new file mode 100644 index 0000000000..0c9743ad81 --- /dev/null +++ b/files/ca/web/css/_colon_empty/index.html @@ -0,0 +1,135 @@ +--- +title: ':empty' +slug: 'Web/CSS/:empty' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:empty' +--- +<div>{{ CSSRef() }}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:empty</code> </strong> representa qualsevol element que no tingui fills. Els fills poden ser nodes d'elements o text (inclosos els espais en blanc). Els comentaris o les instruccions de processament no afecten si un element es considera buit o no.</p> + +<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Selecciona qualsevol <div> que no contingui cap contingut</span></span> */ +div:empty { + background: lime; +}</pre> + +<h2 id="Syntax" name="Syntax">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Examples" name="Examples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="box"><!-- I will be lime. --></div> +<div class="box">I will be pink.</div> +<div class="box"> + <!-- I will be pink because of the whitespace around this comment. --> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<div class="hidden"> +<pre class="brush: css">body { + display: flex; + justify-content: space-around; +}</pre> +</div> + +<pre class="brush: css">.box { + background: pink; + height: 80px; + width: 80px; +} + +.box:empty { + background: lime; +}</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Examples', 300, 80)}}</p> + +<h2 id="Specifications" name="Specifications">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', '#empty-pseudo', ':empty') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Sense canvis</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#empty-pseudo', ':empty') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Definició inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("1") }}</td> + <td>9.5</td> + <td>10.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ca/web/css/_colon_enabled/index.html b/files/ca/web/css/_colon_enabled/index.html new file mode 100644 index 0000000000..0b6d579968 --- /dev/null +++ b/files/ca/web/css/_colon_enabled/index.html @@ -0,0 +1,155 @@ +--- +title: ':enabled' +slug: 'Web/CSS/:enabled' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:enabled' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:enabled</code></strong> representa qualsevol element habilitat. Un element està habilitat si es pot activar (seleccionar, fer clic en, teclejar, etc.) o acceptar l'enfocament. L'element també té un estat de deshabilitat, en el qual no es pot activar o acceptar l'enfocament.</p> + +<pre class="brush: css no-line-numbers">/* <span class="short_text" id="result_box" lang="ca"><span>Selecciona qualsevol</span></span> <input> habilitat */ +input:enabled { + color: blue; +}</pre> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemple">Exemple</h2> + +<p>El següent exemple fa que el color del text i botó {{htmlElement("input")}} sigui verd quan està habilitat, i gris quan està deshabilitat. Això ajuda a l'usuari a comprendre amb quins elements pot interactuar.</p> + +<div id="Enabled_Disabled_Inputs_Example"> +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><form action="url_of_form"> + <label for="FirstField">First field (enabled):</label> + <input type="text" id="FirstField" value="Lorem"><br> + + <label for="SecondField">Second field (disabled):</label> + <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br> + + <input type="button" value="Submit"> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css;">input:enabled { + color: #2b2; +} + +input:disabled { + color: #aaa; +} +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample("Example", 550, 95)}}</p> + +<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('HTML WHATWG', '#selector-enabled', ':enabled')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>Cap canvi</span></span>.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>Defineix la semàntica per a HTML i formularis.</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>Cap canvi</span></span> .</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>Enllaços a selectors Nivell 3.</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Defineix la pseudo-class, però no la semàntica associada.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>9.0</td> + <td>9.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{Cssxref(":disabled")}}</li> +</ul> +</div> diff --git a/files/ca/web/css/_colon_first-child/index.html b/files/ca/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..7a226ce95e --- /dev/null +++ b/files/ca/web/css/_colon_first-child/index.html @@ -0,0 +1,203 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:first-child' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:first-child</code></strong> <span id="result_box" lang="ca"><span>representa el primer element entre un grup d'elements germans.</span></span></p> + +<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Selecciona qualsevol <p> que sigui el primer element entre els seus germans</span></span> */ +p:first-child { + color: lime; +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: Com es va definir originalment, l'element seleccionat havia de tenir un pare. A partir dels Selectores Nivell 4, això ja no és necessari.</p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_bàsic">Exemple bàsic</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div> + <p>This text is selected!</p> + <p>This text isn't selected.</p> +</div> + +<div> + <h2>This text isn't selected: it's not a `p`.</h2> + <p>This text isn't selected.</p> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">p:first-child { + color: lime; + background-color: black; + padding: 5px; +} +</pre> + +<h4 id="Resultat">Resultat</h4> + +<p><span>{{EmbedLiveSample('Basic_example', 500, 200)}}</span></p> + +<h3 id="Disseny_d'una_llista"><span class="short_text" id="result_box" lang="ca"><span>Disseny d'una llista</span></span></h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><ul> + <li>Item 1</li> + <li>Item 2</li> + <li>Item 3 + <ul> + <li>Item 3.1</li> + <li>Item 3.2</li> + <li>Item 3.3</li> + </ul> + </li> +</ul></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">ul li { + color: blue; +} + +ul li:first-child { + color: red; + font-weight: bold; +}</pre> + +<h4 id="Resultat_2">Resultat</h4> + +<p><span>{{EmbedLiveSample('Styling_a_list')}}</span></p> + +<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', '#first-child-pseudo', ':first-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td><span id="result_box" lang="ca"><span>No es requereix que els elements coincidents tinguin un pare</span></span>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Cap canvi.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>4.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>7<sup>[1]</sup></td> + <td>{{CompatOpera(9.5)}}</td> + <td>4</td> + </tr> + <tr> + <td>No es requereix cap pare</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("51")}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>7<sup>[1]</sup></td> + <td>{{CompatOperaMobile(10)}}</td> + <td>3.1</td> + </tr> + <tr> + <td>No es requereix cap pare</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatGeckoMobile("51")}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Internet Explorer 7 no actualitza els estils quan s'afegeixen elements dinàmicament. A Internet Explorer 8, si un element s'insereix de forma dinàmica fent clic en un enllaç, l'estil del primer fill no s'aplica fins que l'enllaç no ha perdut el focus.</p> + +<p>[2] Veure {{bug(1300374)}}.</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{cssxref(":first-of-type")}}, {{cssxref(":last-child")}}, {{cssxref(":nth-child")}}</li> +</ul> diff --git a/files/ca/web/css/_colon_first-of-type/index.html b/files/ca/web/css/_colon_first-of-type/index.html new file mode 100644 index 0000000000..8b2551b725 --- /dev/null +++ b/files/ca/web/css/_colon_first-of-type/index.html @@ -0,0 +1,159 @@ +--- +title: ':first-of-type' +slug: 'Web/CSS/:first-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:first-of-type' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:first-of-type</code></strong> <span id="result_box" lang="ca"><span>representa el primer element d'aquest tipus entre un grup d'elements germans.</span></span></p> + +<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Selecciona qualsevol <p> que sigui el primer element d'aquest tipus entre els seus germans</span></span> */ +p:first-of-type { + color: red; +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: <span id="result_box" lang="ca"><span class="alt-edited">Com es va definir originalment, l'element seleccionat havia de tenir un pare. A partir dels Selectores Nivell 4, això ja no és necessari.</span></span></p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Disseny_del_primer_paràgraf"><span class="short_text" id="result_box" lang="ca"><span>Disseny del primer paràgraf</span></span></h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><h2>Heading</h2> +<p>Paragraph 1</p> +<p>Paragraph 2</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">p:first-of-type { + color: red; + font-style: italic; +}</pre> + +<h4 id="Resultat">Resultat</h4> + +<p>{{EmbedLiveSample('Styling_the_first_paragraph')}}</p> + +<h3 id="Elements_niats">Elements niats</h3> + +<p>Aquest exemple mostra com es poden orientar els elements niats. Tingueu en compte que el <a href="/en-US/docs/Web/CSS/Universal_selectors">selector universal</a> (<code>*</code>) està implicat quan no s'escriu cap selector senzill.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><article> + <div>This `div` is first!</div> + <div>This <span>nested `span` is first</span>!</div> + <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div> + <div>This <span>nested `span` gets styled</span>!</div> + <b>This `b` qualifies!</b> + <div>This is the final `div`.</div> +</article> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">article :first-of-type { + background-color: pink; +}</pre> + +<h4 id="Resultat_2">Resultat</h4> + +<p>{{EmbedLiveSample('Nested_elements', 500)}}</p> + +<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', '#first-of-type-pseudo', ':first-of-type')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td><span id="result_box" lang="ca"><span>No es requereix que els elements coincidents tinguin un pare.</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definició inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>9.0</td> + <td>10.0</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{Cssxref(":first-child")}}, {{Cssxref(":last-of-type")}}, {{Cssxref(":nth-of-type")}}</li> +</ul> diff --git a/files/ca/web/css/_colon_first/index.html b/files/ca/web/css/_colon_first/index.html new file mode 100644 index 0000000000..f71aa1953b --- /dev/null +++ b/files/ca/web/css/_colon_first/index.html @@ -0,0 +1,147 @@ +--- +title: ':first' +slug: 'Web/CSS/:first' +tags: + - '@page' + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:first' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:first</code></strong> , utilitzada amb la regla at (<a href="/en-US/docs/Web/CSS/At-rule">at-rule</a>) {{cssxref("@page")}}, representa la primera pàgina d'un document imprès.</p> + +<pre class="brush: css no-line-numbers">/* <span class="short_text" id="result_box" lang="ca"><span>Selecciona la primera pàgina en imprimir.</span></span> */ +@page :first { + margin-left: 50%; + margin-top: 50%; +}</pre> + +<div class="note"> +<p><strong>Nota:</strong> No poden canviar totes les propietats CSS amb aquesta pseudo-class. Només es poden canviar els marges, {{cssxref("orphans")}}, {{cssxref("widows")}}, i els salts de pàgina del document. A més, només es poden utilitzar unitats de <a href="/en-US/docs/Web/CSS/length#Absolute_length_units">longitud absoluta</a> en definir els marges. Totes les altres propietats seran ignorades.</p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>First Page.</p> +<p>Second Page.</p> +<button>Print!</button> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@page :first { + margin-left: 50%; + margin-top: 50%; +} + +p { + page-break-after: always; +} +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">document.querySelector("button").onclick = function(){ window.print() } +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>Premeu el botó "Print!" per imprimir l'exemple. Les paraules en la primera pàgina han d'estar en algun lloc al voltant del centre, mentre que altres pàgines tindran els seus continguts en la posició per defecte.</p> + +<p>{{ EmbedLiveSample('Example', '80%', '150px') }}</p> + +<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('CSS3 Paged Media', '#left-right-first', ':first')}}</td> + <td>{{Spec2('CSS3 Paged Media')}}</td> + <td>Cap canvi</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definició inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>8.0</td> + <td>9.2</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{Cssxref("@page")}}</li> + <li><span class="short_text" id="result_box" lang="ca"><span>Altres pseudo-class relacionades amb la pàgina:</span></span> {{Cssxref(":left")}}, {{Cssxref(":right")}}</li> +</ul> diff --git a/files/ca/web/css/_colon_focus-within/index.html b/files/ca/web/css/_colon_focus-within/index.html new file mode 100644 index 0000000000..ae6393853d --- /dev/null +++ b/files/ca/web/css/_colon_focus-within/index.html @@ -0,0 +1,146 @@ +--- +title: ':focus-within' +slug: 'Web/CSS/:focus-within' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:focus-within' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:focus-within</code></strong> representa un element que ha rebut focus o <em>conté</em> un element que ha rebut focus. En altres paraules, representa un element que està aparellat amb la pseudo-class {{cssxref(":focus")}} o té un descendent que està aparellat amb <code>:focus</code>. (Això inclou descendents en <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">arbres d'ombres</a>.)</p> + +<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Selecciona un <div> quan un dels seus descendents està enfocat</span></span> */ +div:focus-within { + background: cyan; +}</pre> + +<p>Aquest selector és útil, per fer un exemple comú, per a ressaltar un contenidor complet {{htmlElement("form")}} quan l'usuari se centra en un dels seus camps {{htmlElement("input")}}.</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemple">Exemple</h2> + +<p>En aquest exemple, el formulari rebrà estils de color especials quan l'entrada de text rep el focus.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Try typing into this form.</p> + +<form> + <label for="given_name">Given Name:</label> + <input id="given_name" type="text"> + <br> + <label for="family_name">Family Name:</label> + <input id="family_name" type="text"> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">form { + border: 1px solid; + color: gray; + padding: 4px; +} + +form:focus-within { + background: #ff8; + color: black; +} + +input { + margin: 4px; +} +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample("Example", 500, 150)}}</p> + +<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-focus-within-pseudo", ":focus-within")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Definició inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatChrome("60")}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("47")}}</td> + <td>10.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android Webview</th> + <th>Chrome for 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>{{CompatChrome("60")}}</td> + <td>{{CompatChrome("60")}}</td> + <td>{{CompatGeckoMobile("52.0")}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("47")}}</td> + <td>10.3</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Aquesta característica encara no està implementada. Consulteu la <a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/11725071-implement-focus-within-from-selectors-4">sol·licitud de millora relacionada</a>.</p> + +<p>[2] Aquesta característica es va implementar al {{bug("1176997")}}.</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{cssxref(":focus")}}</li> +</ul> diff --git a/files/ca/web/css/_colon_focus/index.html b/files/ca/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..eb3b9ec2b9 --- /dev/null +++ b/files/ca/web/css/_colon_focus/index.html @@ -0,0 +1,144 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:focus' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:focus</code></strong> representa un element (com ara una entrada de formulari) que ha rebut el focus. Generalment, s'activa quan l'usuari fa clic o toca un element o el selecciona amb la tecla "tab" del teclat.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona qualsevol <input> quan s'enfoca */ +input:focus { + color: red; +}</pre> + +<div class="note"> +<p><strong>Nota:</strong> Aquesta pseudo-class s'aplica només a l'element enfocat. Utilitzeu {{cssxref(":focus-within")}} si voleu seleccionar un element que contingui un element enfocat.</p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input class="red-input" value="I'll be red when focused."><br> +<input class="blue-input" value="I'll be blue when focused."></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.red-input:focus { + background: yellow; + color: red; +} + +.blue-input:focus { + background: yellow; + color: blue; +}</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Example')}}</p> + +<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('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>Defineix</span> <span>la semàntica</span> <span>específica</span> <span>d'HTML.</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Sense canvis</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Sense canvis</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definició inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>8.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>8.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{cssxref(":focus-within")}}</li> +</ul> diff --git a/files/ca/web/css/_colon_fullscreen/index.html b/files/ca/web/css/_colon_fullscreen/index.html new file mode 100644 index 0000000000..f1a7bad43f --- /dev/null +++ b/files/ca/web/css/_colon_fullscreen/index.html @@ -0,0 +1,241 @@ +--- +title: ':fullscreen' +slug: 'Web/CSS/:fullscreen' +tags: + - CSS + - Experimental + - Full-screen + - Pseudo-class + - Reference +translation_of: 'Web/CSS/:fullscreen' +--- +<div>{{CSSRef}} {{SeeCompatTable}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:fullscreen</code></strong> <span id="result_box" lang="ca"><span>representa un element que es mostra quan el navegador està en <a href="/en-US/docs/Web/API/Fullscreen_API">mode de pantalla completa (</a></span></span><a href="/en-US/docs/Web/API/Fullscreen_API">fullscreen mode)</a>.</p> + +<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Selecciona qualsevol <div> que es mostri en mode de pantalla completa</span></span> */ +/* <span id="result_box" lang="ca"><span>S'ha implementat a Firefox, WebKit / Chrome i Edge / IE amb prefixos;</span> <span>Edge també és compatible amb la versió no prefixada</span></span> */ +div:-moz-full-screen { + background-color: pink; +} + +div:-webkit-full-screen { + background-color: pink; +} + +div:fullscreen { + background-color: pink; +}</pre> + +<div class="note"> +<p><strong>Note</strong>: L'especificació del W3C utilitza la paraula única <code>:fullscreen</code>, - sense guió -, però ambdues implementacions experimentals de WebKit i Gecko utilitzen una variant prefixada amb dues paraules separades per un guió: <code>:-webkit-full-screen</code> i <code>:-moz-full-screen</code>, respectivament. Microsoft Edge i Internet Explorer utilitzen la convenció estàndard: <code>:fullscreen</code> i <code>:-ms-fullscreen</code>, respectivament.</p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="fullscreen"> + <h1>:fullscreen Demo</h1> + <p>This text will become big and red when the browser is in fullscreen mode.</p> + <button id="fullscreen-button">Enter Fullscreen</button> +</div> +</pre> + +<div class="hidden"> +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var fullscreenButton = document.getElementById("fullscreen-button"); +var fullscreenDiv = document.getElementById("fullscreen"); +var fullscreenFunc = fullscreenDiv.requestFullscreen; + +if (!fullscreenFunc) { + ['mozRequestFullScreen', + 'msRequestFullscreen', + 'webkitRequestFullScreen'].forEach(function (req) { + fullscreenFunc = fullscreenFunc || fullscreenDiv[req]; + }); +} + +function enterFullscreen() { + fullscreenFunc.call(fullscreenDiv); +} + +fullscreenButton.addEventListener('click', enterFullscreen); +</pre> + +<h3 id="CSS_específic_del_navegador"><span class="short_text" id="result_box" lang="ca"><span>CSS específic del navegador</span></span></h3> + +<pre class="brush: css">#fullscreen:-moz-full-screen { + padding: 42px; + background-color: pink; + border: 2px solid #f00; + font-size: 200%; +} +#fullscreen:-webkit-full-screen { + padding: 42px; + background-color: pink; + border: 2px solid #f00; + font-size: 200%; +} + +#fullscreen:-moz-full-screen > h1 { + color: red; +} +#fullscreen:-webkit-full-screen > h1 { + color: red; +} + +#fullscreen:-moz-full-screen > p { + color: darkred; +} +#fullscreen:-webkit-full-screen > p { + color: darkred; +} + +#fullscreen:-moz-full-screen > button { + display: none; +} +#fullscreen:-webkit-full-screen > button { + display: none; +} +</pre> +</div> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#fullscreen:fullscreen { + padding: 42px; + background-color: pink; + border:2px solid #f00; + font-size: 200%; +} + +#fullscreen:fullscreen > h1 { + color: red; +} + +#fullscreen:fullscreen > p { + color: darkred; +} + +#fullscreen:fullscreen > button { + display: none; +} +</pre> + +<h3 id="Resultats">Resultats</h3> + +<p>{{ LiveSampleLink('Example', "Feu clic aquí per provar aquest exemple.") }}</p> + +<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('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}</td> + <td>{{Spec2('Fullscreen')}}</td> + <td>Definició inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>15.0 {{property_prefix("-webkit")}}<sup>[1]</sup></td> + <td>12</td> + <td>{{CompatGeckoDesktop("9.0")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("47.0")}}<sup>[2]</sup></td> + <td>11 {{property_prefix("-ms")}}<sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>6.0 {{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + <tr> + <td>Seleccionar tots els elements en la pila de la pantalla completa</td> + <td>{{CompatUnknown}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop(43)}}</td> + <td>11</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}<br> + {{CompatGeckoDesktop("47.0")}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Seleccionar tots els elements en la pila de la pantalla completa</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("43")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <span id="result_box" lang="ca"><span>Tant les versions prefixades de WebKit com Gecko</span> tenen un guió entre <em>full</em> i <em>screen,</em> però la proposta de W3C utilitza una sola paraula: <code>:fullscreen</code>, <code>:-webkit-full-screen</code>, <code>:-moz-full-screen</code>.</span></p> + +<p>[2]<em> </em>Gecko 47.0 {{geckoRelease("47.0")}} implementa la pseudo-classe sense prefix darrere de la preferència <code>full-screen-api.unprefix.enabled</code>, per defecte a <code>false</code>.</p> + +<p>[3] Internet Explorer utilitza el prefix <code>-ms</code> però no té un guió entre full i screen: <code>:-ms-fullscreen</code>.</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Fullscreen_API">Ùs del mode de pantalla completa</a></li> + <li>{{cssxref("::backdrop")}}</li> + <li>DOM API: {{ domxref("Element.requestFullscreen()") }}, {{ domxref("Document.exitFullscreen()") }}, {{ domxref("Document.fullscreen") }}, {{ domxref("Document.fullscreenElement") }}</li> + <li>Atribut {{HTMLAttrXRef("allowfullscreen", "iframe")}}</li> +</ul> diff --git a/files/ca/web/css/_colon_hover/index.html b/files/ca/web/css/_colon_hover/index.html new file mode 100644 index 0000000000..7d6cf260d5 --- /dev/null +++ b/files/ca/web/css/_colon_hover/index.html @@ -0,0 +1,178 @@ +--- +title: ':hover' +slug: 'Web/CSS/:hover' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:hover' +--- +<div>{{ CSSRef }}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:hover</code></strong> coincideix quan l'usuari interactua amb un element amb un dispositiu apuntador, però no necessàriament ho activa. Generalment s'activa quan l'usuari es desplaça sobre un element amb el cursor (punter de ratolí).</p> + +<pre class="brush: css no-line-numbers">/* <span class="short_text" id="result_box" lang="ca"><span>Selecciona qualsevol element <a> quan "es deplaça"</span></span> */ +a:hover { + color: orange; +}</pre> + +<p>Els estils definits per la pseudo-class <code>:active</code> seran anul·lats per qualsevol pseudo-class subsegüent relacionada amb l'enllaç ({{ cssxref(":link") }}, {{ cssxref(":visited") }} o {{ cssxref(":active") }}) que tinguin almenys la mateixa especificitat. Per donar estil els enllaços adequadament, poseu la regla <code>:hover</code> després de les regles <code>:link</code> i <code>:visited</code> però abans d'una regla <code>:active</code> segons el definit per l'<em>ordre LVHA</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> + +<div class="note"><strong>Nota</strong>: La pseudo-class <code>:hover</code> és problemàtica en les pantalles tàctils. Depenent del navegador, la pseudo-class <code>:hover</code> pot ser que mai coincideixi, només coincidir per un moment després de tocar un element o bé continuarà coincidint fins i tot després que l'usuari hagi deixat de tocar i fins que l'usuari toqui un altre element. Els desenvolupadors web han d'assegurar-se que el contingut sigui accessible en dispositius amb capacitats de desplaçaments limitats o inexistents.</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_bàsic">Exemple bàsic</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><a href="#">Try hovering over this link.</a></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">a { + background-color: powderblue; + transition: background-color .5s; +} + +a:hover { + background-color: gold; +}</pre> + +<h4 id="Resultat">Resultat</h4> + +<p>{{EmbedLiveSample("Basic_example")}}</p> + +<h3 id="Galeria_d'imatges"><span class="short_text" id="result_box" lang="ca"><span>Galeria d'imatges</span></span></h3> + +<p>Podeu utilitzar la pseudo-class <code>:hover</code> per construir una galeria d'imatges amb imatges en grandària real que es mostrin només quan el ratolí es mogui sobre una miniatura. Vegeu <a href="/@api/deki/files/6247/=css-gallery.zip">aquesta demostració</a> per a un possible exemple.</p> + +<div class="note"><strong>Nota:</strong> Per a un efecte anàleg, però basat en la pseudo-class <a class="internal" href="/en/CSS/%3Achecked" title="en/CSS/:checked"><code>:checked</code></a> (aplicada a les caixes de ràdio (radioboxes) ocultes), vegeu <a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">aquesta demostració</a> , presa de la pàgina de referència <a class="internal" href="/en-US/docs/Web/CSS/:checked" title="en/CSS/:checked">:checked</a>.</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('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Es permet a <code>:hover</code> ser aplicat a qualsevol pseudo-element.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>Cap canvi</span> <span>significatiu</span></span> .</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>per elements <a></td> + <td>0.2</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(1.0) }}</td> + <td>4.0</td> + <td>4.0</td> + <td>2.0.4 (419)<br> + <span style="font-size: small;">various bugs before</span></td> + </tr> + <tr> + <td><span class="short_text" id="result_box" lang="ca"><span>per a tots</span> <span>els</span> <span>elements</span></span></td> + <td>0.2</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(1.0) }}</td> + <td>7.0<sup>[1][2]</sup></td> + <td>7.0</td> + <td>2.0.4 (419)<br> + <span style="font-size: small;">various bugs before</span></td> + </tr> + <tr> + <td><span class="short_text" id="result_box" lang="ca">per pseudo-element</span></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(28) }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}<sup>[3]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] En IE8-11, en passar per sobre d'un element i després desplaçar-se cap amunt/cap baix sense moure el punter, deixarà l'element en estat <code>:hover</code> fins que es mogui el punter. Veure <a href="https://connect.microsoft.com/IE/feedbackdetail/view/926665">IE bug 926665</a>.</p> + +<p>[2] En IE9 (i possiblement abans), si un {{HTMLElement("table")}} té un pare amb un no-<code>auto</code> {{cssxref("width")}} i {{cssxref("overflow-x")}}<code>: auto;</code>, i {{HTMLElement("table")}} té prou contingut per desbordar horitzontalment el seu pare i si hi ha estils {{cssxref(":hover")}} establerts en elements de la taula i, a continuació, passen per sobre d'aquests elements faran que augmenti l'alçada de {{HTMLElement("table")}}. <a href="http://jsbin.com/diwiqe">Aquí hi ha una demostració en viu que activa l'error.</a> Una solució provisional per a l'errada és establir <code>min-height: 0%;</code> en l'element pare de la taula (i la unitat <code>%</code> ha de ser especificada; <code>0</code> i <code>0px</code> no funcionen). Hi va haver un error creat com <a href="http://bugs.jquery.com/ticket/10854">jQuery ticket #10854</a>, però s'ha tancat perquè no es considera un error de jQuery.</p> + +<p>[3] A partir de Safari Mobile per a iOS 7.1.2, en tocar un <a href="/en-US/docs/Web/Events/click#Safari_Mobile">element que es pot fer clic</a> fa que l'element entri en l'estat <code>:hover</code>. L'element romandrà a l'estat <code>:hover</code> fins que un element diferent hagi entrat en l'estat <code>:hover</code>.</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li><a href="https://code.google.com/p/chromium/issues/detail?id=370155">Chromium bug #370155: No feu <code>:hover</code> en tocar de cop en llocs que estableixen una finestra de visualització mòbil.</a></li> + <li><a href="https://code.google.com/p/chromium/issues/detail?id=306581">Chromium bug #306581: Mostra inmediatament els estats hover i active al tocar quan la pàgina no es pot desplaçar.</a></li> +</ul> diff --git a/files/ca/web/css/_colon_in-range/index.html b/files/ca/web/css/_colon_in-range/index.html new file mode 100644 index 0000000000..a8fd5171be --- /dev/null +++ b/files/ca/web/css/_colon_in-range/index.html @@ -0,0 +1,110 @@ +--- +title: ':in-range' +slug: 'Web/CSS/:in-range' +tags: + - CSS + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:in-range' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:in-range</code></strong> representa un element {{htmlelement("input")}} en què el seu valor actual està dins dels límits de rang especificats pels atributs {{htmlattrxref("min", "input")}} i {{htmlattrxref("max","input")}}.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona qualsevol <input>, però només quan té un rang especificat, i el seu valor està dins d'aquest rang */ +input:in-range { + background-color: rgba(0, 255, 0, 0.25); +}</pre> + +<p>Aquesta pseudo-class és útil per donar a l'usuari una indicació visual que el valor actual, d'un camp, està dins dels límits permesos.</p> + +<div class="note"><strong>Nota</strong> Aquesta pseudo-class només s'aplica als elements que tenen (i poden tenir) una limitació de rang. Mancant tal limitació, l'element no pot estar "en rang" ni "fora de rang".</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Exemple</h2> + +<div id="example"> +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form action="" id="form1"> + <ul>Values between 1 and 10 are valid. + <li> + <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> + <label for="value1">Your value is </label> + </li> + </ul> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css;">li { + list-style: none; + margin-bottom: 1em; +} + +input { + border: 1px solid black; +} + +input:in-range { + background-color: rgba(0, 255, 0, 0.25); +} + +input:out-of-range { + background-color: rgba(255, 0, 0, 0.25); + border: 2px solid red; +} + +input:in-range + label::after { + content: 'okay.'; +} + +input:out-of-range + label::after { + content: 'out of range!'; +}</pre> + +<h3 id="Resultat">Resultat</h3> +</div> + +<div>{{EmbedLiveSample('Example', 600, 140)}}</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('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Defineix quan <code>:in-range</code> coincideix en elements HTML.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<div>{{Compat("css.selectors.in-range")}}</div> + +<p> </p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{cssxref(":out-of-range")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation">Validació de dades de formulari</a></li> +</ul> diff --git a/files/ca/web/css/_colon_indeterminate/index.html b/files/ca/web/css/_colon_indeterminate/index.html new file mode 100644 index 0000000000..c9fb4578e5 --- /dev/null +++ b/files/ca/web/css/_colon_indeterminate/index.html @@ -0,0 +1,132 @@ +--- +title: ':indeterminate' +slug: 'Web/CSS/:indeterminate' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:indeterminate' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:indeterminate</code></strong> representa qualsevol element de formulari, l'estat del qual, sigui indeterminat.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona qualsevol <input> l'estat del qual sigui indeterminat */ +input:indeterminate { + background: lime; +}</pre> + +<p>Els elements als quals apunta aquest selector són:</p> + +<ul> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code> elements en què la propietat <code>indeterminate</code> està establert a <code>true</code> per <a href="/en-US/docs/Web/JavaScript">JavaScript.</a></li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code> elements, que quan tots els botons d'opció tenen el mateix valor <code>name</code>, en el formulari, no estan marcats.</li> + <li>{{HTMLElement("progress")}} elements en un estat indeterminat.</li> +</ul> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Checkbox_radio_button">Checkbox & radio button</h3> + +<p><span id="result_box" lang="ca"><span>Aquest exemple aplica estils especials a les etiquetes associades a camps de formulari indeterminats.</span></span></p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div> + <input type="checkbox" id="checkbox"> + <label for="checkbox">This label starts out lime.</label> +</div> +<div> + <input type="radio" id="radio"> + <label for="radio">This label starts out lime.</label> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css; hightlight[5]">input:indeterminate + label { + background: lime; +} +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var inputs = document.getElementsByTagName("input"); + +for (var i = 0; i < inputs.length; i++) { + inputs[i].indeterminate = true; +} +</pre> + +<p>{{EmbedLiveSample('Checkbox_radio_button', 'auto', 50)}}</p> + +<h3 id="Progress_bar">Progress bar</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><progress> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css; hightlight[5]">progress { + margin: 4px; +} + +progress:indeterminate { + opacity: 0.5; + background-color: lightgray; + box-shadow: 0 0 2px 1px red; +} +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Progress_bar', 'auto', 30)}}</p> + +<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('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sense canvis</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Defineix la semàntica d'HTML i la validició de restriccions</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Sense canvis</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td><span id="result_box" lang="ca"><span>Defineix</span> <span>la</span> <span>pseudo</span><span>-</span><span>class,</span> <span>però no</span> <span>la semàntica</span> <span>associada.</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<div> + + +<p>{{Compat("css.selectors.indeterminate")}}</p> +</div> diff --git a/files/ca/web/css/_colon_invalid/index.html b/files/ca/web/css/_colon_invalid/index.html new file mode 100644 index 0000000000..8e8b1ee626 --- /dev/null +++ b/files/ca/web/css/_colon_invalid/index.html @@ -0,0 +1,141 @@ +--- +title: ':invalid' +slug: 'Web/CSS/:invalid' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:invalid' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:invalid</code></strong> representa qualsevol element {{HTMLElement("input")}} o un altre {{HTMLElement("form")}} en que el seu contingut no es <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">valida</a>.</p> + +<pre class="brush: css no-line-numbers">/* <span class="short_text" id="result_box" lang="ca"><span>Selecciona qualsevol</span></span> <input> <span class="short_text" id="result_box" lang="ca"><span>invàlit</span></span> */ +input:invalid { + background-color: pink; +}</pre> + +<p><span id="result_box" lang="ca"><span>Aquesta pseudo-class és útil per ressaltar errors de camp per a l'usuari.</span></span></p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemple">Exemple</h2> + +<p>Aquest exemple presenta una forma senzilla que acoloreix elements en verd quan es validen i vermells quan no ho fan.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form> + <label for="url_input">Enter a URL:</label> + <input type="url" id="url_input" /> + <br /> + <br /> + <label for="email_input">Enter an email address:</label> + <input type="email" id="email_input" required/> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input:invalid { + background-color: #ffdddd; +} + +form:invalid { + border: 5px solid #ffdddd; +} + +input:valid { + background-color: #ddffdd; +} + +form:valid { + border: 5px solid #ddffdd; +} + +input:required { + border-color: #800000; + border-width: 3px; +} + +input:required:invalid { + border-color: #C00000; +}</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Example', 600, 120)}}</p> + +<h2 id="Notes">Notes</h2> + +<h3 id="Botons_de_ràdio">Botons de ràdio</h3> + +<p>Si un botó de ràdio qualsevol en un grup és <code>required</code>, la pseudo-class <code>:invalid</code> s'aplica a tots ells si no se selecciona cap dels botons del grup. (Els botons de ràdio agrupats comparteixen el mateix valor per al seu atribut <code>name</code>).</p> + +<h3 id="Gecko_per_defecte">Gecko per defecte</h3> + +<p>Per defecte, Gecko no aplica un estil a la pseudo-class <code>:invalid</code>. Tanmateix, aplica un estil (un "resplendor" vermell usant la propietat {{Cssxref("box-shadow")}}) a la pseudo-class {{cssxref(":-moz-ui-invalid")}} que s'aplica en un subconjunt de casos per <code>:invalid</code>.</p> + +<p>Podeu desactivar la brillantor usant el següent CSS, o anul·lar-ho completament per alterar l'aparença dels camps no vàlids:</p> + +<pre class="brush: css">:invalid { + box-shadow: none; +} + +:-moz-submit-invalid { + box-shadow: none; +} + +:-moz-ui-invalid { + box-shadow: none; +}</pre> + +<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('HTML WHATWG', '#selector-invalid', ':invalid')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Cap canvi.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><span id="result_box" lang="ca"><span>Defineix la semàntica d'HTML i la validació de restriccions.</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<div> + + +<p>{{Compat("css.selectors.invalid")}}</p> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li><span id="result_box" lang="ca"><span>Altres pseudo-classes relacionades amb la validació</span></span>: {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":valid") }}</li> + <li><span class="short_text" id="result_box" lang="ca"><span>Pseudo-classes relacionades amb Mozilla</span></span>: {{cssxref(":-moz-ui-invalid")}}, {{cssxref(":-moz-submit-invalid")}}</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Validació de dades de formulari</a></li> +</ul> diff --git a/files/ca/web/css/_colon_lang/index.html b/files/ca/web/css/_colon_lang/index.html new file mode 100644 index 0000000000..b30ec5855f --- /dev/null +++ b/files/ca/web/css/_colon_lang/index.html @@ -0,0 +1,149 @@ +--- +title: ':lang' +slug: 'Web/CSS/:lang' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:lang' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:lang()</code></strong> coincideix amb elements basats en l'idioma en què estan definits.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona qualsevol <p> en Anglès (en) */ +p:lang(en) { + quotes: '\201C' '\201D' '\2018' '\2019'; +}</pre> + +<div class="note"> +<p><strong>Nota:</strong> En HTML, el llenguatge està determinat per una combinació de l'atribut {{htmlattrxref ("lang")}}, l'element {{HTMLElement ("meta")}}, i possiblement per informació del protocol (com ara encapçalaments HTTP. Per a altres tipus de documents, hi pot haver altres mètodes de document per determinar el llenguatge</p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h3 id="Paràmetre">Paràmetre</h3> + +<dl> + <dt><code><language-code></code></dt> + <dd>Un {{cssxref("<string>")}} representant l'idioma en el qual us voleu dirigir. Els valors acceptables s'especifiquen en l'especificació <a href="/en-US/docs/Web/HTML">HTML</a>.</dd> +</dl> + +<h2 id="Exemple">Exemple</h2> + +<p>En aquest exemple, la pseudo-classe <code>:lang()</code> s'utilitza per a que coincideixi amb els pares dels elements de la cita ({{htmlElement("q")}}) usant <a href="/en-US/docs/Web/CSS/Child_selectors">combinadors fills</a>. Tingueu en compte que això no il·lustra l'única manera de fer-ho, i que el millor mètode a utilitzar depèn del tipus de document. També tingueu en compte que els valors {{glossary("Unicode")}} s'utilitzen per especificar alguns dels caràcters especials de la cita.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: css">:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; } +:lang(fr) > q { quotes: '« ' ' »'; } +:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; } +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: html"><div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div> +<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div> +<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div> +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Example', 350)}}</p> + +<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', '#lang-pseudo', ':lang()')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Cap canvi.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Cap canvi significatiu.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>8.0</td> + <td>8.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>8.0</td> + <td>8.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li><span class="short_text" id="result_box" lang="ca"><span>Pseudo-classes relacionades amb el llenguatge</span></span>: {{cssxref(":lang")}}, {{cssxref(":dir")}}</li> + <li>Atribut HTML {{htmlattrxref("lang")}}</li> + <li><a class="external" href="https://tools.ietf.org/html/bcp47">BCP 47 - Etiquetes per identificar idiomes</a></li> +</ul> diff --git a/files/ca/web/css/_colon_last-child/index.html b/files/ca/web/css/_colon_last-child/index.html new file mode 100644 index 0000000000..9d449b660b --- /dev/null +++ b/files/ca/web/css/_colon_last-child/index.html @@ -0,0 +1,197 @@ +--- +title: ':last-child' +slug: 'Web/CSS/:last-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:last-child' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:last-child</code></strong> <span id="result_box" lang="ca"><span>representa l'últim element entre un grup d'elements germans.</span></span></p> + +<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Selecciona qualsevol <p> que sigui l'últim element entre els seus germans</span></span> */ +p:last-child { + color: lime; +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: Com es va definir originalment, l'element seleccionat havia de tenir un pare. A partir dels selectors de nivell 4, això ja no és necessari.</p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="Exemple_bàsic">Exemple bàsic</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div> + <p>This text isn't selected.</p> + <p>This text is selected!</p> +</div> + +<div> + <p>This text isn't selected.</p> + <h2>This text isn't selected: it's not a `p`.</h2> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">p:last-child { + color: lime; + background-color: black; + padding: 5px; +} +</pre> + +<h4 id="Resultat">Resultat</h4> + +<p><span>{{EmbedLiveSample('Basic_example', 500, 200)}}</span></p> + +<h3 id="Disseny_d'una_llista">Disseny d'una llista</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><ul> + <li>Item 1</li> + <li>Item 2</li> + <li>Item 3 + <ul> + <li>Item 3.1</li> + <li>Item 3.2</li> + <li>Item 3.3</li> + </ul> + </li> +</ul></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">ul li { + color: blue; +} + +ul li:last-child { + border: 1px solid red; + color: red; +}</pre> + +<h4 id="Resultat_2">Resultat</h4> + +<p>{{EmbedLiveSample('Styling_a_list')}}</p> + +<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', '#last-child', ':last-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td><span id="result_box" lang="ca"><span>No es requereix que els elements coincidents tinguin un pare.</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definició inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>9.0</td> + <td>{{CompatOpera(9.5)}}</td> + <td>3.2</td> + </tr> + <tr> + <td>No es requereix pare</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("51")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>9.0</td> + <td>{{CompatOperaMobile(10)}}</td> + <td>3.2</td> + </tr> + <tr> + <td>No es requereix pare</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("51")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<p>[1] Veure {{bug(1300374)}}.</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{cssxref(":last-of-type")}}, {{cssxref(":first-child")}}, {{cssxref(":nth-child")}}</li> +</ul> diff --git a/files/ca/web/css/_colon_last-of-type/index.html b/files/ca/web/css/_colon_last-of-type/index.html new file mode 100644 index 0000000000..b5f1844d2e --- /dev/null +++ b/files/ca/web/css/_colon_last-of-type/index.html @@ -0,0 +1,158 @@ +--- +title: ':last-of-type' +slug: 'Web/CSS/:last-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:last-of-type' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:last-of-type</code></strong> <span id="result_box" lang="ca"><span>representa l'últim element del seu tipus entre un grup d'elements germa</span></span>.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona qualsevol <p> que sigui l'últim element del seu tipus entre els seus germans */ +p:last-of-type { + color: lime; +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: <span id="result_box" lang="ca"><span class="alt-edited">Com es va definir originalment, l'element seleccionat havia de tenir un pare. A partir dels selectors de nivell 4, això ja no és necessari.</span></span></p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="Disseny_de_l'últim_paràgraf"><span class="short_text" id="result_box" lang="ca"><span>Disseny de l'últim paràgraf</span></span></h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><h2>Heading</h2> +<p>Paragraph 1</p> +<p>Paragraph 2</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">p:last-of-type { + color: red; + font-style: italic; +}</pre> + +<h4 id="Resultat">Resultat</h4> + +<p>{{EmbedLiveSample('Styling_the_last_paragraph')}}</p> + +<h3 id="Elements_niats">Elements niats</h3> + +<p>Aquest exemple mostra com es poden dirigir els elements niats. Tingueu en compte que el selector universal <a href="/en-US/docs/Web/CSS/Universal_selectors">selector universal</a> (<code>*</code>) està implícit quan no s'escriu un selector simple .</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><article> + <div>This `div` is first.</div> + <div>This <span>nested `span` is last</span>!</div> + <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div> + <b>This `b` qualifies!</b> + <div>This is the final `div`!</div> +</article> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">article :last-of-type { + background-color: pink; +}</pre> + +<h4 id="Resultat_2">Resultat</h4> + +<p>{{EmbedLiveSample('Nested_elements', 500)}}</p> + +<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', '#last-of-type-pseudo', ':last-of-type')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td><span id="result_box" lang="ca"><span>No es requereix que els elements coincidents tinguin un pare.</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definició inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>9.0</td> + <td>10.0</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veure_també">Veure també</h2> + +<ul> + <li>{{cssxref(":last-child")}}, {{Cssxref(":nth-last-of-type")}}</li> +</ul> diff --git a/files/ca/web/css/_colon_left/index.html b/files/ca/web/css/_colon_left/index.html new file mode 100644 index 0000000000..73fb3d65c5 --- /dev/null +++ b/files/ca/web/css/_colon_left/index.html @@ -0,0 +1,122 @@ +--- +title: ':left' +slug: 'Web/CSS/:left' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:left' +--- +<div>{{ CSSRef() }}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:left</code></strong>, usada amb la <a href="/en-US/docs/Web/CSS/At-rule">regla at</a> {{cssxref("@page")}} , representa totes les pàgines de l'esquerra d'un document imprès.</p> + +<pre class="brush: css no-line-numbers">/* Selects any left-hand pages when printing */ +@page :left { + margin: 2in 3in; +}</pre> + +<p>Si una pàgina donada és "esquerra" o "dreta" ve determinada per la direcció principal d'escriptura del document. Per exemple, si la primera pàgina té una direcció d'escriptura principal d'esquerra a dreta llavors serà una pàgina {{Cssxref(":right")}}; si té una direcció d'escriptura principal de dreta a esquerra llavors serà una pàgina <code>:left</code>.</p> + +<div class="note"> +<p><strong>Nota:</strong> No podeu canviar totes les propietats CSS amb aquesta pseudo-class. Només podeu canviar les propietats {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }} i {{ Cssxref("background") }} del quadre de pàgina. S'ignoraran totes les altres propietats i només es veurà afectat el quadre de pàgina, no el contingut del document de la pàgina.</p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">@page :left { + margin: 2in 3in; +} +</pre> + +<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('CSS3 Paged Media', '#left-right-first', ':left') }}</td> + <td>{{ Spec2('CSS3 Paged Media') }}</td> + <td>Sense canvis.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'page.html#page-selectors', ':left') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatNo() }}</td> + <td>8.0</td> + <td>9.2</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{ Cssxref("@page") }}</li> + <li><span class="short_text" id="result_box" lang="ca"><span>Altres pseudo-class relacionades amb la pàgina</span></span> : {{ Cssxref(":first") }}, {{ Cssxref(":right") }}</li> +</ul> diff --git a/files/ca/web/css/_colon_link/index.html b/files/ca/web/css/_colon_link/index.html new file mode 100644 index 0000000000..af971fb36b --- /dev/null +++ b/files/ca/web/css/_colon_link/index.html @@ -0,0 +1,150 @@ +--- +title: ':link' +slug: 'Web/CSS/:link' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:link' +--- +<div>{{ CSSRef }}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:link</code></strong> representa un element que encara no ha estat visitat. S'adapta a tots els no visitats {{HTMLElement("a")}}, {{HTMLElement("area")}} o {{HTMLElement("link")}} element que té un atribut <code>href</code>.</p> + +<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Selecciona qualsevol <a> que encara no s'hagi visitat</span></span> */ +a:link { + color: red; +}</pre> + +<p>Els estils definits per la pseudo-class <code>:link</code> seran anul·lats per qualsevol pseudo-class relacionada amb un enllaç posterior ({{cssxref(":active")}}, {{cssxref(":hover")}} o {{cssxref(":visited")}}) que tingui almenys la mateixa especificitat. Per donar un estil apropiat als enllaços, poseu la regla <code>:link</code> davant de totes les altres regles relacionades amb els enllaços, segons el definit per l'<em>ordre</em> <em>LVHA</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> + +<div class="note"> +<p><strong>Nota:</strong> Utilitzeu {{cssxref (":any-link")}} per seleccionar un element independentment de si s'ha visitat o no.</p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<p>Per defecte, la majoria dels navegadors apliquen un valor {{cssxref("color")}} especial als enllaços visitats. Per tant, els enllaços que vnguin a continuació probablement tinguin colors de fonts especials només abans de visitar-los. (Després d'això, haureu d'esborrar l'historial del navegador per tornar-los a veure). Tanmateix, és probable que els valors de {{cssxref("background-color")}} quedin, ja que la majoria dels navegadors no estableixen aquesta propietat als enllaços visitats de forma predeterminada.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><a href="#ordinary-target">This is an ordinary link.</a><br> +<a href="">You've already visited this link.</a><br> +<a>Placeholder link (won't get styled)</a> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">a:link { + background-color: gold; + color: green; +} +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample("Examples")}}</p> + +<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('HTML WHATWG', 'scripting.html#selector-link', ':link') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#link', ':link') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Sense canvis.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#link', ':link') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Sense canvis.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Aixecar la restricció només per aplicar-lo a l'element {{HTMLElement ("a")}}.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}</td> + <td>{{ Spec2('CSS1') }}</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>1.5</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("1.9.2") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>Pseudo-classes relacionades amb enllaços: {{ cssxref(":visited") }}, {{ cssxref(":hover") }}, {{ cssxref(":active") }}</li> +</ul> diff --git a/files/ca/web/css/_colon_not/index.html b/files/ca/web/css/_colon_not/index.html new file mode 100644 index 0000000000..2c0171e00b --- /dev/null +++ b/files/ca/web/css/_colon_not/index.html @@ -0,0 +1,176 @@ +--- +title: ':not()' +slug: 'Web/CSS/:not' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:not' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:not()</code></strong> representa elements que no coincideixen amb una llista de selectors. Atès que impedeix que es seleccionin elements específics, es coneix com a <em>pseudo-class de negació</em>.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona qualsevol element que NO sigui un paràgraf */ +:not(p) { + color: blue; +}</pre> + +<div class="note"> +<p><strong>Notes:</strong></p> + +<ul> + <li>Els selectors inútils es poden escriure utilitzant aquesta pseudo-class. Per exemple, <code>:not(*)</code> coincideix amb qualsevol element que no sigui un element, de manera que mai no s'aplicarà la regla</li> + <li>Aquesta pseudo-class pot augmentar l'<a href="/en-US/docs/Web/CSS/Specificity">especificitat</a> d'una regla. Per exemple, <code>#foo:not(#bar)</code> coincidirà amb el mateix element <code>#foo</code>, més senzill, però té una especificitat més alta.</li> + <li><code>:not(.foo)</code> coincidirà amb qualsevol cosa que no sigui <code>.foo</code>, <em>incoent {{HTMLElement("html")}} i {{HTMLElement("body")}}.</em></li> + <li>Aquest selector només s'aplica a un element; no es pot utilitzar per excloure a tots els ancestres. Per exemple, <code>body :not(table) </code>s'aplicarà als enllaços dins d'una taula, ja que {{HTMLElement("tr")}} coincidirà amb la part <code>:not()</code> del selector.</li> +</ul> +</div> + +<h2 id="Syntax" name="Syntax">Sintaxi</h2> + +<p>La pseudo-class <code>:not()</code> requereix una llista separada per comes d'un o més selectors com a argument. La llista no ha de contenir un altre selector de negació o un <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a>.</p> + +<div class="warning"> +<p>La capacitat d'enumerar més d'un selector és experimental i encara no està àmpliament suportada.</p> +</div> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>I am a paragraph.</p> +<p class="fancy">I am so very fancy!</p> +<div>I am NOT a paragraph.</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.fancy { + text-shadow: 2px 2px 3px gold; +} + +/* <p> elements that are not in the class `.fancy` */ +p:not(.fancy) { + color: green; +} + +/* Elements that are not <p> elements */ +body :not(p) { + text-decoration: underline; +} + +/* Elements that are not <div> or <span> elements */ +body :not(div):not(span) { + font-weight: bold; +} + +/* Elements that are not `.crazy` or `.fancy` */ +/* Note that this syntax is not well supported yet. */ +body :not(.crazy, .fancy) { + font-family: sans-serif; +}</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Example')}}</p> + +<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', '#negation', ':not()') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Estén el seu argument per permetre a alguns selectors no simples.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#negation', ':not()') }}</td> + <td>{{ Spec2('CSS3 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>Característica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.2</td> + </tr> + <tr> + <td>Arguments estesos</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Edge</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>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>9.0</td> + <td>10.0</td> + <td>3.2</td> + </tr> + <tr> + <td>Arguments estesos</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ca/web/css/_colon_nth-child/index.html b/files/ca/web/css/_colon_nth-child/index.html new file mode 100644 index 0000000000..fee9b30c51 --- /dev/null +++ b/files/ca/web/css/_colon_nth-child/index.html @@ -0,0 +1,276 @@ +--- +title: ':nth-child' +slug: 'Web/CSS/:nth-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:nth-child' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:nth-child()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <span id="result_box" lang="ca"><span>coincideix amb un o més elements basats en la seva posició entre un grup de germans.</span></span></p> + +<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Selecciona cada quart element entre qualsevol grup de germans</span></span> */ +:nth-child(4n) { + color: lime; +} +</pre> + +<h2 id="Syntax" name="Syntax">Sintaxi</h2> + +<p>La pseudo-class <code>nth-child</code> s'especifica amb un únic argument, que representa el patró per als elements coincidents.</p> + +<h3 id="Valors_de_paraules_clau">Valors de paraules clau</h3> + +<dl> + <dt><code>odd</code></dt> + <dd>Representa elements, la posició numèrica dels quals, en una sèrie de germans és imparell: 1, 3, 5, etc.</dd> + <dt><code>even</code></dt> + <dd>Representa elements, la posició numèrica dels quals, en una sèrie de germans és parell: 2, 4, 6, etc.</dd> +</dl> + +<h3 id="Notació_funcional">Notació funcional</h3> + +<dl> + <dt><code><An+B></code></dt> + <dd>Representa elements, la posició numèrica dels quals, en una sèrie de germans coincideix amb el patró <code>An+B</code>, per a cada enter positiu o valor zero de <code>n</code>. L'índex del primer element és <code>1</code>. Els valors <code>A</code> i <code>B</code> han de ser {{cssxref("<integer>")}}s.</dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Examples" name="Examples">Exemples</h2> + +<h3 id="Example_selectors" name="Example_selectors">Exemple de selectors</h3> + +<dl> + <dt><code>tr:nth-child(odd)</code> or <code>tr:nth-child(2n+1)</code></dt> + <dd>Representa les files imparells d'una taula HTML: 1, 3, 5, etc.</dd> + <dt><code>tr:nth-child(even)</code> or <code>tr:nth-child(2n)</code></dt> + <dd>Representa les files parells d'una taula HTML: 2, 4, 6, etc.</dd> + <dt><code>:nth-child(5n)</code></dt> + <dd>Representa elements 5, 10, 15, etc.</dd> + <dt><code>:nth-child(3n+4)</code></dt> + <dd>Representa elements 4, 7, 10, 13, etc.</dd> + <dt><code>:nth-child(-n+3)</code></dt> + <dd><span id="result_box" lang="ca"><span>Representa els tres primers elements entre un grup de germans.</span></span></dd> + <dt><code>p:nth-child(n)</code></dt> + <dd><span id="result_box" lang="ca"><span>Representa cada element</span></span> <code><p></code> <span id="result_box" lang="ca"><span>entre un grup de germans.</span> <span>Això és el mateix que un simple selector</span></span> <code>p</code> .</dd> + <dt><code>p:nth-child(1)</code> or <code>p:nth-child(0n+1)</code></dt> + <dd><span id="result_box" lang="ca"><span>Representa cada</span></span> <code><p></code> <span id="result_box" lang="ca"><span>aquest és el primer element entre un grup de germans.</span> <span>Això és el mateix que el selector</span></span> {{cssxref(":first-child")}}.</dd> +</dl> + +<h3 id="Exemple_detallat">Exemple detallat</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html"><h3><code>span:nth-child(2n+1)</code>, WITHOUT an + <code>&lt;em&gt;</code> among the child elements.</h3> +<p>Children 1, 3, 5, and 7 are selected.</p> +<div class="first"> + <span>Span 1!</span> + <span>Span 2</span> + <span>Span 3!</span> + <span>Span 4</span> + <span>Span 5!</span> + <span>Span 6</span> + <span>Span 7!</span> +</div> + +<br> + +<h3><code>span:nth-child(2n+1)</code>, WITH an + <code>&lt;em&gt;</code> among the child elements.</h3> +<p>Children 1, 5, and 7 are selected.<br> + 3 is used in the counting because it is a child, but it isn't + selected because it isn't a <code>&lt;span&gt;</code>.</p> +<div class="second"> + <span>Span!</span> + <span>Span</span> + <em>This is an `em`.</em> + <span>Span</span> + <span>Span!</span> + <span>Span</span> + <span>Span!</span> + <span>Span</span> +</div> + +<br> + +<h3><code>span:nth-of-type(2n+1)</code>, WITH an + <code>&lt;em&gt;</code> among the child elements.</h3> +<p>Children 1, 4, 6, and 8 are selected.<br> + 3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>, + not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects + children of that type. The <code>&lt;em&gt;</code> is completely skipped + over and ignored.</p> +<div class="third"> + <span>Span!</span> + <span>Span</span> + <em>This is an `em`.</em> + <span>Span!</span> + <span>Span</span> + <span>Span!</span> + <span>Span</span> + <span>Span!</span> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +span, +div em { + padding: 5px; + border: 1px solid green; + display: inline-block; + margin-bottom: 3px; +} + +.first span:nth-child(2n+1), +.second span:nth-child(2n+1), +.third span:nth-of-type(2n+1) { + background-color: lime; +}</pre> + +<h4 id="Resultat">Resultat</h4> + +<p>{{EmbedLiveSample('Detailed_example', 550, 550)}}</p> + +<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', '#nth-child-pseudo', ':nth-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td><span id="result_box" lang="ca"><span>Afegeix la sintaxi</span></span> <code>del <selector></code> <span id="result_box" lang="ca"><span>i especifica que els elements coincidents no són necessaris per tenir un pare.</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatChrome(1)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>{{CompatOpera(9.5)}}<sup>[1]</sup></td> + <td>3.1</td> + </tr> + <tr> + <td>sintaxi <code>del <selector></code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>No es requereix cap pare</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("51")}}[3]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}<sup>[2]</sup></td> + <td>9.0</td> + <td>{{CompatOperaMobile(9.5)}}<sup>[1]</sup></td> + <td>3.1</td> + </tr> + <tr> + <td>sintaxi <code>del <selector></code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>No es requereix cap pare</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("51")}}<sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Opera no pot gestionar la inserció dinàmica dels elements</p> + +<p>[2] Gecko encara no implementa aquesta funció. Vegeu {{bug(854148)}}.</p> + +<p>[3] Vegeu {{bug(1300374)}}.</p> + +<h2 id="See_also" name="See_also">Vegeu també</h2> + +<ul> + <li>{{ Cssxref(":nth-of-type") }}, {{ Cssxref(":nth-last-child") }}</li> +</ul> diff --git a/files/ca/web/css/_colon_nth-last-child/index.html b/files/ca/web/css/_colon_nth-last-child/index.html new file mode 100644 index 0000000000..44fed32a4d --- /dev/null +++ b/files/ca/web/css/_colon_nth-last-child/index.html @@ -0,0 +1,217 @@ +--- +title: ':nth-last-child' +slug: 'Web/CSS/:nth-last-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:nth-last-child' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:nth-last-child()</code></strong> coincideix amb un o més elements en funció de la seva posició entre un grup de germans, comptant des del final.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cada quart element entre qualsevol grup de germans, comptant enrere des de l'últim */ +:nth-last-child(4n) { + color: lime; +}</pre> + +<div class="note"> +<p><strong>Nota:</strong> Aquesta pseudo-class és bàsicament la mateixa que {{Cssxref(":nth-child")}}, excepte que compta els elements a l'inrevés des del final i no des del començament.</p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<p>The <code>nth-last-child</code> pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end.</p> + +<h3 id="Valors_de_paraules_clau"><span id="result_box" lang="ca"><span>Valors de paraules clau</span></span></h3> + +<dl> + <dt><code>odd</code></dt> + <dd>Representa elements, la posició numèrica dels quals, en una sèrie de germans és imparell: 1, 3, 5, etc., comptant des del final.</dd> + <dt><code>even</code></dt> + <dd>Representa elements, la posició numèrica dels quals, en una sèrie de germans és parell: 2, 4, 6, etc., comptant des del final.</dd> +</dl> + +<h3 id="Notació_funcional">Notació funcional</h3> + +<dl> + <dt><code><An+B></code></dt> + <dd>Representa elements, la posició numèrica dels quals, en una sèrie de germans coincideix amb el patró <code>An+B</code>, per a cada enter positiu o valor zero de <code>n</code>. L'índex del primer element, comptant des del final, és <code>1</code>. Els valors <code>A</code> i <code>B</code> han de ser dos {{cssxref("<integer>")}}s.</dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_de_selectors">Exemple de selectors</h3> + +<dl> + <dt><code>tr:nth-last-child(odd)</code> or <code>tr:nth-last-child(2n+1)</code></dt> + <dd>Representa les files imparells d'una taula HTML: 1, 3, 5, etc., comptant des del final.</dd> + <dt><code>tr:nth-last-child(even)</code> or <code>tr:nth-last-child(2n)</code></dt> + <dd>Representa les files parells d'una taula HTML: 2, 4, 6, etc., comptant des del final.</dd> + <dt><code>:nth-last-child(5n)</code></dt> + <dd>Representa els elements 5, 10, 15, etc., comptant des del final.</dd> + <dt><code>:nth-last-child(3n+4)</code></dt> + <dd>Representa els elements 4, 7, 10, 13, etc., comptant des del final.</dd> + <dt><code>:nth-last-child(-n+3)</code></dt> + <dd>Representa els tres últims elements entre un grup de germans.</dd> + <dt><code>p:nth-last-child(n)</code></dt> + <dd>Representa cada element <code><p></code> entre un grup de germans. Això és el mateix que un simple selector <code>p</code>.</dd> + <dt><code>p:nth-last-child(1)</code> or <code>p:nth-last-child(0n+1)</code></dt> + <dd>Representa cada <code><p></code> que és el primer element d'un grup de germans comptant des del final. Això és el mateix que el selector {{cssxref(":last-child")}}.</dd> +</dl> + +<h3 id="Exemple_de_taula"><span class="short_text" id="result_box" lang="ca"><span>Exemple de taula</span></span></h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><table> + <tbody> + <tr> + <td>First line</td> + </tr> + <tr> + <td>Second line</td> + </tr> + <tr> + <td>Third line</td> + </tr> + <tr> + <td>Fourth line</td> + </tr> + <tr> + <td>Fifth line</td> + </tr> + </tbody> +</table> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">table { + border: 1px solid blue; +} + +/* Selects the last three elements */ +tr:nth-last-child(-n+3) { + background-color: pink; +} +</pre> + +<h4 id="Resultat">Resultat</h4> + +<p>{{EmbedLiveSample('Table_example', 300, 150)}}</p> + +<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', '#nth-last-child-pseudo', ':nth-last-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td><span id="result_box" lang="ca"><span>No es requereix que els elements coincidents tinguin un pare.</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatChrome(4)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>{{CompatOpera(9.5)}}</td> + <td>3.2</td> + </tr> + <tr> + <td>No es requereix cap pare</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("51")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>9.0</td> + <td>{{CompatOperaMobile(10)}}</td> + <td>3.2</td> + </tr> + <tr> + <td>No es requereix cap pare</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("51")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Veure {{bug(1300374)}}.</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}</li> +</ul> diff --git a/files/ca/web/css/_colon_nth-last-of-type/index.html b/files/ca/web/css/_colon_nth-last-of-type/index.html new file mode 100644 index 0000000000..64fbeee193 --- /dev/null +++ b/files/ca/web/css/_colon_nth-last-of-type/index.html @@ -0,0 +1,141 @@ +--- +title: ':nth-last-of-type' +slug: 'Web/CSS/:nth-last-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:nth-last-of-type' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:nth-last-of-type()</code></strong> coincideix amb un o més elements d'un tipus determinat, en funció de la seva posició entre un grup de germans, comptant des del final.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cada quart element <p> entre qualsevol grup de germans, comptant enrere des de l'últim */ +p:nth-last-of-type(4n) { + color: lime; +}</pre> + +<div class="note"> +<p><strong>Nota:</strong> Aquesta pseudo-class és bàsicament la mateixa que {{Cssxref(":nth-of-type")}}, excepte que compta els elements a l'inrevés des del final i no cap a endavant des del principi.</p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<p>La pseudo-class <code>nth-last-of-type</code> s'especifica amb un sol argument, representa el patró per als elements coincidents, comptant des del final.</p> + +<p>Vegeu {{Cssxref(":nth-last-child")}} per obtenir una explicació més detallada de la seva sintaxi.</p> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <span>This is a span.</span> + <span>This is another span.</span> + <em>This is emphasized.</em> + <span>Wow, this span gets limed!!!</span> + <strike>This is struck through.</strike> + <span>Here is one last span.</span> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">span:nth-last-of-type(2) { + background-color: lime; +}</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Example')}}</p> + +<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', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td><span id="result_box" lang="ca"><span>No es requereix que els elements coincidents tinguin un pare.</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>4.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>9.0</td> + <td>10.0</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{Cssxref(":nth-last-child")}}, {{Cssxref(":nth-of-type")}}</li> +</ul> diff --git a/files/ca/web/css/_colon_nth-of-type/index.html b/files/ca/web/css/_colon_nth-of-type/index.html new file mode 100644 index 0000000000..c309e14b41 --- /dev/null +++ b/files/ca/web/css/_colon_nth-of-type/index.html @@ -0,0 +1,150 @@ +--- +title: ':nth-of-type' +slug: 'Web/CSS/:nth-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:nth-of-type' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:nth-of-type()</code></strong> coincideix amb un o més elements d'un tipus determinat, en funció de la seva posició entre un grup de germans.</p> + +<div class="warning"> +<p>There is no `:nth-of-type(0)`!</p> + +<p><img alt="" src="https://user-images.githubusercontent.com/18028768/31808818-648a4850-b5a7-11e7-9ba1-421cd3540c7e.png" style="height: 779px; width: 713px;"></p> +</div> + +<pre class="brush: css no-line-numbers language-css">/* <span id="result_box" lang="ca"><span>Selecciona cada quart element <p> entre qualsevol grup de germans</span></span> */ +p:nth-of-type(4n) { + color: lime; +}</pre> + +<h2 id="Sintaxi">Sintaxi</h2> + +<p>La pseudo-class <code>nth-of-type</code> <span id="result_box" lang="ca"><span>s'especifica amb un sol argument, que representa el patró per als elements coincidents.</span></span></p> + +<p>Veure {{Cssxref(":nth-child")}} per obtenir una explicació més detallada de la seva sintaxi.</p> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_bàsic">Exemple bàsic</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div> + <div>This element isn't counted.</div> + <p>First paragraph. (left aligned)</p> + <p>Second paragraph. (right aligned)</p> + <div>This element isn't counted.</div> + <p>Third paragraph. (left aligned)</p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">/* Align odd paragraphs to the left */ +p:nth-of-type(2n+1) { + text-align: left; +} + +/* Align even paragraphs to the right */ +p:nth-of-type(2n) { + text-align: right; +}</pre> + +<h4 id="Resultat">Resultat</h4> + +<p>{{EmbedLiveSample('Basic_example', 250, 200)}}</p> + +<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', '#nth-of-type-pseudo', ':nth-of-type')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td><span id="result_box" lang="ca"><span>No es requereix que els elements coincidents tinguin un pare.</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}</li> +</ul> diff --git a/files/ca/web/css/_colon_only-child/index.html b/files/ca/web/css/_colon_only-child/index.html new file mode 100644 index 0000000000..ed94d4791a --- /dev/null +++ b/files/ca/web/css/_colon_only-child/index.html @@ -0,0 +1,199 @@ +--- +title: ':only-child' +slug: 'Web/CSS/:only-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:only-child' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo classes">pseudo-class </a><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <strong><code>:only-child</code></strong> representa un element sense germans. És el mateix que <code>:first-child:last-child</code> o <code>:nth-child(1):nth-last-child(1)</code>, però amb una menor especificitat.</p> + +<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Selecciona cada <p>, però només si és l'únic fill del seu pare</span></span> */ +p:only-child { + background-color: lime; +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: Com es va definir originalment, l'element seleccionat havia de tenir un pare. A partir dels Selectores Nivell 4, això ja no és necessari.</p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_bàsic">Exemple bàsic</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><main> + <div> + <i>I am a lonely only child.</i> + </div> + + <div> + <i>I have siblings.</i><br> + <b>So do I!</b><br> + <span>I also have siblings, <span>but this is an only child.</span></span> + </div> +</main></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">main :only-child { + color: red; +} +</pre> + +<h4 id="Resultat">Resultat</h4> + +<p>{{EmbedLiveSample('Basic_example','100%',180)}}</p> + +<h3 id="Un_exemple_de_llista"><span class="short_text" id="result_box" lang="ca"><span>Un exemple de llista</span></span></h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><ol> + <li>First + <ul> + <li>This list has just one element. + </ul> + </li> + <li>Second + <ul> + <li>This list has three elements. + <li>This list has three elements. + <li>This list has three elements. + </ul> + </li> +<ol> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">li li { + list-style-type: disc; +} +li:only-child { + color: red; + list-style-type: square; +}</pre> + +<h4 id="Resultat_2">Resultat</h4> + +<p>{{EmbedLiveSample('A_list_example', '100%', 210)}}</p> + +<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', '#only-child-pseudo', ':only-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td><span id="result_box" lang="ca"><span>No es requereix que els elements coincidents tinguin un pare.</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>2</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.8)}}</td> + <td>9</td> + <td>{{CompatOpera(9.5)}}</td> + <td>3.1</td> + </tr> + <tr> + <td>No es requereix cap pare</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(1.8)}}</td> + <td>9</td> + <td>{{CompatOperaMobile(10)}}</td> + <td>3.1</td> + </tr> + <tr> + <td>No es requereix cap pare</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{Cssxref(":only-of-type")}}</li> + <li>{{Cssxref(":first-child")}}</li> + <li>{{Cssxref(":last-child")}}</li> + <li>{{Cssxref(":nth-child")}}</li> +</ul> diff --git a/files/ca/web/css/_colon_only-of-type/index.html b/files/ca/web/css/_colon_only-of-type/index.html new file mode 100644 index 0000000000..55dab9d76a --- /dev/null +++ b/files/ca/web/css/_colon_only-of-type/index.html @@ -0,0 +1,142 @@ +--- +title: ':only-of-type' +slug: 'Web/CSS/:only-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:only-of-type' +--- +<div>{{CSSRef}}</div> + +<p>The <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <strong><code>:only-of-type</code></strong> <span id="result_box" lang="ca"><span>representa un element que no té germans del mateix tipus.</span></span></p> + +<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Selecciona cada <p>, però només si és l'únic element <p> dins del seu pare</span></span> */ +p:only-of-type { + background-color: lime; +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: <span id="result_box" lang="ca"><span class="alt-edited">Com es va definir originalment, l'element seleccionat havia de tenir un pare. A partir dels Selectores Nivell 4, això ja no és necessari.</span></span></p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemple">Exemple</h2> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><main> + <div>I am `div` #1.</div> + <p>I am the only `p` among my siblings.</p> + <div>I am `div` #2.</div> + <div>I am `div` #3. + <i>I am the only `i` child.</i> + <em>I am `em` #1.</em> + <em>I am `em` #2.</em> + </div> +</main> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">main :only-of-type { + color: red; +} +</pre> + +<h4 id="Resultat">Resultat</h4> + +<p>{{EmbedLiveSample('Example','100%',180)}}</p> + +<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', '#only-of-type-pseudo', ':only-of-type')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td><span id="result_box" lang="ca"><span>No es requereix que els elements coincidents tinguin un pare.</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>9.0</td> + <td>10.0</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{Cssxref(":only-child")}}</li> + <li>{{Cssxref(":first-of-type")}}</li> + <li>{{Cssxref(":last-of-type")}}</li> + <li>{{Cssxref(":nth-of-type")}}</li> +</ul> diff --git a/files/ca/web/css/_colon_optional/index.html b/files/ca/web/css/_colon_optional/index.html new file mode 100644 index 0000000000..0437cca6c0 --- /dev/null +++ b/files/ca/web/css/_colon_optional/index.html @@ -0,0 +1,128 @@ +--- +title: ':optional' +slug: 'Web/CSS/:optional' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:optional' +--- +<div>{{ CSSRef }}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class </a><a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:optional</code></strong> representa qualsevol element {{HTMLElement("input")}}, {{HTMLElement("select")}} o {{HTMLElement("textarea")}} que no té l'atribut {{ htmlattrxref("required", "input") }} establert en ell.</p> + +<pre class="brush: css no-line-numbers">/* <span class="short_text" id="result_box" lang="ca"><span>Selecciona qualsevol</span></span> <input> opcional */ +input:optional { + border: 1px dashed black; +}</pre> + +<p>Aquesta pseudo-class és útil per als camps d'estil que no són obligatoris per enviar en un formulari.</p> + +<div class="note"> +<p><strong>Nota:</strong> La pseudo-class {{cssxref(":required")}} selecciona els camps de formulari <em>obligatoris</em>.</p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<p>Veure {{ cssxref(":invalid") }} com exemple.</p> + +<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('HTML WHATWG', '#selector-optional', ':optional') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Sense canvis.</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', '#selector-optional', ':optional') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td><span id="result_box" lang="ca"><span>Defineix la semàntica d'HTML i la validació de restriccions.</span></span></td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':optional') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Sense canvis.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional') }}</td> + <td>{{ Spec2('CSS3 Basic UI') }}</td> + <td><span id="result_box" lang="ca"><span>Defineix</span> <span>la</span> <span>pseudo</span><span>-</span><span>classe,</span> <span>però no</span> <span>la semàntica</span> <span>associada.</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>10.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("2") }}</td> + <td>10</td> + <td>10.0</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>4.4</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("2") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.0</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>Altres pseudo-classes relacionades amb la validació: {{ cssxref(":required") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }}</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Validació de dades del formulari</a></li> +</ul> diff --git a/files/ca/web/css/_colon_out-of-range/index.html b/files/ca/web/css/_colon_out-of-range/index.html new file mode 100644 index 0000000000..797063240d --- /dev/null +++ b/files/ca/web/css/_colon_out-of-range/index.html @@ -0,0 +1,158 @@ +--- +title: ':out-of-range' +slug: 'Web/CSS/:out-of-range' +tags: + - CSS + - Layout + - Pseudo-class + - Web +translation_of: 'Web/CSS/:out-of-range' +--- +<div>{{CSSRef}}</div> + +<p>The <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class </a><a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:out-of-range</code></strong> representa un element {{htmlelement("input")}} el valor actual del qual està fora dels límits de rang especificats pels atributs {{htmlattrxref("min", "input")}} i {{htmlattrxref("max","input")}}.</p> + +<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Selecciona qualsevol</span></span> <input>, <span id="result_box" lang="ca"><span>però només quan té un rang especificat, i el seu valor està fora d'aquest rang</span></span> */ +input:out-of-range { + background-color: rgba(255, 0, 0, 0.25); +}</pre> + +<p>Aquesta pseudo-class és útil per proporcionar a l'usuari una indicació visual de que el valor actual d'un camp està fora dels límits permesos.</p> + +<div class="note"><strong>Nota:</strong> Aquesta pseudo-class només s'aplica als elements que tenen (i poden prendre) una limitació de rang. A falta d'aquesta limitació, l'element no pot ser "dins del rang" ni "fora de rang".</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Exemple</h2> + +<div id="example"> +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form action="" id="form1"> + <ul>Values between 1 and 10 are valid. + <li> + <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> + <label for="value1">Your value is </label> + </li> + </ul> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css;">li { + list-style: none; + margin-bottom: 1em; +} + +input { + border: 1px solid black; +} + +input:in-range { + background-color: rgba(0, 255, 0, 0.25); +} + +input:out-of-range { + background-color: rgba(255, 0, 0, 0.25); + border: 2px solid red; +} + +input:in-range + label::after { + content: 'okay.'; +} + +input:out-of-range + label::after { + content: 'out of range!'; +}</pre> + +<h3 id="Resultat">Resultat</h3> +</div> + +<div>{{EmbedLiveSample('Example', 600, 140)}}</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('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Defineix quan <code>:out-of-range</code> coincideix en elements HTML.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport en <input></td> + <td>10.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>{{CompatNo()}}</td> + <td>11.0</td> + <td>5.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport en <input></td> + <td>2.3</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{cssxref(":in-range")}}</li> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation">Validació de dades del formulari</a></li> +</ul> diff --git a/files/ca/web/css/_colon_placeholder-shown/index.html b/files/ca/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..3c0eeb091b --- /dev/null +++ b/files/ca/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,166 @@ +--- +title: ':placeholder-shown' +slug: 'Web/CSS/:placeholder-shown' +tags: + - CSS + - Experimental + - Pseudo-class + - Reference +translation_of: 'Web/CSS/:placeholder-shown' +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La <a href="/en-US/docs/CSS/Pseudo-classes">pseudo-class </a><a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:placeholder-shown</code></strong> representa qualsevol element {{htmlElement("input")}} o {{htmlElement("textarea")}} que actualment mostra <a href="/en-US/docs/Web/HTML/Element/input#attr-placeholder">text de marcador de posició</a>.</p> + +<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Selecciona qualsevol element amb un marcador de posició actiu</span></span> */ +:placeholder-shown { + border: 2px solid silver; +}</pre> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_bàsic">Exemple bàsic</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><input placeholder="Type something here!"></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css; highlight[6]">input { + border: 2px solid black; + padding: 3px; +} + +input:placeholder-shown { + border-color: silver; +}</pre> + +<h4 id="Resultat">Resultat</h4> + +<p>{{EmbedLiveSample("Basic_example", 200, 60)}}</p> + +<h3 id="Text_desbordat"><span id="result_box" lang="ca"><span>Text desbordat</span></span></h3> + +<p>En pantalles estretes, com ara telèfons intel·ligents, l'amplada de les caixes de cerca i altres camps de formulari es poden reduir dràsticament. Això pot provocar que el text del marcador de posició sigui retallat d'una manera indesitjable. Sovint és útil modificar aquest comportament amb la propietat {{cssxref("text-overflow")}}.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><input placeholder="Enter something into this field, if you please!"></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">input:placeholder-shown { + text-overflow: ellipsis; +}</pre> + +<h4 id="Resultat_2">Resultat</h4> + +<p>{{EmbedLiveSample("Overflowing_text", 200, 60)}}</p> + +<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", "#placeholder", ":placeholder")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">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>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic<br> + (en <code><input type="text"></code>)</td> + <td>{{CompatChrome("47.0")}}</td> + <td>{{CompatGeckoDesktop("51.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>{{CompatOpera("34.0")}}</td> + <td>{{CompatSafari("9.0")}}</td> + </tr> + <tr> + <td>en <code>type="number"</code>, <code>type="time"</code>, i similars</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</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<br> + (en <code><input type="text"></code>)</td> + <td>{{CompatAndroid("51.0")}}</td> + <td>{{CompatGeckoMobile("51.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatSafari("9.2")}}</td> + </tr> + <tr> + <td>en <code>type="number"</code>, <code>type="time"</code>, i similars</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Abans de Gecko 51.0 {{geckoRelease("51.0")}}, Gecko va implementar una pseudo-class prefixada <code>-moz</code> anomenada {{cssxref(":-moz-placeholder")}}, que va ser reemplaçada més tard per un pseudo-element {{cssxref("::-moz-placeholder")}}. La pseudo-class estàndard es va implementar en {{bug("1069012")}}.</p> + +<p>[2] S'ha sol·licitat suport per a aquesta pseudo-class a la <a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/12435951--placeholder-shown-css-pseudo-class">pàgina de comentaris del desenvolupador de Microsoft Edge</a>.</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>El pseudo-element {{cssxref("::placeholder")}} donar estil al marcador de posició <em>a si mateix</em>.</li> + <li><span id="result_box" lang="ca"><span>Elements HTML relacionats</span></span> : {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li> + <li>{{cssxref(":-moz-placeholder")}}, {{cssxref("::-moz-placeholder")}}</li> + <li><a href="/en-US/docs/Learn/HTML/Forms">Formularis HTML</a></li> +</ul> diff --git a/files/ca/web/css/_colon_read-only/index.html b/files/ca/web/css/_colon_read-only/index.html new file mode 100644 index 0000000000..5db61a8b07 --- /dev/null +++ b/files/ca/web/css/_colon_read-only/index.html @@ -0,0 +1,98 @@ +--- +title: ':read-only' +slug: 'Web/CSS/:read-only' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:read-only' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class </a><a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:read-only</code></strong> <span id="result_box" lang="ca"><span>representa un element (com ara una entrada de text bloquejat) que no és editable per l'usuari.</span></span></p> + +<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Selecciona qualsevol element <input> que sigui de només lectura Compatible amb Firefox amb un prefix</span></span> */ +input:-moz-read-only { + background-color: #ccc; +} + +/* <span id="result_box" lang="ca"><span>Compatible amb Blink/WebKit/Edge sense un prefix</span></span> */ +input:read-only { + background-color: #ccc; +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: <span id="result_box" lang="ca"><span>Aquest selector no només selecciona</span></span> {{htmlElement("input")}}s amb {{htmlattrxref("readonly", "input")}} <span id="result_box" lang="ca"><span>establerts en ells;</span> <span>seleccionarà qualsevol element que no pugui ser editat per l'usuari.</span></span></p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input type="text" value="Type whatever you want here."> +<input type="text" value="This is a read-only field." readonly> +<p>This is a normal paragraph.</p> +<p contenteditable="true">You can edit this paragraph!</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input { min-width: 25em; } +input:-moz-read-only { background: cyan; } +input:read-only { background: cyan; } + +p:-moz-read-only { background: lightgray; } +p:read-only { background: lightgray; } +p[contenteditable="true"] { color: blue; } +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 class="editable" id="Specifications" name="Specifications">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('HTML WHATWG', '#selector-read-only', ':read-only') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Sense canvis.</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td><span id="result_box" lang="ca"><span>Defineix la semàntica respecte a l'HTML i la validació de restriccions.</span></span></td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td><span id="result_box" lang="ca"><span>Defineix</span> <span>la</span> <span>pseudo</span><span>-</span><span>classe,</span> <span>però no</span> <span>la semàntica</span> <span>associada.</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Navegadors compatibles</h2> + + + +<p>{{Compat("css.selectors.read-only")}}</p> + +<h2 id="See_also" name="See_also">Vegeu també</h2> + +<ul> + <li>{{cssxref(":read-write")}}</li> + <li>Atribut HTML {{htmlattrxref("contenteditable")}}</li> +</ul> diff --git a/files/ca/web/css/_colon_read-write/index.html b/files/ca/web/css/_colon_read-write/index.html new file mode 100644 index 0000000000..434094c2ef --- /dev/null +++ b/files/ca/web/css/_colon_read-write/index.html @@ -0,0 +1,98 @@ +--- +title: ':read-write' +slug: 'Web/CSS/:read-write' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:read-write' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:read-write</code></strong> <span id="result_box" lang="ca"><span>representa un element (com ara una entrada de text) que l'usuari pot editar.</span></span></p> + +<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Selecciona qualsevol element <input> que sigui editable Compatible amb Firefox amb un prefix</span></span> */ +input:-moz-read-write { + background-color: #bbf; +} + +/* <span id="result_box" lang="ca"><span>Compatible amb Blink / WebKit / Edge sense un prefix</span></span> */ +input:read-write { + background-color: #bbf; +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: Aquest selector no només selecciona el text {{htmlElement("input")}} s; seleccionarà qualsevol element que l'usuari pugui editar, com ara un element {{htmlelement("p")}} amb {{htmlattrxref("contenteditable")}} establert en ell.</p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input type="text" value="Type whatever you want here."> +<input type="text" value="This is a read-only field." readonly> +<p>This is a normal paragraph.</p> +<p contenteditable="true">You can edit this paragraph!</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css line-numbers language-css">input { min-width: 25em; } +input:-moz-read-write { background: cyan; } +input:read-write { background: cyan; } + +p:-moz-read-write { background: lightgray; } +p:read-write { background: lightgray; } +p[contenteditable="true"] { color: blue; } +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 class="editable" id="Specifications" name="Specifications">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('HTML WHATWG', '#selector-read-write', ':read-write') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Sense canvis.</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td><span id="result_box" lang="ca"><span class="alt-edited">Defineix la semàntica respecte a HTML i la validació de restriccions.</span></span></td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td><span id="result_box" lang="ca"><span>Defineix</span> <span>la</span> <span>pseudo</span><span>-</span><span>classe,</span> <span>però no</span> <span>la semàntica</span> <span>associada.</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Navegadors compatibles</h2> + + + +<p>{{Compat("css.selectors.read-write")}}</p> + +<h2 id="See_also" name="See_also">Vegeu també</h2> + +<ul> + <li>{{cssxref(":read-only")}}</li> + <li>Atribut HTML {{htmlattrxref("contenteditable")}}</li> +</ul> diff --git a/files/ca/web/css/_colon_required/index.html b/files/ca/web/css/_colon_required/index.html new file mode 100644 index 0000000000..ee1d7cffc5 --- /dev/null +++ b/files/ca/web/css/_colon_required/index.html @@ -0,0 +1,128 @@ +--- +title: ':required' +slug: 'Web/CSS/:required' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:required' +--- +<div>{{ CSSRef }}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:required</code></strong> representa qulasevol element {{HTMLElement("input")}}, {{HTMLElement("select")}} o {{HTMLElement("textarea")}} que té l'atribut {{ htmlattrxref("required", "input") }} establert en ell.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona qualsevol <input> requerit */ +input:required { + border: 1px dashed red; +}</pre> + +<p>Aquesta pseudo-class és útil per ressaltar els camps que han de tenir dades vàlides abans de poder enviar un formulari.</p> + +<div class="note"> +<p><strong>Nota:</strong> La classe pseudo-class {{cssxref(":optional")}} selecciona camps de formulari opcionals.</p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<p>Veure {{ cssxref(":invalid") }} com exemple.</p> + +<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('HTML WHATWG', '#selector-required', ':required') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Sense canvis.</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', '#selector-required', ':required') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td><span id="result_box" lang="ca"><span>Defineix la semàntica respecte a HTML i la validació de restriccions.</span></span></td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Sense canvis.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required') }}</td> + <td>{{ Spec2('CSS3 Basic UI') }}</td> + <td><span id="result_box" lang="ca"><span>Defineix</span> <span>la</span> <span>pseudo</span><span>-</span><span>classe,</span> <span>però no</span> <span>la semàntica</span> <span>associada.</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>10.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("2") }}</td> + <td>10</td> + <td>10.0</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>4.4.4</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("2") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.0</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>Altres pseudo-classes relacionades amb la validació: {{ cssxref(":optional") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }}</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Validació de dades del formulari</a></li> +</ul> diff --git a/files/ca/web/css/_colon_right/index.html b/files/ca/web/css/_colon_right/index.html new file mode 100644 index 0000000000..c0cfce6475 --- /dev/null +++ b/files/ca/web/css/_colon_right/index.html @@ -0,0 +1,124 @@ +--- +title: ':right' +slug: 'Web/CSS/:right' +tags: + - '@page' + - CSS + - Layout + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:right' +--- +<div>{{ CSSRef() }}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:right</code></strong>, usada amb la <a href="/en-US/docs/Web/CSS/At-rule">regla at</a> {{cssxref("@page")}}, representa totes les pàgines de la dreta d'un document imprès.</p> + +<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Selecciona les pàgines de la dreta quan imprimiu</span></span> */ +@page :right { + margin: 2in 3in; +}</pre> + +<p>Si una pàgina donada és "esquerra" o "dreta" ve determinada per la direcció principal d'escriptura del document. Per exemple, si la primera pàgina té una direcció d'escriptura principal d'esquerra a dreta llavors serà una pàgina <code>:right</code> si té una direcció d'escriptura principal de dreta a esquerra llavors serà una pàgina {{Cssxref(":left")}}.</p> + +<div class="note"> +<p><strong>Note:</strong> No podeu canviar totes les propietats CSS amb aquesta pseudo-class. Només podeu canviar les propietats {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }} i {{ Cssxref("background") }} del quadre de pàgina. S'ignoraran totes les altres propietats i només es veurà afectat el quadre de pàgina, no el contingut del document de la pàgina.</p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">@page :right { + margin: 2in 3in; +} +</pre> + +<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('CSS3 Paged Media', '#left-right-first', ':right') }}</td> + <td>{{ Spec2('CSS3 Paged Media') }}</td> + <td>Sense canvis.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'page.html#page-selectors', ':right') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatNo() }}</td> + <td>8.0</td> + <td>9.2</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{ Cssxref("@page") }}</li> + <li><span class="short_text" id="result_box" lang="ca"><span>Altres pseudo-classes relacionades amb la pàgina</span></span>: {{ Cssxref(":first") }}, {{ Cssxref(":left") }}</li> +</ul> diff --git a/files/ca/web/css/_colon_root/index.html b/files/ca/web/css/_colon_root/index.html new file mode 100644 index 0000000000..072802e541 --- /dev/null +++ b/files/ca/web/css/_colon_root/index.html @@ -0,0 +1,112 @@ +--- +title: ':root' +slug: 'Web/CSS/:root' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:root' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes"> pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:root</code></strong> coincideix amb l'element arrel de l'arbre que representa el document. En HTML, <code>:root</code> representa l'element {{HTMLElement("html")}} i és idèntic al selector <code>html</code>, excepte que la seva <a href="/en-US/docs/Web/CSS/specificity">Especificitat</a> és més alta.</p> + +<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Selecciona l'element arrel del document: <html> en el cas de l'HTML</span></span> */ +:root { + background: yellow; +}</pre> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemple">Exemple</h2> + +<p>El ùs de <code>:root</code> pot ser útil per declarar <a href="/en-US/docs/Web/CSS/Using_CSS_variables">Variables CSS</a> globals:</p> + +<pre class="brush: css">:root { + --main-color: hotpink; + --pane-padding: 5px 42px; +} +</pre> + +<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', '#root-pseudo', ':root')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Sense canvis.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>9</td> + <td>9.5</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> 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> diff --git a/files/ca/web/css/_colon_target/index.html b/files/ca/web/css/_colon_target/index.html new file mode 100644 index 0000000000..07c4b7c27e --- /dev/null +++ b/files/ca/web/css/_colon_target/index.html @@ -0,0 +1,260 @@ +--- +title: ':target' +slug: 'Web/CSS/:target' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:target' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:target</code></strong> <span id="result_box" lang="ca"><span>representa un element únic</span></span> (l'<em>element destinació</em>) amb un {{htmlattrxref("id")}} que coincideix amb el fragment de l'URL.</p> + +<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Selecciona un element amb una ID que coincideixi amb el fragment de l'URL actual</span></span> */ +:target { + border: 2px solid black; +}</pre> + +<p>Per exemple, la següent URL té un fragment (indicat pel signe #) que apunta a un element anomenat <code>section2</code>:</p> + +<pre>http://www.example.com/index.html#section2</pre> + +<p>El següent element es seleccionaria amb un selector <code>:target</code> quan l'URL actual fora igual a l'anterior:</p> + +<pre class="brush: html"><section id="section2">Example</section></pre> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Una_taula_de_continguts"><span id="result_box" lang="ca"><span>Una taula de continguts</span></span></h3> + +<p>La pseudo-class <code>:target</code> es pot utilitzar per ressaltar la part d'una pàgina a la qual s'ha enllaçat des d'una taula de continguts.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><h3>Table of Contents</h3> +<ol> + <li><a href="#p1">Jump to the first paragraph!</a></li> + <li><a href="#p2">Jump to the second paragraph!</a></li> + <li><a href="#nowhere">This link goes nowhere, + because the target doesn't exist.</a></li> +</ol> + +<h3>My Fun Article</h3> +<p id="p1">You can target <i>this paragraph</i> using a + URL fragment. Click on the link above to try out!</p> +<p id="p2">This is <i>another paragraph</i>, also accessible + from the links above. Isn't that delightful?</p> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">p:target { + background-color: gold; +} + +/* Add a pseudo-element inside the target element */ +p:target::before { + font: 70% sans-serif; + content: "►"; + color: limegreen; + margin-right: .25em; +} + +/* Style italic elements within the target element */ +p:target i { + color: red; +}</pre> + +<h4 id="Resultat">Resultat</h4> + +<p>{{EmbedLiveSample('A_table_of_contents', 500, 300)}}</p> + +<h3 id="Pur-CSS_lightbox">Pur-CSS lightbox</h3> + +<p>Podeu utilitzar la pseudo-class <code>:target</code> per crear una caixa de llum ( lightbox) sense utilitzar JavaScript. Aquesta tècnica es basa en la capacitat dels enllaços d'ancoratge per apuntar a elements que estan inicialment ocults a la pàgina. Una vegada seleccionats, el CSS canvia el <code>display</code> perquè es mostrin.</p> + +<div class="note"><strong>Nota:</strong> Podeu obtenir una caixa de llum (lightbox) més completa en pur CSS, basat en la pseudo-class <code>:target</code>, <a href="https://github.com/madmurphy/takefive.css/">disponible en GitHub</a> (<a href="https://madmurphy.github.io/takefive.css/">demo</a>).</div> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><ul> + <li><a href="#example1">Open example #1</a></li> + <li><a href="#example2">Open example #2</a></li> +</ul> + +<div class="lightbox" id="example1"> + <figure> + <a href="#" class="close"></a> + <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption> + </figure> +</div> + +<div class="lightbox" id="example2"> + <figure> + <a href="#" class="close"></a> + <figcaption>Cras risus odio, pharetra nec ultricies et, + mollis ac augue. Nunc et diam quis sapien dignissim auctor. + Quisque quis neque arcu, nec gravida magna.</figcaption> + </figure> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">/* Unopened lightbox */ +.lightbox { + display: none; +} + +/* Opened lightbox */ +.lightbox:target { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +/* Lightbox content */ +.lightbox figcaption { + width: 25rem; + position: relative; + padding: 1.5em; + background-color: lightpink; +} + +/* Close button */ +.lightbox .close { + position: relative; + display: block; +} + +.lightbox .close::after { + right: -1rem; + top: -1rem; + width: 2rem; + height: 2rem; + position: absolute; + display: flex; + z-index: 1; + align-items: center; + justify-content: center; + background-color: black; + border-radius: 50%; + color: white; + content: "×"; + cursor: pointer; +} + +/* Lightbox overlay */ +.lightbox .close::before { + left: 0; + top: 0; + width: 100%; + height: 100%; + position: fixed; + background-color: rgba(0,0,0,.7); + content: ""; + cursor: default; +}</pre> + +<h4 id="Resultat_2">Resultat</h4> + +<p>{{EmbedLiveSample('Pure-CSS_lightbox', 500, 220)}}</p> + +<h2 id="Especificacions">Especificacions</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificació</th> + <th scope="col">Estat</th> + <th scope="col">Comentari</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Defineix la semàntica específica d'HTML.</td> + </tr> + <tr> + <td>{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Sense canvis.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>9</td> + <td>9.5</td> + <td>1.3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.7 or earlier")}}</td> + <td>9.0</td> + <td>9.5</td> + <td>2.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li><a href="/en-US/docs/Using_the_:target_selector">Usant la pseudo-classe :target en selectors</a></li> +</ul> diff --git a/files/ca/web/css/_colon_valid/index.html b/files/ca/web/css/_colon_valid/index.html new file mode 100644 index 0000000000..4bea8abf18 --- /dev/null +++ b/files/ca/web/css/_colon_valid/index.html @@ -0,0 +1,74 @@ +--- +title: ':valid' +slug: 'Web/CSS/:valid' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:valid' +--- +<div>{{CSSRef}}</div> + +<p>The <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:valid</code></strong> representa qualsevol element {{HTMLElement("input")}} o altre {{HTMLElement("form")}} el contingut del qual es <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">valida</a> correctament. Això permet fer, fàcilment, que els camps vàlids adoptin una aparença que ajudi a l'usuari a confirmar que les seves dades estan formatades correctament.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona qualsevol <input> vàlid */ +input:valid { + background-color: powderblue; +}</pre> + +<p>Aquesta pseudo-class és útil per ressaltar els camps correctes per a l'usuari.</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<p>Vegeu {{cssxref(":invalid")}} com exemple.</p> + +<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('HTML WHATWG', '#selector-valid', ':valid')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Cap canvi.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-valid', ':valid')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><span id="result_box" lang="ca"><span>Defineix la semàntica respecte a l'HTML i la validació de restriccions.</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#validity-pseudos', ':valid')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<div> + + +<p>{{Compat("css.selectors.valid")}}</p> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>Altres pseudo-classes relacionades amb la validació : {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":invalid") }}</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Validació de dades del formulari</a></li> +</ul> diff --git a/files/ca/web/css/_colon_visited/index.html b/files/ca/web/css/_colon_visited/index.html new file mode 100644 index 0000000000..00b61c6301 --- /dev/null +++ b/files/ca/web/css/_colon_visited/index.html @@ -0,0 +1,178 @@ +--- +title: ':visited' +slug: 'Web/CSS/:visited' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:visited' +--- +<div>{{ CSSRef }}</div> + +<p>La <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:visited</code></strong> <span id="result_box" lang="ca"><span>representa enllaços que l'usuari ja ha visitat.</span> <span>Per motius de privadesa, els estils que es poden modificar utilitzant aquest selector són molt limitats</span></span></p> + +<pre class="brush: css no-line-numbers">/* <span class="short_text" id="result_box" lang="ca"><span>Selecciona qualsevol <a> que s'hagi visitat</span></span> */ +a:visited { + color: green; +}</pre> + +<p>Els estils definits per la pseudo-class <code>:visited</code> seran anul·lats per qualsevol pseudo-class posterior relacionada amb l'enllaç ({{cssxref(":link")}}, {{cssxref(":hover")}} o {{cssxref(":active")}}) que té com a mínim la mateixa especificitat. Per donar-li un estil apropiat als enllaços, col·loqueu la regla <code>:visited</code> després de la regla <code>:link</code> però abans de <code>:hover</code> i <code>:active</code>, tal com ho defineix l'<em>ordre</em> <em>LVHA</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> + +<h2 id="Restriccions_d'estil">Restriccions d'estil</h2> + +<p>Per motius de privadesa, els navegadors limiten estrictament quins són els estils que es podem aplicar mitjançant aquesta pseudo-class, i com es poden utilitzar:</p> + +<ul> + <li>Les propietats CSS permeses són {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("column-rule-color") }} i {{ cssxref("outline-color") }}.</li> + <li>Els atributs SVG permesos són {{SVGAttr("fill")}} i {{SVGAttr("stroke")}}.</li> + <li>El component alfa dels estils permesos serà ignorat. En el seu lloc, s'usarà el component alfa de l'estat no <code>:visited</code> de l'element, excepte quan aquest component és <code>0</code>, en aquest cas l'estil establert a <code>:visited</code> serà ignorat completament</li> + <li>Encara que aquests estils poden canviar l'aparença de colors a l'usuari final, el mètode {{domxref ("window.getComputedStyle")}} mentirà i sempre retornarà el valor del color no <code>:visited</code>.</li> +</ul> + +<div class="note"> +<p><strong>Nota:</strong> Per obtenir més informació sobre aquestes limitacions i els motius que hi ha darrere, consulteu <a href="/en-US/docs/CSS/Privacy_and_the_:visited_selector" title="/en-US/docs/CSS/Privacy_and_the_:visited_selector">Privadesa i el selector :visited</a>.</p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemple">Exemple</h2> + +<p>Les propietats que d'altra manera no tindrien color o serien transparents no es poden modificar amb <code>:visited</code>. De les propietats que es poden establir amb aquesta pseudo-class, probablement el vostre navegador tingui un valor predeterminat només per <code>color</code> i <code>column-rule-color</code>. Per tant, si voleu modificar les altres propietats, haureu de donar-los un valor base fora del selector <code>:visited</code>.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><a href="#test-visited-link">Have you visited this link yet?</a><br> +<a href="">You've already visited this link.</a></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">a { + /* Specify non-transparent defaults to certain properties, + allowing them to be styled with the :visited state */ + background-color: white; + border: 1px solid white; +} + +a:visited { + background-color: yellow; + border-color: hotpink; + color: hotpink; +}</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<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('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#link', ':visited') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Cap canvi.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#link', ':visited') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Cap canvi.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Aixeca la restricció per aplicar solament <code>:visited</code> a l'element {{HTMLElement ("a")}}. Permet als navegadors restringir el seu comportament per raons de privadesa.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}</td> + <td>{{ Spec2('CSS1') }}</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("1.0") }}</td> + <td>3.5</td> + <td>3.5</td> + <td>1.0</td> + </tr> + <tr> + <td>Restriccions en les propietats CSS permeses en una declaració usant <code>:visited</code></td> + <td>6</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0") }}</td> + <td>8 (or earlier)</td> + <td>{{ CompatUnknown() }}</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>4.4</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>11</td> + <td>37</td> + <td>9.3</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Privacy_and_the_:visited_selector" title="/en-US/docs/CSS/Privacy_and_the_:visited_selector">Privacitat i selector :visited</a></li> + <li>Enllaços relacionats amb les pseudo-classes: {{cssxref(":link")}}, {{cssxref(":active")}} i {{cssxref(":hover")}}.</li> +</ul> diff --git a/files/ca/web/css/_doublecolon_-moz-progress-bar/index.html b/files/ca/web/css/_doublecolon_-moz-progress-bar/index.html new file mode 100644 index 0000000000..579c5d5934 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-moz-progress-bar/index.html @@ -0,0 +1,55 @@ +--- +title: '::-moz-progress-bar' +slug: 'Web/CSS/::-moz-progress-bar' +tags: + - CSS + - 'CSS:Mozilla Extensions' + - NeedsCompatTable + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-moz-progress-bar' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>El <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>::-moz-progress-bar</code></strong> és una <a href="/en-US/docs/Web/CSS/Mozilla_Extensions">estensió de Mozilla</a> que representa la barra de progrés dins d'un element {{HTMLElement("progress")}}. (La barra representa la quantitat de progrés que s'ha realitzat).</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html;"><progress value="30" max="100">30%</progress> +<progress max="100">Indeterminate</progress></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">::-moz-progress-bar { + background-color: red; +} + +/* Force indeterminate bars to have zero width */ +:indeterminate::-moz-progress-bar { + width: 0; +}</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Examples')}}</p> + +<p><span class="short_text" id="result_box" lang="ca"><span>La primera barra des de dalt hauria de ser aix</span></span>í:</p> + +<p><img alt="Custom styled progress bar" class="default internal" src="/@api/deki/files/5387/=redbar.png"></p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{HTMLElement("progress")}}</li> + <li>{{ cssxref("::-ms-fill") }}</li> + <li>{{ cssxref("::-webkit-progress-bar") }}</li> + <li>{{ cssxref("::-webkit-progress-value") }}</li> + <li>{{ cssxref("::-webkit-progress-inner-element") }}</li> +</ul> diff --git a/files/ca/web/css/_doublecolon_-moz-range-progress/index.html b/files/ca/web/css/_doublecolon_-moz-range-progress/index.html new file mode 100644 index 0000000000..517f19e1fd --- /dev/null +++ b/files/ca/web/css/_doublecolon_-moz-range-progress/index.html @@ -0,0 +1,117 @@ +--- +title: '::-moz-range-progress' +slug: 'Web/CSS/::-moz-range-progress' +tags: + - CSS + - 'CSS:Mozilla Extensions' + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-moz-range-progress' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>El <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>::-moz-range-progress</code></strong> és una <a href="/en-US/docs/Web/CSS/Mozilla_Extensions">extensió de Mozilla</a>, que representa la part inferior de la pista (és a dir, la ranura) en la qual l'indicador es llisca en un {{HTMLElement("input")}} de <code>type="range"</code>. Aquesta part correspon a valors inferiors al valor actualment seleccionat pel <em>polze</em> (és a dir, botó virtual).</p> + +<div class="note"> +<p><strong>Nota:</strong> L'ùs de <code>::-moz-range-progress</code> amb qualsevol cosa que no sigui <code><input type="range"></code> no coincideix amb res i no té cap efecte.</p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input type="range" min="0" max="100" step="5" value="50"/> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input[type=range]::-moz-range-progress { + background-color: green; + height: 1em; +} +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample("Example", 300, 50)}}</p> + +<p><span id="result_box" lang="ca"><span>Una barra de progrés que utilitzi aquest estil pot semblar una cosa així:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12041/Screen%20Shot%202015-12-04%20at%2020.14.48.png"></p> + +<h2 id="Especificacions">Especificacions</h2> + +<p>No forma part de cap especificació. Es tracta d'un pseudo-element propietari, específic en Gecko.</p> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</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>Descripció</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>Pseudo-elements utilitzats per Gecko per dissenyar altres parts d'un interval d'entrada: + <ul> + <li>{{cssxref("::-moz-range-thumb")}} representa l'indicador que es llisca a la ranura.</li> + <li>{{cssxref("::-moz-range-track")}} representa la ranura en què es llisca el polze.</li> + </ul> + </li> + <li>Pseudo-elements similars utilitzats per altres navegadors: + <ul> + <li>{{cssxref("::-ms-fill-upper")}}, pseudo-element compatible amb Internet Explorer i Edge.</li> + </ul> + </li> + <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">Trucs CSS: </a> <a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">Estil de les entrades de rang compatible entre navegadors amb CSS</a>.</li> + <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Controls lliscants disseny i scripts</a>.</li> +</ul> diff --git a/files/ca/web/css/_doublecolon_-moz-range-thumb/index.html b/files/ca/web/css/_doublecolon_-moz-range-thumb/index.html new file mode 100644 index 0000000000..dfbfb9f162 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-moz-range-thumb/index.html @@ -0,0 +1,117 @@ +--- +title: '::-moz-range-thumb' +slug: 'Web/CSS/::-moz-range-thumb' +tags: + - CSS + - 'CSS:Mozilla Extensions' + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-moz-range-thumb' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>El <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>::-moz-range-thumb</code></strong> es una <a href="/en-US/docs/Web/CSS/Mozilla_Extensions">extensió de Mozilla</a> que representa el <em>polze</em> (és a dir, botó virtual) d'un {{HTMLElement("input")}} de <code>type="range"</code>. L'usuari pot moure el polze al llarg de la pista d'entrada per canviar el seu valor numèric.</p> + +<div class="note"> +<p><strong>Nota:</strong> L'ùs <code>::-moz-range-thumb</code> amb qualsevol cosa que no sigui <code><input type="range"></code> no coincideix amb res i no té cap efecte.</p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input type="range" min="0" max="100" step="5" value="50"/> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input[type=range]::-moz-range-thumb { + background-color: green; +} +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample("Example", 300, 50)}}</p> + +<p><span id="result_box" lang="ca"><span>Una barra de progrés que utilitzi aquest estil pot semblar una cosa així</span></span></p> + +<p><img alt="The thumb of the <input type=right> styled in green" src="https://mdn.mozillademos.org/files/12027/Screen%20Shot%202015-12-04%20at%2013.30.08.png"></p> + +<h2 id="Especificacions">Especificacions</h2> + +<p>No forma part de cap especificació. Es tracta d'un pseudo-element propietari, específic en Gecko.</p> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</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>Descripció</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>Pseudo-elements utilitzats per Gecko per dissenyar altres parts d'un interval d'entrada: + <ul> + <li>{{cssxref("::-moz-range-track")}} representa la ranura en què es llisca el polze.</li> + <li>{{cssxref("::-moz-range-progress")}} <span class="short_text" id="result_box" lang="ca"><span>representa la part inferior de la pista.</span></span></li> + </ul> + </li> + <li><span id="result_box" lang="ca"><span>Pseudo-elements similars utilitzats per altres navegadors</span></span>: + <ul> + <li>{{cssxref("::-webkit-slider-thumb")}}, <span id="result_box" lang="ca"><span>pseudo-element compatible amb</span></span> WebKit i Blink (Safari, Chrome i Opera).</li> + <li>{{cssxref("::-ms-thumb")}}, <span id="result_box" lang="ca"><span>pseudo-element compatible amb</span></span> Internet Explorer i Edge.</li> + </ul> + </li> + <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">Trucs CSS: Estil de les entrades de rang compatible entre navegadors amb CSS.</a></li> + <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Controls lliscants disseny i scripts.</a></li> +</ul> diff --git a/files/ca/web/css/_doublecolon_-moz-range-track/index.html b/files/ca/web/css/_doublecolon_-moz-range-track/index.html new file mode 100644 index 0000000000..41ad08a697 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-moz-range-track/index.html @@ -0,0 +1,117 @@ +--- +title: '::-moz-range-track' +slug: 'Web/CSS/::-moz-range-track' +tags: + - CSS + - 'CSS:Mozilla Extensions' + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-moz-range-track' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>The <a href="/en-US/docs/Web/CSS/Pseudo-elements" title="en/CSS/Pseudo-elements">pseudo-element</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>::-moz-range-track</code></strong> és una <a href="/en-US/docs/Web/CSS/Mozilla_Extensions">extensió de Mozilla</a> <span id="result_box" lang="ca"><span>que representa la <em>pista</em> (és a dir, la ranura) en què l'indicador es llisca en un</span></span> {{HTMLElement("input")}} de <code>type="range"</code>.</p> + +<div class="note"> +<p><strong>Nota:</strong> L'ùs de <code>::-moz-range-track</code> amb qualsevol cosa que no sigui <code><input type="range"></code> no coincideix amb res i no té cap efecte.</p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input type="range" min="0" max="100" step="5" value="50"/> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input[type=range]::-moz-range-track { + background-color: green; +} +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample("Example", 300, 50)}}</p> + +<p><span id="result_box" lang="ca"><span>Una barra de progrés que utilitzi aquest estil pot semblar una cosa així:</span></span></p> + +<p><img alt="A range with the track green." src="https://mdn.mozillademos.org/files/11999/Screen%20Shot%202015-12-04%20at%2010.14.34.png"></p> + +<h2 id="Especificacions">Especificacions</h2> + +<p>No forma part de cap especificació. Es tracta d'un pseudo-element propietari, específic en Gecko.</p> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</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>Descripció</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>Pseudo-elements utilitzats per Gecko per dissenyar altres parts d'un interval d'entrada: + <ul> + <li>{{cssxref("::-moz-range-thumb")}} representa l'indicador que es llisca a la ranura.</li> + <li>{{cssxref("::-moz-range-progress")}} <span class="short_text" id="result_box" lang="ca"><span>representa la part inferior de la pista.</span></span></li> + </ul> + </li> + <li><span id="result_box" lang="ca"><span>Pseudo-elements similars utilitzats per altres navegadors</span></span>: + <ul> + <li>{{cssxref("::-webkit-slider-runnable-track")}}, <span id="result_box" lang="ca"><span>pseudo-element compatible amb</span></span> WebKit i Blink (Safari, Chrome, and Opera)</li> + <li>{{cssxref("::-ms-track")}}, <span id="result_box" lang="ca"><span>pseudo-element compatible amb</span></span> Internet Explorer i Edge</li> + </ul> + </li> + <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">Trucs CSS: Estil de les entrades de rang compatible entre navegadors amb CSS.</a></li> + <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Controls lliscants disseny i scripts.</a></li> +</ul> diff --git a/files/ca/web/css/_doublecolon_-ms-fill-lower/index.html b/files/ca/web/css/_doublecolon_-ms-fill-lower/index.html new file mode 100644 index 0000000000..f7f8896483 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-ms-fill-lower/index.html @@ -0,0 +1,91 @@ +--- +title: '::-ms-fill-lower' +slug: 'Web/CSS/::-ms-fill-lower' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-fill-lower' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>El <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>::-ms-fill-lower</code></strong> representa la part de la "pista" (la ranura en la qual llisca l'indicador denominat polze) d'un {{HTMLElement("input")}} de <code>type="range"</code>, que correspon a valors inferiors al valor actualment seleccionat per el polze.</p> + +<h2 id="Especificacions">Especificacions</h2> + +<p>No forma part de cap especificació.</p> + +<p>Microsoft té una <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465745.aspx">descripció en MSDN</a>.</p> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>Edge</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>Pseudo-elements utilitzats per l'IE / Edge per donar estil altres parts d'un rang d'entrada: + <ul> + <li>{{cssxref("::-ms-fill-upper")}}</li> + <li>{{cssxref("::-ms-track")}}</li> + <li>{{cssxref("::-ms-thumb")}}</li> + </ul> + </li> + <li>{{cssxref("::-moz-range-progress")}}</li> + <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">Trucs CSS: Estil de les entrades de rang compatible entre navegadors amb CSS.</a></li> + <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Controls lliscants disseny i scripts.</a></li> +</ul> diff --git a/files/ca/web/css/_doublecolon_-ms-fill-upper/index.html b/files/ca/web/css/_doublecolon_-ms-fill-upper/index.html new file mode 100644 index 0000000000..eb28ffc2db --- /dev/null +++ b/files/ca/web/css/_doublecolon_-ms-fill-upper/index.html @@ -0,0 +1,91 @@ +--- +title: '::-ms-fill-upper' +slug: 'Web/CSS/::-ms-fill-upper' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-fill-upper' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>El <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>::-ms-fill-upper</code></strong> representa la part de la "pista" (la ranura en la qual llisca l'indicador denominat polze) d'un {{HTMLElement("input")}} de <code>type="range"</code> , que correspon a valors superiors al valor actualment seleccionat per el polze.</p> + +<h2 id="Especificacions">Especificacions</h2> + +<p>No forma part de cap especificació.</p> + +<p>Microsoft té una <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465745.aspx">descripció en MSDN</a>.</p> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>Edge</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>Pseudo-elements utilitzats per l'IE / Edge per donar estil altres parts d'un rang d'entrada: + <ul> + <li>{{cssxref("::-ms-fill-lower")}}</li> + <li>{{cssxref("::-ms-track")}}</li> + <li>{{cssxref("::-ms-thumb")}}</li> + </ul> + </li> + <li>{{cssxref("::-moz-range-progress")}}</li> + <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">Trucs CSS: Estil de les entrades de rang compatible entre navegadors amb CSS.</a></li> + <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Controls lliscants disseny i scripts.</a></li> +</ul> diff --git a/files/ca/web/css/_doublecolon_-ms-fill/index.html b/files/ca/web/css/_doublecolon_-ms-fill/index.html new file mode 100644 index 0000000000..1377611a03 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-ms-fill/index.html @@ -0,0 +1,108 @@ +--- +title: '::-ms-fill' +slug: 'Web/CSS/::-ms-fill' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-fill' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>El<a href="/en-US/docs/Web/CSS/Pseudo-elements" title="en/CSS/Pseudo-elements"> pseudo-element</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <strong><code>::-ms-fill</code></strong> representa la porció emplenada d'un element {{HTMLElement("progress")}}. Aquest pseudo-element no és estàndard i específic de Internet Explorer 10+, d'aquí el prefix del proveidor.</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Especificacions">Especificacions</h2> + +<p>No forma part de cap especificació. Microsoft té una <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465757.aspx">descripció en MSDN</a>.</p> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><progress value="10" max="50"> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">progress::-ms-fill { + background-color: orange; +}</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample("Example", 300, 50)}}</p> + +<p><span id="result_box" lang="ca"><span>Una barra de progrés que utilitzi aquest estil pot semblar una cosa així</span></span>:</p> + +<p><img alt="Progress Bar with Orange Fill" src="https://mdn.mozillademos.org/files/13484/progress_bar.png" style="height: 44px; width: 308px;"></p> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>10.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{ cssxref("::-moz-progress-bar") }}</li> + <li>{{ cssxref("::-webkit-progress-bar") }}</li> + <li>{{ cssxref("::-webkit-progress-value") }}</li> + <li>{{ cssxref("::-webkit-progress-inner-element") }} + <ul> + </ul> + </li> +</ul> diff --git a/files/ca/web/css/_doublecolon_-ms-thumb/index.html b/files/ca/web/css/_doublecolon_-ms-thumb/index.html new file mode 100644 index 0000000000..fb3bd8e4e5 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-ms-thumb/index.html @@ -0,0 +1,41 @@ +--- +title: '::-ms-thumb' +slug: 'Web/CSS/::-ms-thumb' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-thumb' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>El <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <strong><code>::-ms-thumb</code></strong> representa el "polze" que l'usuari pot moure dins de la "ranura" d'un {{HTMLElement("input")}} de type="range" per modificar el seu valor numèric.</p> + +<h2 id="Especificacions">Especificacions</h2> + +<p><span id="result_box" lang="ca"><span>No forma</span> <span>part de cap</span> <span>especificació,</span> <span>encara que Microsoft</span> <span>té</span> una</span> <a href="https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465780.aspx">descripció en MSDN</a>.</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>Els pseudo-elements utilitzats per l'IE / Edge per donar estil altres parts d'un rang d'entrada: + <ul> + <li>{{cssxref("::-ms-track")}}</li> + <li>{{cssxref("::-ms-fill-upper")}}</li> + <li>{{cssxref("::-ms-fill-lower")}}</li> + </ul> + </li> + <li><span id="result_box" lang="ca"><span>Pseudo</span><span>-</span><span>elements</span> <span>similars</span> <span>utilitzats per altres</span> <span>navegadors</span><span>:</span></span> + <ul> + <li>{{cssxref("::-webkit-slider-thumb")}}</li> + <li>{{cssxref("::-moz-range-thumb")}}</li> + </ul> + </li> + <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">Trucs CSS: Estil de les entrades de rang compatible entre navegadors amb CSS.</a></li> + <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Controls lliscants disseny i scripts.</a></li> +</ul> diff --git a/files/ca/web/css/_doublecolon_-ms-track/index.html b/files/ca/web/css/_doublecolon_-ms-track/index.html new file mode 100644 index 0000000000..799efce737 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-ms-track/index.html @@ -0,0 +1,45 @@ +--- +title: '::-ms-track' +slug: 'Web/CSS/::-ms-track' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-track' +--- +<div>{{ CSSRef() }}</div> + +<p>{{ Non-standard_header() }}</p> + +<p>El<a href="/en/CSS/Pseudo-elements" title="en/CSS/Pseudo-elements"> pseudo-element</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <strong><code>::-ms-track</code></strong> representa la "pista" (la ranura en la qual llisca l'indicador) d'un {{HTMLElement("input")}} de <code>type="range"</code>.</p> + +<h2 id="Specification" name="Specification">Especificacions</h2> + +<p><span id="result_box" lang="ca"><span>No forma</span> <span>part de cap</span> <span>especificació</span></span>.</p> + +<p><span id="result_box" lang="ca"><span>Microsoft</span> <span>té</span> una</span> <a href="https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465780.aspx">descripció en MSDN</a> .</p> + +<h2 id="See_also" name="See_also">Vegeu també</h2> + +<ul> + <li>Els pseudo-elements utilitzats per l'IE / Edge per donar estil altres parts d'un rang d'entrada + <ul> + <li>{{cssxref("::-ms-thumb")}}</li> + <li>{{cssxref("::-ms-fill-upper")}}</li> + <li>{{cssxref("::-ms-fill-lower")}}</li> + </ul> + </li> + <li><span id="result_box" lang="ca"><span>Pseudo</span><span>-</span><span>elements</span> <span>similars</span> <span>utilitzats per altres</span> <span>navegadors</span><span>:</span></span> + <ul> + <li>{{cssxref("::-webkit-slider-runnable-track")}}</li> + <li>{{cssxref("::-moz-range-track")}}</li> + </ul> + </li> + <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">Trucs CSS: Estil de les entrades de rang compatible entre navegadors amb CSS.</a></li> + <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Controls lliscants disseny i scripts.</a></li> +</ul> diff --git a/files/ca/web/css/_doublecolon_-webkit-progress-bar/index.html b/files/ca/web/css/_doublecolon_-webkit-progress-bar/index.html new file mode 100644 index 0000000000..fc18f805e2 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-webkit-progress-bar/index.html @@ -0,0 +1,110 @@ +--- +title: '::-webkit-progress-bar' +slug: 'Web/CSS/::-webkit-progress-bar' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-webkit-progress-bar' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>El <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>::-webkit-progress-bar</code></strong> representa la barra sencere d'un element {{HTMLElement("progress")}}. Normalment només és visible la part no emplenada de la barra, ja que de forma predeterminada es processa a continuació el pseudo-element {{ cssxref("::-webkit-progress-value") }}. És un fill del pseudo-element {{cssxref("::-webkit-progress-inner-element")}} i el pare del pseudo-element {{cssxref("::-webkit-progress-value")}}.</p> + +<div class="note"> +<p><strong>Nota:</strong> Perquè <code>::-webkit-progress-value</code> tingui efecte, {{cssxref("-webkit-appearance")}} <span id="result_box" lang="ca"><span>s'ha d'establir a</span></span> <code>none</code> en l'element <code><progress></code>.</p> +</div> + +<h2 id="Especificacions">Especificacions</h2> + +<p>No forma part de cap especificació. Es tracta d'un pseudo-element propietari, específic en WebKit/Blink.</p> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="Contingut_CSS">Contingut CSS</h3> + +<pre class="brush: css">progress { + -webkit-appearance: none; +} + +::-webkit-progress-bar { + background-color: orange; +} +</pre> + +<h3 id="Contingut_HTML">Contingut HTML</h3> + +<pre class="brush: html"><progress value="10" max="50"> +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample("Example", 200, 50)}}</p> + +<p><span id="result_box" lang="ca"><span>Una barra de progrés que utilitzi aquest estil pot semblar una cosa així</span></span> :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13488/progress-bar.png" style="height: 43px; width: 194px;"></p> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>Pseudo-elements utilitzats per WebKit/Blink per donar estil a altres parts d'un element {{HTMLElement("progress")}}: + <ul> + <li>{{ cssxref("::-webkit-progress-value") }}</li> + <li>{{ cssxref("::-webkit-progress-inner-element") }}</li> + </ul> + </li> + <li>{{ cssxref("::-moz-progress-bar") }}</li> + <li>{{ cssxref("::-ms-fill") }}</li> +</ul> diff --git a/files/ca/web/css/_doublecolon_-webkit-progress-value/index.html b/files/ca/web/css/_doublecolon_-webkit-progress-value/index.html new file mode 100644 index 0000000000..95235bb4cc --- /dev/null +++ b/files/ca/web/css/_doublecolon_-webkit-progress-value/index.html @@ -0,0 +1,109 @@ +--- +title: '::-webkit-progress-value' +slug: 'Web/CSS/::-webkit-progress-value' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-webkit-progress-value' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>El <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>::-webkit-progress-value</code></strong> representa la part emplenada de la barra d'un element {{HTMLElement("progress")}}. És un fill del pseudo-element {{cssxref("::-webkit-progress-bar")}}.</p> + +<div class="note"> +<p><strong>Nota:</strong> Per tal de permetre que <code>::-webkit-progress-value</code> tingui efecte, {{cssxref("-webkit-appearance")}} necessita ser ajustat a none en l'element <code><progress></code>.</p> +</div> + +<h2 id="Especificacions">Especificacions</h2> + +<p>No forma part de cap especificació. Es tracta d'un pseudo-element propietari, específic en WebKit/Blink.</p> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><progress value="10" max="50"> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">progress { + -webkit-appearance: none; +} + +::-webkit-progress-value { + background-color: orange; +}</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample("Example", 200, 50)}}</p> + +<p><span id="result_box" lang="ca"><span>Una barra de progrés que utilitzi aquest estil pot semblar una cosa així</span></span> :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13490/progress-value.png" style="height: 60px; width: 249px;"></p> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>Els pseudo-elements utilitzats per WebKit/Blink per donar estil a altres parts d'un element {{HTMLElement("progress")}}: + <ul> + <li>{{ cssxref("::-webkit-progress-bar") }}</li> + <li>{{ cssxref("::-webkit-progress-inner-element") }}</li> + </ul> + </li> + <li>{{ cssxref("::-moz-progress-bar") }}</li> + <li>{{ cssxref("::-ms-fill") }}</li> +</ul> diff --git a/files/ca/web/css/_doublecolon_-webkit-slider-runnable-track/index.html b/files/ca/web/css/_doublecolon_-webkit-slider-runnable-track/index.html new file mode 100644 index 0000000000..e6797248cf --- /dev/null +++ b/files/ca/web/css/_doublecolon_-webkit-slider-runnable-track/index.html @@ -0,0 +1,35 @@ +--- +title: '::-webkit-slider-runnable-track' +slug: 'Web/CSS/::-webkit-slider-runnable-track' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-webkit-slider-runnable-track' +--- +<div>{{ CSSRef() }} {{ Non-standard_header() }}</div> + +<p>El <a href="/en/CSS/Pseudo-elements" title="en/CSS/Pseudo-elements">pseudo-element</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <strong><code>::-webkit-slider-runnable-track</code></strong> representa la "pista" (la ranura en la qual llisca l'indicador) d'un {{HTMLElement("input")}} de<code> type="range"</code>.</p> + +<h2 id="Specification" name="Specification">Especificacions</h2> + +<p>No forma part de cap especificació. Es tracta d'un pseudo-element propietari, específic en WebKit/Blink.</p> + +<h2 id="See_also" name="See_also">Vegeu també</h2> + +<ul> + <li>{{cssxref("::-webkit-slider-thumb")}}</li> + <li><span id="result_box" lang="ca"><span>Pseudo</span><span>-</span><span>elements</span> <span>similars</span>, <span>utilitzats per altres</span> <span>navegador:</span></span> + <ul> + <li>{{cssxref("::-ms-track")}}</li> + <li>{{cssxref("::-moz-range-track")}}</li> + </ul> + </li> + <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">Trucs CSS: Estil de les entrades de rang compatible entre navegadors amb CSS.</a></li> + <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Controls lliscants disseny i scripts.</a></li> +</ul> diff --git a/files/ca/web/css/_doublecolon_-webkit-slider-thumb/index.html b/files/ca/web/css/_doublecolon_-webkit-slider-thumb/index.html new file mode 100644 index 0000000000..0efff168d2 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-webkit-slider-thumb/index.html @@ -0,0 +1,34 @@ +--- +title: '::-webkit-slider-thumb' +slug: 'Web/CSS/::-webkit-slider-thumb' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Reference +translation_of: 'Web/CSS/::-webkit-slider-thumb' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>El<a href="/en-US/docs/Web/CSS/Pseudo-elements"> pseudo-element</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <strong><code>::-webkit-slider-thumb</code></strong> representa el "polze" que l'usuari pot moure dins de la "ranura" d'un {{HTMLElement("input")}} de <code>type="range"</code> per modificar el seu valor numèric.</p> + +<h2 id="Especificacions">Especificacions</h2> + +<p>No forma part de cap especificació. Es tracta d'un pseudo-element propietari, específic en WebKit/Blink.</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{cssxref("::-webkit-slider-runnable-track")}}</li> + <li><span id="result_box" lang="ca"><span>Pseudo</span><span>-</span><span>elements</span> <span>similars</span>, <span>utilitzats per altres</span> <span>navegadors</span></span> + <ul> + <li>{{cssxref("::-moz-range-thumb")}}</li> + <li>{{cssxref("::-ms-thumb")}}</li> + </ul> + </li> + <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">Trucs CSS: Estil de les entrades de rang compatible entre navegadors amb CSS.</a></li> + <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Controls lliscants disseny i scripts.</a></li> +</ul> diff --git a/files/ca/web/css/_doublecolon_after/index.html b/files/ca/web/css/_doublecolon_after/index.html new file mode 100644 index 0000000000..95161d7f25 --- /dev/null +++ b/files/ca/web/css/_doublecolon_after/index.html @@ -0,0 +1,260 @@ +--- +title: '::after (:after)' +slug: 'Web/CSS/::after' +tags: + - CSS + - Layout + - Pseudo-element + - Reference + - Web +translation_of: 'Web/CSS/::after' +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">En <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>, <strong><code>::after</code></strong> crea un <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> </span>que és l'últim fill de l'element seleccionat. Sovint s'utilitza per afegir contingut cosmètic a un element amb la propietat<span class="seoSummary">{{cssxref("content")}}.</span> Està integrat per defecte.</p> + +<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* </span></code>Afegeix una fletxa després d'enllaços<code class="language-css"><span class="comment token"> */</span> +<span class="selector token">a<span class="pseudo-class token">::after</span> </span><span class="punctuation token">{</span> + <span class="property token">content: "</span></code>→<code class="language-css"><span class="property token">";</span> +<span class="punctuation token">}</span></code></pre> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<div class="note"> +<p>CSS3 va introduir la notació de <code>::after</code> ( amb dos caràcters de dos punts ) per distingir les <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> dels <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>. Els navegadors també accepten <code>:after</code>, introduït en CSS2.</p> +</div> + +<h2 id="Consideracions">Consideracions</h2> + +<p>Els pseudo-elements generats per <code>::before</code> i <code>::after</code> estan <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">continguts per la caixa de formatació de l'element</a> i, per tant <code>::before</code> i <code>::after</code> no s'apliquen als <a href="https://www.w3.org/TR/2009/CR-CSS2-20090908/conform.html#replaced-element">elements reemplaçats</a> com <code>img</code>, or a elements <code>br</code>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Ùs_senzill">Ùs senzill</h3> + +<p>Crearem dues classes: una per als paràgrafs boring i un per als exciting. Marcarem cada paràgraf afegint un pseudo-element al final del mateix.</p> + +<pre class="brush: html"><p class="boring-text">Here is some plain old boring text.</p> +<p>Here is some normal text that is neither boring nor exciting.</p> +<p class="exciting-text">Contributing to MDN is easy and fun. +Just hit the edit button to add new live samples, or improve existing samples.</p></pre> + +<pre class="brush: css">.exciting-text::after { + content: "<- now this *is* exciting!"; + color: green; +} + +.boring-text::after { + content: "<- BORING!"; + color: red; +}</pre> + +<h4 id="Resultat">Resultat</h4> + +<p>{{EmbedLiveSample('Simple_usage', 500, 150)}}</p> + +<h3 id="Exemple_decoratiu">Exemple decoratiu</h3> + +<p>Podem donar estil de text o imatges en la propietat {{cssxref("content")}} gairebé de qualsevol manera que vulguem.</p> + +<pre class="brush: html"><span class="ribbon">Notice where the orange box is.</span></pre> + +<pre class="brush: css">.ribbon { + background-color: #5BC8F7; +} + +.ribbon::after { + content: "Look at this orange box."; + background-color: #FFBA10; + border-color: black; + border-style: dotted; +}</pre> + +<h4 id="Resultat_2">Resultat</h4> + +<p>{{EmbedLiveSample('Decorative_example', 450, 20)}}</p> + +<h3 id="Tooltips">Tooltips</h3> + +<p>El següent exemple mostra l'ús del <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> <code>::after</code> en conjunció amb l'expressió CSS <a href="/en-US/docs/Web/CSS/attr"><code>attr()</code></a> i un <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-dataset">atribut de dades personalitzades</a> <code>data-descr</code> per crear un <em>tooltip</em> en pur CSS, similar al glossari. Feu clic en la vista prèvia en viu o vegeu aquest exemple en una <a href="https://developer.mozilla.org/files/4591/css-only_tooltips.html">pàgina apart.</a></p> + +<pre class="brush: html"><p>Here is the live example of the above code.<br /> + We have some <span data-descr="collection of words and punctuation">text</span> here with a few + <span data-descr="small popups which also hide again">tooltips</span>.<br /> + Don't be shy, hover over to take a <span data-descr="not to be taken literally">look</span>. +</p> +</pre> + +<pre class="brush: css">span[data-descr] { + position: relative; + text-decoration: underline; + color: #00F; + cursor: help; +} + +span[data-descr]:hover::after { + content: attr(data-descr); + position: absolute; + left: 0; + top: 24px; + min-width: 200px; + border: 1px #aaaaaa solid; + border-radius: 10px; + background-color: #ffffcc; + padding: 12px; + color: #000000; + font-size: 14px; + z-index: 1; +}</pre> + +<h4 id="Resultat_3">Resultat</h4> + +<p>{{EmbedLiveSample('Tooltips', 450, 120)}}</p> + +<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 Pseudo-Elements', '#selectordef-after', '::after')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td><span id="result_box" lang="ca"><span>No hi ha canvis</span> <span>significatius</span> <span>en l'especificació</span> <span>anterior.</span></span></td> + </tr> + <tr> + <td>{{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}}</td> + <td>{{Spec2("CSS3 Transitions")}}</td> + <td>Permet transicions en les propietats definides en els pseudo-elements.</td> + </tr> + <tr> + <td>{{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}}</td> + <td>{{Spec2("CSS3 Animations")}}</td> + <td>Permet animacions en les propietats definides en els pseudo-elements.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>Introdueix la</span> <span>sintaxi</span> <span>de </span></span> dos caràcters de dos punts <span class="short_text" lang="ca"><span>.</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definició inicial, utilitzant la sintaxi d'un caràcter de dos punts.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>suport <code>:after</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}[1]</td> + <td>8.0</td> + <td>{{CompatOpera("4")}}</td> + <td>4.0</td> + </tr> + <tr> + <td>suport <code>::after</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8")}}[1]</td> + <td>9.0</td> + <td>{{CompatOpera("7")}}</td> + <td>4.0</td> + </tr> + <tr> + <td>Suport d'animacions i transicions</td> + <td>26</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</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>Descripció</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>suport <code>:after</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>suport <code>::after</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Suport d'animacions i transicions</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Firefox anterior a la versió 3.5 només implementa la versió CSS 2.0 de <code>:after</code>. No es permet {{cssxref("position")}}, {{cssxref("float")}}, <code>list-style-*</code> i algunes propietats de pantalla. Firefox 3.5 elimina aquestes restriccions.</p> + +<h3 id="Notes_de_Quantum_CSS">Notes de Quantum CSS</h3> + +<ul> + <li>Gecko té un error pel qual els pseudo-elements {{cssxref("::before")}} i <code>::after</code> se segueixen generant fins i tot si el valor de la propietat {{cssxref("content")}} està establert a <code>normal</code> o <code>none</code>. Segons les especificacions, no hauria de ser ({{bug(1387931)}}). Això s'ha solucionat en el nou motor CSS paral·lel de Firefox (també conegut com <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> o <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, + + <p>planificat per al seu llançament en Firefox 57).</p> + </li> +</ul> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{Cssxref("::before")}}, {{cssxref("content")}}</li> +</ul> diff --git a/files/ca/web/css/_doublecolon_backdrop/index.html b/files/ca/web/css/_doublecolon_backdrop/index.html new file mode 100644 index 0000000000..dccf033dee --- /dev/null +++ b/files/ca/web/css/_doublecolon_backdrop/index.html @@ -0,0 +1,143 @@ +--- +title: '::backdrop' +slug: 'Web/CSS/::backdrop' +tags: + - CSS + - Full-screen + - Layout + - NeedsContent + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::backdrop' +--- +<div>{{CSSRef}} {{SeeCompatTable}}</div> + +<p>El {{Cssxref("pseudo-elements", "pseudo-element")}} <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <strong><code>::backdrop</code></strong> és una caixa situada immediatament per sota d'un element visualitzat en mode de <a href="/en-US/docs/Web/API/Fullscreen_API">pantalla completa</a> (i per sobre de qualsevol element inferior de la pila). Els elements de pantalla completa formen part de la pila de la <a href="https://fullscreen.spec.whatwg.org/#top-layer">capa superior</a>, és a dir, es representen davant de qualsevol altre contingut.</p> + +<pre class="brush: css no-line-numbers">dialog::backdrop { + background: rgba(255,0,0,.25); +}</pre> + +<p>El pseudo-element <code>::backdrop</code> es pot utilitzar per donar estil o ocultar el document subjacent d'un element que es mostra a pantalla completa.</p> + +<p><code>::backdrop</code> no hereta de cap element i no és hereditari. No es fa cap restricció sobre quines propietats s'apliquen a aquest pseudo-element.</p> + +<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('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}</td> + <td>{{Spec2('Fullscreen')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>32.0 {{property_prefix("webkit")}}<br> + 37.0</td> + <td>{{CompatVersionUnknown}}{{property_prefix("ms")}}</td> + <td>{{CompatGeckoDesktop("47")}} <sup>[1]</sup></td> + <td>11 {{property_prefix("ms")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>en <code><dialog></code></td> + <td>32.0 {{property_prefix("webkit")}}<br> + 37.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>en fullscreen</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("ms")}}</td> + <td>{{CompatGeckoDesktop("47")}} <sup>[1]</sup></td> + <td>11 {{property_prefix("ms")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>{{CompatVersionUnknown}}{{property_prefix("ms")}}</td> + <td>{{CompatGeckoMobile("47")}} <sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>en <code><dialog></code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>en fullscreen</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("ms")}}</td> + <td>{{CompatGeckoMobile("47")}} <sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] See {{bug(1064843)}}</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{cssxref(":fullscreen")}}</li> + <li>{{HTMLElement("dialog")}}</li> +</ul> diff --git a/files/ca/web/css/_doublecolon_before/index.html b/files/ca/web/css/_doublecolon_before/index.html new file mode 100644 index 0000000000..ad7738d6f5 --- /dev/null +++ b/files/ca/web/css/_doublecolon_before/index.html @@ -0,0 +1,329 @@ +--- +title: '::before (:before)' +slug: 'Web/CSS/::before' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-element + - Reference + - Web +translation_of: 'Web/CSS/::before' +--- +<div>{{CSSRef}}</div> + +<p>En <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>, <strong><code>::before</code></strong> crea un <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> que és el primer fill de l'element seleccionat. Sovint s'utilitza per afegir contingut cosmètic a un element amb la propietat {{cssxref("content")}}. Està integrat per defecte.</p> + +<pre class="brush: css"><code class="language-css"><span class="comment token">/* Add a heart before links */</span> +<span class="selector token">a<span class="pseudo-class token">::before</span> </span><span class="punctuation token">{ +</span> <span class="property token">content: "</span></code>♥<code class="language-css"><span class="property token">";</span> +<span class="punctuation token">}</span></code></pre> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<div class="note"> +<p>CSS3 va introduir la notació de <code>::before</code> ( de dos caràcters de dos punts ) per distingir les <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> dels <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>. Els navegadors també accepten <code>:before</code>, introduït en CSS2.</p> +</div> + +<h2 id="Consideracions">Consideracions</h2> + +<p>Els pseudo-elements generats per <code>::before</code> i <code>::after</code> estan <a class="external external-icon" href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">continguts per la caixa de formatació de l'element</a> i, per tant <code>::before</code> i <code>::after</code> no s'apliquen als <a class="external external-icon" href="https://www.w3.org/TR/2009/CR-CSS2-20090908/conform.html#replaced-element">elements reemplaçats</a> com <code>img</code>, or a elements <code>br</code>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Afegint_cometes"><span class="short_text" id="result_box" lang="ca"><span>Afegint</span> <span>cometes</span></span></h3> + +<p>Un exemple senzill de l'ús del pseudo-element <code>::before</code> és proporcionar cometes. Aquí s'utilitza tant <code>::before</code> com <code>{{Cssxref("::after")}}</code> per a inserir caràcters cometes.</p> + +<h4 id="Contingut_HTML">Contingut HTML</h4> + +<pre class="brush:html"><q>Some quotes</q>, he said, <q>are better than none</q>.</pre> + +<h4 id="Contingut_CSS">Contingut CSS</h4> + +<pre class="brush:css">q::before { + content: "«"; + color: blue; +} +q::after { + content: "»"; + color: red; +}</pre> + +<h4 id="Resultat">Resultat</h4> + +<p>{{EmbedLiveSample('Adding_quotation_marks', '500', '50', '')}}</p> + +<h3 id="Exemple_Decorativu">Exemple Decorativu</h3> + +<p>Podem donar estil de text o imatges en la propietat {{cssxref("content")}} gairebé de qualsevol manera que vulguem.</p> + +<h4 id="Contingut_HTML_2">Contingut HTML</h4> + +<pre class="brush: html"><span class="ribbon">Notice where the orange box is.</span></pre> + +<h4 id="Contingut_CSS_2">Contingut CSS</h4> + +<pre class="brush: css">.ribbon { + background-color: #5BC8F7; +} + +.ribbon::before { + content: "Look at this orange box."; + background-color: #FFBA10; + border-color: black; + border-style: dotted; +}</pre> + +<h4 id="Resultat_2">Resultat</h4> + +<p>{{EmbedLiveSample('Decorative_example', 450, 60)}}</p> + +<h3 id="Llista_de_tasques"><span id="result_box" lang="ca"><span>Llista de tasques</span></span></h3> + +<p><span id="result_box" lang="ca"><span>En aquest</span> <span>exemple</span> <span>crearem</span> <span>una senzilla</span> <span>llista</span> <span>de tasques</span> <span>utilitzant</span> <span>pseudo</span><span>-</span><span>elements.</span> <span>Aquest</span> <span>mètode sovint</span> <span>es</span> <span>pot utilitzar</span> <span>per afegir</span> <span>petits</span> <span>tocs</span> <span>a</span> <span>la interfície</span> <span>d'usuari i</span> <span>millorar</span> <span>l'experiència de l'</span><span>usuari.</span></span></p> + +<h4 id="Contingut_HTML_3">Contingut HTML</h4> + +<pre class="brush: html"><ul> + <li>Buy milk</li> + <li>Take the dog for a walk</li> + <li>Exercise</li> + <li>Write code</li> + <li>Play music</li> + <li>Relax</li> +</ul> +</pre> + +<h4 id="Contingut_CSS_3">Contingut CSS</h4> + +<pre class="brush: css">li { + list-style-type: none; + position: relative; + margin: 2px; + padding: 0.5em 0.5em 0.5em 2em; + background: lightgrey; + font-family: sans-serif; +} + +li.done { + background: #CCFF99; +} + +li.done::before { + content: ''; + position: absolute; + border-color: #009933; + border-style: solid; + border-width: 0 0.3em 0.25em 0; + height: 1em; + top: 1.3em; + left: 0.6em; + margin-top: -1em; + transform: rotate(45deg); + width: 0.5em; +}</pre> + +<h4 id="Contingut_JavaScript">Contingut JavaScript</h4> + +<pre class="brush: js">var list = document.querySelector('ul'); +list.addEventListener('click', function(ev) { + if( ev.target.tagName === 'LI') { + ev.target.classList.toggle('done'); + } +}, false); +</pre> + +<p>Aquí està l'exemple del codi anterior executat en directe. Recordeu que no s'han utilitzat icones , i la marca de verificació és en realitat el <code>::before</code> que s'ha donat estil amb CSS. Seguiu endavant i aconseguiu algunes coses per fer.</p> + +<h4 id="Resultat_3">Resultat</h4> + +<p>{{EmbedLiveSample('To-do_list', 400, 300)}}</p> + +<h2 id="Notes">Notes</h2> + +<p>Encara que el posicionament fix en Firefox 3.5 no permet contingut generat per separat com un germà anterior (segons <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">l'especificació CSS</a> afirma que "Els pseudo-elements :before i :after, son elements que interactuen amb altres caixes ... com si fossin veritables elements inserits dins del seu element associat."), poden ser usats per a proporcionar una lleugera millora en els dissenys sense taules (per exemple, per aconseguir el centrat), sempre que el contingut que es centri estigui embolicat en un fill, una columna abans i després que el contingut pugui ser introduït sense afegir un germà anterior o següent (és a dir, és potser més semànticament correcta afegir un span addicional com s'indica a continuació, del que seria afegir un element <div /> abans i després). (I recordeu sempre afegir un width a un float, ja que, altrament, no surarà!).</p> + +<h4 id="Contingut_HTML_4">Contingut HTML</h4> + +<pre class="brush: html"><div class="example"> +<span id="floatme">"Floated Before" should be generated on the left of the +viewport and not allow overflow in this line to flow under it. Likewise +should "Floated After" appear on the right of the viewport and not allow this +line to flow under it.</span> +</div></pre> + +<h4 id="Contingut_CSS_4">Contingut CSS</h4> + +<pre class="brush: css">#floatme { float: left; width: 50%; } + +/* To get an empty column, just indicate a hex code for a non-breaking space: \a0 as the content (use \0000a0 when following such a space with other characters) */ +.example::before { + content: "Floated Before"; + float: left; + width: 25% +} +.example::after { + content: "Floated After"; + float: right; + width:25% +} + +/* For styling */ +.example::before, .example::after, .first { + background: yellow; + color: red; +}</pre> + +<h4 id="Resultat_4">Resultat</h4> + +<p>{{EmbedLiveSample("Notes")}}</p> + +<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 Pseudo-Elements', '#selectordef-before', '::before')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td><span id="result_box" lang="ca"><span>No hi ha canvis</span> <span>significatius</span> <span>en l'especificació</span> <span>anterior.</span></span></td> + </tr> + <tr> + <td>{{Specname("CSS3 Transitions", "#animatable-properties", "")}}</td> + <td>{{Spec2("CSS3 Transitions")}}</td> + <td>Permet transicions en les propietats definides en els pseudo-elements.</td> + </tr> + <tr> + <td>{{Specname("CSS3 Animations", "", "")}}</td> + <td>{{Spec2("CSS3 Animations")}}</td> + <td>Permet animacions en les propietats definides en els pseudo-elements.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>Introdueix la</span> <span>sintaxi</span> </span> de dos caràcters de dos punts <span class="short_text" lang="ca"><span>.</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definició inicial, utilitzant la sintaxi d'un caràcter de dos punts .</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suport <code>:before</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}<sup>[1]</sup></td> + <td>8.0</td> + <td>{{CompatOpera("4")}}</td> + <td>4.0</td> + </tr> + <tr> + <td>Suport <code>::before</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8")}}<sup>[1]</sup></td> + <td>9.0</td> + <td>{{CompatOpera("7")}}</td> + <td>4.0</td> + </tr> + <tr> + <td>Suport d'animacions i transicions</td> + <td>26</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</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>Descripció</th> + <th>Android</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport <code>:before</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Suport <code>::before</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>7.1</td> + <td>{{CompatUnknown}}</td> + <td>5.1</td> + </tr> + <tr> + <td>Suport d'animacions i transicions</td> + <td>26</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Firefox anterior a la versió 3.5 només implementa la versió CSS 2.0 de :before. No es permet {{cssxref("position")}}, {{cssxref("float")}}, <code>list-style-*</code> i algunes propietats de pantalla. Firefox 3.5 elimina aquestes restriccions.</p> + +<h3 id="Quantum_CSS_notes">Quantum CSS notes</h3> + +<ul> + <li>Gecko té un error pel qual els pseudo-elements <a href="https://developer.mozilla.org/ca/docs/Web/CSS/::before" title="::before crea un pseudo-element que és el primer fill de l'element coincident. Sovint s'utilitza per afegir contingut cosmètic a un element mitjançant l'ús de la propietat content. Aquest element per defecte és en línia (inline)."><code>::before</code></a> i <code>::after</code> se segueixen generant fins i tot si el valor de la propietat <a class="new" href="https://developer.mozilla.org/ca/docs/Web/CSS/content" title="Aquesta pàgina encara no ha estat traduïda. Si us plau considera contribuir-hi!"><code>content</code></a> està establert a <code>normal</code> o <code>none</code>. Segons les especificacions, no hauria de ser (<a class="external external-icon" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1387931" title="Don't generate pseudo elements for ::before and ::after if content property is 'none' or 'normal'">errada 1387931</a>). Això s'ha solucionat en el nou motor CSS paral·lel de Firefox (també conegut com <a class="external external-icon" href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> o <a class="external external-icon" href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, planificat per al seu llançament en Firefox 57).</li> +</ul> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{Cssxref("::after")}}, {{cssxref("content")}}</li> +</ul> diff --git a/files/ca/web/css/_doublecolon_cue/index.html b/files/ca/web/css/_doublecolon_cue/index.html new file mode 100644 index 0000000000..3c1265334b --- /dev/null +++ b/files/ca/web/css/_doublecolon_cue/index.html @@ -0,0 +1,78 @@ +--- +title: '::cue (:cue)' +slug: 'Web/CSS/::cue' +tags: + - '::cue' + - CSS + - Media + - Pseudo-element + - Reference + - Web Video Text Tracks + - WebVTT + - cue +translation_of: 'Web/CSS/::cue' +--- +<div>{{CSSRef}}</div> + +<p>El <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <strong><code>::cue</code></strong> coincideix amb senyals de <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a> dins d'un element seleccionat. Això es pot usar per donar <a href="https://developer.mozilla.org/docs/Web/API/WebVTT_API#Styling_WebTT_cues">estil als títols i altres senyals</a> en els medis amb pistes VTT.</p> + +<p>Només un petit subconjunt de propietats CSS es pot utilitzar amb el pseudo-element <code>::cue</code>:</p> + +<ul> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("opacity")}}</li> + <li>{{cssxref("visibility")}}</li> + <li>{{cssxref("text-decoration")}} <span class="short_text" id="result_box" lang="ca"><span>i les seves propietats no abreujades</span></span>: {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}} i {{cssxref("text-decoration-style")}}</li> + <li>{{cssxref("text-shadow")}}</li> + <li>{{cssxref("background")}} <span class="short_text" id="result_box" lang="ca"><span>i les seves propietats no abreujades</span></span>: {{Cssxref("background-color")}}, {{cssxref("background-clip")}}, {{Cssxref("background-image")}}, {{cssxref("background-origin")}}, {{Cssxref("background-position")}}, {{Cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{Cssxref("background-attachment")}} i {{cssxref("background-blend-mode")}}</li> + <li>{{cssxref("outline")}} <span class="short_text" id="result_box" lang="ca"><span>i les seves propietats no abreujades</span></span>: {{cssxref("outline-color")}}, {{cssxref("outline-style")}}, {{cssxref("outline-width")}}</li> + <li>{{Cssxref("font")}} <span class="short_text" id="result_box" lang="ca"><span>i les seves propietats no abreujades</span></span>: {{cssxref("font-kerning")}}, {{Cssxref("font-style")}}, {{Cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{Cssxref("font-weight")}}, {{Cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}} i {{Cssxref("font-family")}}</li> + <li>{{cssxref("line-height")}}</li> + <li>{{cssxref("white-space")}}</li> + <li>{{cssxref("text-combine-upright")}}</li> + <li>{{cssxref("ruby-position")}}</li> +</ul> + +<p>Les propietats s'apliquen a tot el conjunt de senyals com si fossin una sola unitat. L'única excepció és que el <code>background</code> i les propietats abreujades s'apliquen a cada senyal individualment, per evitar la creació de caixes i que ocultin inesperadament grans àrees dels medis</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemple">Exemple</h2> + +<p>El següent CSS estableix l'estil de <code>cue</code> perquè el text sigui blanc i el fons sigui una caixa negra translúcida.</p> + +<pre class="brush: css">::cue { + color: #fff; + background-color: rgba(0, 0, 0, 0.6); +}</pre> + +<h2 id="Especificacions">Especificacions</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Especificació</th> + <th>Estat</th> + <th>Comentari</th> + </tr> + <tr> + <td>{{SpecName("WebVTT")}}</td> + <td>{{Spec2("WebVTT")}}</td> + <td>Definició incial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p class="hidden">La taula de compatibilitat d'aquesta pàgina es genera a partir de dades estructurades. Si voleu contribuir a les dades, consulteu <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i envieu-nos una sol·licitud d'extracció.</p> + +<p>{{Compat("css.selectors.cue")}}</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebVTT_API">Format de Pistes de Web Video (WebVTT)</a></li> +</ul> diff --git a/files/ca/web/css/_doublecolon_first-letter/index.html b/files/ca/web/css/_doublecolon_first-letter/index.html new file mode 100644 index 0000000000..40e4c9c293 --- /dev/null +++ b/files/ca/web/css/_doublecolon_first-letter/index.html @@ -0,0 +1,219 @@ +--- +title: '::first-letter (:first-letter)' +slug: 'Web/CSS/::first-letter' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-element + - Reference + - Web +translation_of: 'Web/CSS/::first-letter' +--- +<div>{{CSSRef}}</div> + +<p>El <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong>code>::first-letter</strong> aplica estils a la primera lletra de la primera línia d'un <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">element de nivell de bloc</a>, però només quan no està precedit d'un altre contingut (com ara imatges o taules en línia).</p> + +<pre class="brush: css no-line-numbers">/* <span class="short_text" id="result_box" lang="ca"><span>Selecciona la primera lletra d'un <p></span></span> */ +p::first-letter { + font-size: 130%; +}</pre> + +<p>La primera lletra d'un element no sempre és trivial per identificar:</p> + +<ul> + <li>La puntuació que precedeix o segueix immediatament a la primera lletra s'inclou en la coincidència. La puntuació inclou qualsevol caràcter Unicode definit en la classes <em>obertura</em> (Ps), <em>tancament</em> (Pe), <em>cita nicial</em> (Pi), <em>cita final</em> (Pf), i <em>altres punctuacions</em> (Po).</li> + <li>Alguns idiomes tenen dígrafs que sempre es mostren en majúscules, com l' <code>IJ</code> en holandès. En aquests casos, ambdues lletres del dígraf haurien de coincidir amb el pseudo-element <code>::first-letter</code>. (Això és poc compatible amb els navegadors, consulteu la <a href="https://developer.mozilla.org/En/CSS/::first-letter#Browser_compatibility">taula de compatibilitat del navegador</a> a continuació).</li> + <li>Una combinació del pseudo-element {{ cssxref("::before") }} i la propietat {{ cssxref("content") }} poden injectar algun text al principi de l'element. En aquest cas, <code>::first-letter</code> coincideix amb la primera lletra d'aquest contingut generat.</li> +</ul> + +<div class="note"> +<p>CSS3 va introduir la notació de <code>::first-letter</code> ( amb dos caràcters de dos punts) per distingir les <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> dels <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>. Els navegadors també accepten <code>:first-letter</code>, introduït en CSS2.</p> +</div> + +<h2 id="Propietats_permeses"><span id="result_box" lang="ca"><span>Propietats permeses</span></span></h2> + +<p>Només un petit subconjunt de propietats CSS es pot utilitzar amb el pseudo-element <code>::first-letter</code>:</p> + +<ul> + <li>Totes les propietats de font: {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} i {{ Cssxref("font-family") }}.</li> + <li>Totes les propietats de fons: {{ Cssxref("background") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }} i {{cssxref("background-blend-mode")}}.</li> + <li>Totes les propietats de marge: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}.</li> + <li>Totes les propietats de farcit: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}.</li> + <li>Totes les propietats de vora: abreujades {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}} i les propietats no abreujades.</li> + <li>La propietat {{ cssxref("color") }}.</li> + <li>Les propietats CSS {{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (when appropriate), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (només si <code>float</code> és <code>none</code>).</li> +</ul> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Exemple</h2> + +<p>Fa que la primera lletra de cada paràgraf sigui en vermell i gran.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt + ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo + dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p> +<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p> +<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut + aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit + esse molestie consequat.</p> +<p>-The beginning of a special punctuation mark.</p> +<p>_The beginning of a special punctuation mark.</p> +<p>"The beginning of a special punctuation mark.</p> +<p>'The beginning of a special punctuation mark.</p> +<p>*The beginning of a special punctuation mark.</p> +<p>#The beginning of a special punctuation mark.</p> +<p>「特殊的汉字标点符号开头。</p> +<p>《特殊的汉字标点符号开头。</p> +<p>“特殊的汉字标点符号开头。</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p::first-letter { + color: red; + font-size: 130%; +}</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{ EmbedLiveSample('Example', '80%', 420) }}</p> + +<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 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td> + <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Genera propietats permeses per a la composició de textos, decoració de text, propietats de disseny en línia, {{ cssxref("opacity") }} i {{ cssxref("box-shadow") }}.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}</td> + <td>{{ Spec2('CSS3 Text Decoration')}}</td> + <td><span id="result_box" lang="ca"><span>Permet l'ús de</span></span> {{cssxref("text-shadow")}} amb <code>::first-letter</code>.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Introducció de la sintaxi de dos caràcters de dos punts. Definició del comportament de casos limits, com ara en elements de llista o amb idiomes específics (p. ex., el dígraf holandès <code>IJ</code>).</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Cap canvi.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Definició inicial, utilitzant la sintaxi d'un caràcter de dos punts.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>9.0</td> + <td>7.0</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td>Antiga sintaxis d'un caràcter de dos punts (<code>:first-letter</code>)</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>5.5</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><span class="short_text" id="result_box" lang="ca"><span>Suport per al dígraf holandès</span></span> <code>IJ</code></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }} {{ bug("92176") }}</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>Descripció</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("1") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Antiga sintaxis d'un caràcter de dos punts (<code>:first-letter</code>)</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("1") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><span class="short_text" id="result_box" lang="ca"><span>Suport per al dígraf holandès</span></span> <code>IJ</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{cssxref("::first-line")}}.</li> +</ul> diff --git a/files/ca/web/css/_doublecolon_first-line/index.html b/files/ca/web/css/_doublecolon_first-line/index.html new file mode 100644 index 0000000000..065c7dc0f3 --- /dev/null +++ b/files/ca/web/css/_doublecolon_first-line/index.html @@ -0,0 +1,117 @@ +--- +title: '::first-line (:first-line)' +slug: 'Web/CSS/::first-line' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::first-line' +--- +<div>{{CSSRef}}</div> + +<p>El <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>::first-line</code></strong> aplica estils a la primera línia d'un <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">element de nivell de bloc</a>. Tingueu en compte que la longitud de la primera línia depèn de molts factors, incloent l'amplada de l'element, l'amplada del document i la mida de la font del text</p> + +<pre class="brush: css no-line-numbers">/* Selecciona la primera línia d'un <p> */ +p::first-line { + color: red; +}</pre> + +<div class="note"> +<p>CSS3 va introduir la notació de <code>::first-line</code> (de dos caràcters, de dos punts) per distingir les <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> dels <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>. Els navegadors també accepten <code>:first-line</code>, introduït en CSS2.</p> +</div> + +<h2 id="Propietats_permeses">Propietats permeses</h2> + +<p>Només un petit subconjunt de propietats CSS es pot utilitzar amb el pseudo-element <code>::first-line</code>:</p> + +<ul> + <li>Totes les propietats relacionades amb la font: {{Cssxref("font")}}, {{cssxref("font-kerning")}}, {{Cssxref("font-style")}}, {{Cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{Cssxref("font-weight")}}, {{Cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}} i {{Cssxref("font-family")}}</li> + <li>Totes les propietats relacionades amb el fons: {{Cssxref("background-color")}}, {{cssxref("background-clip")}}, {{Cssxref("background-image")}}, {{cssxref("background-origin")}}, {{Cssxref("background-position")}}, {{Cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{Cssxref("background-attachment")}} i {{cssxref("background-blend-mode")}}</li> + <li>La propietat {{cssxref("color")}}</li> + <li>{{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}} i {{cssxref("line-height")}}</li> + <li>{{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} i {{cssxref("vertical-align")}}.</li> +</ul> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Styles will only be applied to the first line of this paragraph. +After that, all text will be styled like normal. See what I mean?</p> + +<span>The first line of this text will not receive special styling +because it is not a block-level element.</span></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">::first-line { + color: blue; + text-transform: uppercase; + + + /* WARNING: DO NOT USE THESE */ + /* Many properties are invalid in ::first-line pseudo-classes */ + margin-left: 20px; + text-indent: 20px; +}</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Example', 350, 160)}}</p> + +<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 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}</td> + <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Defineix de manera més estricta on pot apareixer una <code>::first-letter</code>.<br> + Generalitza propietats permeses per a composició tipogràfica, decoració de text i propietats de disseny en línia i {{cssxref("opacity")}}.<br> + Defineix l'herència de <code>::first-letter</code>.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-line')}}</td> + <td>{{ Spec2('CSS3 Text Decoration')}}</td> + <td>Permès lùs de {{cssxref("text-shadow")}} amb <code>::first-letter</code>.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#first-line', '::first-line') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Introdueix la sintaxi de dos caràcter de dos punts.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Cap canvi</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>La definició inicial fa servir la sintaxi d'un sol caràcter de dos punts.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{Compat("css.selectors.first-line")}}</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{cssxref("::first-letter")}}.</li> +</ul> diff --git a/files/ca/web/css/_doublecolon_placeholder/index.html b/files/ca/web/css/_doublecolon_placeholder/index.html new file mode 100644 index 0000000000..3c985e7912 --- /dev/null +++ b/files/ca/web/css/_doublecolon_placeholder/index.html @@ -0,0 +1,150 @@ +--- +title: '::placeholder' +slug: 'Web/CSS/::placeholder' +tags: + - CSS + - Experimental + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::placeholder' +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>El <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>::placeholder</code></strong> representa el <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">text de marcador de posició</a> d'un element de <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms">formulari</a>.</p> + +<pre class="brush: css no-line-numbers">::placeholder { + color: blue; + font-size: 1.5em; +}</pre> + +<p>Només un subconjunt de propietats CSS que s'aplica al pseudo-element {{cssxref("::first-line")}} es pot utilitzar en una regla, utilitzant <code>::placeholder</code> en el seu selector.</p> + +<div class="note"> +<p><strong>Nota:</strong> A Firefox, l'aparença del text del marcador de posició és de color gris translúcid per defecte.</p> +</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html line-numbers language-html"><input placeholder="Type something here!"></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input::placeholder { + color: red; + font-size: 1.2em; + font-style: italic; +}</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<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 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">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>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatGeckoDesktop("51.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>44</td> + <td>10.1</td> + </tr> + <tr> + <td><span class="short_text" id="result_box" lang="ca"><span>Suport parcial amb prefix</span></span></td> + <td>Supported</td> + <td>Supported</td> + <td>Supported</td> + <td>10 -ms-</td> + <td>Supported</td> + <td>5 -webkit-</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Chrome for 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>{{CompatChrome(57)}}</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatGeckoMobile("52.0")}}</td> + <td>{{CompatNo}}</td> + <td> </td> + <td>10.3</td> + </tr> + <tr> + <td><span class="short_text" id="result_box" lang="ca"><span>Suport parcial amb prefix</span></span></td> + <td>2.1 -webkit-</td> + <td>Supported</td> + <td>Supported</td> + <td>10 -ms-</td> + <td>37 -webkit-</td> + <td>4.3 -webkit-</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Abans de Gecko 51.0 {{geckoRelease("51.0")}} Gecko va implementar aquest com a pseudo-element prefixat {{cssxref("::-moz-placeholder")}}.</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>La pseudo-class {{cssxref(":placeholder-shown")}} dona estil a un element que <em>té</em> un marcador de posició actiu.</li> + <li>Elements HTML relacionats: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li> + <li>Els equivalents no estàndard d'aquest pseudo-element: {{cssxref("::-webkit-input-placeholder")}}, {{cssxref("::-moz-placeholder")}}, {{cssxref(":-ms-input-placeholder")}}</li> + <li><a href="/en-US/docs/Learn/HTML/Forms">Formularis HTML</a></li> +</ul> diff --git a/files/ca/web/css/_doublecolon_selection/index.html b/files/ca/web/css/_doublecolon_selection/index.html new file mode 100644 index 0000000000..62b5e25619 --- /dev/null +++ b/files/ca/web/css/_doublecolon_selection/index.html @@ -0,0 +1,160 @@ +--- +title: '::selection' +slug: 'Web/CSS/::selection' +tags: + - CSS + - Layout + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::selection' +--- +<div>{{CSSRef}}</div> + +<p>El <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <strong><code>::selection</code></strong> <span id="result_box" lang="ca"><span>aplica estils a la part d'un document que l'usuari ha ressaltat (com ara amb el ratolí).</span></span></p> + +<pre class="brush: css no-line-numbers">::selection { + color: gold; + background: red; +}</pre> + +<p>Només un petit subconjunt de propietats CSS es pot utilitzar amb el pseudo-element <code>::selection</code>:</p> + +<ul> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("background-color")}}</li> + <li>{{cssxref("cursor")}}</li> + <li>{{cssxref("outline")}}</li> + <li>{{cssxref("text-decoration")}}</li> + <li>{{cssxref("text-emphasis-color")}}</li> + <li>{{cssxref("text-shadow")}}</li> +</ul> + +<p>Tingueu en compte que, en particular, s'ignora {{cssxref("background-image")}}.</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">/* Firefox syntax */ +::-moz-selection + +{{csssyntax}} +</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>This text has special styles when you highlight it.</div> +<p>Also try selecting text in this paragraph.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">/* Make selected text gold on a red background */ +::-moz-selection { + color: gold; + background: red; +} + +::selection { + color: gold; + background: red; +} + +/* Make selected text in a paragraph white on a blue background */ +p::-moz-selection { + color: white; + background: blue; +} + +p::selection { + color: white; + background: blue; +}</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Example')}}</p> + +<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 Pseudo-Elements', '#selectordef-selection', '::selection')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota:</strong> Tot i que <code>::selection</code> estava present en els esborranys de CSS Selectors Nivell 3, es va eliminar durant la fase de Recomanació de Candidats perquè el seu comportament no era suficientment especificat (especialment amb elements niats) i no es va aconseguir la interoperabilitat (<a href="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">basada en una discussió en la llista de correu d'Estil W3C</a>). El pseudo-element <code>::selection</code> ha estat retornat a <a href="http://dev.w3.org/csswg/css-pseudo-4/">Pseudo-Elements Nivell 4</a>.</p> +</div> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<div class="note"> +<p><strong>Nota:</strong> <code>text-shadow</code> en <code>::selection</code> és compatible amb Chrome, Safari i Firefox 17+.</p> +</div> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0 {{property_prefix("-moz")}}<sup>[1]</sup></td> + <td>9</td> + <td>9.5</td> + <td>1.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</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>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko actualment només és compatible amb la versió prefixada ::-moz-selection. Serà sense prefix en {{bug(509958)}}.</p> diff --git a/files/ca/web/css/at-rule/index.html b/files/ca/web/css/at-rule/index.html new file mode 100644 index 0000000000..17bb9c3288 --- /dev/null +++ b/files/ca/web/css/at-rule/index.html @@ -0,0 +1,77 @@ +--- +title: At-rule +slug: Web/CSS/At-rule +tags: + - At-rule + - CSS + - Reference +translation_of: Web/CSS/At-rule +--- +<div>{{cssref}}</div> + +<p><span class="seoSummary">Una <strong>regla at (at-rule)</strong> es una <a href="/en-US/docs/Web/CSS/Syntax#CSS_statements">declaració CSS</a> </span>que comença amb un signe<span class="seoSummary">, '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>), </span>seguit d'un identificador i inclou tot fins al següent punt i coma<span class="seoSummary">, '<code>;</code>' (<code>U+003B SEMICOLON</code>), </span>o el següent bloc<span class="seoSummary"> <a href="/en-US/docs/Web/CSS/Syntax#CSS_declarations_blocks">bloc CSS </a>, </span>el que succeeixi primer<span class="seoSummary">.</span></p> + +<p>Hi ha diverses regles at (at-rules), designades pels seus identificadors, cadascuna amb una sintaxi diferent:</p> + +<ul> + <li>{{cssxref("@charset")}} — Defineix el conjunt de caràcters utilitzat per la fulla d'estil.</li> + <li>{{cssxref("@import")}} — Li diu al motor CSS que inclogui una fulla d'estil externa.</li> + <li>{{cssxref("@namespace")}} — Li diu al motor CSS que tot el seu contingut ha de ser considerat com prefixat amb un espai de noms XML.</li> + <li><strong><em>Regles at (at-rules) niades</em></strong> — Un subconjunt de sentències niades, que es pot utilitzar com una declaració d'una fulla d'estil, així com dins de les regles de grup condicionals: + <ul> + <li>{{cssxref("@media")}} — Una regla de grup condicional que aplicarà el seu contingut si el dispositiu compleix els criteris de la condició definida mitjançant una <em>consulta de medis</em>.</li> + <li>{{cssxref("@supports")}} — Una regla de grup condicional que aplicarà el seu contingut si el navegador compleix amb els criteris de la condició donada.</li> + <li>{{cssxref("@document")}} {{experimental_inline}} — Una regla de grup condicional que aplicarà el seu contingut si el document en el qual s'aplica la fulla d'estil compleix amb els criteris de la condició donada. <em>(posposat al nivell 4 de les especificacions CSS)</em></li> + <li>{{cssxref("@page")}} — Descriu l'aspecte dels canvis de disseny que s'aplicaran en imprimir el document.</li> + <li>{{cssxref("@font-face")}} — Descriu l'aspecte d'una font externa a descarregar.</li> + <li>{{cssxref("@keyframes")}} — Descriu l'aspecte dels passos intermedis en una seqüència d'animació CSS.</li> + <li>{{cssxref("@viewport")}} {{experimental_inline}} — Descriu els aspectes de la finestra de visualització per a dispositius de pantalla petita. <em>(actualment en l'etapa de l'esborrany de treball)</em></li> + <li>{{cssxref("@counter-style")}} — Defineix estils de comptador específics que no formen part del conjunt d'estils predefinit . <em>(en l'etapa de Recomanació de Candidats, però només implementat en Gecko al moment de la redacció)</em></li> + <li>{{cssxref("@font-feature-values")}} (més <code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code> and <code>@character-variant</code>)<br> + — Definiu noms comuns a {{cssxref("font-variant-alternates")}} per a la característica activada de forma diferent en OpenType. <em>(en l'etapa de Recomanació de Candidats, però només implementada en Gekko al moment de la redacció)</em></li> + </ul> + </li> +</ul> + +<h2 id="Regles_del_grup_condicional">Regles del grup condicional</h2> + +<p>Igual que els valors de les propietats, cada regla té una sintaxi diferent. No obstant això, alguns d'ells poden agrupar-se en una categoria especial anomenada <strong>regles de grup condicional</strong>. Aquests declaracions comparteixen una sintaxi comuna i cadascun d'ells pot incloure <em>declaracions niades</em>, ja siguin <em>conjunts de regles</em> o <em>regles at niades</em>. A més, tots transmeten un significat semàntic comú: tots vinculen algun tipus de condició que, en qualsevol moment, s'avalua com a <strong>veritable</strong> o <strong>fals</strong>. Si la condició s'avalua com a <strong>veritable</strong>, s'aplicaran totes les instruccions del grup</p> + +<p>Les regles de grup condicional es defineixen <a href="http://dev.w3.org/csswg/css3-conditional/">Condicionals CSS Nivell 3</a> i son:</p> + +<ul> + <li>{{cssxref("@media")}},</li> + <li>{{cssxref("@supports")}},</li> + <li>{{cssxref("@document")}}. <em>(deferred to Level 4 of CSS Spec) </em></li> +</ul> + +<p>Atès que cada grup condicional també pot contenir declaracions niades, pot haver-hi una quantitat no especificada de niaments.</p> + +<h2 id="Especificacions">Especificacions</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificació</th> + <th scope="col">Estat</th> + <th scope="col">Comentari</th> + </tr> + <tr> + <td>{{SpecName('CSS3 Conditional')}}</td> + <td>{{Spec2('CSS3 Conditional')}}</td> + <td>Definició inicial</td> + </tr> + <tr> + <td>{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}</td> + <td>{{Spec2('Compat')}}</td> + <td>Estandaritza <code>@-webkit-keyframes</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Reference">Referència CSS</a></li> + <li>{{CSS_key_concepts}}</li> +</ul> diff --git a/files/ca/web/css/box-sizing/index.html b/files/ca/web/css/box-sizing/index.html new file mode 100644 index 0000000000..33d55a232a --- /dev/null +++ b/files/ca/web/css/box-sizing/index.html @@ -0,0 +1,287 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/box-sizing +--- +<div>{{CSSRef}}</div> + +<p>La propietat CSS <strong><code>box-sizing</code></strong> s'utilitza per modificar el <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">model de caixa CSS</a> predeterminat usat per calcular l'amplada i l'alçada dels elements.</p> + +<pre class="brush: css no-line-numbers">/* Keyword values */ +box-sizing: content-box; +box-sizing: border-box; + +/* Global values */ +box-sizing: inherit; +box-sizing: initial; +box-sizing: unset; +</pre> + +<p>En CSS, de manera predeterminada, l'amplada i l'alçada que s'assigna a un element només s'aplica a la caixa de contingut de l'element. Si l'element té qualsevol vora o farcit, aquest s'afegeix a l'amplada i alçada per arribar a la grandària de la caixa que es representa en la pantalla. Això significa que quan fixeu l'amplada i l'alçada, heu d'ajustar el valor que dóna per permetre qualsevol vora o farcit que pugui ser afegit. Això és especialment difícil quan s'implementa un disseny sensible.</p> + +<p>La propietat <code>box-sizing</code> es pot utilitzar per ajustar aquest comportament:</p> + +<ul> + <li><code>content-box</code> és el valor predeterminat i proporciona el comportament predeterminat de box-sizing CSS. Si s'estableix l'amplada d'un element a 100 píxels, la caixa de contingut de l'element serà de 100 píxels d'amplada i l'amplada de qualsevol vora o farciment s'afegirà a l'amplada final representada.</li> + <li><code>border-box</code> l'indica al navegador que tingui en compte qualsevol vora i farcit en el valor que s'especifiqui per a l'amplada i l'alçada. Si s'estableix l'amplada d'un element a 100 píxels, els 100 píxels inclouran qualsevol vora o farcit que s'hàgi afegit i la caixa de contingut s'encongirà per absorbir aquest ample addicional. Això generalment fa molt més fàcil la grandària dels elements.</li> +</ul> + +<p>Alguns experts recomanen que els desenvolupadors web considerin <a href="https://css-tricks.com/international-box-sizing-awareness-day/">aplicar rutinariament <code>box-sizing: border-box</code> a tots els elements</a>.</p> + +<div id="box-sizing"> +<pre class="hidden brush: html"><div class="container"> + +<div class="parent"> + <p>Parent container</p> + <div class="child" style="box-sizing: content-box;"> + <p>Child container</p> + <p class="css"> + box-sizing: content-box;<br/> + width: 100%;<br/> + padding: 0;<br/> + border-width: 0;</p> + </div> +</div> + +<div class="parent"> + <p>Parent container</p> + <div class="child border-padding" style="box-sizing: content-box;"> + <p>Child container</p> + <p class="css"> + box-sizing: content-box;<br/> + width: 100%;<br/> + padding: 5px;<br/> + border-width: 10px;</p> + </div> +</div> + +<div class="parent"> + <p>Parent container</p> + <div class="child border-padding" style="box-sizing: border-box;"> + <p>Child container</p> + <p class="css"> + box-sizing: border-box;<br/> + width: 100%;<br/> + padding: 5px;<br/> + border-width: 10px;</p> + </div> +</div> + +</div> +</pre> + +<pre class="hidden brush: css">p { + margin-left: 0.2em; + font-family: "Open Sans", sans-serif; +} + +.container { + display: flex; +} + +.parent { + width: 220px; + border: solid 10px #FFC129; + margin: 0.8em; +} + +.child { + width: 100%; + margin: 2em auto; + background-color: rgba(229, 232, 252, 0.6); +} + +.border-padding { + padding: 5px; + border: solid #5B6DCD 10px; +} + +.css { + font-family: monospace; +} +</pre> + +<p>{{EmbedLiveSample("box-sizing", 1200, 340, "", "", "example-outcome-frame")}}</p> +</div> + +<p>L'exemple anterior mostra tres escenaris. En cada escenari hi ha un DIV pare (amb una vora taronja) que conté un DIV fill. El fill té fixat un <code>width: 100%</code> i un fons blau pàl·lid.</p> + +<ul> + <li>El primer escenari utilitza per defecte <code>box-sizing: content-box</code>. El DIV fill no té farcit ni cap vora, i s'adapta perfectament a l'interior del seu pare.</li> + <li>El segon escenari utilitza per defecte <code>box-sizing: content-box</code>. El DIV fill se li ha afegit farcit i una vora. El fill es vessa fora del pare perquè el seu ample es calcula amb només el contingut: llavors s'afegeix el farciment i la vora per fer l'amplada representada.</li> + <li>El tercer escenari utilitza <code>box-sizing: border-box</code>. El DIV fill ara s'adapta perfectament a l'interior del seu pare, ja que el seu <code>width: 100%</code> representa el farciment i la vora.</li> +</ul> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<p>La propietat <code>box-sizing</code> s'especifica com una paraula clau única seleccionada de la llista de valors a continuació.</p> + +<h3 id="Valors">Valors</h3> + +<dl> + <dt><code>content-box</code></dt> + <dd>Aquest és el valor inicial i predeterminat especificat per l'estàndard CSS. Les propietats {{Cssxref("width")}} i {{Cssxref("height")}} es mesuren incloent només el contingut, però no el farciment, la vora o el marge. Per exemple, si establiu <code>.box {width: 350px;}</code>, apliqueu <code>{border: 10px solid black;}</code> , llavors el resultat representat és una <code>caixa de width: 370px.</code></dd> + <dd>Aquí les dimensions de l'element es calculen com: <em>amplària = amplària del contingut, i alçada = alçada del contingut (excloent els valors de vora i farciment).</em></dd> + <dt><code>border-box</code></dt> + <dd>Les propietats {{Cssxref("width")}} i {{Cssxref("height")}} inclouen el contingut, el farciment i la vora, però no el marge. Note that padding and border will be inside of the box e.g. <code>.box {width: 350px; border: 10px solid black;}</code> leads to a box rendered in the browser of <code>width: 350px</code>. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.</dd> + <dd>Aquí les dimensions de l'element es calculen com: <em>amplària = vora + farciment + amplària del contingut</em>, i <em>alçada = vora + farciment + alçada del contingut</em>.</dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="content-box">Content box</div> +<br> +<div class="border-box">Border box</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 160px; + height: 80px; + padding: 20px; + border: 8px solid red; + background: yellow; +} + +.content-box { + box-sizing: content-box; +} + +.border-box { + box-sizing: border-box; +} +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Exemple','auto','300')}}</p> + +<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('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles"><span class="short_text" id="result_box" lang="ca"><span>Navegadors compatibles</span></span></h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td><span class="short_text" id="result_box" lang="ca"><span>Suport bàsic</span></span></td> + <td>1.0 {{property_prefix("-webkit")}}<sup>[1]</sup><br> + 10.0</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td> + <p>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("29.0")}}<sup>[2]</sup></p> + </td> + <td> + <p>8.0<sup>[1]</sup></p> + </td> + <td>7.0</td> + <td>3.0 (522){{property_prefix("-webkit")}}<br> + 5.1<sup>[3]</sup></td> + </tr> + <tr> + <td><code>padding-box</code>{{non-standard_inline}} {{deprecated_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("29.0")}}<br> + Eliminat a {{CompatGeckoDesktop("50.0")}}</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>Descripció</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span class="short_text" id="result_box" lang="ca"><span>Suport bàsic</span></span></td> + <td>2.1{{property_prefix("-webkit")}}<sup>[1]</sup><br> + 4.0</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> + {{CompatGeckoMobile("29.0")}}<sup>[2]</sup></td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>padding-box</code>{{non-standard_inline}} {{deprecated_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> + {{CompatGeckoMobile("29.0")}}<br> + Eliminat a {{CompatGeckoMobile("50.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>box-sizing</code> no es respectat quan l'alçada es calcula a partir de {{domxref("window.getComputedStyle()")}}, en Internet Explorer (totes les versions), en Firefox anterior a la 23, i en Chrome. Edge no presenta el problema. Tingueu en compte que la propietat <code>currentStyle</code> retorna el valor correcte de <code>height</code>.</p> + +<p>[2] A més del suport no prefixat, Gecko 44.0 {{geckoRelease("44.0")}} va afegir suport per a una versió prefixada <code>-webkit</code> de la propietat per raons de compatibilitat web darrere de la preferència <code>layout.css.prefixes.webkit</code>, per defecte a <code>false</code>. Des de Gecko 49.0 {{geckoRelease("49.0")}} la preferència per defecte és <code>true</code>.</p> + +<p>[3] El prefix de proveïdor <code>-webkit</code> s'ha eliminat a <a href="http://trac.webkit.org/changeset/71348">534.12</a>.</p> + +<h2 id="Vegeu_també"><span class="short_text" id="result_box" lang="ca"><span>Vegeu també</span></span></h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Model de caixa CSS</a></li> +</ul> diff --git a/files/ca/web/css/css_box_model/dominar_el_col.lapse_del_marge/index.html b/files/ca/web/css/css_box_model/dominar_el_col.lapse_del_marge/index.html new file mode 100644 index 0000000000..9b312fc789 --- /dev/null +++ b/files/ca/web/css/css_box_model/dominar_el_col.lapse_del_marge/index.html @@ -0,0 +1,89 @@ +--- +title: Dominar el col.lapse del marge +slug: Web/CSS/CSS_Box_Model/Dominar_el_col.lapse_del_marge +tags: + - CSS + - CSS Box Model + - Guide + - Reference +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +<div>{{CSSRef}}</div> + +<p>Els marges <a href="/en-US/docs/Web/CSS/margin-top">superior (top)</a> i <a href="/en-US/docs/Web/CSS/margin-bottom">inferior (bottom</a>) dels blocs, a vegades, es combinen (col·lapsats) en un únic marge, la grandària del qual és el més gran dels marges individuals (o només un d'ells, si són iguals), un comportament conegut com <strong>col·lapse del marge</strong>. Tingueu en compte que els marges dels elements <a href="/en-US/docs/Web/CSS/float">flotants</a> i <a href="/en-US/docs/Web/CSS/position#absolute">absolutament posicionats</a> mai es col·lapsen.</p> + +<p>El col·lapse de marges es produeix en tres casos bàsics:</p> + +<dl> + <dt><span id="result_box" lang="ca"><span>Germans adjacents</span></span></dt> + <dd>Els marges dels germans adjacents estan col·lapsats (excepte quan el darrer germà ha de ser <a href="/en-US/docs/Web/CSS/clear">eliminat</a> dels flotadors anteriors).</dd> + <dt><span id="result_box" lang="ca"><span>Pare i primer/últim fill</span></span></dt> + <dd>Si no hi ha una vora, farcit, part en línia, <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">context de format de blocs</a> creat, o un <em><a href="/en-US/docs/Web/CSS/clear">espaia lliure</a></em> per separar el {{cssxref("margin-top")}} d'un bloc del {{cssxref("margin-top")}} del seu primer bloc fill; o sense vora, farcit, contingut en línia, {{cssxref("height")}}, {{cssxref("min-height")}}, o {{cssxref("max-height")}} per separar el {{cssxref("margin-bottom")}} d'un bloc del {{cssxref("margin-bottom")}} del seu últim fill, llavors aquests marges es col·lapsen. El marge col·lapsat acaba fora del pare</dd> + <dt><span id="result_box" lang="ca"><span>Blocs buits</span></span></dt> + <dd>Si no hi ha vora, farcit, contingut en línia, {{cssxref("height")}} o {{cssxref("min-height")}} per separar un bloc {{cssxref("margin-top")}} del seu {{cssxref("margin-bottom")}}, llavors els marges superior i inferior es col·lapsen.</dd> +</dl> + +<p>Algunes coses a destacar:</p> + +<ul> + <li>El col.lapse de marges més complex (de més de dos marges) es produeix quan es combinen els casos anteriors.</li> + <li>Aquestes regles s'apliquen fins i tot als marges que són zero, de manera que el marge d'un fill primer/últim acaba fora dels seus pares (d'acord amb les regles anteriors) tant si el marge dels pares és zero o no.</li> + <li>Quan s'inclouen marges negatius, la mida del marge col·lapsat és la suma del marge positiu més gran i el marge negatiu més petit (més negatiu).</li> + <li>Quan tots els marges són negatius, la mida del marge col·lapsat és el marge més petit (el més negatiu). Això s'aplica tant als elements adjacents com als elements niats.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>The bottom margin of this paragraph is collapsed …</p> +<p>… with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p> + +<div>This parent element contains two paragraphs! + <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p> + <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p> +</div> + +<p>I am <code>2rem</code> below the element above.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + margin: 2rem 0; + background: lavender; +} + +p { + margin: .4rem 0 1.2rem 0; + background: yellow; +}</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Examples', 'auto', 350)}}</p> + +<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("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Reference">Referència CSS</a></li> + <li>{{css_key_concepts}}</li> +</ul> diff --git a/files/ca/web/css/css_box_model/index.html b/files/ca/web/css/css_box_model/index.html new file mode 100644 index 0000000000..dc3adb0cd0 --- /dev/null +++ b/files/ca/web/css/css_box_model/index.html @@ -0,0 +1,163 @@ +--- +title: Model de Caixa CSS +slug: Web/CSS/CSS_Box_Model +tags: + - CSS + - CSS Box Model + - Overview + - Reference +translation_of: Web/CSS/CSS_Box_Model +--- +<div>{{CSSRef}}</div> + +<p><strong>Model de Caixa CSS</strong> <span id="result_box" lang="ca"><span> és un mòdul de CSS que defineix les caixes rectangulars</span></span> — <span id="result_box" lang="ca"><span>incloent el seu farciment i marge</span></span> —que es generen per als elements i que es defineixen segons el <a href="/en-US/docs/Web/CSS/Visual_formatting_model">model de format visual</a>.</p> + +<h2 id="Referència">R<span class="short_text" id="result_box" lang="ca"><span>eferència</span></span></h2> + +<h3 id="Propietats">Propietats</h3> + +<h4 id="Propietats_que_controlen_el_flux_de_contingut_en_una_caixa">Propietats que controlen el flux de contingut en una caixa</h4> + +<div class="index"> +<ul> + <li>{{cssxref("box-sizing")}}</li> + <li>{{cssxref("overflow")}}</li> + <li>{{cssxref("overflow-x")}}</li> + <li>{{cssxref("overflow-y")}}</li> +</ul> +</div> + +<h4 id="Propietats_que_controlen_la_mida_en_una_caixa">Propietats que controlen la mida en una caixa</h4> + +<div class="index"> +<ul> + <li>{{cssxref("height")}}</li> + <li>{{cssxref("width")}}</li> + <li>{{cssxref("max-height")}}</li> + <li>{{cssxref("max-width")}}</li> + <li>{{cssxref("min-height")}}</li> + <li>{{cssxref("min-width")}}</li> +</ul> +</div> + +<h4 id="Propietats_que_controlen_els_marges_en_una_caixa">Propietats que controlen els marges en una caixa</h4> + +<div class="index"> +<ul> + <li>{{cssxref("margin")}}</li> + <li>{{cssxref("margin-bottom")}}</li> + <li>{{cssxref("margin-left")}}</li> + <li>{{cssxref("margin-right")}}</li> + <li>{{cssxref("margin-top")}}</li> +</ul> +</div> + +<h4 id="Propietats_que_controlen_els_farciments_en_una_caixa">Propietats que controlen els farciments en una caixa</h4> + +<div class="index"> +<ul> + <li>{{cssxref("padding")}}</li> + <li>{{cssxref("padding-bottom")}}</li> + <li>{{cssxref("padding-left")}}</li> + <li>{{cssxref("padding-right")}}</li> + <li>{{cssxref("padding-top")}}</li> +</ul> +</div> + +<h4 id="Altres_propietats">Altres propietats</h4> + +<div class="index"> +<ul> + <li>{{cssxref("visibility")}}</li> +</ul> +</div> + +<h2 id="Guies">Guies</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Introducció al model de caixa CSS</a></dt> + <dd>Explica un dels conceptes fonamentals de CSS: el model de caixa. Aquest model defineix com CSS estableix elements, incloent-hi les àrees de contingut, farcit, vora i marge.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Dominar el col.lapse del marge</a></dt> + <dd>De vegades, dos marges adjacents es col·loquen en un. En aquest article es descriuen les regles que regeixen quan i per què passa això i com controlar-lo.</dd> + <dt><a href="/en-US/docs/Web/CSS/Visual_formatting_model">Model de format visual</a></dt> + <dd>Explica el model de format visual.</dd> +</dl> + +<h2 id="Especificacions"><span class="short_text" id="result_box" lang="ca"><span>Especificacions</span></span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><span class="short_text" id="result_box" lang="ca"><span>Especificació</span></span></th> + <th scope="col">Estat</th> + <th scope="col">Comentari</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Box")}}</td> + <td>{{Spec2("CSS3 Box")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "box.html")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS1")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Definició inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilitat_dels_navegadors"><span class="short_text" id="result_box" lang="ca"><span>Compatibilitat dels navegadors</span></span></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 (WebKit)</th> + </tr> + <tr> + <td><span class="short_text" id="result_box" lang="ca"><span>Suport bàsic</span></span></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0 (85)</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><span class="short_text" id="result_box" lang="ca"><span>Suport bàsic</span></span></td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ca/web/css/css_box_model/introducció_al_model_de_caixa_css/index.html b/files/ca/web/css/css_box_model/introducció_al_model_de_caixa_css/index.html new file mode 100644 index 0000000000..bfb613ed6c --- /dev/null +++ b/files/ca/web/css/css_box_model/introducció_al_model_de_caixa_css/index.html @@ -0,0 +1,67 @@ +--- +title: Introducció al model de caixa CSS +slug: Web/CSS/CSS_Box_Model/Introducció_al_model_de_caixa_CSS +tags: + - CSS + - CSS Box Model + - Guide + - Reference +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +<div>{{CSSRef}}</div> + +<p>Quan es dissenya un document, el motor d'interpretació del navegador representa cada element com una caixa rectangular d'acord amb el <strong>model de caixa CSS</strong> estàndard. CSS determina la grandària, la posició i les propietats (color, fons, grandària de la vora, etc.) d'aquests caixes.</p> + +<p>Cada caixa es compon de quatre parts (o <em>àrees</em>), definides per les seves respectives vores: <em>la vora del contingut, la vora del farciment, la vora de la vora i la vora del marge</em>.</p> + +<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/8685/boxmodel-(3).png" style="height: 384px; width: 548px;"></p> + +<p><a name="content-area"></a>L'<strong>àrea de contingut</strong>, limitada per la vora del contingut, conté el contingut "real" de l'element, com ara text, una imatge o un reproductor de vídeo. Les seves dimensions són l'<em>amplada del contingut</em> (<em>o l'amplada de la caixa de contingut</em>) i l'<em>alçada del contingut</em> (<em>o l'alçada de la caixa de contingut</em>). Sovint té un color de fons o una imatge de fons.</p> + +<p>Si la propietat {{cssxref("box-sizing")}} s'estableix a <code>content-box</code> (predeterminat), la grandària de l'àrea de contingut es pot definir explícitament amb les propietats {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}} i {{cssxref("max-height")}}.</p> + +<p><a name="padding-area"></a>L'<strong>àrea de farcit</strong>, delimitada per la vora de farcit, estén l'àrea de contingut per incloure el farciment de l'element. Les seves dimensions són l'<em>amplada de la caixa de farcit</em> i l'<em>alçada de la caixa de farcit</em>. Quan l'àrea de contingut té un fons, s'estén en el farcit.</p> + +<p>El gruix del farciment està determinat pel {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} i les propietats abreujades de {{cssxref("padding")}}.</p> + +<p><a name="border-area"></a>L'<strong>àrea de vora</strong>, delimitada per la vora de la vora, estén l'àrea de farciment per incloure les vores de l'element. Les seves dimensions són l'<em>amplada de la caixa de vora</em> i l'<em>alçada de la caixa de vora</em>.</p> + +<p>El gruix de les vores està determinat per les propietats {{cssxref("border-width")}} i les propietats abreujades {{cssxref("border")}}. Si la propietat {{cssxref("box-sizing")}} s'estableix a <code>border-box</code>, la grandària de l'àrea de la vora es pot definir explícitament amb les propietats {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}} i {{cssxref("max-height")}}.</p> + +<p><a name="margin-area"></a>L'<strong>àrea de marge</strong>, delimitada per la vora del marge, estén l'àrea de la vora per incloure una àrea buida utilitzada per separar l'element dels seus veïns. Les seves dimensions són l'<em>amplada de la caixa de marge</em> i l'<em>alçada de la caixa de marge</em>.</p> + +<p>La grandària de l'àrea de marge està determinada pel {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} i les propietats abreujades {{cssxref("margin")}}. Quan es produeix el <a href="/en/CSS/margin_collapsing" title="en/CSS/margin_collapsing">col.lapse del marge</a>, l'àrea de marge no està clarament definida, ja que els marges es comparteixen entre les caixes.</p> + +<p>Finalment, tingueu en compte que, per als elements en línia no reemplaçats, la quantitat d'espai ocupat (la contribució a l'alçada de la línia) està determinat per la propietat {{cssxref('line-height')}} encara que les vores i el farciment encara es mostran al voltant del contingut.</p> + +<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("CSS2.1","box.html#box-dimensions")}}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Encara que formulat amb més precisió, no hi ha canvi pràctic.</td> + </tr> + <tr> + <td>{{ SpecName("CSS1","#formatting-model")}}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li><a href="/en/CSS/CSS_Reference" title="CSS Reference">Referència CSS</a></li> + <li>{{ CSS_key_concepts() }}</li> + <li><span class="short_text" id="result_box" lang="ca"><span>Propietats CSS relacionades</span></span> : {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}</li> +</ul> diff --git a/files/ca/web/css/css_flexible_box_layout/index.html b/files/ca/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..50a0d76329 --- /dev/null +++ b/files/ca/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,111 @@ +--- +title: CSS Flexible Box Layout +slug: Web/CSS/CSS_Flexible_Box_Layout +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +<p>{{CSSRef}}</p> + +<p><strong>CSS Flexible</strong> is a module of CSS that defines a multi-column layout, allowing to express how content should flows between columns, and how gaps and rules are handled.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("align-content")}}</li> + <li>{{cssxref("align-items")}}</li> + <li>{{cssxref("align-self")}}</li> + <li>{{cssxref("flex")}}</li> + <li>{{cssxref("flex-basis")}}</li> + <li>{{cssxref("flex-direction")}}</li> + <li>{{cssxref("flex-flow")}}</li> + <li>{{cssxref("flex-grow")}}</li> + <li>{{cssxref("flex-shrink")}}</li> + <li>{{cssxref("flex-wrap")}}</li> + <li>{{cssxref("justify-content")}}</li> + <li>{{cssxref("order")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></dt> + <dd>Step-by-step tutorial about how to build layouts using this feature.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Using flexbox to lay out Web applications</a></dt> + <dd>Tutorial explaining how to use flexbox in the specific context of Web applications.</dd> +</dl> + +<h2 id="Specifications">Specifications</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 Flexbox') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</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>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("20.0")}}</td> + <td>21.0{{property_prefix("-webkit")}}<br> + 29.0</td> + <td>10.0{{property_prefix("-ms")}}<br> + 11.0</td> + <td>12.10</td> + <td>6.1{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown()}}</td> + <td>4.4</td> + <td>11</td> + <td>12.10</td> + <td><span style="font-size: 12px; line-height: 18px;">7.1{{property_prefix("-webkit")}}</span></td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/ca/web/css/height/index.html b/files/ca/web/css/height/index.html new file mode 100644 index 0000000000..062d09c1fb --- /dev/null +++ b/files/ca/web/css/height/index.html @@ -0,0 +1,236 @@ +--- +title: height +slug: Web/CSS/height +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/height +--- +<div>{{CSSRef}}</div> + +<p>La propietat CSS <strong><code>height</code></strong> especifica l'alçada d'un element. Per defecte, la propietat defineix l'alçada de l'<a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">àrea de contingut</a>. Si {{cssxref("box-sizing")}} s'estableix a <code>border-box</code>, aquest determina l'alçada de l'<a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area">àrea de vora</a>.</p> + +<pre class="brush:css no-line-numbers">/* Keyword value */ +height: auto; + +/* <length> values */ +height: 120px; +height: 10em; + +/* <percentage> value */ +height: 75%; + +/* Global values */ +height: inherit; +height: initial; +height: unset; +</pre> + +<p>Les propietats {{cssxref("min-height")}} i {{cssxref("max-height")}} anul·la {{Cssxref("height")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<h3 id="Valors">Valors</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd><span class="short_text" id="result_box" lang="ca"><span>Defineix l'alçada com un valor absolut</span></span>.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd><span id="result_box" lang="ca"><span>Defineix l'alçada com un percentatge de l'alçada del bloc contenidor.</span></span></dd> + <dt><code>border-box </code>{{experimental_inline}}</dt> + <dd>Si està present, s'aplica abans {{cssxref("<length>")}} o {{cssxref("<percentage>")}} a la caixa de vora de l'element.</dd> + <dt><code>content-box</code> {{experimental_inline}}</dt> + <dd>Si està present, s'aplica abans {{cssxref("<length>")}} o {{cssxref("<percentage>")}} a la caixa de contingut de l'element.</dd> + <dt><code>auto</code></dt> + <dd><span id="result_box" lang="ca"><span>El navegador calcularà i seleccionarà una alçada per a l'element especificat</span></span> .</dd> + <dt>fill {{experimental_inline}}</dt> + <dd>Utilitzeu la grandària <code>fill-available</code> en línia o la grandària <code>fill-available</code> del bloc, segons correspongui a la modalitat d'escriptura.</dd> + <dt><code>max-content</code> {{experimental_inline}}</dt> + <dd><span id="result_box" lang="ca"><span>L'alçada preferida intrínseca.</span></span></dd> + <dt><code>min-content</code> {{experimental_inline}}</dt> + <dd><span id="result_box" lang="ca"><span>L'alçada mínima intrínseca.</span></span></dd> + <dt><code>available</code> {{experimental_inline}}</dt> + <dd>L'alçada del bloc contenidor menys el marge vertical, la vora i el farciment.</dd> + <dt><code>fit-content</code> {{experimental_inline}}</dt> + <dd><span id="result_box" lang="ca"><span>El més gran de:</span></span> + <ul> + <li><span id="result_box" lang="ca"><span>l'alçada mínima intrínseca.</span></span></li> + <li>la menor de l'alçada intrínseca preferida i l'alçada disponible.</li> + </ul> + </dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="red"> + <span>I'm 50 pixels tall.</span> +</div> +<div id="green"> + <span>I'm 25 pixels tall.</span> +</div> +<div id="parent"> + <div id="child"> + <span>I'm half the height of my parent.</span> + </div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 250px; + margin-bottom: 5px; + border: 3px solid #999999; +} + +#red { + height: 50px; +} + +#green { + height: 25px; +} + +#parent { + height: 100px; +} + +#child { + height: 50%; + width: 75%; +} +</pre> + +<p>{{EmbedLiveSample('Example')}}</p> + +<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('CSS3 Box', '#the-width-and-height-properties', 'height')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td><span id="result_box" lang="ca"><span>S'han afegit les paraules clau</span></span> <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code>, <code>content-box</code></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Mostra <code>height</code> <span class="short_text" id="result_box" lang="ca"><span>com a animable</span></span>.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Afegeix suport per als valors {{cssxref("<length>")}} i especifica en quin element s'aplica.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#height', 'height')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definició inicial</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td> + <td>{{Spec2('CSS3 Sizing')}}</td> + <td>Afegeix noves paraules clau de grandària per width i height.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>4.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + <tr> + <td><code>fill</code>, <code>fit-content</code>, <code>min-content</code>, <code>max-content</code></td> + <td>{{CompatChrome(46.0)}}</td> + <td>{{CompatUnknown}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>fill</code>, <code>fit-content</code>, <code>min-content</code>, <code>max-content</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}}</td> + <td>{{CompatUnknown}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatChrome(46.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li><a href="/en-US/docs/CSS/box_model">model de caixa</a>, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}</li> +</ul> diff --git a/files/ca/web/css/index.html b/files/ca/web/css/index.html new file mode 100644 index 0000000000..89ff6655ca --- /dev/null +++ b/files/ca/web/css/index.html @@ -0,0 +1,65 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - Design + - Landing + - Layout + - Reference + - 'l10n:priority' +translation_of: Web/CSS +--- +<p><strong>Fulles d'estil en cascada (CSS)</strong> són un llenguatge de <a href="https://developer.mozilla.org/en-US/docs/DOM/stylesheet">full d'estil (stylsheet)</a> utilitzat per descriure la presentació d'un document escrit en <span class="seoSummary"><a href="https://developer.mozilla.org/en-US/docs/HTML" title="HyperText Markup Language">HTML</a></span> o <a href="https://developer.mozilla.org/en-US/docs/XML">XML</a> (incloent dialectes de XML com <a href="https://developer.mozilla.org/en-US/docs/SVG">SVG</a> o <a href="https://developer.mozilla.org/en-US/docs/XHTML">XHTML</a>). CSS descriu com els elements han de ser presentats a la pantalla, en paper, en la parla, o en altres mitjans de comunicació.</p> + +<p>CSS és un dels idiomes principals de la <em>web oberta</em> i té una <a class="external" href="http://w3.org/Style/CSS/#specs">especificació en W3C </a>estandarditzada. Desenvolupat en nivells, CSS1 ja està obsoleta, CSS2.1 és una recomanació i <a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>, ara dividit en mòduls més petits, està progressant en el camí de la normalització.</p> + +<section id="sect1"> +<ul class="card-grid"> + <li><span>CSS Referència</span> + + <p>Una <a href="/en-US/docs/Web/CSS/Reference">referència exhaustiva</a> per als desenvolupadors web experimentats que descriu totes les propietats i conceptes de CSS..</p> + </li> + <li><span>CSS Tutorial</span> + <p>Una ajuda completa per <a href="/en-US/docs/CSS/Getting_Started" title="Getting Started">introduir pas a pas</a> els principiants a començar. Presenta tots els fonaments necessaris.</p> + </li> + <li><span>CSS3 Demos</span> + <p>Una <a href="/en-US/demos/tag/tech:css3">col.lecció de demos </a>que mostren les últimes tecnologies CSS en acció: un impuls per a la creativitat.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentació_i_tutorials">Documentació i tutorials</h2> + +<dl> + <dt>CSS conceptes calu</dt> + <dd>Descriu la <a href="/en-US/docs/CSS/Syntax">sintaxi i les formes del llenguatge</a> i introdueix els fonaments com <a href="/en-US/docs/CSS/Specificity">specificity</a> i <a href="/en-US/docs/CSS/inheritance">inheritance</a>, la <a href="/en-US/docs/CSS/box_model">box model</a> i <a href="/en-US/docs/CSS/margin_collapsing">margin collapsing</a>, <a href="/en-US/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">stacking</a> i contextos de <a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">block-formatting</a> , o la <a href="/en-US/docs/CSS/initial_value">initial</a>, <a href="/en-US/docs/CSS/computed_value">computed</a>, <a href="/en-US/docs/CSS/used_value">used</a> i els valors <a href="/en-US/docs/CSS/actual_value">reals</a>. Les entitats com <a href="/en-US/docs/CSS/Shorthand_properties">CSS shorthand properties</a> també es defineixen.</dd> + <dt><a href="/en-US/docs/Web/Guide/CSS">CSS guia per a desenvolupadors</a></dt> + <dd>Articles per ajudar a aprendre de tot, des dels conceptes bàsics per donar estil a HTML a diverses tècniques CSS per fer brillar el seu contingut.</dd> + <dt><a href="/en-US/docs/Web/CSS/Common_CSS_Questions">CSS preguntes comuns</a></dt> + <dd><span id="result_box" lang="ca"><span>Les</span> <span>respostes</span> <span>a preguntes</span> <span>comuns</span> <span>sobre</span> <span>CSS.</span></span></dd> +</dl> +</div> + +<div class="section"> +<h2 class="Tools" id="Eines_per_al_desenvolupament_de_CSS"><span class="short_text" id="result_box" lang="ca"><span>Eines</span> <span>per al</span> <span>desenvolupament</span> <span>de CSS</span></span></h2> + +<ul> + <li>El <a class="external" href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> ccomprovar si el CSS es vàlid. El servei en <a href="http://www.onlinewebcheck.com/">OnlineWebCheck.com</a> també fa el mateix. Aquestes són eines de depuració de valor incalculable.</li> + <li><a href="/en-US/docs/Tools">Firefox Developer Tools</a> permet la visualització i edició de CSS en directe d'una pàgina a través de les eines <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a> i <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>.</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug extension</a> per Firefox, una extensió popular d'aquest navegador que permet editar el codi CSS en viu en llocs vigilats. Molt pràctic per provar alguns canvis, tot i que aquesta extensió fa molt més</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer extension</a> per Firefox també permet veure i editar el codi CSS en viu en llocs vigilats. Més simple que Firebug, encara que menys potent.</li> + <li><a href="/en-US/docs/Web/CSS/Tools">Eines CSS diverses.</a></li> +</ul> +</div> +</div> +</section> + +<h2 id="Veure">Veure</h2> + +<ul> + <li>Mozilla's <a href="/en-US/Learn/CSS">Learning CSS section</a></li> + <li>Els llenguatges web CSS s'aplica sovint a: <a href="/en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/SVG">SVG</a>, <a href="/en-US/docs/XHTML">XHTML</a> i <a href="/en-US/docs/XML">XML</a>.</li> + <li>Les tecnologies de Mozilla fan un ampli ús de CSS: <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>, <a href="/en-US/Firefox">Firefox</a> i <a href="/en-US/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/en-US/docs/Extensions">extensions</a> i <a href="/en-US/Add-ons/Themes">themes</a>.</li> +</ul> diff --git a/files/ca/web/css/margin-bottom/index.html b/files/ca/web/css/margin-bottom/index.html new file mode 100644 index 0000000000..7704f229b4 --- /dev/null +++ b/files/ca/web/css/margin-bottom/index.html @@ -0,0 +1,192 @@ +--- +title: margin-bottom +slug: Web/CSS/margin-bottom +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin-bottom +--- +<div>{{CSSRef}}</div> + +<p>La propietat <a href="/en-US/docs/CSS">CSS</a> <strong><code>margin-bottom</code></strong> estableix l'<a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">àrea de marge</a> a la part inferior d'un element. Un valor positiu el situarà més enllà del normal dels seus veïns, mentre que un valor negatiu el situarà més a prop.</p> + +<pre class="brush:css no-line-numbers">/* <length> values */ +margin-bottom: 10px; /* An absolute length */ +margin-bottom: 1em; /* relative to the text size */ +margin-bottom: 5%; /* relative to the nearest block container's width */ + +/* Keyword values */ +margin-bottom: auto; + +/* Global values */ +margin-bottom: inherit; +margin-bottom: initial; +margin-bottom: unset; +</pre> + +<p><img alt="The effect of the CSS margin-bottom property on the element box" src="/files/4045/margin-bottom.svg" style="border: 1px solid; display: block; height: 130px; margin-left: auto; margin-right: auto; width: 400px;"></p> + +<p><span id="result_box" lang="ca"><span>Aquesta propietat no té cap efecte sobre els elements en línia no reemplaçats, com ara</span></span> {{HTMLElement("tt")}} o {{HTMLElement("span")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxi</h2> + +<p><span id="result_box" lang="ca"><span>La propietat</span></span> <code>margin-bottom</code> <span id="result_box" lang="ca"><span>és especificada amb la paraula clau</span></span> <code>auto</code>, o un <code><length></code>, o un <code><percentage></code>. <span id="result_box" lang="ca"><span>El seu valor pot ser positiu, zero o negatiu</span></span>.</p> + +<h3 id="Values" name="Values">Valors</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>La grandària del marge com a valor fix.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>La grandària del marge com a percentatge, en relació amb l'<em>amplada</em> del bloc contenidor.</dd> + <dt><code>auto</code></dt> + <dd><span id="result_box" lang="ca"><span>El navegador selecciona un valor adequat per utilitzar.</span> <span>Veure</span></span> {{cssxref("margin")}}.</dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="container"> +<div class="box0">Box 0</div> +<div class="box1">Box 1</div> +<div class="box2">Box one's negative margin pulls me up</div> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<p><span id="result_box" lang="ca"><span>CSS per divs per establir</span></span> margin-bottom i height</p> + +<pre class="brush: css">.box0 { + margin-bottom:1em; + height:3em; +} +.box1 { + margin-bottom:-1.5em; + height:4em; +} +.box2 { + border:1px dashed black; + border-width:1px 0; + margin-bottom:2em; +} + +</pre> + +<p><span id="result_box" lang="ca"><span>Algunes definicions per a contenidors i divs permeten veure de manera més clara els efectes dels marges</span></span>.</p> + +<pre class="brush: css">.container { + background-color:orange; + width:320px; + border:1px solid black; +} +div { + width:320px; + background-color:gold; +}</pre> + +<p>{{ EmbedLiveSample('Example',350,200) }}</p> + +<h2 id="Especificacions">Especificacions</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificació</th> + <th scope="col">Estat</th> + <th scope="col">Comenteri</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Box', '#margin-bottom', 'margin-bottom')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>No hi ha canvis significatius</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defineix <code>margin-bottom</code> com animable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>Elimina el seu efecte en elements en línia</span></span>.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}</td> + <td>{{Spec2('CSS1')}}</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>auto</code> value</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>6.0 (strict mode)</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ca/web/css/margin-left/index.html b/files/ca/web/css/margin-left/index.html new file mode 100644 index 0000000000..388c6f9a4c --- /dev/null +++ b/files/ca/web/css/margin-left/index.html @@ -0,0 +1,219 @@ +--- +title: margin-left +slug: Web/CSS/margin-left +tags: + - CSS + - CSS Property + - Layout + - Reference +translation_of: Web/CSS/margin-left +--- +<div>{{CSSRef()}}</div> + +<p>La propietat <a href="/en/CSS">CSS</a> <strong><code>margin-left</code></strong> estableix l'<a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">àrea de marge</a> en el costat esquerre d'un element. Un valor positiu el situarà més enllà del normal dels seus veïns, mentre que un valor negatiu el situarà més a prop.</p> + +<pre class="brush:css no-line-numbers">/* <length> values */ +margin-left: 10px; /* An absolute length */ +margin-left: 1em; /* relative to the text size */ +margin-left: 5%; /* relative to the nearest block container's width */ + +/* Keyword values */ +margin-left: auto; + +/* Global values */ +margin-left: inherit; +margin-left: initial; +margin-left: unset; +</pre> + +<p><img alt="Area on which CSS margin-left apply" src="/files/4039/margin-left.svg" style="border-style: solid; border-width: 1px; display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Els marges verticals de dues caixes adjacents es poden fusionar. Això es diu <a href="/en-US/docs/CSS/margin_collapsing" title="/en-US/docs/CSS/margin_collapsing"><em>col.lapse de marge</em></a>.</p> + +<p>En els casos excepcionals en què l'amplada està massa restringida (és a dir, quan es defineixen tots els <code>width</code>, <code>margin-left</code>, <code>border</code>, <code>padding</code>, l'àrea de contingut i <code>margin-right</code>), s'ignora el <code>margin-left</code> i tindrà el mateix valor calculat que si s'especifica el valor <code>auto</code>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxi</h2> + +<p><span id="result_box" lang="ca"><span>La propietat</span></span> <code>margin-left</code> <span id="result_box" lang="ca"><span>és especificada amb la paraula clau</span></span> <code>auto</code>, o un <code><length></code>, o un <code><percentage></code>. <span id="result_box" lang="ca"><span>El seu valor pot ser positiu, zero o negatiu</span></span>.</p> + +<h3 id="Values" name="Values">Valors</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>La grandària del marge com a valor fix.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>La grandària del marge com a percentatge, en relació amb l'<em>amplada</em> del bloc contenidor.</dd> + <dt><code>auto</code></dt> + <dd>El marge esquerre rep una part de l'espai horitzontal no utilitzat, tal com es determina principalment pel mode de disseny que s'utilitza. Si els valors de <code>margin-left</code> i <code>margin-right</code> són <code>auto</code>, l'espai calculat es distribueix de manera uniforme. Aquesta taula resumeix els diferents casos: + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Valor de {{cssxref("display")}}</th> + <th scope="col">Valor de {{cssxref("float")}}</th> + <th scope="col">Valor de {{cssxref("position")}}</th> + <th scope="col">Valor calculat d'auto</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th> + <th><em>qualsevol</em></th> + <th><code>static</code> o <code>relative</code></th> + <td><code>0</code></td> + <td>Mode de disseny en línia</td> + </tr> + <tr> + <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th> + <th><em>qualsevol</em></th> + <th><code>static</code> o <code>relative</code></th> + <td><code>0</code>, excepte si tant <code>margin-left</code> i <code>margin-right</code> s'estableixen en <code>auto</code>. En aquest cas, s'estableix el valor que centra l'element dins del seu pare.</td> + <td>Mode de disseny de block</td> + </tr> + <tr> + <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th> + <th><code>left</code> o <code>right</code></th> + <th><code>static</code> o <code>relative</code></th> + <td><code>0</code></td> + <td>Mode de disseny de block (element flotant)</td> + </tr> + <tr> + <th><em>qualsevol </em><code>table-*</code><em>, excepte </em><code>table-caption</code></th> + <th><em>qualsevol</em></th> + <th><em>qualsevol</em></th> + <td><code>0</code></td> + <td>Els elements interns de <code>table-*</code> no tenen marges, utilitzeu {{ cssxref("border-spacing") }} en el seu lloc</td> + </tr> + <tr> + <th><em>qualsevol, excepte <code>flex</code>,</em> <code>inline-flex</code><em>, o </em><code>table-*</code></th> + <th><em>qualsevol</em></th> + <th><em><code>fixed</code></em> o <code>absolute</code></th> + <td><code>0</code>, excepte si tant <code>margin-left</code> i <code>margin-right</code> s'estableixen en <code>auto</code>. En aquest cas, s'estableix el valor que centra l'àrea de vora dins de <code>width</code> disponible, si es fixa.</td> + <td>Mode de disseny absolutament posicionat</td> + </tr> + <tr> + <th><code>flex</code>, <code>inline-flex</code></th> + <th><em>qualsevol</em></th> + <th><em>qualsevol</em></th> + <td><code>0</code>, excepte si hi ha algun espai lliure horitzontal positiu. En aquest cas, es distribueix uniformement a tots els marges <code>auto</code> horitzontals.</td> + <td><span class="short_text" id="result_box" lang="ca"><span>Mode de disseny Flexbox</span></span></td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax()}}</pre> + +<h2 id="Examples" name="Examples">Exemples</h2> + +<pre>.content { margin-left: 5%; } +.sidebox { margin-left: 10px; } +.logo { margin-left: -5px; } +</pre> + +<h2 id="Specifications" name="Specifications">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('CSS3 Box', '#the-margin', 'margin-left')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>No hi ha cap canvi significatiu des de CSS 2.1.</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-left')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defineix <code>margin-left</code> com animable.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Defineix el comportament de <code>margin-left</code> en elements flex.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td><span id="result_box" lang="ca"><span>Igual que a CSS1, però elimina el seu efecte en els elements en línia</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#margin-left', 'margin-left')}}</td> + <td>{{Spec2('CSS1')}}</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>auto</code> value</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>6.0 (strict mode)</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ca/web/css/margin-right/index.html b/files/ca/web/css/margin-right/index.html new file mode 100644 index 0000000000..eada94a607 --- /dev/null +++ b/files/ca/web/css/margin-right/index.html @@ -0,0 +1,218 @@ +--- +title: margin-right +slug: Web/CSS/margin-right +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin-right +--- +<div>{{CSSRef}}</div> + +<p>La propietat <a href="https://developer.mozilla.org/en/CSS">CSS</a> <strong><code>margin-right</code></strong> estableix l'<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">àrea de marge</a> en el costat dret d'un element . Un valor positiu el situarà més enllà del normal dels seus veïns, mentre que un valor negatiu el situarà més a prop.</p> + +<pre class="brush:css no-line-numbers">/* <length> values */ +margin-right: 20px; /* An absolute length */ +margin-right: 1em; /* relative to the text size */ +margin-right: 5%; /* relative to the nearest block container's width */ + +/* Keyword values */ +margin-right: auto; + +/* Global values */ +margin-right: inherit; +margin-right: initial; +margin-right: unset; +</pre> + +<p><img alt="The effect of the CSS margin-right property on the element box" src="/files/4041/margin-right.svg" style="border: solid 1px; display: block; height: 200px; margin-left: auto; margin-right: auto; width: 400px;"></p> + +<p>Els marges verticals de dues caixes adjacents es poden fusionar. Això es diu <a href="https://developer.mozilla.org/en-US/docs/CSS/margin_collapsing" title="/en-US/docs/CSS/margin_collapsing"><em>col.lapse de marge</em></a>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxi</h2> + +<p><span id="result_box" lang="ca"><span>La propietat</span></span> <code>margin-right</code> <span id="result_box" lang="ca"><span>és especificada amb la paraula clau</span></span> <code>auto</code>, o un <code><length></code>, o un <code><percentage></code>. El seu valor pot ser positiu, zero o negatiu.</p> + +<h3 id="Values" name="Values">Valors</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>La grandària del marge com a valor fix.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>La grandària del marge com a percentatge, en relació amb l'<em>amplada</em> del bloc contenidor.</dd> + <dt><code>auto</code></dt> + <dd>El marge esquerre rep una part de l'espai horitzontal no utilitzat, tal com es determina principalment pel mode de disseny que s'utilitza. Si els valors de <code>margin-left</code> i <code>margin-right</code> sòn <code>auto</code>, l'espai calculat es distribueix de manera uniforme. Aquesta taula resumeix els diferents casos: + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Valor de {{cssxref("display")}}</th> + <th scope="col">Valor de {{cssxref("float")}}</th> + <th scope="col">Valor de {{cssxref("position")}}</th> + <th scope="col">Valor calculat d'auto</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th> + <th><em>qualsevol</em></th> + <th><code>static</code> o <code>relative</code></th> + <td><code>0</code></td> + <td>Mode de disseny en línia</td> + </tr> + <tr> + <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th> + <th><em>qualsevol</em></th> + <th><code>static</code> o <code>relative</code></th> + <td><code>0</code>, excepte si tant <code>margin-left</code> i <code>margin-right</code> s'estableixen en <code>auto</code>. En aquest cas, s'estableix el valor que centra l'element dins del seu pare.</td> + <td>Mode de disseny de block</td> + </tr> + <tr> + <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th> + <th><code>left</code> o <code>right</code></th> + <th><code>static</code> o <code>relative</code></th> + <td><code>0</code></td> + <td>Mode de disseny de block (element flotant)</td> + </tr> + <tr> + <th><em>qualsevol</em> <em> </em><code>table-*</code><em>, excepte </em><code>table-caption</code></th> + <th><em>qualsevol</em></th> + <th><em>qualsevol</em></th> + <td><code>0</code></td> + <td>Els elements interns de <code>table-*</code> no tenen marges, utilitzeu {{ cssxref("border-spacing") }} en el seu lloc</td> + </tr> + <tr> + <th><em>qualsevol</em> <em>, excepte <code>flex</code>,</em> <code>inline-flex</code><em>, or </em><code>table-*</code></th> + <th><em>qualsevol</em></th> + <th><em><code>fixed</code></em> o <code>absolute</code></th> + <td><code>0</code>, excepte si tant <code>margin-left</code> i <code>margin-right</code> s'estableixen en <code>auto</code>. En aquest cas, s'estableix el valor que centra l'àrea de vora dins de <code>width</code> disponible, si es fixa.</td> + <td>Mode de disseny absolutament posicionat</td> + </tr> + <tr> + <th><code>flex</code>, <code>inline-flex</code></th> + <th><em>qualsevol</em></th> + <th><em>qualsevol</em></th> + <td><code>0</code>, excepte si hi ha algun espai lliure horitzontal positiu. En aquest cas, es distribueix uniformement a tots els marges <code>auto</code> horitzontals.</td> + <td><span class="short_text" id="result_box" lang="ca"><span>Mode de disseny Flexbox</span></span></td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Exemples</h2> + +<pre class="eval">.content { margin-right: 5%; } +.sidebox { margin-right: 10px; } +.logo { margin-right: -5px; } +</pre> + +<h2 id="Specifications" name="Specifications">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('CSS3 Box', '#the-margin', 'margin-right') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>No hi ha cap canvi significatiu</span></span></td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin-right') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defineix <code>margin-right</code> com animable.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Defineix el comportament de <code>margin-right</code> en elements flex.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td><span id="result_box" lang="ca"><span>Elimina el seu efecte en els elements en línia</span></span></td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#margin-right', 'margin-right') }}</td> + <td>{{ Spec2('CSS1') }}</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td> + <p>valor <code>auto</code></p> + </td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>6.0 (strict mode)</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("1") }}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ca/web/css/margin-top/index.html b/files/ca/web/css/margin-top/index.html new file mode 100644 index 0000000000..9642251af6 --- /dev/null +++ b/files/ca/web/css/margin-top/index.html @@ -0,0 +1,156 @@ +--- +title: margin-top +slug: Web/CSS/margin-top +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin-top +--- +<div>{{CSSRef}}</div> + +<p>La propietat <a href="https://developer.mozilla.org/en/CSS">CSS</a> <strong><code>margin-top</code></strong> estableix l'<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">àrea de marge</a> en la part superior d'un element . Un valor positiu el situarà més enllà del normal dels seus veïns, mentre que un valor negatiu el situarà més a prop.</p> + +<pre class="brush:css no-line-numbers">/* <length> values */ +margin-top: 10px; /* An absolute length */ +margin-top: 1em; /* relative to the text size */ +margin-top: 5%; /* relative to the nearest block container's width */ + +/* Keyword values */ +margin-top: auto; + +/* Global values */ +margin-top: inherit; +margin-top: initial; +margin-top: unset; +</pre> + +<p><img alt="The effect of the CSS margin-top property on the element box" src="/files/4101/margin-top.svg" style="border-style: solid; border-width: 1px; display: block; margin-left: auto; margin-right: auto;"></p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxi</h2> + +<p><span id="result_box" lang="ca"><span>La propietat</span></span> <code>margin-top</code> <span id="result_box" lang="ca"><span>és especificada amb la paraula clau</span></span> <code>auto</code>, o un <code><length></code>, o un <code><percentage></code>. El seu valor pot ser positiu, zero o negatiu.</p> + +<h3 id="Values" name="Values">Valors</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>La grandària del marge com a valor fix.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>La grandària del marge com a percentatge, en relació amb l'<em>amplada</em> del bloc contenidor.</dd> + <dt><code>auto</code></dt> + <dd><span id="result_box" lang="ca"><span>El navegador selecciona un valor adequat per utilitzar.</span> <span>Veure</span></span> {{cssxref("margin")}}.</dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Exemples</h2> + +<pre class="brush:css;">.content { margin-top: 5%; } +.sidebox { margin-top: 10px; } +.logo { margin-top: -5px; } +#footer { margin-top: 1em; } +</pre> + +<h2 id="Specifications" name="Specifications">Especificacions</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificació</th> + <th scope="col">Estat</th> + <th scope="col">Comentsri</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Box', '#the-margin', 'margin-top')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>No hi ha cap canvi significatiu</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-top')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defineix <code>margin-top</code> com animable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-top')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td><span id="result_box" lang="ca"><span>Elimina el seu efecte en els elements en línia</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#margin-top', 'margin-top')}}</td> + <td>{{Spec2('CSS1')}}</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td> + <p>valor <code>auto</code></p> + </td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>6.0 (strict mode)</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ca/web/css/margin-trim/index.html b/files/ca/web/css/margin-trim/index.html new file mode 100644 index 0000000000..fca1c48772 --- /dev/null +++ b/files/ca/web/css/margin-trim/index.html @@ -0,0 +1,96 @@ +--- +title: margin-trim +slug: Web/CSS/margin-trim +translation_of: Web/CSS/margin-trim +--- +<p>{{CSSRef}}</p> + +<p>La propietat <code>margin-trim</code> permet al contenidor retallar els marges dels seus fills on s'adhereixen a les vores del contenidor.</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<dl> + <dt><code>none</code></dt> + <dd>Els marges no són retallats pel contenidor.</dd> + <dt><code>in-flow</code></dt> + <dd> + <p>Per a les caixes in-flow contingudes per aquesta caixa, els marges block-axis adjacents a les vores de la caixa estan truncats a zero.</p> + + <p>També trunca qualsevol marge col·lapsat amb aquest marge.</p> + </dd> + <dt><code>all</code></dt> + <dd>Retalla els marges de les caixes in-flow i floats, els marges dels quals coincideixen amb la vora del contingut del contenidor.</dd> +</dl> + +<h2 id="Definició_formal">Definició formal</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxi_formal">Sintaxi formal</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Ús_bàsic">Ús bàsic</h3> + +<p>Una vegada que es doni suport a aquesta propietat, probablement funcionarà així::</p> + +<p>Quan tinguem un contenidor amb alguns fills en línia i vulguem posar un marge entre cada fill, però no interferir amb l'espaiat al final de la fila, podem fer una cosa així:</p> + +<pre class="brush: css notranslate">article { + background-color: red; + margin: 20px; + padding: 20px; + display: inline-block; +} + +article > span { + background-color: black; + color: white; + text-align: center; + padding: 10px; + margin-right: 20px; +}</pre> + +<p>El problema aquí és que acabaríem amb 20px massa espaiat a la dreta de la fila, així que tal vegada fariem això per a arreglar-ho:</p> + +<pre class="brush: css notranslate">span:last-child { + margin-right: 0; +}</pre> + +<p>És un dolor haver d'escriure una altra norma per a aconseguir-lo, i tampoc és molt flexible. En lloc d'això, <code>margin-trim</code> podria arreglar-ho:</p> + +<pre class="brush: css notranslate"> article { + margin-trim: in-flow; + ... +}</pre> + +<h2 id="Especificacions">Especificacions</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Especificacions</th> + <th>Estat</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Box', '#margin-trim', 'margin-trim')}}</td> + <td>{{Spec2('CSS4 Box')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilitat_amb_el_navegador">Compatibilitat amb el navegador</h2> + +<div class="hidden">La taula de compatibilitat d'aquesta pàgina es genera a partir de dades estructurades. Si es vol contribuir a les dades, consulteu out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i enviar una sol·licitud d'extracció.</div> + +<p>{{Compat("css.properties.margin-trim")}}</p> + +<h2 id="Veure_també">Veure també</h2> + +<ul> + <li>{{CSSxRef("margin")}}</li> +</ul> diff --git a/files/ca/web/css/margin/index.html b/files/ca/web/css/margin/index.html new file mode 100644 index 0000000000..514a06cd6a --- /dev/null +++ b/files/ca/web/css/margin/index.html @@ -0,0 +1,302 @@ +--- +title: margin +slug: Web/CSS/margin +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin +--- +<div>{{CSSRef}}</div> + +<p>La propietat <a href="/en/CSS">CSS</a> <strong><code>margin</code></strong> estableix l'àrea del marge en els quatre costats d'un element. És una abreviatura que estableix tots els marges individuals alhora: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} i {{cssxref("margin-left")}}.</p> + +<pre class="brush:css no-line-numbers">/* Apply to all four sides */ +margin: 1em; + +/* vertical | horizontal */ +margin: 5% auto; + +/* top | horizontal | bottom */ +margin: 1em auto 2em; + +/* top | right | bottom | left */ +margin: 2px 1em 0 auto; + +/* Global values */ +margin: inherit; +margin: initial; +margin: unset; +</pre> + +<div class="hidden" id="margin"> +<pre class="brush: html"><div class="grid"> + <div class="col"> + <div class="cell"> + <div class="m m0">margin: 0</div> + </div> + <div class="cell"> + <div class="m m1">margin: 1em</div> + </div> + <div class="cell"> + <div class="m m2">margin: 5% auto</div> + </div> + <div class="cell"> + <div class="m m3">margin: 1em auto 2em</div> + </div> + <div class="cell"> + <div class="m m4">margin: 5px 1em 0 auto</div> + </div> + <div class="note">All the boxes above have the same width of 50%</div> + </div> +</div></pre> + +<pre class="brush: css">html,body { + height: 100%; + box-sizing: border-box; +} + +.grid { + width: 100%; + height: 100%; + display: flex; + background: #EEE; + font: 1em monospace; +} + +.col { + display: flex; + flex: 1 auto; + flex-direction: column; +} + +.cell { + box-sizing: border-box; + margin: .5em; + padding: 0; + background-color: #FFF; + overflow: hidden; + text-align: center; +} + +.note { + background: #fff3d4; + padding: 1em; + margin: .5em; + font: .8em sans-serif; + text-align: center; + flex: none; +} + +.m { + display: block; + width: 50%; + text-align: left; + background: #E4F0F5; + padding: .5em; + border: 1px solid; +} + +.m0 { margin: 0; } +.m1 { margin: 1em; } +.m2 { margin: 5% auto; } +.m3 { margin: 1em auto 2em; } +.m4 { margin: 5px 1em 0 auto; }</pre> +</div> + +<p>{{EmbedLiveSample("margin", "100%", 400, "", "", "example-outcome-frame")}}</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<p>La propietat <code>margin</code> es pot especificar usant un, dos, tres o quatre valors. Cada valor és un <code><a href="#<length>"><length></a></code>, un <code><a href="#<percentage>"><percentage></a></code>, o la paraula clau <code><a href="#auto">auto</a></code>. Cada valor pot ser positiu, zero o negatiu.</p> + +<ul> + <li>Quan s'especifica <strong>un</strong> valor, s'aplica el mateix marge als <strong>quatre costats</strong>.</li> + <li>Quan s'especifiquen <strong>dos</strong> valors, el primer marge s'aplica a la part <strong>superior i inferior</strong>, el segon a l'<strong>esquerra i a la dreta</strong>.</li> + <li>Quan s'especifiquen <strong>tres</strong> valors, el primer marge s'aplica a la part <strong>superior</strong>, el segon a l'<strong>esquerra i a la dreta</strong>, el tercer a la part <strong>inferior</strong>.</li> + <li>Quan s'especifiquen <strong>quatre</strong> valors, els marges s'apliquen a la part <strong>superior, dreta, inferior </strong>i<strong> esquerra</strong> en aquest ordre (en el sentit de les agulles del rellotge).</li> +</ul> + +<h3 id="Valors">Valors</h3> + +<dl> + <dt><strong>{{cssxref("length")}}</strong></dt> + <dd>La grandària del marge com a valor fix.</dd> + <dt>{{cssxref("percentage")}}</dt> + <dd>La grandària del marge com a percentatge, en relació amb l'<em>amplada</em> del bloc contenidor.</dd> + <dt><code>auto</code></dt> + <dd>El navegador selecciona un marge adequat per utilitzar-lo. Per exemple, en alguns casos aquest valor es pot utilitzar per centrar un element.</dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_senzill">Exemple senzill</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="center">This element is centered.</div> + +<div class="outside">This element is positioned outside of its container.</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css; highlight:[2,8]">.center { + margin: auto; + background: lime; + width: 66%; +} + +.outside { + margin: 3rem 0 0 -3rem; + background: cyan; + width: 66%; +}</pre> + +<p>{{ EmbedLiveSample('Simple_example','100%',120) }}</p> + +<h3 id="Més_exemples"><span class="short_text" id="result_box" lang="ca"><span>Més exemples</span></span></h3> + +<pre class="brush: css">margin: 5%; /* all sides: 5% margin */ + +margin: 10px; /* all sides: 10px margin */ + +margin: 1.6em 20px; /* top and bottom: 1.6em margin */ + /* left and right: 20px margin */ + +margin: 10px 3% 1em; /* top: 10px margin */ + /* left and right: 3% margin */ + /* bottom: 1em margin */ + +margin: 10px 3px 30px 5px; /* top: 10px margin */ + /* right: 3px margin */ + /* bottom: 30px margin */ + /* left: 5px margin */ + +margin: 2em auto; /* top and bottom: 2em margin */ + /* box is horizontally centered */ + +margin: auto; /* top and bottom: 0 margin */ + /* box is horizontally centered */ +</pre> + +<h2 id="Notes">Notes</h2> + +<h3 id="Centrat_horitzontal"><span id="result_box" lang="ca"><span>Centrat horitzontal</span></span></h3> + +<p>Per centrar alguna cosa horitzontalment en els navegadors moderns, podeu utilitzar <code><a href="/en-US/docs/Web/CSS/display">display</a>: flex; <a href="/en-US/docs/Web/CSS/justify-content">justify-content</a>: center;</code> .</p> + +<p>Tanmateix, en navegadors antics com IE8-9 que no admeten el disseny de flexbox, aquests no estan disponibles. Per centrar un element dins del seu pare, utilitzeu <code>margin: 0 auto;</code> .</p> + +<h3 id="Col.lapse_del_marge">Col.lapse del marge</h3> + +<p>Els marges superior i inferior d'elements solen col·lapsar-se en un únic marge igual al major dels dos marges. Consulteu <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Dominar el col.lapse del marge</a> per obtenir més informació.</p> + +<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('CSS3 Box', '#margin', 'margin') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>No hi ha canvis significatius</span></span> .</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defineix <code>margin</code> com animable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>Elimina el seu efecte en elements en línia</span></span> .</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Definició iniciaI.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>auto</code> value</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>6.0 (strict mode)</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("1") }}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">Model de caixa CSS</a></li> + <li><a class="internal" href="/en/CSS/margin_collapsing" title="en/CSS/margin collapsing">Col.lapse del marge</a></li> +</ul> diff --git a/files/ca/web/css/max-height/index.html b/files/ca/web/css/max-height/index.html new file mode 100644 index 0000000000..9ae113b699 --- /dev/null +++ b/files/ca/web/css/max-height/index.html @@ -0,0 +1,223 @@ +--- +title: max-height +slug: Web/CSS/max-height +tags: + - CSS + - CSS Property + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/CSS/max-height +--- +<div>{{CSSRef}}</div> + +<p>La propietat <a href="/en-US/docs/CSS">CSS</a> <strong><code>max-height</code></strong> estableix l'alçada màxima d'un element. Impedeix que el <a href="/en-US/docs/Web/CSS/used_value">valor utilitzat</a> per la propietat {{ Cssxref("height") }} sigui més gran que el valor especificat per <code>max-height</code>.</p> + +<pre class="brush:css no-line-numbers">/* <length> value */ +max-height: 3.5em; + +/* <percentage> value */ +max-height: 75%; + +/* Keyword values */ +max-height: none; +max-height: max-content; +max-height: min-content; +max-height: fit-content; +max-height: fill-available; + +/* Global values */ +max-height: inherit; +max-height: initial; +max-height: unset; +</pre> + +<p>{{ Cssxref("max-height") }} anul·la {{cssxref("height")}}, <span id="result_box" lang="ca"><span>però</span></span> {{ Cssxref("min-height") }} anul·la {{ Cssxref("max-height") }}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxi</h2> + +<h3 id="Values" name="Values">Valors</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd><span id="result_box" lang="ca"><span>L'alçada màxima, expressada com</span></span> {{cssxref("<length>")}}.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>L'alçada màxima, expressada com {{cssxref("<percentage>")}} de l'alçada del bloc contenidor. Si l'alçada del bloc contenidor no s'especifica explícitament, el valor del percentatge es tractarà com a zero.</dd> +</dl> + +<h4 id="Valors_de_paraules_clau">Valors de paraules clau</h4> + +<dl> + <dt><code>none</code></dt> + <dd>L'alçada no té un valor màxim.</dd> + <dt><code>max-content</code>{{experimental_inline()}}</dt> + <dd>L'alçada preferida intrínseca.</dd> + <dt><code>min-content</code>{{experimental_inline()}}</dt> + <dd>L'alçada mínima intrínseca.</dd> + <dt><code>fill-available</code>{{experimental_inline()}}</dt> + <dd>L'alçada del bloc contenidor menys el marge vertical, la vora i el farcit. (Tingueu en compte que alguns navegadors implementen un nom antic per a aquesta paraula clau, <code>available</code>.)</dd> + <dt><code>fit-content</code>{{experimental_inline()}}</dt> + <dd>El mateix que <code>max-content.</code></dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">table { max-height: 75%; } + +form { max-height: none; } +</pre> + +<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('CSS3 Sizing', '#width-height-keywords', 'max-height') }}</td> + <td>{{ Spec2('CSS3 Sizing') }}</td> + <td>Afegeix les paraules clau <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> i <code>fill-available</code>. (Els esborranys CSS3 Box i CSS3 Writing Modes s'utilitzen per definir aquestes paraules clau, però són substituïdes per aquesta especificació<em>).</em></td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-height') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defineix <code>max-height</code> com animable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Navegador compatibles</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>7.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + <tr> + <td>s'aplica a <code><table></code><sup>[1]</sup></td> + <td>{{ CompatNo() }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td rowspan="1"><code>max-content</code>, <code>min-content</code> i <code>fit-content</code> {{ experimental_inline() }}</td> + <td>{{ CompatNo() }} [3]</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}}{{property_prefix("-moz")}} [2]</td> + <td rowspan="1">{{ CompatNo() }}</td> + <td rowspan="1">{{ CompatNo() }}</td> + <td>9[3](<a href="https://bugs.webkit.org/show_bug.cgi?id=113610">bug</a>)</td> + </tr> + <tr> + <td rowspan="1"><code>fill-available</code> {{ experimental_inline() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatNo() }} {{ bug(527285) }}</td> + <td rowspan="1">{{ CompatNo() }}</td> + <td rowspan="1">{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>s'aplica a <code><table></code><sup>[1]</sup></td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td rowspan="1"><code>max-content</code>, <code>min-content</code> i <code>fit-content</code> {{ experimental_inline() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatUnknown() }}</td> + <td rowspan="1">{{ CompatUnknown() }}</td> + <td rowspan="1">{{ CompatUnknown() }}</td> + <td>9[3](<a href="https://bugs.webkit.org/show_bug.cgi?id=113610">bug</a>)</td> + </tr> + <tr> + <td rowspan="1"><code>fill-available</code> {{ experimental_inline() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatUnknown() }}</td> + <td rowspan="1">{{ CompatUnknown() }}</td> + <td rowspan="1">{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] CSS 2.1 deixa explícitament indefinit el comportament de <code>max-height</code> amb {{ HTMLElement("table") }}. Per tant, qualsevol comportament és compatible amb CSS2.1; les noves especificacions de CSS poden definir aquest comportament, de manera que els desenvolupadors web no haurien de confiar en un específic ara.</p> + +<p>[2] Gecko implementa experimentalment les definicions donades en CSS3 Basic Box. Aquesta defineix <code>available</code> i no <code>fill-available</code>. També la definició de <code>fit-content</code> és més simple que en CSS3 Sizing.</p> + +<p>[3] WebKit implementa una proposta anterior per establir l'alçada a una alçada intrínseca: les paraules clau són <code>intrinsic</code>, en comptes de <code>max-content</code> i <code>min-intrinsic</code>, en comptes de <code>min-content</code>. No hi ha equivalent per <code>fill-available</code> o <code>fit-content</code>.</p> + +<h2 id="See_also" name="See_also">Vegeu també</h2> + +<ul> + <li><a href="/en-US/docs/CSS/box_model" title="en/CSS/box_model">El model de caixa</a></li> + <li>{{ Cssxref("max-width") }}, {{ Cssxref("box-sizing") }}, {{ Cssxref("height") }}, {{ Cssxref("min-height") }}</li> +</ul> diff --git a/files/ca/web/css/max-width/index.html b/files/ca/web/css/max-width/index.html new file mode 100644 index 0000000000..445a4e76ff --- /dev/null +++ b/files/ca/web/css/max-width/index.html @@ -0,0 +1,234 @@ +--- +title: max-width +slug: Web/CSS/max-width +tags: + - CSS + - CSS Property + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/CSS/max-width +--- +<div>{{CSSRef}}</div> + +<p>La propietat <a href="https://developer.mozilla.org/en-US/docs/CSS">CSS</a> <strong><code>max-width</code></strong> estableix l'amplada màxima d'un element . Impedeix que el <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/used_value">valor utilitzat</a> per la propietat {{ Cssxref("width") }} sigui més gran que el valor especificat per <code>max-width</code>.</p> + +<pre class="brush:css no-line-numbers">/* <length> value */ +max-width: 3.5em; + +/* <percentage> value */ +max-width: 75%; + +/* Keyword values */ +max-width: none; +max-width: max-content; +max-width: min-content; +max-width: fit-content; +max-width: fill-available; + +/* Global values */ +max-width: inherit; +max-width: initial; +max-width: unset; +</pre> + +<p>{{ Cssxref("max-width") }} anul·la {{cssxref("width")}}, <span id="result_box" lang="ca"><span>però</span></span> {{ Cssxref("min-width") }} anul·la {{ Cssxref("max-width") }}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<h3 id="Valors">Valors</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd><span id="result_box" lang="ca"><span>L'amplada màxima, expressada com</span></span> {{cssxref("<length>")}}.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>L'<span id="result_box" lang="ca"><span>amplada</span></span> màxima, expressada com {{cssxref("<percentage>")}} de l'amplada del bloc contenidor.</dd> +</dl> + +<h4 id="Valors_de_paraules_clau">Valors de paraules clau</h4> + +<dl> + <dt><code>none</code></dt> + <dd>L'amplada no té un valor màxim.</dd> + <dt><code>max-content</code>{{experimental_inline()}}</dt> + <dd>L'amplada preferida intrínseca.</dd> + <dt><code>min-content</code>{{experimental_inline()}}</dt> + <dd>L'amplada mínima intrínseca.</dd> + <dt><code>fill-available</code>{{experimental_inline()}}</dt> + <dd>L'amplada del bloc contenidor menys el marge horitzontal, la vora i el farcit . ( Tingueu en compte que alguns navegadors implementen un nom antic per a aquesta paraula clau , <code>available</code>.)</dd> + <dt><code>fit-content</code>{{experimental_inline()}}</dt> + <dd>El mateix que <code>max-content.</code></dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<p><span id="result_box" lang="ca"><span>En aquest exemple, el "fill" tindrà 150 píxels d'amplada o l'amplada del "pare", el que sigui més petit:</span></span></p> + +<div id="basic-max-width-demo"> +<pre class="brush: html"><div id="parent"> + <div id="child"> + Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis. + </div> +</div> +</pre> + +<pre class="brush: css">#parent { + background: lightblue; + width: 300px; +} + +#child { + background: gold; + width: 100%; + max-width: 150px; +} +</pre> +</div> + +<p>{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}</p> + +<p>El valor <code>fit-content</code> es pot utilitzar per establir l'amplada d'un element en funció de la grandària intrínseca que requereix el seu contingut:</p> + +<div id="fit-content-demo"> +<pre class="brush: html" style="display: none;"><div id="parent"> + <div id="child"> + Child Text + </div> +</div> +</pre> + +<pre class="brush: css">#parent { + background: lightblue; + width: 300px; +} + +#child { + background: gold; + width: 100%; + max-width: -moz-fit-content; + max-width: -webkit-fit-content; +} +</pre> +</div> + +<p>{{EmbedLiveSample("fit-content-demo", 400, 100)}}</p> + +<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('CSS3 Sizing', '#width-height-keywords', 'max-width') }}</td> + <td>{{ Spec2('CSS3 Sizing') }}</td> + <td>Afegeix les paraules clau <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> i <code>fill-available</code>. (Els esborranys CSS3 Box i CSS3 Writing Modes s'utilitzen per definir aquestes paraules clau, però són substituïdes per aquesta especificació<em>).</em></td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defineix <code>max-width</code> com animable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}</td> + <td>{{ Spec2('CSS2.1') }}</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>7.0</td> + <td>4.0</td> + <td>2.0.2 (416),<br> + buggy before</td> + </tr> + <tr> + <td>s'aplica a <code><table></code><sup>[1]</sup></td> + <td>{{ CompatNo() }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td rowspan="1"><code>max-content</code>, <code>min-content</code>, <code>fit-content</code> i <code>fill-</code><code>available</code> {{ experimental_inline() }}</td> + <td>{{ CompatNo() }} [3]</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}}{{property_prefix("-moz")}} [2]</td> + <td rowspan="1">{{ CompatNo() }}</td> + <td rowspan="1">{{ CompatNo() }}</td> + <td>{{ CompatNo() }} [3]</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] CSS 2.1 deixa explícitament indefinit el comportament de <code>max-width</code> amb {{ HTMLElement("table") }}. Per tant, qualsevol comportament és compatible amb CSS2.1; les noves especificacions de CSS poden definir aquest comportament, de manera que els desenvolupadors web no haurien de confiar en un específic ara.</p> + +<p>[2] Gecko implementa experimentalment les definicions donades en CSS3 Basic Box. Aquesta defineix <code>available</code> i no <code>fill-available</code>. També la definició de <code>fit-content</code> és més simple que en CSS3 Sizing .</p> + +<p>[3] WebKit implementa una proposta anterior per establir l'alçada a una alçada intrínseca: les paraules clau són <code>intrinsic</code>, en comptes de <code>max-content</code> i <code>min-intrinsic</code>, en comptes de <code>min-content</code> No hi ha equivalent per <code>fill-available</code> o <code>fit-content</code>.</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{ Cssxref("width") }}, {{ Cssxref("min-width") }}, {{ Cssxref("max-height") }}</li> + <li><a href="/en/CSS/box_model" title="en/CSS/box_model">El model de caixa</a>, {{ Cssxref("box-sizing") }}</li> +</ul> diff --git a/files/ca/web/css/min-height/index.html b/files/ca/web/css/min-height/index.html new file mode 100644 index 0000000000..10f4f67152 --- /dev/null +++ b/files/ca/web/css/min-height/index.html @@ -0,0 +1,211 @@ +--- +title: min-height +slug: Web/CSS/min-height +tags: + - CSS + - CSS Property + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/CSS/min-height +--- +<div>{{CSSRef}}</div> + +<p>La propietat <a href="https://developer.mozilla.org/en-US/docs/CSS">CSS</a> <strong> <code>min-height</code></strong> estableix l'alçada mínima d'un element . Impedeix que el <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/used_value">valor utilitzat</a> per la propietat {{ Cssxref("height") }} sigui més petit que el valor especificat per <code>min-height</code>.</p> + +<pre class="brush:css no-line-numbers">/* <length> value */ +min-height: 3.5em; + +/* <percentage> value */ +min-height: 10%; + +/* Keyword values */ +min-height: max-content; +min-height: min-content; +min-height: fit-content; +min-height: fill-available; + +/* Global values */ +min-height: inherit; +min-height: initial; +min-height: unset; +</pre> + +<p>L'alçada de l'element s'ajusta al valor de <code>min-height</code> cada vegada que <code>min-height</code> és més gran que {{ Cssxref("max-height") }} o {{Cssxref("height")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxi</h2> + +<h3 id="Values" name="Values">Valors</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>L'alçada mínima, expressada com {{cssxref("<length>")}}. Els valors negatius fan que la declaració no sigui vàlida.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>L'alçada mínima, expressada com {{cssxref("<percentage>")}} de l'alçada del bloc contenidor. Els valors negatius fan que la declaració no sigui vàlida.</dd> +</dl> + +<h4 id="Valors_de_paraules_clau">Valors de paraules clau</h4> + +<dl> + <dt><code>auto</code></dt> + <dd><span id="result_box" lang="ca"><span>L'alçada mínima predeterminada per a elements flexibles, proporcionant un valor predeterminat més raonable que 0 per a altres dissenys.</span></span></dd> +</dl> + +<dl> + <dt><code>max-content</code> {{ experimental_inline() }}</dt> + <dd>L'alçada preferida intrínseca.</dd> + <dt><code>min-content</code> {{ experimental_inline() }}</dt> + <dd>L'alçada mínima intrínseca.</dd> + <dt><code>fill-available</code>{{ experimental_inline() }}</dt> + <dd>L'alçada del bloc contenidor menys el marge vertical, la vora i el farcit . ( Tingueu en compte que alguns navegadors implementen un nom antic per a aquesta paraula clau, <code>available</code>.)</dd> + <dt><code>fit-content</code> {{ experimental_inline() }}</dt> + <dd>Segons CSS3 Box, aquest és un sinònim de <code>min-content</code>. CSS3 Sizing defineix un algoritme més complex, però cap navegador l'implementa, fins i tot de forma experimental.</dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">table { min-height: 75%; } + +form { min-height: 0; } +</pre> + +<h2 id="Especificacions">Especificacions</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificació</th> + <th scope="col">Estat</th> + <th scope="col">Comentari</th> + </tr> + <tr> + <td>{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height') }}</td> + <td>{{ Spec2('CSS3 Sizing') }}</td> + <td>Afegeix les paraules clau <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> i <code>fill-available</code>. ( Els esborranys CSS3 Box i CSS3 Writing Modes s'utilitzen per definir aquestes paraules clau, però són substituïdes per aquesta especificació <em>)</em></td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Flexbox', '#min-auto', 'min-height') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Afegeix la paraula clau <code>auto</code> i l'utilitza com a valor inicial.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-height') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defineix <code>min-height</code> com animable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("1.9") }}</td> + <td>7.0 [3]</td> + <td>4.0</td> + <td>1.0<br> + 2.0.2 (416) for positioned elements</td> + </tr> + <tr> + <td>s'aplica a <code><table></code><sup>[1]</sup></td> + <td>{{ CompatNo() }}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>max-content</code>, <code>min-content</code>, <code>fit-content</code> i <code>fill-</code><code>available</code> {{ experimental_inline() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>9</td> + </tr> + <tr> + <td><code>auto</code>{{obsolete_inline(22)}}</td> + <td>21.0</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop("16.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>12.10</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>auto</code> com a valor incial{{obsolete_inline(22)}}</td> + <td>21.0</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop("18.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>12.10</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>9</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] CSS 2.1 deixa explícitament indefinit el comportament de <code>min-height </code>amb {{ HTMLElement("table") }}. Per tant, qualsevol comportament és compatible amb CSS2.1; les noves especificacions de CSS poden definir aquest comportament, de manera que els desenvolupadors web no haurien de confiar en un específic ara.</p> + +<p>[2] A causa de l'error ({{bug("307866")}}) Firefox no maneja <code>min-height</code> en elements amb <code>display: table-*</code>.</p> + +<p>[3] A Internet Explorer 10-11 (però no 12+), una declaració <code>min-height</code> en un contenidor flex de direcció-columna no s'aplica als elements flex del contenidor. Consulteu <a href="https://github.com/philipwalton/flexbugs#3-min-height-on-a-column-flex-container-wont-apply-to-its-flex-items">Flexbug #3</a> per més informació.</p> + +<h2 id="See_also" name="See_also">Vegeu també</h2> + +<ul> + <li>{{ Cssxref("height") }}, {{ Cssxref("max-height") }}</li> + <li>El <a href="/en-US/docs/CSS/box_model" title="en/CSS/box_model">model de caixa</a>, {{ Cssxref("box-sizing") }}</li> +</ul> diff --git a/files/ca/web/css/min-width/index.html b/files/ca/web/css/min-width/index.html new file mode 100644 index 0000000000..f0c3067728 --- /dev/null +++ b/files/ca/web/css/min-width/index.html @@ -0,0 +1,257 @@ +--- +title: min-width +slug: Web/CSS/min-width +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/min-width +--- +<div>{{CSSRef}}</div> + +<p>La propietat <a href="https://developer.mozilla.org/en-US/docs/CSS">CSS</a> <strong><code>min-width</code></strong> estableix l'amplada mínima d'un element. Impedeix que el <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/used_value">valor utilitzat</a> per la propietat {{ Cssxref("width") }} sigui més ampla que el valor especificat per <code>min-width</code>.</p> + +<pre class="brush:css no-line-numbers">/* <length> value */ +min-width: 3.5em; + +/* <percentage> value */ +min-width: 10%; + +/* Keyword values */ +min-width: max-content; +min-width: min-content; +min-width: fit-content; +min-width: fill-available; + +/* Global values */ +min-width: inherit; +min-width: initial; +min-width: unset; +</pre> + +<p>L'amplada de l'element s'ajusta al valor de <code>min-width</code> cada vegada que <code>min-width</code> és més gran que {{ Cssxref("max-width") }} o {{Cssxref("width")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<h3 id="Valors">Valors</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>L'amplada mínima, expressada com {{cssxref("<length>")}}. Els valors negatius fan que la declaració no sigui vàlida .</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>L'amplada mínima, expressada com {{cssxref("<percentage>")}} de l'amplada del bloc contenidor. Els valors negatius fan que la declaració no sigui vàlida .</dd> +</dl> + +<h4 id="Valors_de_paraules_clau">Valors de paraules clau</h4> + +<dl> + <dt><code>auto</code></dt> + <dd><span id="result_box" lang="ca"><span>L'amplada mínima predeterminada per a elements flexibles, proporcionant un valor predeterminat més raonable que 0 per a altres dissenys</span></span> .</dd> + <dt><code>max-content</code> {{ experimental_inline() }}</dt> + <dd>L'amplada preferida intrínseca.</dd> + <dt><code>min-content</code> {{ experimental_inline() }}</dt> + <dd>L'amplada mínima intrínseca.</dd> + <dt><code>fill-available</code>{{ experimental_inline() }}</dt> + <dd>L'amplada del bloc contenidor menys el marge horitzontal, la vora i el farcit. ( Tingueu en compte que alguns navegadors implementen un nom antic per a aquesta paraula clau, <code>available</code>).</dd> + <dt><code>fit-content</code> {{ experimental_inline() }}</dt> + <dd>Definit com <code>min(max-content, max(min-content, fill-available))</code>.</dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush:css;">table { min-width: 75%; } + +form { min-width: 0; } +</pre> + +<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('CSS3 Sizing', '#width-height-keywords', 'min-width') }}</td> + <td>{{ Spec2('CSS3 Sizing') }}</td> + <td>Afegeix les paraules clau <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, and <code>fill-available</code> keywords. (Els esborranys CSS3 Box i CSS3 Writing Modes s'utilitzen per definir aquestes paraules clau, però són substituïdes per aquesta especificació<em>)</em></td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Afegeix la paraula clau <code>auto</code> keyword i l'utilitza com a valor inicial.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-width') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defineix <code>min-width</code> com animable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width') }}</td> + <td>{{ Spec2('CSS2.1') }}</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0 (1.0)</td> + <td>7.0</td> + <td>4.0</td> + <td>2.0.2 (416), buggy before</td> + </tr> + <tr> + <td>s'aplica a <code><table></code> <sup>[1]</sup></td> + <td>{{ CompatNo() }}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>max-content</code>, <code>min-content</code>, <code>fit-content</code> i <code>fill-</code><code>available</code> {{ experimental_inline() }}</td> + <td>24.0 {{property_prefix("-webkit")}} [3]</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("1.9") }} {{ property_prefix("-moz") }} [2]</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }} [3]</td> + </tr> + <tr> + <td><code>auto</code></td> + <td>21.0 [4]</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop("16.0") }} [4]<br> + Removed in {{ CompatGeckoDesktop("22.0") }}<br> + Reintroduced in {{CompatGeckoDesktop("34.0")}} with the new behavior defined by the spec.</td> + <td>{{ CompatNo() }}</td> + <td>12.10 [6]</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>auto</code> com a valor inicial{{obsolete_inline()}}</td> + <td>21.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("18.0") }}<br> + Removed in {{ CompatGeckoDesktop("22.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>12.10</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</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>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}[5]</td> + </tr> + <tr> + <td>s'aplica a <code><table></code><sup>[1]</sup></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>max-content</code>, <code>min-content</code>, <code>fit-content</code> i <code>fill-</code><code>available</code> {{ experimental_inline() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>auto</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>auto</code> com a valor inicial{{obsolete_inline()}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] CSS 2.1 deixa explícitament indefinit el comportament de <code>min-width</code> amb {{ HTMLElement("table") }}. Per tant, qualsevol comportament és compatible amb CSS2.1; les noves especificacions de CSS poden definir aquest comportament, de manera que els desenvolupadors web no haurien de confiar en un específic ara.</p> + +<p>[2] Gecko implementa experimentalment les definicions donades en CSS3 Basic Box. Aquesta defineix <code>available</code> i no <code>fill-available</code>. També la definició de <code>fit-content</code> és més simple que en CSS3 Sizing.</p> + +<p>[3] <span id="result_box" lang="ca"><span>WebKit també implementa una proposta anterior, la paraula clau</span></span> <code>intrinsic</code>.</p> + +<p>[4] Aquestes implementacions on s'implementa un comportament lleugerament més simple per a aquesta paraula clau: calcula <code>min-content</code> en elements flexibles, i computa a <code>0</code> en tota la resta.</p> + +<p>[5] En alguns navegadors, a iOS, un element <button> en la seva configuració nativa (predeterminada) no respondrà a min-width. Aquest problema es deu als botons natius. Un <span> dins d'un botó natiu mostrarà el mateix problema, malgrat tenir definit "display:inline-block". Quan es fan canvis en altres paràmetres d'estil i el navegador es veu obligat a abandonar el botó natiu, la configuració min-width es veu afectada.</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{ Cssxref("width") }}, {{ Cssxref("max-width") }}</li> + <li>El <a href="/en-US/docs/Web/CSS/box_model" title="en/CSS/box_model">model de caixa</a>, {{ Cssxref("box-sizing") }}</li> +</ul> diff --git a/files/ca/web/css/overflow-x/index.html b/files/ca/web/css/overflow-x/index.html new file mode 100644 index 0000000000..28ed745f75 --- /dev/null +++ b/files/ca/web/css/overflow-x/index.html @@ -0,0 +1,192 @@ +--- +title: overflow-x +slug: Web/CSS/overflow-x +tags: + - CSS + - CSS Box Model + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/overflow-x +--- +<div>{{CSSRef}}</div> + +<p>La propietat<strong> <code>overflow-x</code></strong> especifica si s'ha de retallar el contingut, mostrar una barra de desplaçament o mostrar el contingut de desbordament d'un element de nivell de bloc, quan es desbordan les vores esquerra i dreta.</p> + +<pre class="brush:css no-line-numbers">/* El contingut no es retallat */ +overflow-x: visible; + +/* El contingut es retallat, sense barres desplaçament */ +overflow-x: hidden; + +/* El contingut es retallat, amb barres desplaçament */ +overflow-x: scroll; + +/* Deixa que el navegador decideixi */ +overflow-x: auto; + +/* Valors globals */ +overflow-x: inherit; +overflow-x: initial; +overflow-x: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<h3 id="Valors">Valors</h3> + +<dl> + <dt><code>visible</code></dt> + <dd>El contingut no es retalla i es pot mostrar fora de la caixa de contingut.</dd> + <dt><code>hidden</code></dt> + <dd>El contingut es retalla <span class="short_text" id="result_box" lang="ca"><span>i no es proporcionen barres de desplaçament</span></span>.</dd> + <dt><code>scroll</code></dt> + <dd>El contingut es retalla i els exploradors d'escriptori utilitzen barres de desplaçament, independentment que s'hagi retallat o no qualsevol contingut. Això evita qualsevol problema amb les barres de desplaçament que apareixen i desapareixen en un entorn dinàmic. Les impressores poden imprimir contingut desbordat.</dd> + <dt><code>auto</code></dt> + <dd>Depèn de l'agent d'usuari. Els navegadors d'escriptori com Firefox proporcionen barres de desplaçament si el contingut es desborda.</dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul> + <li><code>overflow-x:hidden</code> — <span class="short_text" id="result_box" lang="ca"><span>amaga el text fora de la caixa</span></span> + <div id="div1"> + ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ + </div> + </li> + + <li><code>overflow-x:scroll</code> — afegeix sempre una barra de desplaçament + <div id="div2"> + ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ + </div> + </li> + + <li><code>overflow-x:visible</code> — mostra el text fora de la caixa, si és necessari + <div id="div3"> + ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ + </div> + </li> + + <li><code>overflow-x:auto</code> — <span class="short_text" id="result_box" lang="ca"><span>a la majoria de navegadors, equivalent a</span></span> <code>scroll</code> + <div id="div4"> + ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ + </div> + </li> +</ul> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#div1, #div2, #div3, #div4 { + border: 1px solid black; + width: 250px; + margin-bottom: 12px; +} + +#div1 { overflow-x: hidden;} +#div2 { overflow-x: scroll;} +#div3 { overflow-x: visible;} +#div4 { overflow-x: auto;} +</pre> + +<h3 id="Resultat">Resultat</h3> + +<figure> +<p>{{EmbedLiveSample("Examples", "100%", "270")}}</p> +</figure> + +<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('CSS3 Overflow', '#propdef-overflow-x', 'overflow-x')}}</td> + <td>{{Spec2('CSS3 Overflow')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Box', '#overflow-x', 'overflow-x')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>5.0<sup>[1]</sup></td> + <td>9.5</td> + <td>3.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</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>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <span id="result_box" lang="ca"><span>Internet Explorer 8 va introduir</span></span> <code> -ms-overflow-x </code> <span id="result_box" lang="ca"><span>com sinònim de</span></span> <code> overflow-x</code>. <span id="result_box" lang="ca"><span>No utilitzeu el prefix</span></span> <code>-ms-</code>.</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>Propietats CSS relacionades: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li> +</ul> diff --git a/files/ca/web/css/overflow-y/index.html b/files/ca/web/css/overflow-y/index.html new file mode 100644 index 0000000000..4426f507b4 --- /dev/null +++ b/files/ca/web/css/overflow-y/index.html @@ -0,0 +1,196 @@ +--- +title: overflow-y +slug: Web/CSS/overflow-y +tags: + - CSS + - CSS Box Model + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/overflow-y +--- +<div>{{CSSRef}}</div> + +<p>La propietat <strong><code>overflow-y</code></strong> especifica si s'ha de retallar el contingut, mostrar una barra de desplaçament o mostrar el contingut de desbordament d'un element de nivell de bloc, <span class="short_text" id="result_box" lang="ca"><span>quan es desbordan les vores superior i inferior.</span></span></p> + +<pre class="brush:css no-line-numbers">/* El contingut no es retallat */ +overflow-y: visible; + +/* El contingut es retallat, sense barres desplaçament */ +overflow-y: hidden; + +/* El contingut es retallat, amb barres desplaçament */ +overflow-y: scroll; + +/* Deixa que el navegador decideixi */ +overflow-y: auto; + +/* Valors globals */ +overflow-y: inherit; +overflow-y: initial; +overflow-y: unset; +</pre> + +<div>{{cssinfo}}</div> + +<h2 id="Sintaxi">Sintaxi</h2> + +<h3 id="Valors">Valors</h3> + +<dl> + <dt><code>visible</code></dt> + <dd>El contingut no es retalla i es pot mostrar fora de la caixa de contingut.</dd> + <dt><code>hidden</code></dt> + <dd>El contingut es retalla <span class="short_text" id="result_box" lang="ca"><span>i no es proporcionen barres de desplaçament</span></span>.</dd> + <dt><code>scroll</code></dt> + <dd>El contingut es retalla i els exploradors d'escriptori utilitzen barres de desplaçament, independentment que s'hagi retallat o no qualsevol contingut. Això evita qualsevol problema amb les barres de desplaçament que apareixen i desapareixen en un entorn dinàmic. Les impressores poden imprimir contingut desbordat.</dd> + <dt><code>auto</code></dt> + <dd>Depèn de l'agent d'usuari. Els navegadors d'escriptori com Firefox proporcionen barres de desplaçament si el contingut es desborda.</dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul> + <li><code>overflow-y:hidden</code> — <span class="short_text" id="result_box" lang="ca"><span>amaga el text fora de la caixa</span></span> + <div id="div1"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + </div> + </li> + + <li><code>overflow-y:scroll</code> — afegeix sempre una barra de desplaçament + <div id="div2"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + </div> + </li> + + <li><code>overflow-y:visible</code> — mostra el text fora de la caixa, si és necessari + <div id="div3"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + </div> + </li> + + <li><code>overflow-y:auto</code> — <span class="short_text" id="result_box" lang="ca"><span>a la majoria de navegadors, equivalent a</span></span> <code>scroll</code> + <div id="div4"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + </div> + </li> +</ul> + +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#div1, +#div2, +#div3, +#div4 { + border: 1px solid black; + width: 250px; + height: 100px; +} + +#div1 { overflow-y: hidden; margin-bottom: 12px;} +#div2 { overflow-y: scroll; margin-bottom: 12px;} +#div3 { overflow-y: visible; margin-bottom: 120px;} +#div4 { overflow-y: auto; margin-bottom: 120px;} +</pre> + +<h3 id="Resultat">Resultat</h3> + +<figure> +<p>{{EmbedLiveSample("Example", "100%", "780")}}</p> +</figure> + +<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('CSS3 Overflow', '#propdef-overflow-y', 'overflow-y') }}</td> + <td>{{ Spec2('CSS3 Overflow') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Box', '#overflow-y', 'overflow-y')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>5.0 [*]</td> + <td>9.5</td> + <td>3.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</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>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[*] <span id="result_box" lang="ca"><span>IE8 va introduir</span></span> <code>-ms-overflow-y</code> <span id="result_box" lang="ca"><span>com a sinònim de</span></span> <code>overflow-y</code>. <span id="result_box" lang="ca"><span>No utilitzeu el prefix</span></span> <code>-ms-</code>.</p> + +<h2 id="See_also" name="See_also">Vegeu també</h2> + +<ul> + <li>Propietats CSS relacionades: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-x")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li> +</ul> diff --git a/files/ca/web/css/overflow/index.html b/files/ca/web/css/overflow/index.html new file mode 100644 index 0000000000..fa1264359d --- /dev/null +++ b/files/ca/web/css/overflow/index.html @@ -0,0 +1,273 @@ +--- +title: overflow +slug: Web/CSS/overflow +tags: + - CSS + - CSS Box Model + - CSS Property + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/CSS/overflow +--- +<div>{{CSSRef}}</div> + +<p>La propietat CSS <strong><code>overflow</code></strong> especifica si s'ha de retallar el contingut, mostrar barres de desplaçament o mostrar el contingut desbordat quan és massa gran per al seu <a href="/en-US/docs/Glossary/Block/CSS">contenidor a nivell de bloc</a>.</p> + +<pre class="brush:css no-line-numbers">/* <span class="short_text" id="result_box" lang="ca"><span>El contingut no es retallat</span></span> */ +overflow: visible; + +/* <span id="result_box" lang="ca"><span>El contingut es retallat, sense barres de desplaçament</span></span> */ +overflow: hidden; + +/* <span id="result_box" lang="ca"><span>El contingut es retallat, amb barres de desplaçament</span></span> */ +overflow: scroll; + +/* Deixa que el navegador decideixi */ +overflow: auto; + +/* Valors globals */ +overflow: inherit; +overflow: initial; +overflow: unset; +</pre> + +<div class="hidden" id="overflow"> +<pre class="brush: html"><div class="grid"> + <div class="row"> + <div class="cell"> + visible + <p class="visible">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus pretium facilisis. Praesent rutrum eget nisl in tristique. Sed tincidunt nisl et tellus vulputate, nec rhoncus orci pretium.</p> + </div> + <div class="cell"> + hidden + <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus pretium facilisis. Praesent rutrum eget nisl in tristique. Sed tincidunt nisl et tellus vulputate, nec rhoncus orci pretium.</p> + </div> + <div class="cell"> + scroll + <p class="scroll">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus pretium facilisis. Praesent rutrum eget nisl in tristique. Sed tincidunt nisl et tellus vulputate, nec rhoncus orci pretium.</p> + </div> + <div class="cell"> + auto + <p class="auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus pretium facilisis. Praesent rutrum eget nisl in tristique. Sed tincidunt nisl et tellus vulputate, nec rhoncus orci pretium.</p> + </div> + </div> +</div></pre> + +<pre class="brush: css">html,body { + height: 100%; + box-sizing: border-box; +} + +.grid { + width: 100%; + height: 100%; + display: flex; + background: #EEE; + font: 1em monospace; +} + +.row { + display: flex; + flex: 1 auto; + flex-direction: row; +} + +.cell { + width: calc(25% - 1em); + box-sizing: border-box; + margin: .5em; + padding: .5em; + background-color: #FFF; + overflow: hidden; +} + +p { + font: .8em sans-serif; + max-width: 100%; + height: 5rem; + box-sizing: border-box; + background: #E4F0F5; + padding: .5em; + margin: .5em 0 0; +} + +.visible { overflow: visible; } +.hidden { overflow: hidden; } +.scroll { overflow: scroll; } +.auto { overflow: auto; }</pre> +</div> + +<p>{{EmbedLiveSample("overflow", "100%", 200, "", "", "example-outcome-frame")}}</p> + +<p>L'ús d' <code>overflow</code> amb un valor diferent a <code>visible</code> (per defecte) crea un nou <a href="/en-US/docs/CSS/block_formatting_context">context de format de bloc</a>. Això és necessari per motius tècnics — si un flotador es creua amb l'element de desplaçament, el contingut es torna a embolicar per la força després de cada pas de desplaçament, donant lloc a una experiència de desplaçament lent.</p> + +<p>Per tal que l' <code>overflow</code> tingui un efecte, el contenidor a nivell de bloc ha de tenir una alçada definida (<code>height</code> o <code>max-height</code>) o <code>white-space</code> establert a <code>nowrap</code>.</p> + +<div class="note"> +<p><strong>Nota</strong>: <span id="result_box" lang="ca"><span>La propietat de JavaScript</span></span> {{domxref("Element.scrollTop")}} <span id="result_box" lang="ca"><span>es pot utilitzar per desplaçar un element HTML fins i tot quan</span></span> <code>overflow</code> <span id="result_box" lang="ca"><span>està configurat com</span></span> <code>hidden</code>.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<p>La propietat <code>overflow</code> s'especifica com una sola paraula clau triada de la llista de valors que es mostra a continuació.</p> + +<h3 id="Valors">Valors</h3> + +<dl> + <dt><code>visible</code></dt> + <dd>El contingut no es retalla i es pot mostrar fora de la caixa de contingut. Valor per defecte.</dd> + <dt><code>hidden</code></dt> + <dd>El contingut es retalla si és necessari per adaptar-lo a la caixa de contingut. No es proporcionen barres de desplaçament.</dd> + <dt><code>scroll</code></dt> + <dd>El contingut es retalla si és necessari per adaptar-lo a la caixa de contingut. Els navegadors mostren les barres de desplaçament independentment que el contingut estigui o no retallat. (Això evita que les barres de desplaçament apareguin o desapareguin quan el contingut canvia). Les impressores poden imprimir contingut desbordat.</dd> + <dt><code>auto</code></dt> + <dd>Depèn de l'agent d'usuari. Si el contingut s'adapta a l'interior de la caixa de contingut, es veurà igual que <code>visible</code>, però se segueix establint un nou context de format de bloc. Els navegadors d'escriptori com Firefox proporcionen barres de desplaçament si el contingut es desborda.</dd> +</dl> + +<dl> + <dt><code>overlay</code> {{experimental_inline}} {{deprecated_inline}}</dt> + <dd>Es comporta de la mateixa manera que <code>auto</code>, però amb les barres de desplaçament sobre el contingut en lloc d'ocupar espai. Només s'admet en navegadors basats en WebKit (p. ex., Safari) i basats en Blink (p. ex., Chrome o Opera).</dd> +</dl> + +<h4 id="Extensions_Mozilla"><span id="result_box" lang="ca"><span>Extensions Mozilla</span></span></h4> + +<dl> + <dt><code>-moz-scrollbars-none</code> {{obsolete_inline}}</dt> + <dd>Utilitzeu <code>overflow: hidden</code> en el seu lloc.</dd> + <dt><code>-moz-scrollbars-horizontal</code> {{deprecated_inline}}</dt> + <dd>Es preferible l'ús de {{Cssxref("overflow-x")}} i {{Cssxref("overflow-y")}}.</dd> + <dt><code>-moz-scrollbars-vertical</code> {{deprecated_inline}}</dt> + <dd>Es preferible l'ús de {{Cssxref("overflow-x")}} i {{Cssxref("overflow-y")}}.</dd> + <dt><code>-moz-hidden-unscrollable</code> {{non-standard_inline}}</dt> + <dd>Destinat principalment per a ús intern i per temes. Desactiva el desplaçament dels elements arrel XML, <code><html></code> i <code> <body></code> amb les tecles de fletxa del teclat i la roda del ratolí.</dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">p { + width: 12em; + height: 6em; + border: dotted; + overflow: visible; /* <span class="short_text" id="result_box" lang="ca"><span>el contingut no es retalla</span></span> */ +} +</pre> + +<p style="overflow: visible; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>visible</code> (per defecte)<br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> + +<pre class="brush: css">p { overflow: hidden; /* <span class="short_text" id="result_box" lang="ca"><span>no es proporcionen barres de desplaçament</span></span> */ } +</pre> + +<p style="overflow: hidden; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: hidden</code><br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> + +<pre class="brush: css">p { overflow: scroll; /* <span class="short_text" id="result_box" lang="ca"><span>mostra sempre barres de desplaçament</span></span> */ } +</pre> + +<p style="overflow: scroll; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: scroll</code><br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> + +<pre class="brush: css">p { overflow: auto; /* afegeix barres de desplaçament si és necessari */ } +</pre> + +<p style="overflow: auto; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: auto</code><br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> + +<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('CSS3 Overflow', '#propdef-overflow', 'overflow')}}</td> + <td>{{Spec2('CSS3 Overflow')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Box', '#propdef-overflow', 'overflow')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>No canvia.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}<sup>[1]</sup></td> + <td>4.0<sup>[2]</sup></td> + <td>7.0</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] A través de Firefox 3.6 (Gecko 1.9.2), la propietat <code>overflow</code> s'aplica incorrectament als elements del grup de taula (<code><thead></code> , <code><tbody></code> , <code><tfoot></code>). Aquest comportament es corregeix en versions posteriors.</p> + +<p>[2] Internet Explorer 4 a 6 amplia un element amb <code>overflow: visible</code> (valor predeterminat) per adaptar-se al contingut que hi ha dins. <code>height/width</code> es comportan com <code>min-height/min-width</code>.</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>Propietats CSS relacionades: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li> +</ul> diff --git a/files/ca/web/css/overscroll-behavior-block/index.html b/files/ca/web/css/overscroll-behavior-block/index.html new file mode 100644 index 0000000000..000b4e8c9c --- /dev/null +++ b/files/ca/web/css/overscroll-behavior-block/index.html @@ -0,0 +1,133 @@ +--- +title: overscroll-behavior-block +slug: Web/CSS/overscroll-behavior-block +translation_of: Web/CSS/overscroll-behavior-block +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">La propietat CSS <strong><code>overscroll-behavior-block</code></strong> estableix el comportament del navegador quan s'arriba al límit de direcció de bloc d'una àrea de desplaçament.</span></p> + +<p>Veure {{cssxref("overscroll-behavior")}} per a una explicació completa.</p> + +<pre class="brush:css no-line-numbers notranslate">/* Keyword values */ +overscroll-behavior-block: auto; /* default */ +overscroll-behavior-block: contain; +overscroll-behavior-block: none; + +/* Global values */ +overscroll-behavior-block: inherit; +overscroll-behavior-block: initial; +overscroll-behavior-block: unset; +</pre> + +<h2 id="Sintaxi">Sintaxi</h2> + +<p>La propietat <code>overscroll-behavior-block</code> s'especifica com una paraula clau triada de la llista de valors de sota.</p> + +<h3 id="Valors">Valors</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>El comportament per defecte de desbordament de desplaçament es produeix com a normal.</dd> + <dt><code>contain</code></dt> + <dd>El comportament per defecte del desbordament de desplaçament s'observa dins de l'element on aquest valor està establert (e.ex. Els efectes "rebot" o refrescs), però no es produeix cap encadenament de desplaçament a les zones veïnes, p.ex. els elements subjacents no es desplaçaran.</dd> + <dt><code>none</code></dt> + <dd>No es produeix cap encadenament de desplaçament a les zones veïnes, i s'impedeix el comportament per defecte de desbordament de desplaçament.</dd> +</dl> + +<h2 id="Definició_formal">Definició formal</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxi_formal">Sintaxi formal</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Prevenint_el_desplaçament_del_bloc">Prevenint el desplaçament del bloc</h3> + +<p>En aquesta demostració tenim dues caixes a nivell de bloc, una dins l'altra. La caixa exterior té una gran {{cssxref("height")}} establert en ella de manera que la pàgina es desplaçarà verticalment. La caixa interior té una petita {{cssxref("width")}} (i <code>height</code>) establerta sobre ella de manera que s'assenta de manera inexcusable dins de l'àrea de visualització, però el seu contingut té una gran <code>height</code> de manera que també es desplaçarà verticalment..</p> + +<p>Per defecte, quan la capsa interior es desplaça i s'arriba a un límit de desplaçament, tota la pàgina començarà a desplaçar-se, que probablement no és el que volem. Per evitar que això passi en la direcció del bloc, hem establert <code>overscroll-behavior-block: contain</code> en la caixa interior.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><main> + <div> + <div> + <p><code>overscroll-behavior-block</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> + </div> + </div> +</main></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">main { + height: 3000px; + width: 500px; + background-color: white; + background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); +} + +main > div { + height: 300px; + width: 400px; + overflow: auto; + position: relative; + top: 50px; + left: 50px; + overscroll-behavior-block: contain; +} + +div > div { + height: 1500px; + width: 100%; + background-color: yellow; + background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); +} + +p { + padding: 10px; + background-color: rgba(255,0,0,0.5); + margin: 0; + width: 340px; + position: relative; + top: 10px; + left: 10px; +}</pre> + +<h4 id="Resultat">Resultat</h4> + +<p>{{EmbedLiveSample('Preventing_block_overscrolling','100%', 500)}}</p> + +<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('CSS Overscroll Behavior', '#propdef-overscroll-behavior-block', 'overscroll-behavior-block')}}</td> + <td>{{Spec2('CSS Overscroll Behavior')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilitat_amb_el_navegador">Compatibilitat amb el navegador</h2> + +<div class="hidden">La taula de compatibilitat d'aquesta pàgina es genera a partir de dades estructurades. Si es vol contribuir a les dades, consultar <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i enviar una sol·licitud d'extracció.</div> + +<p>{{Compat("css.properties.overscroll-behavior-block")}}</p> + +<h2 id="Veure_també">Veure també</h2> + +<ul> + <li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">Prendre el control del desplaçament: personalitzar els efectes de extreure-per-refrescar i desbordament</a></li> +</ul> diff --git a/files/ca/web/css/overscroll-behavior-inline/index.html b/files/ca/web/css/overscroll-behavior-inline/index.html new file mode 100644 index 0000000000..1cc7a7c605 --- /dev/null +++ b/files/ca/web/css/overscroll-behavior-inline/index.html @@ -0,0 +1,134 @@ +--- +title: overscroll-behavior-inline +slug: Web/CSS/overscroll-behavior-inline +translation_of: Web/CSS/overscroll-behavior-inline +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"> +La propietat CSS <strong><code>overscroll-behavior-inline</code></strong> estableix el comportament del navegador quan s'arriba al límit de direcció en línia d'una àrea de desplaçament.</span></p> + +<p>Veure {{cssxref("overscroll-behavior")}} per a una explicació completa.</p> + +<pre class="brush:css no-line-numbers notranslate">/* Keyword values */ +overscroll-behavior-inline: auto; /* default */ +overscroll-behavior-inline: contain; +overscroll-behavior-inline: none; + +/* Global values */ +overscroll-behavior-inline: inherit; +overscroll-behavior-inline: initial; +overscroll-behavior-inline: unset; +</pre> + +<h2 id="Sintaxi">Sintaxi</h2> + +<p>La propietat <code>overscroll-behavior-inline</code> s'especifica com una paraula clau triada de la llista de valors de sota.</p> + +<h3 id="Valors">Valors</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>El comportament per defecte de desbordament de desplaçament es produeix com a normal.</dd> + <dt><code>contain</code></dt> + <dd>El comportament per defecte del desbordament de desplaçament s'observa dins de l'element on aquest valor està establert (p. ex. g. Els efectes "rebot o refrescs), no es produeix cap encadenament de desplaçament a les zones veïnes, p.ex. els elements subjacents no es desplaçaran.</dd> + <dt><code>none</code></dt> + <dd>No es produeix cap encadenament de desplaçament a les zones veïnes, i s'impedeix el comportament per defecte de desbordament de desplaçament.</dd> +</dl> + +<h2 id="Definició_formal">Definició formal</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxi_formal">Sintaxi formal</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Evitar_el_desplaçament_en_línia">Evitar el desplaçament en línia</h3> + +<p>En aquesta demostració tenim dues caixes a nivell de bloc, una dins l'altra. La caixa exterior té una gran {{cssxref("width")}} establert en ella de manera que la pàgina es desplaçarà horitzontalment. La caixa interior té una petita amplada (i {{cssxref("height")}}) establerta sobre ella de manera que es troba de manera inexcusable dins de l'àrea de visualització, però el seu contingut té una amplada gran de manera que també es desplaçarà horitzontalment.</p> + +<p>Per defecte, quan la caixa interior es desplaçi i s'arribi a un límit de desplaçament, tota la pàgina començarà a desplaçar-se, que probablement no és el que volem. Per evitar que això passi en la direcció en línia, hem establert <code>overscroll-behavior-inline: contain</code> en la caixa interior.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><main> + <div> + <div> + <p><code>overscroll-behavior-inline</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> + </div> + </div> +</main></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">main { + height: 400px; + width: 3000px; + background-color: white; + background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); +} + +main > div { + height: 300px; + width: 400px; + overflow: auto; + position: relative; + top: 50px; + left: 50px; + overscroll-behavior-inline: contain; +} + +div > div { + height: 100%; + width: 1500px; + background-color: yellow; + background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); +} + +p { + padding: 10px; + background-color: rgba(255,0,0,0.5); + margin: 0; + width: 360px; + position: relative; + top: 10px; + left: 10px; +}</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('Preventing_inline_overscrolling','100%', 500)}}</p> + +<h2 id="Specifications">Specifications</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('CSS Overscroll Behavior', '#propdef-overscroll-behavior-inline', 'overscroll-behavior-inline')}}</td> + <td>{{Spec2('CSS Overscroll Behavior')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilitat_amb_el_navegador">Compatibilitat amb el navegador</h2> + +<div class="hidden">La taula de compatibilitat d'aquesta pàgina es genera a partir de dades estructurades. Si es vol contribuir a les dades, consultar <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i enviar una sol·licitud d'extraccó.</div> + +<p>{{Compat("css.properties.overscroll-behavior-inline")}}</p> + +<h2 id="Veure_també">Veure també</h2> + +<ul> + <li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">Prendre el control del desplaçament: personalitzar els efectes de extreure-per-refrescar i desbordament</a></li> +</ul> diff --git a/files/ca/web/css/overscroll-behavior/index.html b/files/ca/web/css/overscroll-behavior/index.html new file mode 100644 index 0000000000..9ed28a5a0b --- /dev/null +++ b/files/ca/web/css/overscroll-behavior/index.html @@ -0,0 +1,106 @@ +--- +title: overscroll-behavior +slug: Web/CSS/overscroll-behavior +translation_of: Web/CSS/overscroll-behavior +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">la propietat CSS <strong><code>overscroll-behavior</code></strong> estableix el que fa un navegador quan arriba al límit d'una àrea de desplaçament. És una abreujada per {{cssxref("overscroll-behavior-x")}} i {{cssxref("overscroll-behavior-y")}}.</span></p> + +<pre class="brush:css no-line-numbers notranslate">/* Keyword values */ +overscroll-behavior: auto; /* default */ +overscroll-behavior: contain; +overscroll-behavior: none; + +/* Two values */ +overscroll-behavior: auto contain; + +/* Global values */ +overscroll-behavior: inherit; +overscroll-behavior: initial; +overscroll-behavior: unset; +</pre> + +<p>Per defecte, els navegadors mòbils tendeixen a proporcionar un efecte "rebot" o fins i tot una actualització de pàgina quan s'arriba a la part superior o inferior d'una pàgina (o una altra àrea de desplaçament). També us podeu haver adonat que quan tingueu un quadre de diàleg amb contingut de desplaçament a la part superior d'una pàgina de contingut de desplaçament, una vegada s'hagi assolit el límit de desplaçament del quadre de diàleg, la pàgina subjacent començarà a desplaçar-se - això s'anomena <strong>scroll chaining (encadenament de desplaçament)</strong>.</p> + +<p>En alguns casos aquests comportaments no són desitjables. Es pot utilitzar <code>overscroll-behavior</code> per desfer-se de l'encadenament de desplaçament no desitjat i de l'aplicació de Facebook/Twitter inspirada en el comportament de "tirar per a refrescar" del navegador</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<p>La propietat <code>overscroll-behavior</code> s'especifica com una o dues paraules clau triades de la llista de valors de sota.</p> + +<p>Dues paraules clau especifican el valor de <code>overscroll-behavior</code> en els eixos <code>x</code> i <code>y</code> respectivament. Si només s'especifica un valor, tant x com y se suposa que tenen el mateix valor.</p> + +<h3 id="Valors">Valors</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>El comportament per defecte de desbordament de desplaçament es produeix com a normal.</dd> + <dt><code>contain</code></dt> + <dd>El comportament per defecte del desbordament de desplaçament s'observa dins de l'element on aquest valor està establert (p.ex. efectes de "rebot" o refrescos), però no es produeix cap encadenament de desplaçament a les zones veïnes, p.ex. els elements subjacents no es desplaçaran.</dd> + <dt><code>none</code></dt> + <dd>No es produeix cap encadenament de desplaçament a les zones veïnes, i s'impedeix el comportament per defecte de desbordament de desplaçament.</dd> +</dl> + +<h2 id="Definició_formal">Definició formal</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxi_formal">Sintaxi formal</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Evitar_que_un_element_subjacent_es_desplaci">Evitar que un element subjacent es desplaci</h3> + +<p>En el nostre exemple d'<a href="https://mdn.github.io/css-examples/overscroll-behavior/">overscroll-behavior example</a> (vegeu també el codi font <a href="https://github.com/mdn/css-examples/tree/master/overscroll-behavior">source code</a>), presentem una llista de pàgines senceres de contactes falsos, i un quadre de diàleg que conté una finestra de xat.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15778/example.png" style="border-style: solid; border-width: 1px; display: block; height: 622px; margin: 0px auto; width: 350px;"></p> + +<p>Totes dues àrees es desplacen; normalment, si es desplaça la finestra del xat fins a arribar a un límit de desplaçament, la finestra de contactes subjacent començaria a desplaçar-se també, la qual no és desitjable. Això es pot aturar fent servir <code>overscroll-behavior-y</code> (també funciona <code>overscroll-behavior</code>) a la finestra de xat com ara:</p> + +<pre class="brush: css notranslate">.messages { + height: 220px; + overflow: auto; + overscroll-behavior-y: contain; +} </pre> + +<p>També voldríem desfer-nos dels efectes de desplaçament estàndard quan els contactes es desplacen cap amunt o cap avall (p. ex. Chrome on Android refresca la pàgina quan es desplaça més enllà del límit superior). Això pot evitar-se establint <code>overscroll-behavior: none</code> en l'element {{htmlelement("body")}}:</p> + +<pre class="brush: css notranslate">body { + margin: 0; + overscroll-behavior: none; +}</pre> + +<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('CSS Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}}</td> + <td>{{Spec2('CSS Overscroll Behavior')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilitat_amb_el_navegador">Compatibilitat amb el navegador</h2> + +<div class="hidden">La taula de compatibilitat d'aquesta pàgina es genera a partir de dades estructurades. Si es vol contribuir a les dades, consultar <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i enviar una sol·licitud d'extracció.</div> + +<p>{{Compat("css.properties.overscroll-behavior")}}</p> + +<h2 id="Veure_també">Veure també</h2> + +<ul> + <li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">Prendre el control del desplaçament: personalitzar els efectes de extreure-per-refrescar i desbordament</a></li> + <li>{{cssxref("-ms-scroll-chaining")}}</li> +</ul> diff --git a/files/ca/web/css/padding-bottom/index.html b/files/ca/web/css/padding-bottom/index.html new file mode 100644 index 0000000000..5fb786bd98 --- /dev/null +++ b/files/ca/web/css/padding-bottom/index.html @@ -0,0 +1,149 @@ +--- +title: padding-bottom +slug: Web/CSS/padding-bottom +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding-bottom +--- +<div>{{CSSRef}}</div> + +<p>La propietat <a href="/en/CSS" title="CSS">CSS</a> <strong><code>padding-bottom</code></strong> estableix l'alçada de l'àrea de farcit a la part inferior d'un element. A diferència dels marges, no es permeten valors negatius per al farcit. La propietat abreujada {{cssxref("padding")}} es pot utilitzar per establir farcits als quatre costats d'un element amb una sola declaració.</p> + +<pre class="brush:css no-line-numbers">/* <length> values */ +padding-bottom: 0.5em; +padding-bottom: 0; +padding-bottom: 2cm; + +/* <percentage> value */ +padding-bottom: 10%; + +/* Global values */ +padding-bottom: inherit; +padding-bottom: initial; +padding-bottom: unset; +</pre> + +<p>L'<a href="/en/CSS/box_model#padding-area" title="http://developer.mozilla.org/en/CSS/Box_model#padding">àrea de farcit</a> <span id="result_box" lang="ca"><span>d'un element és l'espai entre el seu contingut i la seva vora.</span></span></p> + +<p><img alt="The effect of the CSS padding-bottom property on the element box" src="/files/4109/padding-bottom.svg" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<h3 id="Valors">Valors</h3> + +<dl> + <dt>{{cssxref("length")}}</dt> + <dd>La grandària del farcit com a valor fix. Ha de ser no negatiu.</dd> + <dt>{{cssxref("percentage")}}</dt> + <dd>La grandària del farcit com a percentatge, en relació amb l'<em>amplada</em> del bloc contenidor. Ha de ser no negatiu.</dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="eval">.content { padding-bottom: 5%; } +.sidebox { padding-bottom: 10px; } +</pre> + +<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('CSS3 Box', '#the-padding', 'padding-bottom') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>No hi ha cap canvi</span></span> des de {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defineix <code>padding-bottom</code> como animable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>No hi ha cap canvi</span></span> des de {{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}.</td> + </tr> + <tr> + <td>{{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0 (1.0)</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">Model de caixa CSS</a></li> + <li>La propietat abreujada {{cssxref("padding")}} es pot utilitzar per establir el farcit en els quatre costats d'un element amb una sola declaració: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, <code>padding-bottom</code> i {{cssxref("padding-left")}}.</li> +</ul> diff --git a/files/ca/web/css/padding-left/index.html b/files/ca/web/css/padding-left/index.html new file mode 100644 index 0000000000..8d4d4bef27 --- /dev/null +++ b/files/ca/web/css/padding-left/index.html @@ -0,0 +1,147 @@ +--- +title: padding-left +slug: Web/CSS/padding-left +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding-left +--- +<div>{{CSSRef}}</div> + +<p>La propietat <a href="https://developer.mozilla.org/en/CSS" title="CSS">CSS</a> <strong><code>padding-left</code></strong> estableix l'amplada de l'àrea de farcit a la part esquerra d'un element. A diferència dels marges, no es permeten valors negatius per al farcit. La propietat abreujada {{cssxref("padding")}} es pot utilitzar per establir farcits als quatre costats d'un element amb una sola declaració.</p> + +<pre class="brush:css no-line-numbers">/* <length> values */ +padding-left: 0.5em; +padding-left: 0; +padding-left: 2cm; + +/* <percentage> value */ +padding-left: 10%; + +/* Global values */ +padding-left: inherit; +padding-left: initial; +padding-left: unset; +</pre> + +<p>L'<a href="https://developer.mozilla.org/en/CSS/box_model#padding-area" title="http://developer.mozilla.org/en/CSS/Box_model#padding">àrea de farcit</a> <span id="result_box" lang="ca"><span>d'un element és l'espai entre el seu contingut i la seva vora.</span></span></p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxi</h2> + +<h3 id="Values" name="Values">Valors</h3> + +<dl> + <dt>{{cssxref("length")}}</dt> + <dd>La grandària del farcit com a valor fix. Ha de ser no negatiu.</dd> + <dt>{{cssxref("percentage")}}</dt> + <dd>La grandària del farcit com a percentatge, en relació amb l'<em>amplada</em> del bloc contenidor. Ha de ser no negatiu.</dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Exemples</h2> + +<pre class="brush: css">.content { padding-left: 5%; } +.sidebox { padding-left: 10px; } +</pre> + +<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('CSS3 Box', '#the-padding', 'padding-left') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>No hi ha cap canvi</span></span>.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-left') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defineix <code>padding-left</code> como animable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-left') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>No hi ha cap canvi</span></span>.</td> + </tr> + <tr> + <td>{{ Specname('CSS1', '#padding-left', 'padding-left') }}</td> + <td>{{ Spec2('CSS1') }}</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0 (1.0)</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">Model de caixa CSSl</a></li> + <li>La propietat abreujada {{cssxref("padding")}} es pot utilitzar per establir el farcit en els quatre costats d'un element amb una sola declaració: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} i <code>padding-left</code>.</li> +</ul> diff --git a/files/ca/web/css/padding-right/index.html b/files/ca/web/css/padding-right/index.html new file mode 100644 index 0000000000..7e5baa72e8 --- /dev/null +++ b/files/ca/web/css/padding-right/index.html @@ -0,0 +1,147 @@ +--- +title: padding-right +slug: Web/CSS/padding-right +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding-right +--- +<div>{{CSSRef}}</div> + +<p>La propietat <a href="https://developer.mozilla.org/en/CSS" title="CSS">CSS</a> <strong> <code>padding-right</code> </strong> estableix l'amplada de l'àrea de farcit a la part dreta d'un element. A diferència dels marges, no es permeten valors negatius per al farcit . La propietat abreujada {{cssxref("padding")}} es pot utilitzar per establir farcits als quatre costats d'un element amb una sola declaració.</p> + +<pre class="brush:css no-line-numbers">/* <length> values */ +padding-right: 0.5em; +padding-right: 0; +padding-right: 2cm; + +/* <percentage> value */ +padding-right: 10%; + +/* Global values */ +padding-right: inherit; +padding-right: initial; +padding-right: unset; +</pre> + +<p>L'<a href="https://developer.mozilla.org/en/CSS/box_model#padding-area" title="http://developer.mozilla.org/en/CSS/Box_model#padding">àrea de farcit</a> <span id="result_box" lang="ca"><span>d'un element és l'espai entre el seu contingut i la seva vora.</span></span></p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxi</h2> + +<h3 id="Values" name="Values">Valors</h3> + +<dl> + <dt>{{cssxref("length")}}</dt> + <dd>La grandària del farcit com a valor fix. Ha de ser no negatiu.</dd> + <dt>{{cssxref("percentage")}}</dt> + <dd>La grandària del farcit com a percentatge, en relació amb l'<em>amplada</em> del bloc contenidor. Ha de ser no negatiu.</dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Exemples</h2> + +<pre class="brush: css">.content { padding-right: 5%; } +.sidebox { padding-right: 10px; } +</pre> + +<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('CSS3 Box', '#the-padding', 'padding-right') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>No hi ha cap canvi</span></span>.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-right') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defineix <code>padding-right</code> com animable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-right') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>No hi ha cap canvi</span></span>.</td> + </tr> + <tr> + <td>{{ Specname('CSS1', '#padding-right', 'padding-right') }}</td> + <td>{{ Spec2('CSS1') }}</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0 (1.0)</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li><a class="internal" href="https://developer.mozilla.org/en/CSS/box_model" title="en/CSS/box model">Model de caixa CSS</a></li> + <li>La propietat abreujada {{cssxref("padding")}} es pot utilitzar per establir el farcit en els quatre costats d'un element amb una sola declaració: {{cssxref("padding-top")}}, <code>padding-right</code>, {{cssxref("padding-bottom")}} i {{cssxref("padding-left")}}.</li> +</ul> diff --git a/files/ca/web/css/padding-top/index.html b/files/ca/web/css/padding-top/index.html new file mode 100644 index 0000000000..2311e2a624 --- /dev/null +++ b/files/ca/web/css/padding-top/index.html @@ -0,0 +1,149 @@ +--- +title: padding-top +slug: Web/CSS/padding-top +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding-top +--- +<div>{{CSSRef}}</div> + +<p>La propietat <a href="https://developer.mozilla.org/en/CSS" title="CSS">CSS</a> <strong><code>padding-top</code></strong> estableix l'alçada de l'àrea de farcit a la part superior d'un element. A diferència dels marges, no es permeten valors negatius per al farcit. La propietat abreujada {{cssxref("padding")}} es pot utilitzar per establir farcits als quatre costats d'un element amb una sola declaració.</p> + +<pre class="brush:css no-line-numbers">/* <length> values */ +padding-top: 0.5em; +padding-top: 0; +padding-top: 2cm; + +/* <percentage> value */ +padding-top: 10%; + +/* Global values */ +padding-top: inherit; +padding-top: initial; +padding-top: unset; +</pre> + +<p>L'<a href="https://developer.mozilla.org/en/CSS/box_model#padding-area" title="http://developer.mozilla.org/en/CSS/Box_model#padding">àrea de farcit</a> <span id="result_box" lang="ca"><span>d'un element és l'espai entre el seu contingut i la seva vora.</span></span></p> + +<p><img alt="The effect of the CSS padding-top property on the element box" src="/files/4105/padding-top.svg" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxi</h2> + +<h3 id="Values" name="Values">Valors</h3> + +<dl> + <dt>{{cssxref("length")}}</dt> + <dd>La grandària del farcit com a valor fix. Ha de ser no negatiu.</dd> + <dt>{{cssxref("percentage")}}</dt> + <dd>La grandària del farcit com a percentatge, en relació amb l'<em>amplada</em> del bloc contenidor. Ha de ser no negatiu.</dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Exemples</h2> + +<pre class="brush: css">.content { padding-top: 5%; } +.sidebox { padding-top: 10px; } +</pre> + +<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('CSS3 Box', '#the-padding', 'padding-top') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>No hi ha cap canvi</span></span> des de {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-top') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defineix <code>padding-top</code> com animable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>No hi ha cap canvi</span></span> des de {{ Specname('CSS1', '#padding-top', 'padding-top') }}.</td> + </tr> + <tr> + <td>{{ Specname('CSS1', '#padding-top', 'padding-top') }}</td> + <td>{{ Spec2('CSS1') }}</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0 (1.0)</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també"> Vegeu també</h2> + +<ul> + <li><a class="internal" href="https://developer.mozilla.org/en/CSS/box_model" title="en/CSS/box model">Model de caixa CSS</a></li> + <li>La propietat abreujada {{cssxref("padding")}} es pot utilitzar per establir el farcit en els quatre costats d'un element amb una sola declaració : <code>padding-top</code>, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} i {{cssxref("padding-left")}}.</li> +</ul> diff --git a/files/ca/web/css/padding/index.html b/files/ca/web/css/padding/index.html new file mode 100644 index 0000000000..7e93cddcf1 --- /dev/null +++ b/files/ca/web/css/padding/index.html @@ -0,0 +1,255 @@ +--- +title: padding +slug: Web/CSS/padding +tags: + - CSS + - CSS Padding + - CSS Property + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/CSS/padding +--- +<div>{{CSSRef}}</div> + +<p>La propietat <a href="/en/CSS" title="CSS">CSS</a> <strong><code>padding</code></strong> estableix l'<a href="/en/CSS/box_model#padding-area" title="http://developer.mozilla.org/en/CSS/Box_model#padding">àrea de farcit</a> als quatre costats d'un element. És una abreviatura que estableix tots els farcits individuals alhora: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} i {{cssxref("padding-left")}}.</p> + +<pre class="brush:css no-line-numbers">/* Apply to all four sides */ +padding: 1em; + +/* vertical | horizontal */ +padding: 5% 10%; + +/* top | horizontal | bottom */ +padding: 1em 2em 2em; + +/* top | right | bottom | left */ +padding: 5px 1em 0 1em; + +/* Global values */ +padding: inherit; +padding: initial; +padding: unset; +</pre> + +<div class="hidden" id="padding"> +<pre class="brush: html"><div class="grid"> + <div class="col"> + <div class="cell"> + <div class="p p0">padding: 0</div> + </div> + <div class="cell"> + <div class="p p1">padding: 1em</div> + </div> + <div class="cell"> + <div class="p p2">padding: 5% 10%</div> + </div> + <div class="cell"> + <div class="p p3">padding: 1em 2em 2em</div> + </div> + <div class="cell"> + <div class="p p4">padding: 5px 1em 0 1em</div> + </div> + </div> +</div></pre> + +<pre class="brush: css">html,body { + height: 100%; + box-sizing: border-box; +} + +.grid { + width: 100%; + height: 100%; + display: flex; + background: #EEE; + font: 1em monospace; +} + +.col { + display: flex; + flex: 1 auto; + flex-direction: column; +} + +.cell { + box-sizing: border-box; + margin: .5em; + padding: 0; + background-color: #FFF; + overflow: hidden; + text-align: left; +} + +.p { + display: inline-block; + background: #E4F0F5; + border: 1px solid; +} + +.p0 { padding: 0; } +.p1 { padding: 1em; } +.p2 { padding: 5% 10%; } +.p3 { padding: 1em 2em 2em; } +.p4 { padding: 5px 1em 0 1em; }</pre> +</div> + +<p>{{EmbedLiveSample("padding", "100%", 280, "", "", "example-outcome-frame")}}</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<p>La propietat <code>padding</code> es pot especificar utilitzant un, dos, tres o quatre valors. Cada valor és un <code><a href="#<length>"><length></a></code> o un <code><a href="#<percentage>"><percentage></a></code>.</p> + +<ul> + <li>Quan s'especifica <strong>un</strong> valor, s'aplica el mateix farcit <strong>als quatre costats</strong>.</li> + <li>Quan s'especifiquen <strong>dos</strong> valors, el primer farcit s'aplica a la part <strong>superior i inferior</strong>, el segon a l'<strong>esquerra i a la dreta</strong>.</li> + <li>Quan s'especifiquen <strong>tres</strong> valors, el primer farcit s'aplica a la part <strong>superior</strong>, el segon a l'<strong>esquerra i a la dreta</strong>, el tercer a la part <strong>inferior</strong>.</li> + <li>Quan s'especifiquen <strong>quatre</strong> valors, els farcits s'apliquen a la part <strong>superior, dreta, inferior</strong> i <strong>esquerra</strong> en aquest ordre (en el sentit de les agulles del rellotge).</li> +</ul> + +<h3 id="Valors">Valors</h3> + +<dl> + <dt><strong>{{cssxref("length")}}</strong></dt> + <dd>La grandària del farcit com a valor fix. Ha de ser no negatiu.</dd> + <dt>{{cssxref("percentage")}}</dt> + <dd>La grandària del farcit com a percentatge, en relació amb l'amplada del bloc contenidor. Ha de ser no negatiu.</dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_senzill">Exemple senzill</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><h4>This element has moderate padding.</h4> +<h3>The padding is huge in this element!</h3> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">h4 { + background-color: lime; + padding: 20px 50px; +} + +h3 { + background-color: cyan; + padding: 110px 50px 50px 110px; +} +</pre> + +<p><span>{{EmbedLiveSample('Simple_example','100%',300)}}</span></p> + +<h3 id="Més_exemples"><span>Més exemples</span></h3> + +<pre class="brush: css">padding: 5%; /* all sides: 5% padding */ + +padding: 10px; /* all sides: 10px padding */ + +padding: 10px 20px; /* top and bottom: 10px padding */ + /* left and right: 20px padding */ + +padding: 10px 3% 20px; /* top: 10px padding */ + /* left and right: 3% padding */ + /* bottom: 20px padding */ + +padding: 1em 3px 30px 5px; /* top: 1em padding */ + /* right: 3px padding */ + /* bottom: 30px padding */ + /* left: 5px padding */ </pre> + +<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('CSS3 Box', '#the-padding', 'padding') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>No canvia.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>No canvia.</td> + </tr> + <tr> + <td>{{ Specname('CSS1', '#padding', 'padding') }}</td> + <td>{{ Spec2('CSS1') }}</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0 (1.0)</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">Model de caixa CSS</a></li> + <li>La propietat abreujada <code>padding</code> es pot utilitzar per establir farcits en els quatre costats d'un element amb una única declaració: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} i {{cssxref("padding-left")}}.</li> +</ul> diff --git a/files/ca/web/css/referéncia_css/index.html b/files/ca/web/css/referéncia_css/index.html new file mode 100644 index 0000000000..739dcdc9e3 --- /dev/null +++ b/files/ca/web/css/referéncia_css/index.html @@ -0,0 +1,206 @@ +--- +title: Referéncia CSS +slug: Web/CSS/Referéncia_CSS +tags: + - CSS + - Reference + - 'l10n:priority' +translation_of: Web/CSS/Reference +--- +<p class="summary"><span id="result_box" lang="ca"><span>Utilitzeu aquesta referència CSS per explorar un</span></span> <a href="#Keyword_index">índex alfabètic</a> <span id="result_box" lang="ca"><span>de totes les propietats</span></span> <a href="/en-US/docs/Web/CSS">CSS</a> <span id="result_box" lang="ca"><span>estàndard</span></span> , <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a>, <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>, <a href="/en-US/docs/Web/CSS/CSS_Types">tipus de dades</a>, i <a href="/en-US/docs/Web/CSS/At-rule">regles-at</a>. <span id="result_box" lang="ca"><span>També podeu explorar una llista de tots els </span></span> <a href="#Selectors">selectors CSS organitzats per tipus</a> i una llista de <a href="#Concepts">conceptes clau CSS</a>. <span id="result_box" lang="ca"><span>També s'inclou una breu</span></span> <a href="#DOM-CSS_CSSOM">referència DOM-CSS / CSSOM</a>.</p> + +<h2 id="Sintaxi_de_regla_bàsica"><span class="short_text" id="result_box" lang="ca"><span>Sintaxi de regla bàsica</span></span></h2> + +<h3 id="Sintaxi_de_regla_d'estil"><span class="short_text" id="result_box" lang="ca"><span>Sintaxi de regla d'estil</span></span></h3> + +<pre class="syntaxbox"><strong><var>selectorlist</var> { + <var>property</var>: <var>value</var>;</strong> + <var>[more property:value; pairs]</var> +<strong>}</strong> + +... where <var>selectorlist</var> is: <var>selector[:pseudo-class] [::pseudo-element] [, more selectorlists]</var> + +See <a href="#Selectors"><em>selector</em></a>, <a href="#pcls"><em>pseudo-class</em></a>, <em><a href="#pelm">pseudo-element</a></em> lists below. +</pre> + +<h4 id="Exemples_de_regla_d'estil"><span id="result_box" lang="ca"><span>Exemples de regla d'estil</span></span></h4> + +<pre class="brush: css">strong { + color: red; +} + +div.menu-bar li:hover > ul { + display: block; +} +</pre> + +<p>Per a una introducció a nivell de principiant a la sintaxi de selectors CSS, consulteu <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">aquest tutorial</a>. Tingueu en compte que qualsevol error de <a href="/en-US/docs/Web/CSS/syntax">sintaxi CSS</a> en una definició de regla invalida tota la regla. Les regles no vàlides són ignorades pel navegador. Tingueu en compte que les definicions de la regla CSS són totalment <a href="https://www.w3.org/TR/css-syntax-3/#intro">basades en text</a> (ASCII), mentre que DOM-CSS / CSSOM (el sistema de gestió de regles) està <a href="https://www.w3.org/TR/cssom/#introduction">basat en objectes</a>.</p> + +<h3 id="Sintaxi_de_regla-At_(At-rule)">Sintaxi de regla-At (At-rule)</h3> + +<p>As the structure of at-rules varies widely, please see <a href="/en-US/docs/Web/CSS/At-rule">At-rule</a> to find the syntax of the specific one you want.</p> + +<h2 id="Índex_de_paraules_clau_(Keyword)"><span class="short_text" id="result_box" lang="ca"><span>Índex de paraules clau</span></span> (Keyword)</h2> + +<div>{{CSS_Ref}}</div> + +<h2 id="Selectors">Selectors</h2> + +<h3 id="Selectors_Bàsics"><a href="/en-US/docs/Web/CSS/CSS_Selectors#Basic_selectors">Selectors Bàsics</a></h3> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Type_selectors">Selector de Tipus</a> <code>elementname</code></li> + <li><a href="/en-US/docs/Web/CSS/Class_selectors">Selector Class</a> <code>.classname</code></li> + <li><a href="/en-US/docs/Web/CSS/ID_selectors">Selector ID</a> <code>#idname</code></li> + <li><a href="/en-US/docs/Web/CSS/Universal_selectors">Selector Universal</a> <code>*</code> <code>ns|*</code> <code>*|*</code></li> + <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Selector d'Attribute</a> <code>[attr=value]</code></li> +</ul> + +<h3 id="Combinadors"><a href="/en-US/docs/Web/CSS/CSS_Selectors#Combinators">Combinadors</a></h3> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Combinador de germans Adjacents</a> <code>A + B</code></li> + <li><a href="/en-US/docs/Web/CSS/General_sibling_selectors">Combinador de germans General</a> <code>A ~ B</code></li> + <li><a href="/en-US/docs/Web/CSS/Child_selectors">Combinador de Fills</a> <code>A > B</code></li> + <li><a href="/en-US/docs/Web/CSS/Descendant_selectors">Combinador de Descendents</a> <code>A B</code></li> +</ul> + +<h3 id="Pseudo-classes"><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-classes</a></h3> + +<div class="index"> +<ul> + <li id="pcls">{{ Cssxref(":active") }}</li> + <li>{{cssxref(':any')}}</li> + <li>{{cssxref(':any-link')}}</li> + <li>{{ Cssxref(":checked") }}</li> + <li>{{ Cssxref(":default") }}</li> + <li>{{ Cssxref(":dir", ":dir()")}}</li> + <li>{{ Cssxref(":disabled") }}</li> + <li>{{ Cssxref(":empty") }}</li> + <li>{{ Cssxref(":enabled") }}</li> + <li>{{ Cssxref(":first") }}</li> + <li>{{ Cssxref(":first-child") }}</li> + <li>{{ Cssxref(":first-of-type") }}</li> + <li>{{ Cssxref(":fullscreen") }}</li> + <li>{{ Cssxref(":focus") }}</li> + <li>{{ Cssxref(":hover") }}</li> + <li>{{ Cssxref(":indeterminate") }}</li> + <li>{{ Cssxref(":in-range") }}</li> + <li>{{ Cssxref(":invalid") }}</li> + <li>{{ Cssxref(":lang", ":lang()") }}</li> + <li>{{ Cssxref(":last-child") }}</li> + <li>{{ Cssxref(":last-of-type") }}</li> + <li>{{ Cssxref(":left") }}</li> + <li>{{ Cssxref(":link") }}</li> + <li>{{ Cssxref(":not", ":not()") }}</li> + <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li> + <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li> + <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li> + <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li> + <li>{{ Cssxref(":only-child") }}</li> + <li>{{ Cssxref(":only-of-type") }}</li> + <li>{{ Cssxref(":optional") }}</li> + <li>{{ Cssxref(":out-of-range") }}</li> + <li>{{ Cssxref(":read-only") }}</li> + <li>{{ Cssxref(":read-write") }}</li> + <li>{{ Cssxref(":required") }}</li> + <li>{{ Cssxref(":right") }}</li> + <li>{{ Cssxref(":root") }}</li> + <li>{{ Cssxref(":scope") }}</li> + <li>{{ Cssxref(":target") }}</li> + <li>{{ Cssxref(":valid") }}</li> + <li>{{ Cssxref(":visited") }}</li> +</ul> +</div> + +<h3 id="Pseudo-elements"><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elements</a></h3> + +<div class="index"> +<ul> + <li id="pelm">{{ Cssxref("::after") }}</li> + <li>{{ Cssxref("::backdrop") }}</li> + <li>{{ Cssxref("::before") }}</li> + <li>{{ Cssxref("::cue") }}</li> + <li>{{ Cssxref("::first-letter") }}</li> + <li>{{ Cssxref("::first-line") }}</li> + <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::selection") }}</li> + <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li> +</ul> +</div> + +<div class="note"> +<p><strong>Vegeu també:</strong> Una <a href="https://www.w3.org/TR/selectors/#selectors">llista completa de selectors</a> en l'especificació Selectors Level 3.</p> +</div> + +<h2 id="Conceptes">Conceptes</h2> + +<h3 id="Sintaxi_i_semàntica"><span class="short_text" id="result_box" lang="ca"><span>Sintaxi i semàntica</span></span></h3> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Syntax">Sintaxi CSS</a></li> + <li><a href="/en-US/docs/Web/CSS/At-rule">Regles-At</a></li> + <li><a href="/en-US/docs/Web/CSS/Cascade">Cascada</a></li> + <li><a href="/en-US/docs/Web/CSS/Comments">Comentaris</a></li> + <li><a href="/en-US/docs/Glossary/Descriptor_(CSS)">Descriptor</a></li> + <li><a href="/en-US/docs/Web/CSS/inheritance">Herència</a></li> + <li><a href="/en-US/docs/Web/CSS/Shorthand_properties">Propietats abreujades</a></li> + <li><a href="/en-US/docs/Web/CSS/Specificity">Especificitat</a></li> + <li><a href="/en-US/docs/Web/CSS/Value_definition_syntax">Sintaxi de definció de valor</a></li> +</ul> + +<h3 id="Valors">Valors</h3> + +<ul> + <li><a href="/en-US/docs/Web/CSS/actual_value">Valor Real</a></li> + <li><a href="/en-US/docs/Web/CSS/computed_value">Valor Calculat</a></li> + <li><a href="/en-US/docs/Web/CSS/initial_value">Valor Inicial</a></li> + <li><a href="/en-US/docs/Web/CSS/resolved_value">Valor Resolt</a></li> + <li><a href="/en-US/docs/Web/CSS/specified_value">Valor Especificat</a></li> + <li><a href="/en-US/docs/Web/CSS/used_value">Valor Usat</a></li> +</ul> + +<h3 id="Disseny">Disseny</h3> + +<ul> + <li><a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">Context de format de bloc</a></li> + <li><a href="/en-US/docs/Web/CSS/box_model">Model Caixa</a></li> + <li><a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">Bloc contenidor</a></li> + <li><a href="/en-US/docs/Web/CSS/Layout_mode">Mode de presentació</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Col.lapsant el Marge</a></li> + <li><a href="/en-US/docs/Web/CSS/Replaced_element">Elements Reemplaçats</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Context d'Apilament</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Visual_formatting_model">Model de format Visual</a></li> +</ul> + +<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2> + +<h3 id="Tipus_d'objectes_principals"><span class="short_text" id="result_box" lang="ca"><span>Tipus d'objectes principals</span></span></h3> + +<ul> + <li>document.<a href="/en-US/docs/Web/API/Document/styleSheets">styleSheets</a></li> + <li>styleSheets[i].<a href="/en-US/docs/Web/API/CSSRuleList">cssRules</a></li> + <li>cssRules[i].<a href="/en-US/docs/Web/API/CSSRule/cssText">cssText</a> (selector & style)</li> + <li>cssRules[i].<a href="/en-US/docs/Web/API/CSSStyleRule/selectorText">selectorText</a></li> + <li>elem.<a href="/en-US/docs/Web/API/HTMLElement/style">style</a></li> + <li>elem.style.<a href="/en-US/docs/Web/API/CSSStyleDeclaration/cssText">cssText</a> (just style)</li> + <li>elem.<a href="/en-US/docs/Web/API/Element/className">className</a></li> + <li>elem.<a href="/en-US/docs/Web/API/Element/classList">classList</a></li> +</ul> + +<h3 id="Mètodes_importants"><span class="short_text" id="result_box" lang="ca"><span>Mètodes importants</span></span></h3> + +<ul> + <li>{{domxref("CSSStyleSheet.insertRule")}}</li> + <li>{{domxref("CSSStyleSheet.deleteRule")}}</li> +</ul> + +<h2 id="Vegeu_també"><span class="short_text" id="result_box" lang="ca"><span>Vegeu també</span></span></h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS extensions</a> (prefixades amb <code>-moz</code>)</li> + <li><a href="/en-US/docs/Web/CSS/Webkit_Extensions">WebKit CSS extensions</a> ( <span id="result_box" lang="ca"><span>majoritàriament prefixades amb</span></span> <code>-webkit</code>)</li> + <li><a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">Microsoft CSS extensions</a> (prefixades amb <code>-ms</code>)</li> +</ul> diff --git a/files/ca/web/css/selectors_css/index.html b/files/ca/web/css/selectors_css/index.html new file mode 100644 index 0000000000..9eaf8daffc --- /dev/null +++ b/files/ca/web/css/selectors_css/index.html @@ -0,0 +1,156 @@ +--- +title: Selectors CSS +slug: Web/CSS/Selectors_CSS +tags: + - CSS + - CSS Selectors + - Overview + - Reference + - Selectors +translation_of: Web/CSS/CSS_Selectors +--- +<div>{{CSSRef}}</div> + +<p>Els<strong> Selectors</strong> <strong>CSS</strong> <span id="result_box" lang="ca"><span>defineixen els elements als quals s'aplica un conjunt de normes CSS.</span></span></p> + +<h2 id="Selectors_Bàsics">Selectors Bàsics</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Type_selectors">Selector de tipus</a></dt> + <dd>Selecciona tots els elements que coincideixen amb el nom del node donat.<br> + <strong>Sintaxi:</strong> <code><var>eltname</var></code><br> + <strong>Exemple:</strong> <code>input</code> coincidirà amb qualsevol element {{HTMLElement('input')}}</dd> + <dt><a href="/en-US/docs/Web/CSS/Class_selectors">Selector de clase </a></dt> + <dd>Selecciona tots els elements que tenen l'atribut <code>class</code> donat.<br> + <strong>Sintaxi:</strong> <code>.<var>classname</var></code><br> + <strong>Exemple:</strong> <code>.index</code> coincidirà amb qualsevol element que tingui una classe "index"</dd> + <dt><a href="/en-US/docs/Web/CSS/ID_selectors">Selector de ID</a></dt> + <dd>Selecciona un element basat en el valor del seu atribut <code>id</code>. Només hi ha d'haver un element amb una ID determinat en un document.<br> + <strong>Sintaxi:</strong> <code>#<var>idname</var></code><br> + <strong>Exemple:</strong> <code>#toc</code> <span id="result_box" lang="ca"><span>coincidiran amb l'element que té</span></span> l'ID "toc".</dd> + <dt><a href="/en-US/docs/Web/CSS/Universal_selectors">Selector universal</a></dt> + <dd><span id="result_box" lang="ca"><span>Selecciona tots els elements.</span> <span>De manera opcional, pot estar restringit a un espai de noms específic o a tots els espais de noms.</span></span><br> + <strong>Sintaxi:</strong> <code>*</code> <code>ns|*</code> <code>*|*</code><br> + <strong>Exemple:</strong> <code>*</code> <span id="result_box" lang="ca"><span>coincideix amb tots els elements del document.</span></span></dd> + <dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Selector d'atribut</a></dt> + <dd><span id="result_box" lang="ca"><span>Selecciona elements basats en el valor de l'atribut donat</span></span>.<br> + <strong>Sintaxi:</strong> <code>[attr]</code> <code>[attr=value]</code> <code>[attr~=value]</code> <code>[attr|=value]</code> <code>[attr^=value]</code> <code>[attr$=value]</code> <code>[attr*=value]</code><br> + <strong>Exemple:</strong> <code>[autoplay]</code> <span id="result_box" lang="ca"><span>coincidiran tots els elements que tenen establert l'atribut</span></span> <code>autoplay</code> (<span id="result_box" lang="ca"><span>a qualsevol valor</span></span>).</dd> +</dl> + +<h2 id="Combinadors">Combinadors</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Combinador de germans adjacents</a></dt> + <dd>El combinador <code>+</code> selecciona els germans adjacents. Això significa que el segon element segueix directament el primer, i ambdós comparteixen el mateix pare.<br> + <strong>Sintaxi:</strong> <code><var>A</var> + <var>B</var></code><br> + <strong>Exemple:</strong> <code>h2 + p</code> coincidirà amb tots el elements {{HTMLElement('p')}} que segueixen directament un {{HTMLElement('h2')}}.</dd> + <dt><a href="/en-US/docs/Web/CSS/General_sibling_selectors">Combinador general de germans</a></dt> + <dd>El combinador <code>~</code> selecciona els germans. Això significa que el segon element segueix el primer (encara que no necessàriament de forma immediata), i tots dos comparteixen el mateix pare.<br> + <strong>Sintaxi:</strong> <code><var>A</var> ~ <var>B</var></code><br> + <strong>Exemple:</strong> <code>p ~ span</code> coincidirà amb tots els elements {{HTMLElement('span')}} que segueixen un {{HTMLElement('p')}}.</dd> + <dt><a href="/en-US/docs/Web/CSS/Child_selectors">Combinador de fills</a></dt> + <dd>El combinador <code>></code> selecciona els nodes que són fills directes del primer element.<br> + <strong>Sintaxi:</strong> <code><var>A</var> > <var>B</var></code><br> + <strong>Exemple:</strong> <code>ul > li</code> coincidirà amb tots els elements {{HTMLElement('li')}} que estan niats directament dins d'un element {{HTMLElement('ul')}}.</dd> + <dt><a href="/en-US/docs/Web/CSS/Descendant_selectors">Combinador de descendents</a></dt> + <dd>El combinador <code> </code> selecciona els nodes que són descendents del primer element.<br> + <strong>Sintaxi:</strong> <code>A B</code><br> + <strong>Exemple:</strong> <code>div span</code> coincidirà amb tots els elements {{HTMLElement('span')}} que es troben dins d'un element {{HTMLElement('div')}}.</dd> +</dl> + +<h2 id="Pseudo-classes">Pseudo-classes</h2> + +<p><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-classes</a> <span id="result_box" lang="ca"><span>permeten la selecció d'elements basats en informació d'estat que no es troba a l'arbre del document.</span></span></p> + +<p><strong>Exemple:</strong> <code>a:visited</code> <span id="result_box" lang="ca"><span>coincidirà amb tots els elements</span></span> {{HTMLElement('a')}} <span id="result_box" lang="ca"><span>que hagi visitat l'usuari</span></span>.</p> + +<h2 id="Pseudo-elements">Pseudo-elements</h2> + +<p><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elements</a> <span id="result_box" lang="ca"><span>representen entitats que no estan incloses en HTML.</span></span></p> + +<p><strong>Exemple:</strong> <code>p::first-line</code> <span id="result_box" lang="ca"><span>coincidirà amb la primera línia de tots els elements</span></span> {{HTMLElement('p')}}.</p> + +<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')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definició inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">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>1</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.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>1.5</td> + <td>{{CompatGeckoMobile("1.9.2")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ca/web/css/selectors_css/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/ca/web/css/selectors_css/using_the__colon_target_pseudo-class_in_selectors/index.html new file mode 100644 index 0000000000..53339b06e5 --- /dev/null +++ b/files/ca/web/css/selectors_css/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -0,0 +1,69 @@ +--- +title: 'Ùs de la pseudo-class :target en selectors' +slug: 'Web/CSS/Selectors_CSS/Using_the_:target_pseudo-class_in_selectors' +tags: + - ':target' + - CSS + - Guide + - Reference + - Selectors +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +<div>{{CSSRef}}</div> + +<p>Quan una URL apunta a una peça específica d'un document, pot ser difícil per a l'usuari adonar-se. Esbrineu com podeu fer servir algun CSS senzill per cridar l'atenció sobre el destí d'una URL i millorar l'experiència de l'usuari.</p> + +<h2 id="Picking_a_Target" name="Picking_a_Target"><span class="short_text" id="result_box" lang="ca"><span>Triar un</span> <span>destí</span></span></h2> + +<p>La <a href="https://developer.mozilla.org/en/CSS/Pseudo-classes">pseudo-class</a> <code>{{ Cssxref(":target") }}</code>s'utilitza per aplicar estil a l'element de destinació d'un URI que conté un identificador de fragment. Per exemple, l'URI <code><span class="nowiki">http://developer.mozilla.org/en/docs/Using_the_:target_selector#example</span></code> conté el identificador de fragment <code>#example</code>. En HTML, els identificadors corresponent els valors dels atributs <code>id</code> o <code>name</code>, ja que tots dos comparteixen el mateix espai de noms. Per tant, l'URI d'exemple assenyalaria l'encapçalament "example" en aquest document.</p> + +<p>Suposem que desitjeu donar estil a qualsevol element <code>h2</code> que és el destí d'un URI, però no voleu que qualsevol altre tipus d'element aconsegueixi un estil de destinació. Això és bastant simple:</p> + +<pre>h2:target {font-weight: bold;}</pre> + +<p>També és possible crear estils que siguin específics d'un fragment en particular del document. Això es realitza utilitzant el mateix valor de la identificació que es troba en l'URI. Per tant, per afegir una vora al fragment <code>#example</code>, escriuríem:</p> + +<pre>#example:target {border: 1px solid black;}</pre> + +<h2 id="Targeting_the_Root_Element" name="Targeting_the_Root_Element">Dirigit a tots els elements</h2> + +<p>Si la intenció és crear un estil "ampli" que s'apliqui a tots els elements seleccionats, llavors el selector universal, ve molt bé:</p> + +<pre>:target {color: red;} +</pre> + +<h2 id="Example" name="Example">Exemple</h2> + +<p>En el següent exemple, hi ha cinc enllaços que apunten a elements en el mateix document. En seleccionar l'enllaç "First", per exemple, farà que <code><h1 id = "one"></code> es converteixi en l'element de destinació. Recordeu que el document pot saltar a una nova posició de desplaçament, ja que els elements de destinació es col·loquen a la part superior de la finestra del navegador si és possible.</p> + +<div id="example"> +<pre><h4 id="one">...</h4> <p id="two">...</p> +<div id="three">...</div> <a id="four">...</a> <em id="five">...</em> + +<a href="#one">First</a> +<a href="#two">Second</a> +<a href="#three">Third</a> +<a href="#four">Fourth</a> +<a href="#five">Fifth</a></pre> +</div> + +<h2 id="Conclusion" name="Conclusion">Conclusió</h2> + +<p>En els casos en què un identificador de fragment apunti a una part del document, els lectors poden arribar a confondre's sobre quina part del document se suposa que han d'estar llegint. El donar estil a la destinació d'un URI, podem reduïr o eliminar la confusió del lector.</p> + +<h2 id="Related_Links" name="Related_Links">Vegeu també</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">Selectors CSS3 #target-pseudo</a></li> + <li><a class="internal" href="/En/CSS/:target" title="En/CSS/:target">Referència CSS :target</a></li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Informació del document original</h3> + +<ul> + <li>Autor(s): Eric Meyer, Standards Evangelist, Netscape Communications</li> + <li>Original Copyright Information: Copyright © 2001-2003 Netscape. Tots els drets reservats.</li> + <li>Nota: Aquest article reproduït és part de l'original del lloc DevEdge.</li> +</ul> +</div> diff --git a/files/ca/web/css/selectors_d'atribut/index.html b/files/ca/web/css/selectors_d'atribut/index.html new file mode 100644 index 0000000000..6778a2b3cb --- /dev/null +++ b/files/ca/web/css/selectors_d'atribut/index.html @@ -0,0 +1,250 @@ +--- +title: Selector Atribut +slug: Web/CSS/Selectors_d'Atribut +tags: + - Beginner + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Attribute_selectors +--- +<div>{{CSSRef}}</div> + +<p>El <strong>selector attribute</strong> CSS<strong> </strong> <span id="result_box" lang="ca"><span>coincideix amb elements basats en la presència o el valor d'un atribut donat.</span></span></p> + +<pre class="brush: css no-line-numbers">/* <a> elements amb l'atribut title */ +a[title] { + color: purple; +} + +/* elements <a> <span class="short_text" id="result_box" lang="ca"><span>amb una coincidència</span></span> href "https://example.org" */ +a[href="https://example.org"] { + color: green; +} + +/* elements <a> amb un href contenint "example" */ +a[href*="example"] { + font-size: 2em; +} + +/* elements <a> amb un href amb una terminació ".org" */ +a[href$=".org"] { + font-style: italic; +}</pre> + +<dl> + <dt><code>[<em>attr</em>]</code></dt> + <dd>Representa un element amb un nom d'atribut <em>attr</em>.</dd> + <dt><code>[<em>attr</em>=<em>value</em>]</code></dt> + <dd>Representa un element amb un nom d'atribut <em>attr</em> el valor del qual és exactament <em>value</em>.</dd> + <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt> + <dd>Representa un element amb un nom d'atribut <em>attr</em> el valor del qual és una llista de paraules separades per espais en blanc, una de les quals és exactament <em>value</em>.</dd> + <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt> + <dd>Representa un element amb un nom d'atribut <em>attr</em> el valor del qual pot ser exactament <em>value</em> o pot començar amb <em>value</em> immediatament seguit d'un guió, <code>-</code> (U+002D). Sovint s'utilitza per coincidències de subcodis de llenguatge.</dd> + <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt> + <dd>Representa un element amb un nom d'atribut <em>attr</em> el valor del qual està prefixat (precedit) per <em>value</em>.</dd> + <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt> + <dd>Representa un element amb un nom d'atribut <em>attr</em> el valor del qual és sufix (següit) per <em>value</em>.</dd> + <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt> + <dd>Representa un element amb un nom d'atribut <em>attr</em> el valor del qual conté almenys una ocurrència <em>value</em> dins de la cadena.</dd> + <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt> + <dd>En afegir una <code>i</code> (o <code>I</code>) abans del claudàtor de tancament, el valor es compara entre majúscules i minúscules (per a caràcters dins del rang ASCII).</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Links">Links</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">a { + color: blue; +} + +/* Internal links, beginning with "#" */ +a[href^="#"] { + background-color: gold; +} + +/* Links with "example" anywhere in the URL */ +a[href*="example"] { + background-color: silver; +} + +/* Links with "insensitive" anywhere in the URL, + regardless of capitalization */ +a[href*="insensitive" i] { + color: cyan; +} + +/* Links that end in ".org" */ +a[href$=".org"] { + color: red; +} +</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><ul> + <li><a href="#internal">Internal link</a></li> + <li><a href="http://example.com">Example link</a></li> + <li><a href="#InSensitive">Insensitive internal link</a></li> + <li><a href="http://example.org">Example org link</a></li> +</ul></pre> + +<h4 id="Resultat">Resultat</h4> + +<p>{{EmbedLiveSample('Links')}}</p> + +<h3 id="Llengües"><span class="short_text" id="result_box" lang="ca"><span>Llengües</span></span></h3> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">/* Tots els divs amb un atribut `lang` són en negreta. */ +div[lang] { + font-weight: bold; +} + +/* Tots els divs en US Anglès són blaus. */ +div[lang~="en-us"] { + color: blue; +} + +/* Tots els divs en Portuguès són verds. */ +div[lang="pt"] { + color: green; +} + +/* Tots els divs en Xinès són vermells, ja sigui + simplificat (zh-CN) o tradicional (zh-TW). */ +div[lang|="zh"] { + color: red; +} + +/* Tots els divs en Xinès Traditional + `data-lang` són porpra */ +/* Nota: T<span id="result_box" lang="ca"><span>ambé podeu utilitzar atributs amb guions sense cometes dobles</span></span> */ +div[data-lang="zh-TW"] { + color: purple; +} +</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div lang="en-us en-gb en-au en-nz">Hello World!</div> +<div lang="pt">Olá Mundo!</div> +<div lang="zh-CN">世界您好！</div> +<div lang="zh-TW">世界您好！</div> +<div data-lang="zh-TW">?世界您好！</div> +</pre> + +<h4 id="Resultat_2">Resultat</h4> + +<p>{{EmbedLiveSample('Languages')}}</p> + +<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', '#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Afegit modificador per a la selecció del valor d'atribut ASCII sense distinció de majúscules i minúscules.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definició inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>7</td> + <td>9</td> + <td>3</td> + </tr> + <tr> + <td>Modificador sense distinció de majúscules i minúscules</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("47.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(36)}}</td> + <td>{{CompatSafari(9)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Modificador sense distinció de majúscules i minúscules</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("47.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari(9)}}</td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ca/web/css/selectors_de_classe/index.html b/files/ca/web/css/selectors_de_classe/index.html new file mode 100644 index 0000000000..1f8cfdbee4 --- /dev/null +++ b/files/ca/web/css/selectors_de_classe/index.html @@ -0,0 +1,139 @@ +--- +title: Selector Class +slug: Web/CSS/Selectors_de_Classe +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Class_selectors +--- +<div>{{CSSRef}}</div> + +<p>El <strong>selector class </strong> CSS <span id="result_box" lang="ca"><span>coincideix amb elements basats en el contingut de l'atribut</span></span> {{htmlattrxref("class")}}.</p> + +<pre class="brush: css no-line-numbers">/* Tots els elements amb class="spacious" */ +.spacious { + margin: 2em; +} + +/* Tots els elements <li> amb class="spacious" */ +li.spacious { + margin: 2em; +}</pre> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">.classname { <em>style properties</em> }</pre> + +<p><span id="result_box" lang="ca"><span>Recordeu que</span> <span>això és</span> <span>equivalent al</span> <span>següent</span></span> {{Cssxref("Attribute_selectors", "attribute selector")}}:</p> + +<pre class="syntaxbox">[class~=classname] { <em>style properties</em> }</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div.classy { + background-color: skyblue; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="classy">This div has a special class on it!</div> +<div>This is just a regular div.</div> +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Example', '100%', 50)}}</p> + +<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', '#class-html', 'class selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Sense canvis</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definició inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</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>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ca/web/css/selectors_de_descendents/index.html b/files/ca/web/css/selectors_de_descendents/index.html new file mode 100644 index 0000000000..1eb4fd57f8 --- /dev/null +++ b/files/ca/web/css/selectors_de_descendents/index.html @@ -0,0 +1,170 @@ +--- +title: Selectors de descendents +slug: Web/CSS/Selectors_de_descendents +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Descendant_combinator +--- +<div>{{CSSRef("Selectors")}}</div> + +<p>El <strong>combinador descendent</strong> - en general representat per un únic caràcter d'espai ( ) - combina dos selectors de tal manera que els elements que coincideixen amb el segon selector se seleccionen si tenen un element ancestral que coincideixi amb el primer selector. Els selectors que utilitzen un combinador descendent s'anomenen selectors de descendents.</p> + +<pre class="brush: css no-line-numbers">/* Llista els elemenst que són descendsnts de la llista "my-things" */ +ul.my-things li { + margin: 2em; +}</pre> + +<p>El combinador descendent és tècnicament un o més caràcters d'espais en blanc {{Glossary("CSS")}} - el caràcter d'espai en blanc i/o un dels quatre caràcters de control: retorn de carro, avanç de pàgina, nova línia i caràcters de tabulació - entre dos selectors en absència d'un altre combinador. A més, els caràcters d'espai en blanc de les que es compon el combinador poden contenir qualsevol nombre de comentaris CSS.</p> + +<p>La naturalesa abstracta d'aquest combinador el fa diferent dels altres combinadors estandarditzats ja que aquests combinadors estan representats per una seqüència de caràcters finits diferents. Aquesta inconsistència es va tractar afegint un combinador descendent redundant representat per dos caràcters, més gran que (<code>>></code>), amb seqüència, donant-li una forma que és particularment similar a la del <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors">combinador fill</a>, que comparteix una funció similar.</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox"><var>selector1</var> <var>selector2</var> { <var>/* property declarations */</var> } +</pre> + +<pre class="syntaxbox"><var>selector1</var> >> <var>selector2</var> { <var>/* property declarations */</var> } +</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">li { + list-style-type: disc; +} + +li li { + list-style-type: circle; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul> + <li> + <div>Item 1</div> + <ul> + <li>Subitem A</li> + <li>Subitem B</li> + </ul> + </li> + <li> + <div>Item 2</div> + <ul> + <li>Subitem A</li> + <li>Subitem B</li> + </ul> + </li> +</ul> +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Example', 200, 160)}}</p> + +<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', '#descendant-combinators', 'descendant combinator')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>>> introduït com combinador descendent a més de l'espai en blanc com combinador.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#contextual-selectors', 'contextual selectors')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definició inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Tipus <code>>></code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Tipus <code>>></code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ca/web/css/selectors_de_fills/index.html b/files/ca/web/css/selectors_de_fills/index.html new file mode 100644 index 0000000000..f5cb8139f9 --- /dev/null +++ b/files/ca/web/css/selectors_de_fills/index.html @@ -0,0 +1,135 @@ +--- +title: Combinador de fills +slug: Web/CSS/Selectors_de_fills +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Reference + - Selectors +translation_of: Web/CSS/Child_combinator +--- +<div>{{CSSRef("Selectors")}}</div> + +<p>El<strong> combinador de fills</strong> (<code>></code>) es col·loca entre dos selectors CSS. Solament coincideix amb aquells elements que coincideixen amb el segon selector que són fills d'elements que coincideixen amb el primer.</p> + +<pre class="brush: css no-line-numbers">/* Enumera els elements que són fills de la llista "my-things" */ +ul.my-things > li { + margin: 2em; +}</pre> + +<p>Els elements que coincideixin amb el segon selector han de ser els fills immediats dels elements que coincideixin amb el primer selector. Això és més estricte que el <a href="/en-US/docs/Web/CSS/Descendant_selectors">selector descendent</a>, que coincideix amb tots els elements que coincideixen amb el segon selector per al qual existeix un element ancestral coincident amb el primer selector, independentment de la quantitat de "salts" en el DOM</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">selector1 > selector2 { <em>style properties</em> } +</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">span { + background-color: white; +} + +div > span { + background-color: DodgerBlue; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <span>Span #1, in the div. + <span>Span #2, in the span that's in the div.</span> + </span> +</div> +<span>Span #3, not in the div at all.</span> +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample("Example", 200, 100)}}</p> + +<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', '#child-combinators', 'child combinator')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Sense canvis</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definició inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>7.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ca/web/css/selectors_de_germans_adjacents/index.html b/files/ca/web/css/selectors_de_germans_adjacents/index.html new file mode 100644 index 0000000000..911a395693 --- /dev/null +++ b/files/ca/web/css/selectors_de_germans_adjacents/index.html @@ -0,0 +1,135 @@ +--- +title: Combinador de germans adjacents +slug: Web/CSS/Selectors_de_germans_adjacents +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Reference + - Selectors +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +<div>{{CSSRef("Selectors")}}</div> + +<p><span id="result_box" lang="ca"><span>El <strong>combinador de germans adjacents</strong></span></span> (<code>+</code>) <span id="result_box" lang="ca"><span>separa dos selectors i només coincideix amb el segon element si segueix <em>immediatament</em> el primer element, i tots dos són fills del mateix pare</span></span> {{domxref("element")}}.</p> + +<pre class="brush: css no-line-numbers">/* Paràgrafs que vénen immediatament després de qualsevol imatge */ +img + p { + font-style: bold; +}</pre> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">former_element + target_element { <em>style properties</em> } +</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">li:first-of-type + li { + color: red; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul> + <li>One</li> + <li>Two!</li> + <li>Three</li> +</ul></pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Example', 200, 100)}}</p> + +<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', '#adjacent-sibling-combinators', 'next-sibling combinator')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Li dóna un nou nom al combinador "next-sibling".</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definició inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>7.0<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Edge</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>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Internet Explorer 7 no actualitza l'estil correctament quan un element es col·loca dinàmicament abans d'un element que coincideixi amb el selector. En Internet Explorer 8, si un element s'insereix dinàmicament fent clic en un enllaç, l'estil del primer fill no s'aplicarà fins que l'enllaç perdi el focus.</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/General_sibling_selectors">Selectors generals de germans</a></li> +</ul> diff --git a/files/ca/web/css/selectors_de_tipus/index.html b/files/ca/web/css/selectors_de_tipus/index.html new file mode 100644 index 0000000000..d87b102ac3 --- /dev/null +++ b/files/ca/web/css/selectors_de_tipus/index.html @@ -0,0 +1,135 @@ +--- +title: Selector Type +slug: Web/CSS/Selectors_de_Tipus +tags: + - CSS + - HTML + - NeedsMobileBrowserCompatibility + - Node + - Reference + - Selectors +translation_of: Web/CSS/Type_selectors +--- +<div>{{CSSRef}}</div> + +<p>El <strong>selector</strong> <strong>type </strong> CSS coincideix amb elements per nom del node. En altres paraules, selecciona tots els elements del tipus donat dins d'un document.</p> + +<pre class="brush: css no-line-numbers">/* Tots els elements <a>. */ +a { + color: purple; +}</pre> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">element { <em>style properties</em> } +</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">span { + background-color: skyblue; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><span>Here's a span with some text.</span> +<p>Here's a p with some text.</p> +<span>Here's a span with more text.</span> +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Example', '100%', 150)}}</p> + +<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', '#type-selectors', 'Type (tag name) selector')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Sense canvis</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Sense canvis</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definició inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</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>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ca/web/css/selectors_general_de_germans/index.html b/files/ca/web/css/selectors_general_de_germans/index.html new file mode 100644 index 0000000000..64429bbaba --- /dev/null +++ b/files/ca/web/css/selectors_general_de_germans/index.html @@ -0,0 +1,129 @@ +--- +title: Combinador general de germans +slug: Web/CSS/Selectors_general_de_germans +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Reference + - Selectors +translation_of: Web/CSS/General_sibling_combinator +--- +<div><span class="s1">{{CSSRef("Selectors")}}</span></div> + +<p>El <strong>combinador general de germans</strong> (<code>~</code>) <span id="result_box" lang="ca"><span>separa dos selectors i només coincideix amb el segon element si segueix el primer element (encara que no necessàriament immediatament), i tots dos són fills del mateix pare</span></span> {{domxref("element")}}.</p> + +<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Paràgrafs que són germans i posteriors a qualsevol imatge</span></span> */ +img ~ p { + color: red; +}</pre> + +<h2 id="Syntax" name="Syntax">Sintaxi</h2> + +<pre class="syntaxbox">element ~ element { <em>style properties</em> } +</pre> + +<h2 id="Example" name="Example">Exemple</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p ~ span { + color: red; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><span>This is not red.</span> +<p>Here is a paragraph.</p> +<code>Here is some code.</code> +<span>And here is a red span!</span> +<code>More code...</code> +<span>And this is a red span!</span> +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{ EmbedLiveSample('Example', 280, 120) }}</p> + +<h2 id="Specifications" name="Specifications">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', '#general-sibling-combinators', 'following-sibling combinator') }}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Li dona un nou nom al combinador "subsequent-sibling"</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>7</td> + <td>9</td> + <td>3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>Edge</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veure">Veure</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Selectors de germans adjacents</a></li> +</ul> diff --git a/files/ca/web/css/selectors_id/index.html b/files/ca/web/css/selectors_id/index.html new file mode 100644 index 0000000000..1b6f041eb6 --- /dev/null +++ b/files/ca/web/css/selectors_id/index.html @@ -0,0 +1,134 @@ +--- +title: Selector ID +slug: Web/CSS/Selectors_ID +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/ID_selectors +--- +<div>{{CSSRef}}</div> + +<p><span id="result_box" lang="ca"><span>En un document HTML, el</span></span> <strong>selector</strong> <strong>ID </strong> <span id="result_box" lang="ca"><span>CSS coincideix amb un element basat en el valor del seu atribut</span></span> {{htmlattrxref("ID")}}. <span id="result_box" lang="ca"><span>L'atribut</span></span> <code>ID</code> <span id="result_box" lang="ca"><span>de l'element seleccionat ha de coincidir exactament amb el valor indicat en el selector</span></span></p> + +<pre class="brush: css no-line-numbers">/* The element with id="demo" */ +div#demo { + border: red 2px solid; +}</pre> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">#id_value { <em>style properties</em> }</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>Recordeu que</span> <span>això és</span> <span>equivalent al</span> <span>següent</span></span> {{Cssxref("Attribute_selectors", "attribute selector")}}:</p> + +<pre class="syntaxbox">[id=id_value] { <em>style properties</em> }</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div#identified { + background-color: skyblue; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="identified">This div has a special ID on it!</div> +<div>This is just a regular div.</div> +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample("Example", '100%', 50)}}</p> + +<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", "#id-selectors", "ID selectors")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Definició inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</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>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ca/web/css/selectors_universal/index.html b/files/ca/web/css/selectors_universal/index.html new file mode 100644 index 0000000000..6aa7931ef9 --- /dev/null +++ b/files/ca/web/css/selectors_universal/index.html @@ -0,0 +1,176 @@ +--- +title: Selector Universal +slug: Web/CSS/Selectors_Universal +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Reference + - Selectors +translation_of: Web/CSS/Universal_selectors +--- +<div>{{CSSRef}}</div> + +<p>El <strong>selector</strong> <strong>universal </strong>CSS<strong> </strong> (<code>*</code>) <span class="short_text" id="result_box" lang="ca"><span>coincideix amb elements de qualsevol tipus</span></span>.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona tots els elements */ +* { + color: green; +}</pre> + +<p>A partir de CSS3, l'asterisc pot ser usat en combinació amb {{cssxref("CSS_Namespaces", "namespaces")}}:</p> + +<ul> + <li><code>ns|*</code> - coincideix amb tots els elements de l'espai de noms <em>ns</em></li> + <li><code>*|*</code> - coincideix amb tots els elements</li> + <li><code>|*</code> - coincideix amb tots els elements sense cap espai de noms declarat</li> +</ul> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">* { <em>style properties</em> }</pre> + +<p><span id="result_box" lang="ca"><span>L'asterisc és opcional amb selectors simples</span></span> . <span id="result_box" lang="ca"><span>Per exemple</span></span> , <code>*.warning</code> i <code>.warning</code> són equivalents.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">* [lang^=en] { + color: green; +} + +*.warning { + color: red; +} + +*#maincontent { + border: 1px solid blue; +} + +.floating { + float: left +} + +/* automatically clear the next sibling after a floating element */ +.floating + * { + clear: left; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p class="warning"> + <span lang="en-us">A green span</span> in a red paragraph.</span> +</p> +<p id="maincontent" lang="en-gb"> + <span class="warning">A red span</span> in a green paragraph.</span> +</p></pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Examples')}}</p> + +<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-universal-selector', 'universal selector')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Sense canvis</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td><span id="result_box" lang="ca"><span>Defineix el comportament pel que fa als espais de noms i afegeix suggeriments que permeten ometre el selector dins de pseudo-elements</span></span></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definició inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>7</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Combinació amb suport d'espai de noms</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>9</td> + <td>8</td> + <td>1.3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</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>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Combinació amb suport d'espai de noms</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ca/web/css/sintaxi/index.html b/files/ca/web/css/sintaxi/index.html new file mode 100644 index 0000000000..51931c11f0 --- /dev/null +++ b/files/ca/web/css/sintaxi/index.html @@ -0,0 +1,79 @@ +--- +title: Sintaxi +slug: Web/CSS/Sintaxi +tags: + - CSS + - Guide + - Reference + - Web +translation_of: Web/CSS/Syntax +--- +<div>{{cssref}}</div> + +<p>L'objectiu bàsic del llenguatge de la Fulla d'Estil en Cascada (CSS) és permetre que un motor del navegador pinti elements de la pàgina amb característiques específiques, com ara colors, posicionament o decoracions. La <em>sintaxi CSS</em> reflecteix aquest objectiu i els seus components bàsics són:</p> + +<ul> + <li>La <strong>propietat</strong> és un identificador, és un <em>nom</em> legible per humans, que defineix quina característica es considera.</li> + <li>El <strong>valor</strong> descriu com el motor ha de manejar la característica. Cada propietat té un conjunt de valors vàlids, definits per una gramàtica formal, així com un significat semàntic, implementat pel motor del navegador.</li> +</ul> + +<h2 id="Declaracions_CSS">Declaracions CSS</h2> + +<p>Establir propietats CSS a valors específics és la funció principal del llenguatge CSS. Un parell de propietats i valors s'anomena <strong>declaració</strong>, i qualsevol motor CSS calcula quines declaracions s'apliquen a cada element d'una pàgina per tal d'establir-la de forma adequada i definir-la.</p> + +<p>Les dues propietats i els valors no són sensibles a majúscules i minúscules de manera predeterminada a CSS. El parell està separat per dos punts, ':' (U + 003A COLON), i els espais en blanc abans, entre i després de les propietats i valors, però no necessàriament a l'interior, s'ignoren.</p> + +<p><img alt="css syntax - declaration.png" class="default internal" src="/@api/deki/files/6164/=css_syntax_-_declaration.png" style="border: 1px solid black; padding: 1em;"></p> + +<p>Hi ha més de <a href="/en/CSS/CSS_Reference" title="en/CSS/CSS_Reference">100 propiertats diferents</a> en CSS i un nombre gairebé infinit de valors diferents. No es permeten tots els parells de propietats i valors i cada propietat defineix quins són els valors vàlids. Quan un valor no és vàlid per a una propietat determinada, la declaració es considera <em>invàlida</em> i és totalment ignorada per el motor CSS .</p> + +<h2 id="Blocs_de_declaracions_CSS">Blocs de declaracions CSS</h2> + +<p>Les declaracions s'agrupen en <strong>blocs</strong>, és a dir, en una estructura delimitada per una clau d'obertura, '<code>{</code>' (<code>U+007B LEFT CURLY BRACKET</code>), i una de tancament, '<code>}</code>' (<code>U+007D RIGHT CURLY BRACKET</code>). Els blocs de vegades poden ser niats, de manera que les claus d'oberture i tancament han de coincidir.</p> + +<p><img alt="css syntax - block.png" class="default internal" src="/@api/deki/files/6165/=css_syntax_-_block.png" style="border: 1px solid black; padding: 1em;"></p> + +<p>Aquests blocs són naturalment anomenats blocs de declaració i les declaracions dins d'elles estan separades per un punt i coma, ';' (U + 003B SEMICOLON). Un bloc de declaració pot estar buit, aixó és, que conté una declaració nul·la. Els espais en blanc al voltant de les declaracions s'ignoren. L'última declaració d'un bloc no necessita ser acabada per un punt i coma, tot i que sovint es considera un bon estil per fer-ho ja que evita oblidar-se d'afegir-lo quan s'estén el bloc amb una altra declaració.</p> + +<p><img alt="css syntax - declarations block.png" class="default internal" src="/@api/deki/files/6166/=css_syntax_-_declarations_block.png" style="border: 1px solid black; padding: 1em;"></p> + +<div class="note">El contingut d'un bloc de declaració CSS, és una llista de declaracions separades per punt i coma, sense les claus inicials i de tancament, es pot incloure dins d'un atribut d'<a href="/en/HTML/Global_attributes#attr-style" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-style"><code>estil</code></a>.</div> + +<h2 id="Regles_de_CSS">Regles de CSS</h2> + +<p>Si les fulles d'estil només poguessin aplicar una declaració a cada element d'una pàgina web, serien bastant inútils. L'objectiu real és aplicar diferents declaracions a diferents parts del document.</p> + +<p>CSS ho permet associant condicions amb blocs de declaracions. Cada bloc de declaració (vàlid) està precedit d'un o més selectors que són condicions que seleccionen alguns elements de la pàgina. El bloc de declaracions d'un grup de parells de selectors s'anomena un <strong>conjunt de regles</strong> (<strong>ruleset</strong>), o sovint només una <strong>regla</strong> (<strong>rule</strong>).</p> + +<p><img alt="css syntax - ruleset.png" class="default internal" src="/@api/deki/files/6167/=css_syntax_-_ruleset.png" style="border: 1px solid black; padding: 1em;"></p> + +<p>Com que un element de la pàgina pot coincidir amb diversos selectors i, per tant, amb diverses regles que poden incloure una propietat determinada en diverses ocasions, amb valors diferents, l'estàndard CSS defineix quina té prioritat sobre l'altra i s'ha d'aplicar: això s'anomena algorisme en <a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="Cascading and inheritance">cascade</a>.</p> + +<div class="note">És important notar que fins i tot si un conjunt de regles caracteritzat per un grup de selectors és una espècie d'abreviatura que reemplaça els conjunts de regles amb un sol selector cadascun, això no s'aplica a la validesa del conjunt de regles en si.<br> +<br> +Això dóna lloc a una conseqüència important: si un únic selector bàsic no és vàlid, com quan s'utilitza un pseudo-element o pseudo-classe desconegut, el selector sencer és invàlid i per tant s'ignora tota la regla (no és vàlida).</div> + +<h2 id="Sentències_CSS"><span id="result_box" lang="ca"><span>Sentències CSS</span></span></h2> + +<p>Els conjunts de regles són els blocs principals de construcció d'una fulla d'estil, que sovint només consisteixen en una gran llista d'elles. Però hi ha una altra informació que un autor web vol transmetre en la fulla d'estil, com el joc de caràcters, altres fulles d'estil externes per importar, descripcions de tipus de fonts o comptadors de llistes i molts més. Utilitzarà altres tipus específics de declaracions per fer-ho.</p> + +<p>Una <strong>declaració</strong> és un bloc de construcció que comença amb qualsevol caràcter que no sigui l'espai i que finalitza en la primera clau de tancament o punt i coma (fora d'una cadena, no escapada i no s'inclou en un altre parell de {}, () o []).</p> + +<p><img alt="css syntax - statements Venn diag.png" class="default internal" src="/@api/deki/files/6168/=css_syntax_-_statements_Venn_diag.png" style="padding: 1em;"></p> + +<p>Hi ha dos tipus de declaracions:</p> + +<ul> + <li><strong>Conjunt de regles</strong> (<strong>Rulesets</strong>) (o regles) que, com es veu, associen una col·lecció de declaracions CSS a una condició descrita per un selector.</li> + <li><strong>Regles-At </strong>(<strong>At-rules</strong>) comencen amb un signe, '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>), seguit d'un identificador i, després continuen fins al final de la sentència, és a dir fins al següent punt i coma (;) fora d'un bloc o al final del bloc següent. Cada tipus de <a href="/en/CSS/At-rule" title="At-rule">regles-at</a>, definides per l'identificador, poden tenir la seva pròpia sintaxi interna, i la semàntica per descomptat. S'utilitzen per transmetre informació de metadades (com {{cssxref("@charset")}} o {{cssxref("@import")}}), informació condicional (com {{cssxref("@media")}} o {{cssxref("@document")}}), o informació descriptiva (com {{cssxref("@font-face")}}).</li> +</ul> + +<p>Qualsevol declaració que no sigui un conjunt de regles (ruleset) o una at-rule no és vàlida i és ignorada.</p> + +<p><a name="nested_statements">Hi ha un altre grup de declaracions – les <strong>declaracions niades.</strong> Aquestes són declaracions que es poden utilitzar en un subconjunt específic de regles-at – les <em>regles de grup condicional</em>. Aquestes declaracions només s'apliquen si es compleix una condició específica: el contingut de la regla-at <code>@media</code> només s'aplica si el dispositiu en què el navegador s'executa coincideix amb la condició expressada; el contingut de la regla-at <code>@document</code> només s'aplica si la pàgina actual coincideix amb algunes condicions, i així successivament. En CSS1 i CSS2.1, només es podien utilitzar <em>conjunts de regles</em> dins de les regles de grup condicional. Això va ser molt restrictiu i aquesta restricció es va aixecar en </a><a href="/en/CSS/CSS3#Conditionals" title="en/CSS/CSS3#Conditionals"><em>CSS Conditionals Level 3</em></a>. Ara, tot i que encara és experimental i no és compatible amb tots els navegadors, les regles de grup condicional poden contenir un rang de contingut més ampli: però també alguns conjunts de regles, però no totes les regles-at.</p> + +<h2 id="Vegeu_també"><span class="short_text" id="result_box" lang="ca"><span>Vegeu també</span></span></h2> + +<ul> + <li>{{ CSS_key_concepts()}}</li> +</ul> diff --git a/files/ca/web/css/visibility/index.html b/files/ca/web/css/visibility/index.html new file mode 100644 index 0000000000..ce3e835ec9 --- /dev/null +++ b/files/ca/web/css/visibility/index.html @@ -0,0 +1,242 @@ +--- +title: visibility +slug: Web/CSS/visibility +tags: + - CSS + - CSS Box Model + - CSS Property + - Layout + - Reference + - Web +translation_of: Web/CSS/visibility +--- +<div>{{CSSRef}}</div> + +<p>La propietat CSS <strong><code>visibility</code></strong> pot mostrar o ocultar un element sense afectar el disseny d'un document (és a dir, es crea espai per a elements, independentment de si són visibles o no). La propietat també pot ocultar files o columnes en un {{HTMLElement("table")}}.</p> + +<pre class="brush: css no-line-numbers">/* Valors de les paraules claus */ +visibility: visible; +visibility: hidden; +visibility: collapse; + +/* Valors globals */ +visibility: inherit; +visibility: initial; +visibility: unset; +</pre> + +<div class="note"> +<p><strong>Nota:</strong> Per ocultar un element <em><strong>i eliminar-lo del disseny del document</strong></em>, establiu la propietat {{cssxref("display")}} a <code>none</code> en comptes d'utilitzar <code>visibility</code>.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<p>La propietat <code>visibility</code> s'especifica com un dels valors de les paraules clau que es detallen a continuació.</p> + +<h3 id="Valors">Valors</h3> + +<dl> + <dt><code>visible</code></dt> + <dd>La caixa de l'element és visible.</dd> + <dt><code>hidden</code></dt> + <dd>La caixa de l'element és invisible (no dibuixada), però encara afecta el disseny normal. Els descendents de l'element seran visibles si tenen <code>visibility</code> establert a <code>visible</code>. L'element no pot rebre el focus (com ara quan navegueu pels <a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">índexs de pestanyes</a>).</dd> + <dt><code>collapse</code></dt> + <dd>Per {{HTMLElement("table")}} files, columnes, grups de columnes i grups de files, les files o columnes estan ocults i l'espai que han ocupat s'elimina (com si <code>{{Cssxref("display")}}: none</code> s'apliqués a la columna/fila de la taula). Tanmateix, la grandària d'altres files i columnes encara es calcula com si les cel·les de les files o columnes col·lapsades estiguessin presents. Aquest valor permet l'eliminació ràpida d'una fila o columna d'una taula sense forçar el recàlcul d'amplades i alçades per a tota la taula. Per als elements XUL, la grandària calculada de l'element sempre és zero, independentment d'altres estils que normalment afectarien la grandària, tot i que els marges encara tenen efecte. Per a altres elements, <code>collapse</code> es tracta igual que <code>hidden</code>.</dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Interpolació">Interpolació</h2> + +<p>Els valors de visibilitat són interpolables entre <em>visible</em> i <em>no visible</em>. Per tant, un dels valors d'inici o de finalització ha de ser <code>visible</code> o no es pot produir interpolació. El valor s'interpola com un pas discret, on els valors de la funció de temporització entre <code>0</code> i <code>1</code> es corresponen amb <code class="css">visible</code> i altres valors de la funció de temporització (que només es produeixen a l'inici/final de la transició o com a resultat de funcions <code class="css">cubic-bezier()</code> amb valors y fora de [0, 1]) aplicat fins a l'extrem més proper.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_bàsic">Exemple bàsic</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p class="visible">The first paragraph is visible.</p> +<p class="not-visible">The second paragraph is NOT visible.</p> +<p class="visible">The third paragraph is visible. Notice the second paragraph is still occupying space.</p> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.visible { + visibility: visible; +} + +.not-visible { + visibility: hidden; +} +</pre> + +<p>{{EmbedLiveSample('Basic_example')}}</p> + +<h3 id="Exemple_de_taula"><span class="short_text" id="result_box" lang="ca"><span>Exemple de taula</span></span></h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><table> + <tr> + <td>1.1</td> + <td class="collapse">1.2</td> + <td>1.3</td> + </tr> + <tr class="collapse"> + <td>2.1</td> + <td>2.2</td> + <td>2.3</td> + </tr> + <tr> + <td>3.1</td> + <td>3.2</td> + <td>3.3</td> + </tr> +</table></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">.collapse { + visibility: collapse; +} + +table { + border: 1px solid red; +} + +td { + border: 1px solid gray; +} +</pre> + +<p>{{EmbedLiveSample('Table_example')}}</p> + +<h2 id="Notes">Notes</h2> + +<ul> + <li>Suport per <code>visibility: collapse</code> és inexistent o parcialment incorrecte en alguns navegadors moderns. Pot ser que no es tracti correctament com <code>visibility: hidden</code> en elements diferents de les files i columnes de la taula.</li> + <li><code>visibility: collapse</code> pot canviar el disseny d'una taula si la taula té taules niades dins de les cel·les que estan col·lapsades, tret que <code>visibility: visible</code> s'especifiqui explícitament en les taules niades.</li> +</ul> + +<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('CSS3 Flexbox', '#visibility-collapse', 'visibility')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Defineix el valor de <code>collapse</code> tal com s'aplica als elements flex.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Box', '#visibility-prop', 'visibility')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>No hi ha cap canvi</span></span>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defineix <code>visibility</code> com animable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}<sup>[2]</sup></td> + <td>4.0<sup>[4]</sup></td> + <td>4.0<sup>[3]</sup></td> + <td>1.0<sup>[1]</sup></td> + </tr> + <tr> + <td><span class="short_text" id="result_box" lang="ca"><span>col.lapse</span></span></td> + <td>62</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</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>1.0</td> + <td>1.0<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}<sup>[2]</sup></td> + <td>6.0</td> + <td>6.0<sup>[3]</sup></td> + <td>1.0<sup>[1]</sup></td> + </tr> + <tr> + <td><span class="short_text" id="result_box" lang="ca"><span>col.lapse</span></span></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Chrome i Safari tractant <code>visibility: collapse</code> com <code>hidden</code>, deixant un buit blanc; només ho suporten {{HTMLElement("tr")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} i {{HTMLElement("tfoot")}}, però no als elements {{HTMLElement("col")}} i {{HTMLElement("colgroup")}}.</p> + +<p>[2] Firefox no amaga les vores quan s'amaguen els elements {{HTMLElement("col")}} i {{HTMLElement("colgroup")}} si està establert <code>border-collapse: collapse</code>.</p> + +<p>[3] A Opera, <code>visibility: collapse</code> funciona en elements de taula, però no sembla amagar un {{HTMLElement("tfoot")}} si és adjacent a un {{HTMLElement("tbody")}} visible.</p> + +<p>[4] Internet Explorer no admet <code>visibility: initial</code>. Fins a IE7, els descendents d'elements <code>hidden</code> seguiran sent invisibles fins i tot si tenen <code>visibility</code> definida com <code>visible</code>.</p> diff --git a/files/ca/web/css/width/index.html b/files/ca/web/css/width/index.html new file mode 100644 index 0000000000..ced3086fa8 --- /dev/null +++ b/files/ca/web/css/width/index.html @@ -0,0 +1,204 @@ +--- +title: width +slug: Web/CSS/width +tags: + - CSS + - CSS Property + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/CSS/width +--- +<p>{{CSSRef}}</p> + +<p>La propietat CSS <strong><code>width</code></strong> especifica l'amplada d'un element. Per defecte, estableix l'amplada de l'<a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">àrea de contingut</a>. però si {{cssxref("box-sizing")}} està establert a <code>border-box</code>, aquest determina l'amplada de l'<a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area">àrea de vora</a>.</p> + +<div>{{EmbedInteractiveExample("pages/css/width.html")}}</div> + +<div class="hidden">L'origen d'aquest exemple interactiu s'emmagatzema en un repositori GitHub. Si es vol contribuir al projecte d'exemples interactius, clonar <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> i enviar una sol·licitud d'extracció.</div> + +<p>Les propietats {{cssxref("min-width")}} i {{cssxref("max-width")}} anul·la {{cssxref("width")}}.</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="brush:css no-line-numbers notranslate">/* <length> values */ +width: 300px; +width: 25em; + +/* <percentage> value */ +width: 75%; + +/* Keyword values */ +width: max-content; +width: min-content; +width: fit-content(20em); +width: auto; + +/* Global values */ +width: inherit; +width: initial; +width: unset; +</pre> + +<p>La propietat <code>width</code> s'especifica com a:</p> + +<ul> + <li>un dels següents valors de paraules clau:: <code><a href="#min-content">min-content</a></code>, <code><a href="#max-content">max-content</a></code>, <code><a href="#fit-content">fit-content</a></code>, <code><a href="#auto">auto</a></code>.</li> + <li>una <code><a href="#<length>"><length></a></code> o una <code><a href="#<percentage>"><percentage></a></code>.</li> +</ul> + +<h3 id="Valors">Valors</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>Defineix l'amplada com un valor absolut.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>Defineix l'amplada com a percentatge de l'amplada del bloc que conté.</dd> + <dt><code>auto</code></dt> + <dd>El navegador calcularà i seleccionarà una amplada per a l'element especificat.</dd> + <dt><code>max-content</code></dt> + <dd>L'amplada intrínseca preferida.</dd> + <dt><code>min-content</code></dt> + <dd>L'amplada mínima intrínseca.</dd> + <dt><code>fit-content({{cssxref("<length-percentage>")}})</code></dt> + <dd>Utilitza la fórmula fit-content amb l'espai disponible substituït per l'argument especificat, i. e. <code>min(max-content, max(min-content, <length-percentage>))</code>.</dd> +</dl> + +<h2 id="Qüestions_daccessibilitat">Qüestions d'accessibilitat</h2> + +<p>Ens hem d'assegurar que els elements establerts amb un <code>width</code> no estan truncats i que no enfosqueixin altres continguts quan la pàgina s'ampliï per augmentar la mida del text.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Definició_formal">Definició formal</h2> + +<p>{{CSSInfo}}</p> + +<h2 id="Sintaxi_formal">Sintaxi formal</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Amplada_per_defecte">Amplada per defecte</h3> + +<pre class="brush:css notranslate">p.goldie { + background: gold; +}</pre> + +<pre class="brush:html notranslate"><p class="goldie">The Mozilla community produces a lot of great software.</p></pre> + +<p>{{EmbedLiveSample('Default_width', '500px', '64px')}}</p> + +<h3 id="Pixels_i_ems">Pixels i ems</h3> + +<pre class="brush: css notranslate">.px_length { + width: 200px; + background-color: red; + color: white; + border: 1px solid black; +} + +.em_length { + width: 20em; + background-color: white; + color: red; + border: 1px solid black; +} +</pre> + +<pre class="brush: html notranslate"><div class="px_length">Width measured in px</div> +<div class="em_length">Width measured in em</div></pre> + +<p>{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}</p> + +<h3 id="Percentatge">Percentatge</h3> + +<pre class="brush: css notranslate">.percent { + width: 20%; + background-color: silver; + border: 1px solid red; +}</pre> + +<pre class="brush: html notranslate"><div class="percent">Width in percentage</div></pre> + +<p>{{EmbedLiveSample('Percentage', '500px', '64px')}}</p> + +<h3 id="max-content">max-content</h3> + +<pre class="brush:css; notranslate">p.maxgreen { + background: lightgreen; + width: intrinsic; /* Safari/WebKit uses a non-standard name */ + width: -moz-max-content; /* Firefox/Gecko */ + width: -webkit-max-content; /* Chrome */ + width: max-content; +}</pre> + +<pre class="brush:html notranslate"><p class="maxgreen">The Mozilla community produces a lot of great software.</p></pre> + +<p>{{EmbedLiveSample('max-content', '500px', '64px')}}</p> + +<h3 id="min-content">min-content</h3> + +<pre class="brush:css notranslate">p.minblue { + background: lightblue; + width: -moz-min-content; /* Firefox */ + width: -webkit-min-content; /* Chrome */ +}</pre> + +<pre class="brush:html notranslate"><p class="minblue">The Mozilla community produces a lot of great software.</p></pre> + +<p>{{EmbedLiveSample('min-content', '500px', '155px')}}</p> + +<h2 id="Epecificacions">Epecificacions</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('CSS4 Sizing', '#width-height-keywords', 'width')}}</td> + <td>{{Spec2('CSS4 Sizing')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td> + <td>{{Spec2('CSS3 Sizing')}}</td> + <td>Added the <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> keywords.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Precises on which element it applies to.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#width', 'width')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<div class="hidden">La taula de compatibilitat d'aquesta pàgina es genera a partir de dades estructurades. Si es vol contribuir a les dades, consultar <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i enviar una sol·licitud d'extracció.</div> + +<p>{{Compat("css.properties.width")}}</p> + +<h2 id="Veure_també">Veure també</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">box model</a></li> + <li>{{cssxref("height")}}</li> + <li>{{cssxref("box-sizing")}}</li> + <li>{{cssxref("min-width")}}, {{cssxref("max-width")}}</li> + <li>Les propietats lògiques assignades: {{cssxref("block-size")}}, {{cssxref("inline-size")}}</li> +</ul> |