aboutsummaryrefslogtreecommitdiff
path: root/files/ca/web/css/_doublecolon_first-letter/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/ca/web/css/_doublecolon_first-letter/index.html')
-rw-r--r--files/ca/web/css/_doublecolon_first-letter/index.html219
1 files changed, 219 insertions, 0 deletions
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&gt;::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 &lt;p&gt;</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">&lt;p&gt;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.&lt;/p&gt;
+&lt;p&gt;Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;
+&lt;p&gt;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.&lt;/p&gt;
+&lt;p&gt;-The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;_The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;"The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;'The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;*The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;#The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;「特殊的汉字标点符号开头。&lt;/p&gt;
+&lt;p&gt;《特殊的汉字标点符号开头。&lt;/p&gt;
+&lt;p&gt;“特殊的汉字标点符号开头。&lt;/p&gt;</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>