diff options
Diffstat (limited to 'files/ca/web/css/_doublecolon_-webkit-progress-bar/index.html')
-rw-r--r-- | files/ca/web/css/_doublecolon_-webkit-progress-bar/index.html | 110 |
1 files changed, 110 insertions, 0 deletions
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> |