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