diff options
Diffstat (limited to 'files/ca/web/css/_doublecolon_first-letter/index.html')
-rw-r--r-- | files/ca/web/css/_doublecolon_first-letter/index.html | 219 |
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>::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> |