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