initial commit

1 files changed, 206 insertions, 0 deletions

diff --git a/files/zh-tw/web/css/_doublecolon_first-letter/index.html b/files/zh-tw/web/css/_doublecolon_first-letter/index.html
new file mode 100644
index 0000000000..b9d4c7a6f9
--- /dev/null
+++ b/files/zh-tw/web/css/_doublecolon_first-letter/index.html
@@ -0,0 +1,206 @@
+---
+title: '::first-letter (:first-letter)'
+slug: 'Web/CSS/::first-letter'
+translation_of: 'Web/CSS/::first-letter'
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="概要">概要</h2>
+
+<p><code>::first-letter</code> <a href="/zh-TW/CSS" title="CSS">CSS</a> <a href="/zh-TW/CSS/Pseudo-elements" title="Pseudo-elements">虛擬元素</a>選取了一個區塊第一行的第一個字母，如果那一行前面沒有其他內容（例如圖片或是行內表格）。</p>
+
+<p>The first letter of an element is not necessarily trivial to identify:</p>
+
+<ul>
+ <li>Punctuation, that is any characters defined in Unicode in the <em>open</em> (Ps), <em>close</em> (Pe), <em>initial quote</em> (Pi), <em>final quote</em> (Pf) and <em>other punctuation</em> (Po) classes, preceding or immediately following the first letter is also matched by this pseudo-element.</li>
+ <li>Similarly some languages have digraphs that are always capitalized together, like the <code>IJ</code> in Dutch. In these rare cases, both letters of the digraph should be matched by the <code>::first-letter</code> pseudo-element. (This is poorly supported by browsers, check the <a href="/En/CSS/::first-letter#Browser_compatibility" title="https://developer.mozilla.org/En/CSS/::first-letter#Browser_compatibility">browser compatibility table</a>).</li>
+ <li>Finally, a combination of the {{ cssxref("::before") }} pseudo-element and the {{ cssxref("content") }} property may inject some text at the beginning of the element. In that case, <code>::first-letter</code> will match the first letter of this generated content.</li>
+</ul>
+
+<p>A first line has meaning only in a <a href="/en/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes" title="https://developer.mozilla.org/en/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">block-container box</a>, therefore the <code>::first-letter</code> pseudo-element has an effect only on elements with a {{ cssxref("display") }} value of <code>block</code>, <code>inline-block</code>, <code>table-cell</code>, <code>list-item</code> or <code>table-caption</code>. In all other cases, <code>::first-letter</code> has no effect.</p>
+
+<p>Only a small subset of all CSS properties can be used inside a declaration block of a CSS ruleset containing a selector using the <code>::first-letter</code> pseudo-element:</p>
+
+<ul>
+ <li>All font properties : {{ 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") }} and {{ Cssxref("font-family") }}.</li>
+ <li>All background properties : {{ 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") }}, and {{cssxref("background-blend-mode")}}.</li>
+ <li>All margin properties: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}.</li>
+ <li>All padding properties: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}.</li>
+ <li>All border properties: the shorthands {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}, and the longhands properties.</li>
+ <li>The {{ cssxref("color") }} property.</li>
+ <li>The {{ 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") }} (only if <code>float</code> is <code>none</code>) CSS properties.</li>
+</ul>
+
+<p>As this list will be extended in the future, it is recommended that you not use any other properties inside the declaration block, in order to keep the CSS future-proof.</p>
+
+<div class="note">
+<p>In CSS 2, pseudo-elements were prefixed with a single colon character. As pseudo-classes were also following the same convention, they were indistinguishable. To solve this, CSS 2.1 changed the convention for pseudo-elements. Now a pseudo-element is prefixed with two colon characters, and a pseudo-class is still prefixed with a single colon.</p>
+
+<p>As several browsers already implemented the CSS 2 version in a release version, all browsers supporting the two-colon syntax also support the old one-colon syntax.</p>
+
+<p>If legacy browsers must be supported, <code>:first-letter</code> is the only viable choice; if not, <code>::first-letter</code> is preferred.</p>
+</div>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<p>Make the first letter of every paragraph red and big.</p>
+
+<h3 id="HTML_Content">HTML Content</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. Lorem ipsum dolor
+  sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy amet.&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, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
+  iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
+  nulla facilisi.&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_Content">CSS Content</h3>
+
+<pre class="brush: css">p::first-letter { /* Use :first-letter if support for IE 8 or earlier is needed */
+  color: red;
+  font-size: 130%;
+}</pre>
+
+<h3 id="Output">Output</h3>
+
+<p>{{ EmbedLiveSample('Example', 679, 390) }}</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td>
+   <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Generalized allowed properties to typesetting, text decoration and inline layout properties, {{ cssxref("opacity") }} and {{ 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>Allowed the usage of {{cssxref("text-shadow")}} with <code>::first-letter</code>.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Defined edge-case behavior like in list items, or with language specific behavior (like the Dutch digraph <code>IJ</code>). The two-colon syntax for pseudo-elements has been introduced.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>No significant change, though CSS Level 2 still used the one-colon syntax.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>The initial definition used the one-colon syntax.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>9.0</td>
+   <td>7.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td>Old one-colon syntax (<code>:first-letter</code>)</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>5.5</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td>Support for the Dutch digraph <code>IJ</code></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>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Old one-colon syntax (<code>:first-letter</code>)</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Support for the Dutch digraph <code>IJ</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{cssxref("::first-line")}} 虛擬元素。</li>
+</ul>