initial commit

22 files changed, 3286 insertions, 0 deletions

diff --git a/files/fa/web/css/_colon_not/index.html b/files/fa/web/css/_colon_not/index.html
new file mode 100644
index 0000000000..7f7c5cbec3
--- /dev/null
+++ b/files/fa/web/css/_colon_not/index.html
@@ -0,0 +1,117 @@
+---
+title: ':not()'
+slug: 'Web/CSS/:not'
+tags:
+  - سی اس اس
+  - شبه کلاس
+  - لایه
+  - مرجع
+  - وب
+translation_of: 'Web/CSS/:not'
+---
+<div>{{CSSRef}}</div>
+
+<div dir="rtl"><strong><code>not()</code></strong> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class<strong><code>:</code></strong></a><a href="/en-US/docs/Web/CSS/Pseudo-classes"> </a> همه عناصر را انتخاب می‌کند بجز عناصری که به عنوان ورودی به این کلاس داده شود. <span id="result_box" lang="fa"><span>از آنجایی که این کلاس از انتخاب عناصر خاصی جلوگیری می کند، به عنوان </span></span> <em>negation pseudo-class</em><span lang="fa"><span> شناخته می شود.</span></span></div>
+
+<div dir="rtl"> </div>
+
+<pre class="brush: css no-line-numbers" dir="rtl">/* paragraph همه عناصر را انتخاب می‌کند بجز عنصر */
+:not(p) {
+  color: blue;
+}</pre>
+
+<div class="note">
+<p><strong>Notes:</strong></p>
+
+<ul>
+ <li>Useless selectors can be written using this pseudo-class. For example, <code>:not(*)</code> matches any element which is not an element, so the rule will never be applied.</li>
+ <li>This pseudo-class can increase the <a href="/en-US/docs/Web/CSS/Specificity">specificity</a> of a rule. For example, <code>#foo:not(#bar)</code> will match the same element as the simpler <code>#foo</code>, but has a higher specificity.</li>
+ <li><code>:not(.foo)</code> will match anything that isn't <code>.foo</code>, <em>including {{HTMLElement("html")}} and {{HTMLElement("body")}}.</em></li>
+ <li>This selector only applies to one element; you cannot use it to exclude all ancestors. For instance, <code>body :not(table) a</code> will still apply to links inside of a table, since {{HTMLElement("tr")}} will match with the <code>:not()</code> part of the selector.</li>
+</ul>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p dir="rtl">ورودی‌های شبه‌کلاس <code>()not:</code> با ویرگول از یکدیگر جدا می‌شود.</p>
+
+<p dir="rtl"> </p>
+
+<p> </p>
+
+<div class="warning">
+<p>The ability to list more than one selector is experimental and not yet widely supported.</p>
+</div>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;این عنصر، عنصر پاراگراف است.&lt;/p&gt;
+&lt;p class="fancy"&gt;من چقدر خوبم!&lt;/p&gt;
+&lt;div&gt;این عنصر، عنصر پاراگراف نیست.&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.fancy {
+  text-shadow: 2px 2px 3px gold;
+}
+
+/* نیستند `fancy` که دارای کلاس &lt;p&gt; ِتمام عنصار */
+p:not(.fancy) {
+  color: green;
+}
+
+/* &lt;p&gt; همه عناصر بجز عنصر */
+body :not(p) {
+  text-decoration: underline;
+}
+
+/* &lt;span&gt; یا &lt;div&gt; همه عناصر بجز عناصر */
+body :not(div):not(span) {
+  font-weight: bold;
+}
+/* را دارا هستند `fancy` یا `crazy` همه عناصر بجز عناصری که کلاس‌های */
+/* توجه داشته باشید که این نوع نوشتار هنوز پشتیبانی نمی‌شود. */
+body :not(.crazy, .fancy) {
+  font-family: sans-serif;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#negation', ':not()')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Extends its argument to allow some non-simple selectors.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#negation', ':not()')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.not")}}</p>
+</div>
diff --git a/files/fa/web/css/_doublecolon_cue/index.html b/files/fa/web/css/_doublecolon_cue/index.html
new file mode 100644
index 0000000000..f1e723f7e7
--- /dev/null
+++ b/files/fa/web/css/_doublecolon_cue/index.html
@@ -0,0 +1,79 @@
+---
+title: '::cue (:cue)'
+slug: 'Web/CSS/::cue'
+translation_of: 'Web/CSS/::cue'
+---
+<p> </p>
+
+<div>{{CSSRef}}</div>
+
+<p> </p>
+
+<p dir="rtl"><a href="/en-US/docs/Web/CSS/Pseudo-elements">شبه عنصر</a> {{ Cssxref("cue::") }} یک عنصر انتخاب شده با نشانه‌های WebVTT را تطابق می‌دهد. این <a href="/en-US/docs/Web/CSS/Pseudo-elements">شبه عنصر</a> می‌تواند برای<a href="/docs/Web/API/WebVTT_API#Styling_WebTT_cues"> آرایش زیرنویس و دیگر موارد</a> محتوای تصویری با VTT tracks مورد استفاده قرار گیرد.</p>
+
+<pre class="brush: css no-line-numbers">::cue {
+  color: yellow;
+  font-weight: bold;
+}</pre>
+
+<h2 id="Allowable_properties">Allowable properties</h2>
+
+<p>Only a small subset of CSS properties can be used in a rule with <code>::cue</code> in its selector:</p>
+
+<ul>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("text-decoration")}} and its longhand properties</li>
+ <li>{{cssxref("text-shadow")}}</li>
+ <li>{{cssxref("background")}} and its longhand properties</li>
+ <li>{{cssxref("outline")}} and its longhand properties</li>
+ <li>{{Cssxref("font")}} and its longhand properties, including {{cssxref("line-height")}}</li>
+ <li>{{cssxref("white-space")}}</li>
+ <li>{{cssxref("text-combine-upright")}}</li>
+ <li>{{cssxref("ruby-position")}}</li>
+</ul>
+
+<p>The properties are applied to the entire set of cues as if they were a single unit. The only exception is that <code>background</code> and its shorthand properties apply to each cue individually, to avoid creating boxes and obscuring unexpectedly large areas of the media.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<p>The following CSS sets the cue style so that the text is white and the background is a translucent black box.</p>
+
+<pre class="brush: css">::cue {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.6);
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebVTT", "#the-cue-pseudo-element", "::cue")}}</td>
+   <td>{{Spec2("WebVTT")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("css.selectors.cue")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVTT_API">Web Video Tracks Format (WebVTT)</a></li>
+</ul>
diff --git a/files/fa/web/css/adjacent_sibling_combinator/index.html b/files/fa/web/css/adjacent_sibling_combinator/index.html
new file mode 100644
index 0000000000..c988c47aed
--- /dev/null
+++ b/files/fa/web/css/adjacent_sibling_combinator/index.html
@@ -0,0 +1,80 @@
+---
+title: Adjacent sibling combinator
+slug: Web/CSS/Adjacent_sibling_combinator
+translation_of: Web/CSS/Adjacent_sibling_combinator
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p dir="rtl">ترکیب  (<code>+</code>) <strong>adjacent sibling combinator</strong> دو انتخابگر را از هم جدا می‌کند و زمانی تطابق انجام می‌شود که انتخابگر دوم بلافاصله بعد از انتخابگر اول آمده باشد و هر فرزند یک والد {{domxref("element")}} باشند.</p>
+
+<pre class="brush: css no-line-numbers">/* باشند img پارگراف‌هایی که بلافاصله بعد از */
+img + p {
+  font-style: bold;
+}</pre>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">former_element + target_element { <em>style properties</em> }
+</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">li:first-of-type + li {
+  color: red;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;One&lt;/li&gt;
+  &lt;li&gt;Two!&lt;/li&gt;
+  &lt;li&gt;Three&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Example', 200, 100)}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Renames it the "next-sibling" combinator.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.selectors.adjacent_sibling")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/General_sibling_selectors">General sibling selectors</a></li>
+</ul>
diff --git a/files/fa/web/css/all/index.html b/files/fa/web/css/all/index.html
new file mode 100644
index 0000000000..8f80bf5b2b
--- /dev/null
+++ b/files/fa/web/css/all/index.html
@@ -0,0 +1,159 @@
+---
+title: all
+slug: Web/CSS/all
+translation_of: Web/CSS/all
+---
+<div>{{CSSRef}}</div>
+
+<p>The <code><strong>all</strong></code> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand property</a> sets all of an element's properties (other than {{cssxref("unicode-bidi")}} and {{cssxref("direction")}}) to their initial or inherited values, or to the values specified in another stylesheet origin..</p>
+
+<pre class="brush:css no-line-numbers">/* Global values */
+all: initial;
+all: inherit;
+all: unset;
+
+/* CSS Cascading and Inheritance Level 4 */
+all: revert;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>The <code>all</code> property is specified as one of the CSS global keyword values. Note that none of these values affect the {{cssxref("unicode-bidi")}} and {{cssxref("direction")}} properties.</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt>{{cssxref("initial")}}</dt>
+ <dd>Specifies that all the element's properties should be changed to their <a href="/en-US/docs/Web/CSS/initial_value">initial values</a>.</dd>
+ <dt>{{cssxref("inherit")}}</dt>
+ <dd>Specifies that all the element's properties should be changed to their <a href="/en-US/docs/Web/CSS/inheritance">inherited values</a>.</dd>
+ <dt>{{cssxref("unset")}}</dt>
+ <dd>Specifies that all the element's properties should be changed to their inherited values if they inherit by default, or to their initial values if not.</dd>
+ <dt>{{cssxref("revert")}}</dt>
+ <dd>Specifies behavior that depends on the stylesheet origin to which the declaration belongs:
+ <dl>
+  <dt><a href="/en-US/docs/Web/CSS/Cascade#User-agent_stylesheets">User-agent origin</a></dt>
+  <dd>Equivalent to <code>unset</code>.</dd>
+  <dt><a href="/en-US/docs/Web/CSS/Cascade#User_stylesheets">User origin</a></dt>
+  <dd>Rolls back the <a href="/en-US/docs/Web/CSS/Cascade">cascade</a> to the user-agent level, so that the <a href="/en-US/docs/Web/CSS/specified_value">specified values</a> are calculated as if no author-level or user-level rules were specified for the element.</dd>
+  <dt><a href="/en-US/docs/Web/CSS/Cascade#Author_stylesheets">Author origin</a></dt>
+  <dd>Rolls back the <a href="/en-US/docs/Web/CSS/Cascade">cascade</a> to the user level, so that the <a href="/en-US/docs/Web/CSS/specified_value">specified values</a> are calculated as if no author-level rules were specified for the element. For purposes of <code>revert</code>, the Author origin includes the Override and Animation origins.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;blockquote id="quote"&gt;
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+&lt;/blockquote&gt;
+Phasellus eget velit sagittis.</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">body {
+  font-size: small;
+  background-color: #F0F0F0;
+  color: blue;
+}
+
+blockquote {
+  background-color: skyblue;
+  color: red;
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<div id="ex0" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="No_all_property">No <code>all</code> property</h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }</pre>
+{{EmbedLiveSample("ex0", "200", "125")}}
+
+<p>The {{HTMLElement("blockquote")}} uses the browser's default styling together with a specific background and text color. It also behaves as a <em>block</em> element: the text that follows it is beneath it.</p>
+</div>
+
+<div id="ex1" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allunset"><code>all:unset</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }
+blockquote { all: unset; }</pre>
+{{EmbedLiveSample("ex1", "200", "125")}}
+
+<p>The {{HTMLElement("blockquote")}} doesn't use the browser default styling: it is an <em>inline</em> element now (initial value), its {{cssxref("background-color")}} is <code>transparent</code> (initial value), but its {{cssxref("font-size")}} is still <code>small</code> (inherited value) and its {{cssxref("color")}} is <code>blue</code> (inherited value).</p>
+</div>
+
+<div id="ex2" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allinitial"><code>all:initial</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }
+blockquote { all: initial; }</pre>
+{{EmbedLiveSample("ex2", "200", "125")}}
+
+<p>The {{HTMLElement("blockquote")}} doesn't use the browser default styling: it is an <em>inline</em> element now (initial value), its {{cssxref("background-color")}} is <code>transparent</code> (initial value), its {{cssxref("font-size")}} is <code>normal</code> (initial value) and its {{cssxref("color")}} is <code>black</code> (initial value).</p>
+</div>
+
+<div id="ex3" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allinherit"><code>all:inherit</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue; color: red; }
+blockquote { all: inherit; }</pre>
+{{EmbedLiveSample("ex3", "200", "125")}}
+
+<p>The {{HTMLElement("blockquote")}} doesn't use the browser default styling: it is a <em>block</em> element now (inherited value from its containing {{HTMLElement("body")}} element), its {{cssxref("background-color")}} is <code>#F0F0F0</code> (inherited value), its {{cssxref("font-size")}} is <code>small</code> (inherited value) and its {{cssxref("color")}} is <code>blue</code> (inherited value).</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS4 Cascade', '#all-shorthand', 'all') }}</td>
+   <td>{{ Spec2('CSS4 Cascade') }}</td>
+   <td>Added the <code>revert</code> value.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Cascade', '#all-shorthand', 'all') }}</td>
+   <td>{{ Spec2('CSS3 Cascade') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.all")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<p>CSS global keyword values: {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}}</p>
diff --git a/files/fa/web/css/css_box_model/index.html b/files/fa/web/css/css_box_model/index.html
new file mode 100644
index 0000000000..ed6760a26a
--- /dev/null
+++ b/files/fa/web/css/css_box_model/index.html
@@ -0,0 +1,116 @@
+---
+title: CSS Basic Box Model
+slug: Web/CSS/CSS_Box_Model
+tags:
+  - CSS
+  - CSS Box Model
+  - Guide
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/CSS_Box_Model
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Basic Box Model</strong> is a module of CSS that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the <a href="/en-US/docs/Web/CSS/Visual_formatting_model">visual formatting model</a>.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Properties">Properties</h3>
+
+<h4 id="Properties_controlling_the_flow_of_content_in_a_box">Properties controlling the flow of content in a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("overflow")}}</li>
+ <li>{{CSSxRef("overflow-x")}}</li>
+ <li>{{CSSxRef("overflow-y")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_size_of_a_box">Properties controlling the size of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("height")}}</li>
+ <li>{{CSSxRef("width")}}</li>
+ <li>{{CSSxRef("max-height")}}</li>
+ <li>{{CSSxRef("max-width")}}</li>
+ <li>{{CSSxRef("min-height")}}</li>
+ <li>{{CSSxRef("min-width")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_margins_of_a_box">Properties controlling the margins of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("margin")}}</li>
+ <li>{{CSSxRef("margin-bottom")}}</li>
+ <li>{{CSSxRef("margin-left")}}</li>
+ <li>{{CSSxRef("margin-right")}}</li>
+ <li>{{CSSxRef("margin-top")}}</li>
+ <li>{{CSSxRef("margin-trim")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_paddings_of_a_box">Properties controlling the paddings of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("padding")}}</li>
+ <li>{{CSSxRef("padding-bottom")}}</li>
+ <li>{{CSSxRef("padding-left")}}</li>
+ <li>{{CSSxRef("padding-right")}}</li>
+ <li>{{CSSxRef("padding-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Other_properties">Other properties</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("visibility")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Introduction to the CSS box model</a></dt>
+ <dd>Explains one of the fundamental concept of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></dt>
+ <dd>Sometimes, two adjacent margins are collapsed into one. This article describes the rules that govern when and why this happens, and how to control it.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Visual_formatting_model">Visual formatting model</a></dt>
+ <dd>Explains the visual formatting model.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box")}}</td>
+   <td>{{Spec2("CSS3 Box")}}</td>
+   <td>Added <code style="white-space: nowrap;">margin-trim</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fa/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/fa/web/css/css_box_model/mastering_margin_collapsing/index.html
new file mode 100644
index 0000000000..95cced5f62
--- /dev/null
+++ b/files/fa/web/css/css_box_model/mastering_margin_collapsing/index.html
@@ -0,0 +1,83 @@
+---
+title: Mastering margin collapsing
+slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+---
+<div>{{CSSRef}}</div>
+
+<p>The <a href="/en-US/docs/Web/CSS/margin-top">top</a> and <a href="/en-US/docs/Web/CSS/margin-bottom">bottom</a> margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as <strong>margin collapsing</strong>. Note that the margins of <a href="/en-US/docs/Web/CSS/float">floating</a> and <a href="/en-US/docs/Web/CSS/position#absolute">absolutely positioned</a> elements never collapse.</p>
+
+<p>Margin collapsing occurs in three basic cases:</p>
+
+<dl>
+ <dt dir="rtl">هم نیا</dt>
+ <dd dir="rtl">margin هم نیا ها با یکدیگر ادغام نمیشوند. (except when the latter sibling needs to be <a href="/en-US/docs/Web/CSS/clear">cleared</a> past floats).</dd>
+ <dt>No content separating parent and descendants</dt>
+ <dd>If there is no border, padding, inline part, <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">block formatting context</a> created, or <em><a href="/en-US/docs/Web/CSS/clear">clearance</a></em> to separate the {{cssxref("margin-top")}} of a block from the {{cssxref("margin-top")}} of one or more of its descendant blocks; or no border, padding, inline content, {{cssxref("height")}}, {{cssxref("min-height")}}, or {{cssxref("max-height")}} to separate the {{cssxref("margin-bottom")}} of a block from the {{cssxref("margin-bottom")}} of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.</dd>
+ <dt>Empty blocks</dt>
+ <dd>If there is no border, padding, inline content, {{cssxref("height")}}, or {{cssxref("min-height")}} to separate a block's {{cssxref("margin-top")}} from its {{cssxref("margin-bottom")}}, then its top and bottom margins collapse.</dd>
+</dl>
+
+<p>Some things to note:</p>
+
+<ul>
+ <li>More complex margin collapsing (of more than two margins) occurs when the above cases are combined.</li>
+ <li>These rules apply even to margins that are zero, so the margin of a descendant ends up outside its parent (according to the rules above) whether or not the parent's margin is zero.</li>
+ <li>When negative margins are involved, the size of the collapsed margin is the sum of the largest positive margin and the smallest (most negative) negative margin.</li>
+ <li>When all margins are negative, the size of the collapsed margin is the smallest (most negative) margin. This applies to both adjacent elements and nested elements.</li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;The bottom margin of this paragraph is collapsed …&lt;/p&gt;
+&lt;p&gt;… with the top margin of this paragraph, yielding a margin of &lt;code&gt;1.2rem&lt;/code&gt; in between.&lt;/p&gt;
+
+&lt;div&gt;This parent element contains two paragraphs!
+  &lt;p&gt;This paragraph has a &lt;code&gt;.4rem&lt;/code&gt; margin between it and the text above.&lt;/p&gt;
+  &lt;p&gt;My bottom margin collapses with my parent, yielding a bottom margin of &lt;code&gt;2rem&lt;/code&gt;.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;p&gt;I am &lt;code&gt;2rem&lt;/code&gt; below the element above.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Examples', 'auto', 350)}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{css_key_concepts}}</li>
+</ul>
diff --git a/files/fa/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/fa/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
new file mode 100644
index 0000000000..40e7937e9e
--- /dev/null
+++ b/files/fa/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
@@ -0,0 +1,234 @@
+---
+title: مفاهیم اولیه فلکس باکس
+slug: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+tags:
+  - فلکس
+  - فلکس باکس
+  - قالب بندی
+  - محور
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">فلکسیبل باکس ماژول که معمولا به آن فلکس‌باکس می‌گویند، به عنوان یک قالب‌بندی تک بعدی طراحی شد و به عنوان راهی برای تقسیم فضا بین بخش‌های داخل یک جعبه و ابزار قدرتمندی برای ترازبندی. این مقاله یک طرح کلی از امکانات اصلی فلکس‌باکس را ارائه می‌دهد.</p>
+
+<p>When we describe flexbox as being one dimensional we are describing the fact that flexbox deals with layout in one dimension at a time — either as a row or as a column. This can be contrasted with the two-dimensional model of <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>, which controls columns and rows together.</p>
+
+<h2 id="دو_محور_فلکس‌باکس">دو محور فلکس‌باکس</h2>
+
+<p>When working with flexbox you need to think in terms of two axes — the main axis and the cross axis. The main axis is defined by the {{cssxref("flex-direction")}} property, and the cross axis runs perpendicular to it. Everything we do with flexbox refers back to these axes, so it is worth understanding how they work from the outset.</p>
+
+<h3 id="محور_اصلی">محور اصلی</h3>
+
+<p>محور اصلی که با <code>flex-direction</code> مشخص می‌شود, چهار مقدار می‌پذیرد:</p>
+
+<ul>
+ <li><code>row</code></li>
+ <li><code>row-reverse</code></li>
+ <li><code>column</code></li>
+ <li><code>column-reverse</code></li>
+</ul>
+
+<p>اگر <code>row</code> یا <code>row-reverse</code> را انتخاب کنید, محور اصلی در جهت طبیعی متن‌ها (<strong>inline</strong>) خواهد بود</p>
+
+<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p>
+
+<p>اگر <code>column</code> یا <code>column-reverse</code> را انتخاب کنید محور اصلی در جهت بالا به پایین (<strong>block direction</strong>) خواهد بود.</p>
+
+<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p>
+
+<h3 id="محور_قطع‌کننده">محور قطع‌کننده</h3>
+
+<p>The cross axis runs perpendicular to the main axis, therefore if your <code>flex-direction</code> (main axis) is set to <code>row</code> or <code>row-reverse</code> the cross axis runs down the columns.</p>
+
+<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p>
+
+<p>If your main axis is <code>column</code> or <code>column-reverse</code> then the cross axis runs along the rows.</p>
+
+<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p>
+
+<p>Understanding which axis is which is important when we start to look at aligning and justifying flex items; flexbox features properties that align and justify content along one axis or the other.</p>
+
+<h2 id="خط‌های_شروع_و_پایان">خط‌های شروع و پایان</h2>
+
+<p>Another vital area of understanding is how flexbox makes no assumption about the writing mode of the document. In the past, CSS was heavily weighted towards horizontal and left-to-right writing modes. Modern layout methods encompass the range of writing modes and so we no longer assume that a line of text will start at the top left of a document and run towards the right hand side, with new lines appearing one under the other.</p>
+
+<p>You can read more about the relationship between flexbox and the Writing Modes specification in a later article, however the following description should help explain why we do not talk about left and right and top and bottom when we describe the direction that our flex items flow in.</p>
+
+<p>If the <code>flex-direction</code> is <code>row</code> and I am working in English, then the start edge of the main axis will be on the left, the end edge on the right.</p>
+
+<p><img alt="Working in English the start edge is on the left." src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>If I were to work in Arabic, then the start edge of my main axis would be on the right and the end edge on the left.</p>
+
+<p><img alt="The start edge in a RTL language is on the right." src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>In both cases the start edge of the cross axis is at the top of the flex container and the end edge at the bottom, as both languages have a horizontal writing mode.</p>
+
+<p>After a while, thinking about start and end rather than left and right becomes natural, and will be useful to you when dealing with other layout methods such as CSS Grid Layout which follow the same patterns.</p>
+
+<h2 id="جعبه_محتوی_از_نوع_فلکس">جعبه محتوی از نوع فلکس</h2>
+
+<p>An area of a document laid out using flexbox is called a <strong>flex container</strong>. To create a flex container, we set the value of the area's container's {{cssxref("display")}} property to <code>flex</code> or <code>inline-flex</code>. As soon as we do this the direct children of that container become <strong>flex items</strong>. As with all properties in CSS, some initial values are defined, so when creating a flex container all of the contained flex items will behave in the following way.</p>
+
+<ul>
+ <li>Items display in a row (the <code>flex-direction</code> property's default is <code>row</code>).</li>
+ <li>The items start from the start edge of the main axis.</li>
+ <li>The items do not stretch on the main dimension, but can shrink.</li>
+ <li>The items will stretch to fill the size of the cross axis.</li>
+ <li>The {{cssxref("flex-basis")}} property is set to <code>auto</code>.</li>
+ <li>The {{cssxref("flex-wrap")}} property is set to <code>nowrap</code>.</li>
+</ul>
+
+<p>The result of this is that your items will all line up in a row, using the size of the content as their size in the main axis. If there are more items than can fit in the container, they will not wrap but will instead overflow. If some items are taller than others, all items will stretch along the cross axis to fill its full size.</p>
+
+<p>You can see in the live example below how this looks. Try editing the items or adding additional items in order to test the initial behavior of flexbox.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} </p>
+
+<h3 id="تغییر_جعهت_فلکس">تغییر جعهت فلکس</h3>
+
+<p>Adding the {{cssxref("flex-direction")}} property to the flex container allows us to change the direction in which our flex items display. Setting <code>flex-direction: row-reverse</code> will keep the items displaying along the row, however the start and end lines are switched.</p>
+
+<p>If we change <code>flex-direction</code> to <code>column</code> the main axis switches and our items now display in a column. Set <code>column-reverse</code> and the start and end lines are again switched.</p>
+
+<p>The live example below has <code>flex-direction</code> set to <code>row-reverse</code>. Try the other values — <code>row</code>, <code>column</code> and <code>column-reverse</code> — to see what happens to the content.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p>
+
+<h2 id="جعبه_محتوی_فلکس_از_نوع_چندسطری_با_flex-wrap">جعبه محتوی فلکس از نوع چندسطری با flex-wrap</h2>
+
+<p>While flexbox is a one dimensional model, it is possible to cause our flex items to wrap onto multiple lines. In doing so, you should consider each line as a new flex container. Any space distribution will happen across that line, without reference to the lines either side.</p>
+
+<p>To cause wrapping behaviour add the property {{cssxref("flex-wrap")}} with a value of <code>wrap</code>. Now, should your items be too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a width, the total width of the items being too wide for the flex container. As <code>flex-wrap</code> is set to <code>wrap</code>, the items wrap. Set it to <code>nowrap</code>, which is also the initial value, and they will instead shrink to fit the container because they are using initial flexbox values that allows items to shrink. Using <code>nowrap</code> would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}</p>
+
+<p>Find out more about wrapping flex items in the guide <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering Wrapping of Flex Items</a>.</p>
+
+<h2 id="مختصرنویسی_با_flex-flow">مختصرنویسی با flex-flow</h2>
+
+<p>You can combine the two properties <code>flex-direction</code> and <code>flex-wrap</code> into the {{cssxref("flex-flow")}} shorthand. The first value specified is <code>flex-direction</code> and the second value is <code>flex-wrap</code>.</p>
+
+<p>In the live example below try changing the first value to one of the allowable values for <code>flex-direction</code> - <code>row</code>, <code>row-reverse</code>, <code>column</code> or <code>column-reverse</code>, and also change the second to <code>wrap</code> and <code>nowrap</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p>
+
+<h2 id="مشخصات_آیتم‌های_داخلی_فلکس">مشخصات آیتم‌های داخلی فلکس</h2>
+
+<p>To have more control over flex items we can target them directly. We do this by way of three properties:</p>
+
+<ul>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+</ul>
+
+<p>We will take a brief look at these properties in this overview, and you can gain a fuller understanding in the guide <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of Flex Items on the Main Axis</a>.</p>
+
+<p>Before we can make sense of these properties we need to consider the concept of <strong>available space</strong>. What we are doing when we change the value of these flex properties is to change the way that available space is distributed amongst our items. This concept of available space is also important when we come to look at aligning items.</p>
+
+<p>If we have three 100 pixel-wide items in a container which is 500 pixels wide, then the space we need to lay out our items is 300 pixels. This leaves 200 pixels of available space. If we don’t change the initial values then flexbox will put that space after the last item.</p>
+
+<p><img alt="This flex container has available space after laying out the items." src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>If we instead would like the items to grow and fill the space, then we need to have a method of distributing the leftover space between the items. This is what the <code>flex</code> properties that we apply to the items themselves, will do.</p>
+
+<h3 id="مشخصه_flex-basis">مشخصه <code>flex-basis</code></h3>
+
+<p>The <code>flex-basis</code> is what defines the size of that item in terms of the space it leaves as available space. The initial value of this property is <code>auto</code> — in this case the browser looks to see if the items have a size. In the example above, all of the items have a width of 100 pixels and so this is used as the <code>flex-basis</code>.</p>
+
+<p>If the items don’t have a size then the content's size is used as the flex-basis. This is why when we just declare <code>display: flex</code> on the parent to create flex items, the items all move into a row and take only as much space as they need to display their contents.</p>
+
+<h3 id="مشخصه_flex-grow">مشخصه <code>flex-grow</code></h3>
+
+<p>With the <code>flex-grow</code> property set to a positive integer, flex items can grow along the main axis from their <code>flex-basis</code>. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.</p>
+
+<p>If we gave all of our items in the example above a <code>flex-grow</code> value of 1 then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis.</p>
+
+<p>The flex-grow property can be used to distribute space in proportion. If we give our first item a <code>flex-grow</code> value of 2 and the other items a value of 1, 2 parts will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px total).</p>
+
+<h3 id="مشخصه_flex-shrink">مشخصه <code>flex-shrink</code></h3>
+
+<p>Where the <code>flex-grow</code> property deals with adding space in the main axis, the <code>flex-shrink</code> property controls how it is taken away. If we do not have enough space in the container to lay out our items and <code>flex-shrink</code> is set to a positive integer the item can become smaller than the <code>flex-basis</code>. As with <code>flex-grow</code> different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for <code>flex-shrink</code> will shrink faster than its siblings that have lower values.</p>
+
+<p>The minimum size of the item will be taken into account while working out the actual amount of shrinkage that will happen, which means that flex-shrink has the potential to appear less consistent than flex-grow in behavior. We’ll therefore take a more detailed look at how this algorithm works in the article Controlling Ratios of items along the main axis.</p>
+
+<div class="note">
+<p>Note that these values for <code>flex-grow</code> and <code>flex-shrink</code> are proportions. Typically if we had all of our items set to flex: <code>1 1 200px</code> and then wanted one item to grow at twice the rate, we would set that item to flex: <code>2 1 200px</code>. However you could use flex: <code>10 1 200px</code> and flex: <code>20 1 200px</code> if you wanted.</p>
+</div>
+
+<h3 id="مختصرنویسی_مقادیر_برای_مشخصه‌های_فلکس">مختصرنویسی مقادیر برای مشخصه‌های فلکس</h3>
+
+<p>You will very rarely see the <code>flex-grow</code>, <code>flex-shrink</code>, and <code>flex-basis</code> properties used individually; instead they are combined into the {{cssxref("flex")}} shorthand. The <code>flex</code> shorthand allows you to set the three values in this order — <code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code>.</p>
+
+<p>The live example below allows you to test out the different values of the flex shorthand; remember that the first value is <code>flex-grow</code>. Giving this a positive value means the item can grow. The second is <code>flex-shrink</code> — with a positive value the items can shrink, but only if their total values overflow the main axis. The final value is <code>flex-basis</code>; this is the value the items are using as their base value to grow and shrink from.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}</p>
+
+<p>There are also some predefined shorthand values which cover most of the use cases. You will often see these used in tutorials, and in many cases these are all you will need to use. The predefined values are as follows:</p>
+
+<ul>
+ <li><code>flex: initial</code></li>
+ <li><code>flex: auto</code></li>
+ <li><code>flex: none</code></li>
+ <li><code>flex: &lt;positive-number&gt;</code></li>
+</ul>
+
+<p>Setting <code>flex: initial</code> resets the item to the initial values of Flexbox. This is the same as <code>flex: 0 1 auto</code>. In this case the value of <code>flex-grow</code> is 0, so items will not grow larger than their <code>flex-basis</code> size. The value of <code>flex-shrink</code> is 1, so items can shrink if they need to rather than overflowing. The value of <code>flex-basis</code> is <code>auto</code>. Items will either use any size set on the item in the main dimension, or they will get their size from the content size.</p>
+
+<p>Using <code>flex: auto</code> is the same as using <code>flex: 1 1 auto</code>; everything is as with <code>flex:initial</code> but in this case the items can grow and fill the container as well as shrink if required.</p>
+
+<p>Using <code>flex: none</code> will create fully inflexible flex items. It is as if you wrote <code>flex: 0 0 auto</code>. The items cannot grow or shrink but will be laid out using flexbox with a <code>flex-basis</code> of <code>auto</code>.</p>
+
+<p>The shorthand you often see in tutorials is <code>flex: 1</code> or <code>flex: 2</code> and so on. This is as if you used <code>flex: 1 1 0</code>. The items can grow and shrink from a <code>flex-basis</code> of 0.</p>
+
+<p>Try these shorthand values in the live example below.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}</p>
+
+<h2 id="ترازبندی_هم‌ترازی_و_تقسیم_فضا_بین_بخش‌های_داخلی_جعبه_محتوی_فلکس">ترازبندی, هم‌ترازی و تقسیم فضا بین بخش‌های داخلی جعبه محتوی فلکس</h2>
+
+<p>A key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items.</p>
+
+<h3 id="align-items"><code>align-items</code></h3>
+
+<p>The {{cssxref("align-items")}} property will align the items on the cross axis.</p>
+
+<p>The initial value for this property is <code>stretch</code> and this is why flex items stretch to the height of the tallest one by default. They are in fact stretching to fill the flex container — the tallest item is defining the height of that.</p>
+
+<p>You could instead set <code>align-items</code> to <code>flex-start</code> in order to make the items line up at the start of the flex container, <code>flex-end</code> to align them to the end, or <code>center</code> to align them in the centre. Try this in the live example — I have given the flex container a height in order that you can see how the items can be moved around inside the container. See what happens if you set the value of align-items to:</p>
+
+<ul>
+ <li><code>stretch</code></li>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}</p>
+
+<h3 id="justify-content"><code>justify-content</code></h3>
+
+<p>The {{cssxref("justify-content")}} property is used to align the items on the main axis, the direction in which <code>flex-direction</code> has set the flow. The initial value is <code>flex-start</code> which will line the items up at the start edge of the container, but you could also set the value to <code>flex-end</code> to line them up at the end, or <code>center</code> to line them up in the centre.</p>
+
+<p>You can also use the value <code>space-between</code> to take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item. To cause an equal amount of space on the right and left of each item use the value <code>space-around</code>. With <code>space-around</code>, items have a half-size space on either end. Or, to cause items to have equal space around them use the value <code>space-evenly</code>. With <code>space-evenly</code>, items have a full-size space on either end.</p>
+
+<p>Try the following values of <code>justify-content</code> in the live example:</p>
+
+<ul>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-evenly</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}</p>
+
+<p>In the article <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning Items in a Flex Container</a> we will explore these properties in more depth, in order to have a better understanding of how they work. These simple examples however will be useful in the majority of use cases.</p>
+
+<h2 id="مراحل_بعدی">مراحل بعدی</h2>
+
+<p>After reading this article you should have an understanding of the basic features of Flexbox. In the next article we will look at <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">how this specification relates to other parts of CSS</a>.</p>
diff --git a/files/fa/web/css/css_flexible_box_layout/index.html b/files/fa/web/css/css_flexible_box_layout/index.html
new file mode 100644
index 0000000000..ffb152df28
--- /dev/null
+++ b/files/fa/web/css/css_flexible_box_layout/index.html
@@ -0,0 +1,163 @@
+---
+title: CSS Flexible Box Layout
+slug: Web/CSS/CSS_Flexible_Box_Layout
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/CSS_Flexible_Box_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><strong>CSS Flexible Box Layout</strong> is a module of <a href="/en-US/docs/Web/CSS">CSS</a> that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.</p>
+
+<h2 id="Basic_Example">Basic Example</h2>
+
+<p>In the following example a container has been set to <code>display: flex</code>, which means that the three child items become flex items. The value of <code>justify-content</code> has been set to <code>space-between</code> in order to space the items out evenly on the main axis. An equal amount of space is placed between each item with the left and right items being flush with the edges of the flex container. You can also see that the items are stretching on the cross axis, due to the default value of <code>align-items</code> being <code>stretch</code>. The items stretch to the height of the flex container, making them each appear as tall as the tallest item.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("order")}}</li>
+</ul>
+</div>
+
+<h3 id="Glossary_entries">Glossary entries</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en-US/docs/Glossary/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Glossary/Flex_Container">Flex Container</a></li>
+ <li><a href="/en-US/docs/Glossary/Flex_Item">Flex Item</a></li>
+ <li><a href="/en-US/docs/Glossary/Main_Axis">Main Axis</a></li>
+ <li><a href="/en-US/docs/Glossary/Cross_Axis">Cross Axis</a></li>
+ <li><a href="/en-US/docs/Glossary/Flex">Flex</a></li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></dt>
+ <dd>An overview of the features of flexbox</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relationship of flexbox to other layout methods</a></dt>
+ <dd>How flexbox relates to other layout methods, and other CSS specifications</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></dt>
+ <dd>How the Box Alignment properties work with flexbox.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></dt>
+ <dd>Explaining the different ways to change the order and direction of items, and covering the potential issues in doing so.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></dt>
+ <dd>This article explains the flex-grow, flex-shrink and flex-basis properties.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></dt>
+ <dd>How to create flex containers with multiple lines and control the display of the items in those lines.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of flexbox</a></dt>
+ <dd>Common design patterns that are typical flexbox use cases.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Backwards compatibility of Flexbox</a></dt>
+ <dd>Browser status of flexbox, interoperability issues and supporting older browsers and versions of the spec</dd>
+</dl>
+
+<ul>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("20.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>10.0{{property_prefix("-ms")}}<br>
+    11.0</td>
+   <td>12.10</td>
+   <td>6.1{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>4.4</td>
+   <td>11</td>
+   <td>12.10</td>
+   <td><span style="font-size: 12px; line-height: 18px;">7.1{{property_prefix("-webkit")}}</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="https://github.com/philipwalton/flexbugs">Flexbugs</a></dt>
+ <dd>a community-curated list of flexbox browser bugs and workarounds</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">Cross-browser Flexbox mixins</a></dt>
+ <dd>This article provides a set of mixins for those who want to create cross-browser flexbox experiences that even work in older browser that don't support the modern flexbox syntax</dd>
+</dl>
+
+<p> </p>
diff --git a/files/fa/web/css/flex_value/index.html b/files/fa/web/css/flex_value/index.html
new file mode 100644
index 0000000000..2dd81e4740
--- /dev/null
+++ b/files/fa/web/css/flex_value/index.html
@@ -0,0 +1,53 @@
+---
+title: <flex>
+slug: Web/CSS/flex_value
+tags:
+  - سی اس اس
+  - قالب بندی
+  - وب
+translation_of: Web/CSS/flex_value
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code dir="ltr">&lt;flex&gt;</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">data type</a> یک فاصله طولی منعطف را در یک جعبه محتوی گرید مشخص می‌کند. این نوع مقدار در {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} و سایر موارد مشابه استفاده می‌شود.</p>
+
+<h2 id="سینتکس">سینتکس</h2>
+
+<p>نوع داده <code>&lt;flex&gt;</code> به صورت {{cssxref("&lt;number&gt;")}} و در ادامه <a id="fr" name="fr"><code>fr</code></a> استفاده می‌شود. واحد <code>fr</code> کسری از فضای باقیمانده در جعبه محتوی گرید است. مانند سایر مقادیر در سی‌اس‌اس، بین مقدار و واحد فاصله‌ای نیست.</p>
+
+<h2 id="مثال">مثال</h2>
+
+<pre class="brush: css">1fr    /* استفاده از یک عدد طبیعی */
+2.5fr  /* استفاده از یک عدد اعشاری */
+</pre>
+
+<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("CSS Grid", "#typedef-flex", "&lt;flex&gt;")}}</td>
+   <td>{{Spec2("CSS Grid")}}</td>
+   <td>تعریف اولیه.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="سازگاری_با_مرورگرها">سازگاری با مرورگرها</h2>
+
+
+
+<p>{{Compat("css.types.flex")}}</p>
+
+<h2 id="مقالات_مرتبط">مقالات مرتبط</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+</ul>
diff --git a/files/fa/web/css/index.html b/files/fa/web/css/index.html
new file mode 100644
index 0000000000..bfddd551f0
--- /dev/null
+++ b/files/fa/web/css/index.html
@@ -0,0 +1,84 @@
+---
+title: 'CSS: شیوه‌نامه‌های آبشاری'
+slug: Web/CSS
+tags:
+  - CSS
+  - Design
+  - Layout
+  - NeedsTranslation
+  - References
+  - TopicStub
+translation_of: Web/CSS
+---
+<p dir="rtl"><span class="seoSummary"><strong>شیوه نامه‌های آبشاری (CSS)</strong> یک زبان <a href="/fa/docs/DOM/stylesheet">شیوه نامه</a> است که نحوه نمایش یک سند در قالب <a href="/fa/docs/HTML" title="The HyperText Mark-up Language">HTML</a></span> یا <a href="/fa/docs/XML" title="fa/docs/XML">XML</a> (شامل زبان‌های متنوعی مثل <a href="/fa/docs/SVG" title="fa/docs/SVG">SVG</a> یا <a href="/fa/docs/Web/MathML">MathML</a>  یا {{Glossary("XHTML", "", 1)}}) را شرح می دهد<span class="seoSummary">. CSS نحوه رندر شدن عناصر روی صفحه نمایش، روی کاغذ، در گفتار ، یا روی دیگر رسانه‌ها را شرح می‌دهد.</span></p>
+
+<p dir="rtl">CSS یکی از زبان‌های اصلی <em>وب متن باز</em> و دارای استاندارد برمبنای <a class="external" href="http://w3.org/Style/CSS/#specs">خصوصیات W3C</a> است. در سطح‌های مختلف، CSS1 که الان منسوخ شده است، CSS2.1 که یک توصیه است و <a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>، که حالا به ماژول‌های کوچکتر شکسته شده است، و در حال پیشرفت در مسیر استانداردسازی است توسعه داده شده است.</p>
+
+<ul class="card-grid" dir="rtl">
+ <li><span>مرجع CSS</span>
+
+  <p><a href="/fa/docs/CSS/CSS_Reference" title="en-US/docs/CSS/CSS_Reference">مرجع کامل CSS</a> ما برای <u>توسعه دهندگان وب فصلی</u> تمامی خصوصیات و مفاهیم CSS را شرح می‌دهد.</p>
+ </li>
+ <li><span>آموزش CSS</span>
+  <p><a href="fa/docs/Learn/CSS">آموزشگاه css ما</a> حاوی آموزش‌های فراوان برای رساندن شما از سطح مبتدی به حرفه‌ای است و تمامی اصول اساسی را پوشش می‌دهد.</p>
+ </li>
+ <li><span>معرفی CSS</span>
+  <p>اگر شما در توسعه وب تازه‌کار هستید، حتما مقاله <a href="en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">مقدمات ccs</a> ما را بخوانید تا بدانید که CSS چیست و چگونه باید آن را به کار گرفت.</p>
+ </li>
+</ul>
+
+<div class="row topicpage-table" dir="rtl">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">مستندات و آموزش‌ها در مورد CSS</h2>
+
+<dl>
+ <dt>مفاهیم کلیدی CSS</dt>
+ <dd><a href="/en-US/docs/CSS/Syntax" title="/en-US/docs/CSS/Syntax">نحو و قالب زبان</a> و معرفی مفاهیم بنیادی مثل <a href="/en-US/docs/CSS/Specificity" title="Specificity">ویژگی</a> و <a href="/en-US/docs/CSS/inheritance" title="inheritance">ارث‌بری</a>، <a href="/en-US/docs/CSS/box_model" title="Box model">مدل جعبه‌ای</a> و <a href="/en-US/docs/CSS/margin_collapsing" title="Margin collapsing">حاشیه سقوط</a>، <a href="/en-US/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">پشته‌سازی</a> و محتوای <a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">فرمت‌دهی جعبه‌ای</a>، یا مقادیر <a href="/en-US/docs/CSS/initial_value" title="initial value">اولیه</a>، <a href="/en-US/docs/CSS/computed_value" title="computed value">محاسبه شده</a>، <a href="/en-US/docs/CSS/used_value" title="used value">استفاده شده</a> و <a href="/en-US/docs/CSS/actual_value" title="actual value">واقعی</a> را شرح می‌دهد. موجودیت‌هایی مثل <a href="/en-US/docs/CSS/Shorthand_properties" title="CSS/Shorthand_properties">خصوصیات مختصر شده CSS</a> نیز تعریف شده‌اند.</dd>
+ <dt><a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">راهنمای توسعه دهنده CSS</a></dt>
+ <dd>مقالاتی برای کمک به شما تا تکنیک‌های CSS را یاد بگیرید و محتوی خودتان را درخشان کنید.</dd>
+</dl>
+
+<h2 class="Tools" id="Tools" name="Tools">ابزارهای ساده‌سازی توسعه CSS</h2>
+
+<ul>
+ <li><a class="external" href="http://jigsaw.w3.org/css-validator/">سرویس تایید اعتبار W3C CSS</a> چک می‌کند که یک CSS داده شده معتبر است. این یک ابزار ارزشمند است.</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">الحاقی فایرباگ</a><span class="external"> فایرفاکس، یک الحاقی معروف برای هدایت ویرایش زنده</span> CSS روی سایت‌های ملاقات شده است. برای تست بعضی تست‌ها خیلی کاربردی است، بهرحال این الحاقی کارهای بیشتری نیز انجام می‌دهد.</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">الحاقی توسعه وب</a> نیز اجازه می‌دهد تا به‌صورت زنده CSS سایت‌های دیده شده را ببینید و ویرایش کنید. ساده‌تر از فایرباگ است، بهرحال قدرت کمتری دارد.</li>
+ <li><a class="external link-https" href="https://addons.mozilla.org/en-US/firefox/addon/179">الحاقی EditCSS</a> فایرفاکس اجازه ویرایش CSS در نوار کناری را می‌دهد.</li>
+</ul>
+
+<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">موضوعات وابسته</h2>
+
+<ul>
+ <li><a href="/en-US/learn/css" title="https://developer.mozilla.org/en-US/learn/css">منابع CSS </a>را بدانید.</li>
+ <li>زبان‌های وب بازی که اغلب CSS روی آن‌ها اعمال شده است: <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>، <a href="/en-US/docs/SVG" title="SVG">SVG</a>، <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>، <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>.</li>
+ <li>تکنولوژی‌های موزیلا که استفاده وسیعی از  CSS می‌کنند: <a href="/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a>، <a href="/en-US/docs/Extensions" title="en-US/docs/Extensions">الحاقی‌ها</a> و <a href="/en-US/docs/Themes" title="en-US/docs/Themes">تم‌ها‌ی</a> فایرفاکس و تاندربیرد.</li>
+</ul>
+</div>
+
+<div class="section">
+<h2 class="Related_Topics" id="News" name="News">اخبار</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/pointerevents/" title="http://www.w3.org/TR/pointerevents/">Pointer Events</a> reached the <em>Candidate Recommandation</em> status, meaning that the CSS property <code>touch-action</code>, currently only implemented in IE10 (with the <code>-ms-</code> prefix), is no more experimental. <em>(May 6th, 2013)</em></li>
+ <li>Gecko's support of <a href="/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes"><em>flexible boxes</em></a> has been adapted to match a recent specification clarification: from Firefox 23, and already in Nightly, {{cssxref("::before")}} and {{cssxref("::after")}} will be flex items, and as such can be repositioned using {{cssxref("order")}} and {{cssxref("align-self")}}. <em>(May 3rd, 2013)</em></li>
+ <li>The CSSWG published a <a href="http://www.w3.org/TR/2013/WD-selectors4-20130502/">new working draft</a> of the Selectors Level 4 specification. It still is in the <em>exploring phase</em> and most of the new features are not supported anywhere, but it refines the behavior of scoped selectors and added two new ones: <code>:blank</code>, a relaxed {{cssxref(":empty")}} matching elements only containing spaces and carriage returns, and <code>:placeholder-shown</code>. The two pseudo-classes <code>:matches()</code> and {{cssxref(":not", ":not()")}} have been tweaked to allow more complex parameters. But beware, as this is still a very early draft, these features may change in the future. <em>(May 2nd, 2013)</em></li>
+</ul>
+
+<h2 class="Community" id="Community" name="Community">کمک گرفتن از کمیته‌ها</h2>
+
+<p>شما در مورد مشکلات مربوط به  CSS احتیاج به کمک دارید و نمی‌توانید راه‌حل را در مستندات پیدا کنید؟</p>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Common_CSS_Questions" title="en-US/docs/CSS/Common_CSS_Questions">سوالات معمول CSS</a> که تذکراتی جهت حل مشکلات معمول CSS را ارایه می‌دهد.</li>
+ <li>به <a href="http://stackoverflow.com/questions/tagged/css" title="http://stackoverflow.com/questions/tagged/css">Stack Overflow</a> بروید، یک سایت مشترک ساحته شده و نگه‌دارنده Q&amp;A است و می‌توانید پاسخ سوال خودتان را جستجو و پیدا کنید. اگر نه شما قادر خواهید بود که سوال خود را در آن‌جا مطرح کنید.</li>
+ <li>طرح مشورت در انجمن‌، که CSS و HTML را پوشش می‌دهند: سوال خود را در کانال IRC موزیلا بپرسید: <a class="link-irc" href="irc://irc.mozilla.org/css">#css</a>
+  <ul>
+   <li>سوال خود را در <a class="external" href="http://www.css-discuss.org/">CSS-Discuss site and list</a> بپرسید</li>
+  </ul>
+ </li>
+</ul>
+</div>
+</div>
+
+<p dir="rtl"></p>
diff --git a/files/fa/web/css/margin/index.html b/files/fa/web/css/margin/index.html
new file mode 100644
index 0000000000..c29a75ea06
--- /dev/null
+++ b/files/fa/web/css/margin/index.html
@@ -0,0 +1,207 @@
+---
+title: margin
+slug: Web/CSS/margin
+translation_of: Web/CSS/margin
+---
+<div dir="rtl">{{CSSRef()}}</div>
+
+<h2 dir="rtl" id="خلاصه_مطلب">خلاصه مطلب</h2>
+
+<p dir="rtl">خواصیت margin درCSS حاشیه را برای چهار طرف عنصر مشخص می کند. این خواصیت خلاصه شده چهار خواصیت {{ Cssxref("margin-top") }} ،  {{ Cssxref("margin-right") }} ، {{ Cssxref("margin-bottom") }} و {{ Cssxref("margin-left") }} می باشد که برای جلوگیری از مقدار دهی به هر کدام از این خواص تعبیه شده است.</p>
+
+<p dir="rtl">همچنین قابلیت مقداردهی با مقادیر منفی را نیز داراست.</p>
+
+<h2 dir="rtl" id="روش_استفاده">روش استفاده</h2>
+
+<pre class="brush:css" dir="rtl">/* به هر چهار جهت این مقدار اعمال می گردد */
+margin: 1em;
+
+/*افقی (قسمت چپ و راست) | عمودی (قسمت بالا و پایین) */
+margin: 5% auto;
+
+/* پایین | افقی(چپ و راست) | بالا */
+margin: 1em auto 2em;
+
+/* چپ | پایین | راست | بالا */
+margin: 2px 1em 0 auto;
+
+margin: وارث;
+</pre>
+
+<h3 dir="rtl" id="مقادیر">مقادیر</h3>
+
+<p dir="rtl">یک، دو، سه و یا چهار عدد از مقادیر زیر را می پذیرد:</p>
+
+<dl>
+ <dt dir="rtl"><code>&lt;length&gt;</code></dt>
+ <dd dir="rtl">مقدار ثابتی را مشخص می کند. مقادیر منفی مورد قبول هستند. مقادیر قابل قبول را در {{cssxref("&lt;length&gt;")}} مشاهده کنید.</dd>
+ <dt dir="rtl"><code>&lt;percentage&gt;</code></dt>
+ <dd dir="rtl">A {{cssxref("&lt;percentage&gt;")}} relative to the <strong>width</strong> of the containing block. Negative values are allowed.</dd>
+ <dt dir="rtl"><code>auto</code></dt>
+ <dd dir="rtl"><code>auto </code>is replaced by some suitable value, e.g. it can be used for centering of blocks.<br>
+ <code>div { width:50%;  margin:0 auto; }</code> centers the div container horizontally.</dd>
+</dl>
+
+<ul dir="rtl">
+ <li><strong>One</strong> single value applies to all <strong>four sides</strong>.</li>
+ <li><strong>Two</strong> values apply first to <strong>top and bottom</strong>, the second one to <strong>left and right</strong>.</li>
+ <li><strong>Three</strong> values apply first to <strong>top</strong>, second to <strong>left and right</strong> and third to <strong>bottom</strong>.</li>
+ <li><strong>Four</strong> values apply to <strong>top</strong>, <strong>right</strong>, <strong>bottom</strong> and <strong>left</strong> in that order (clockwise).</li>
+</ul>
+
+<h3 dir="rtl" id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox" dir="rtl">{{csssyntax("margin")}}</pre>
+
+<h2 dir="rtl" id="Examples">Examples</h2>
+
+<h3 dir="rtl" id="Simple_example">Simple example</h3>
+
+<h4 dir="rtl" id="HTML">HTML</h4>
+
+<pre class="brush: html" dir="rtl">&lt;div class="ex1"&gt;
+  margin:     auto;
+  background: gold;
+  width:      66%;
+&lt;/div&gt;
+&lt;div class="ex2"&gt;
+  margin:     20px 0 0 -20px;
+  background: gold;
+  width:      66%;
+&lt;/div&gt;</pre>
+
+<h4 dir="rtl" id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight:[2,7]" dir="rtl">.ex1 {
+  margin: auto;
+  background: gold;
+  width: 66%;
+}
+.ex2 {
+  margin: 20px 0px 0 -20px;
+  background: gold;
+  width: 66%;
+}</pre>
+
+<p dir="rtl">{{ EmbedLiveSample('Margin_Exemples') }}</p>
+
+<h3 dir="rtl" id="Another_example">Another example</h3>
+
+<pre class="brush: css" dir="rtl">margin: 5%;                /* all sides 5% margin */
+
+margin: 10px;              /* all sides 10px margin */
+
+margin: 1.6em 20px;        /* top and bottom 1.6em, left and right 20px margin */
+
+margin: 10px 3% 1em;       /* top 10px, left and right 3%, bottom 1em margin */
+
+margin: 10px 3px 30px 5px; /* top 10px, right 3px, bottom 30px, left 5px margin */
+
+margin: 1em auto;          /* 1em margin on top and bottom, box is horizontally centered */
+
+margin: auto;              /* box is horizontally centered, 0 margin on top and bottom */
+</pre>
+
+<h2 dir="rtl" id="Horizontal_centering_with_margin_0_auto">Horizontal centering with <code>margin: 0 auto;</code></h2>
+
+<p dir="rtl">To center something horizontally in modern browsers, use <code><a href="/en-US/docs/Web/CSS/display">display</a>: flex; <a href="/en-US/docs/Web/CSS/justify-content">justify-content</a>: center;</code> .</p>
+
+<p dir="rtl">However, in older browsers like IE8-9, these are not available. In order to center an element inside its parent, use <code>margin: 0 auto;</code></p>
+
+<h2 dir="rtl" id="Specifications">Specifications</h2>
+
+<table class="standard-table" dir="rtl">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Box', '#margin', 'margin') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>No significant change.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Defines <code>margin</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Removes its effect on inline elements.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 dir="rtl" id="Browser_compatibility">Browser compatibility</h2>
+
+<p dir="rtl">{{ CompatibilityTable() }}</p>
+
+<div dir="rtl" 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>3.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>auto</code> value</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>6.0 (strict mode)</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div dir="rtl" 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>1.0</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 dir="rtl" id="See_also">See also</h2>
+
+<ul>
+ <li dir="rtl"><a class="internal" href="/en/CSS/margin_collapsing" title="en/CSS/margin collapsing">Margin collapsing</a></li>
+</ul>
diff --git a/files/fa/web/css/media_queries/index.html b/files/fa/web/css/media_queries/index.html
new file mode 100644
index 0000000000..e1f92ab511
--- /dev/null
+++ b/files/fa/web/css/media_queries/index.html
@@ -0,0 +1,131 @@
+---
+title: Media queries
+slug: Web/CSS/Media_Queries
+tags:
+  - CSS
+  - CSS3 Media Queries
+  - Media Queries
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - Responsive Design
+  - TopicStub
+translation_of: Web/CSS/Media_Queries
+---
+<div>{{CSSRef("CSS3 Media Queries")}}</div>
+
+<p><strong>Media Queries</strong> are a key component of <a href="/en-US/docs/Web/Apps/Progressive/Responsive">responsive design</a>, which make it possible for CSS to adapt based on various parameters or device characteristics. For example, a media query can apply different styles if the screen is smaller than a certain size, or based on whether the user is holding their device in portrait or landscape mode. The {{cssxref("@media")}} at-rule is used to conditionally apply styles to a document.</p>
+
+<p>In addition, the media query syntax is also used in other contexts, such as in the {{HTMLElement("source")}} element's {{htmlattrxref("media", "source")}} attribute, which can be set to a media query string to use to determine whether or not to use that source when selecting the specific image to use in a {{HTMLElement("picture")}} element.</p>
+
+<p>In addition, the {{domxref("Window.matchMedia()")}} method can be used to test the window against a media query. You can also use {{domxref("MediaQueryList.addListener()")}} to be notified whenever the state of the queries changes. With this functionality, your site or app can respond to changes in the device configuration, orientation, or state.</p>
+
+<p>You can learn more about programmatically using media queries in <a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a>.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="At-rules">At-rules</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@import")}}</li>
+ <li>{{cssxref("@media")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Using media queries</a></dt>
+ <dd>Introduces media queries, their syntax, and the operators and media features which are used to construct media query expressions.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a></dt>
+ <dd>Describes how to test media queries from your JavaScript code, programmatically, to determine the state of the device, and to set up listeners that let your code be notified when the results of media queries change (such as when the user rotates the screen, causing an orientation change).</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.7)}}</td>
+   <td>9.0</td>
+   <td>9.2</td>
+   <td>1.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.7)}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fa/web/css/media_queries/ابزار-تست-رسانه-پاسخگو/index.html b/files/fa/web/css/media_queries/ابزار-تست-رسانه-پاسخگو/index.html
new file mode 100644
index 0000000000..286a3e8ba2
--- /dev/null
+++ b/files/fa/web/css/media_queries/ابزار-تست-رسانه-پاسخگو/index.html
@@ -0,0 +1,331 @@
+---
+title: ابزار تست رسانه پاسخگو
+slug: Web/CSS/Media_Queries/ابزار-تست-رسانه-پاسخگو
+translation_of: Web/CSS/Media_Queries/Using_media_queries
+---
+<div dir="rtl">{{cssref}}</div>
+
+<p dir="rtl"> ابزارهای تست پاسخگو بسیار مفید هستند، زمانی که می خواهید سبک CSS را طبق نوع کلی دستگاه (مانند اندازه چاپ در مقابل سایز صفحه نمایش)، ویژگی های خاص (مانند عرض مرورگر رسانه) یا محیط (مانند شرایط نور محیط) استفاده کنید. با انواع مختلفی از دستگاه های متصل به اینترنت که امروزه در دسترس ما هستند و با وجود ابزارهای چند رسانه ای با اندازه های بیشمار، ابزار تست پاسخگو رسانه ها یک ابزار حیاتی برای ساخت وب سایت ها و برنامه هایی با سیستم طراحی حرفه ای جهت کار بر روی هر سخت افزاری که کاربران ممکن است با آن کار کنند، بشمار میرود.</p>
+
+<h2 dir="rtl" id="هدف_قرار_دادن_انواع_رسانه_ها"><span class="short_text" id="result_box" lang="fa"><span>هدف قرار دادن انواع رسانه ها</span></span></h2>
+
+<p dir="rtl">انواع رسانه ها دسته کلی یک دستگاه مشخص را توصیف می کنند. اگر چه وبسایت ها معمولا با صفحه نمایش طراحی شده اند، ممکن است بخواهید سبکهایی را ایجاد کنید که دستگاه هایی خاص مانند چاپگرها  یا  صفحه نمایش مبتنی بر صدا را هدف قرار میدهند. به عنوان مثال، این کد CSS  چاپگر ها را هدف قرار میدهد :</p>
+
+<pre class="brush: css">@media print { ... }</pre>
+
+<p dir="rtl">همچنین می توانید به راحتی چندین دستگاه را هدف قرار دهید. به عنوان مثال، دستور<code>@media</code> با استفاده از دو ابزار رسانه پاسخگو، صفحه نمایش و همینطور چاپگر را هدف قرار میدهد:</p>
+
+<pre class="brush: css" dir="rtl">@media screen, print { ... }</pre>
+
+<p dir="rtl"><span id="result_box" lang="fa"><span class="alt-edited">برای مشاهده لیستی از رسانه های مختلف روی<a href="/fa-IR/docs/CSS/@media#Media_types"> انواع رسانه</a> کلید کنید. از آنجایی که دستگاهها را فقط در شرایط بسیار وسیع توصیف می کنند، فقط تعداد کمی از آنها در دسترس هستند؛ برای اختصاص ویژگی های خاص تر، از <em>ویژگی های رسانه</em> استفاده کنید.</span></span></p>
+
+<h2 dir="rtl" id="Targeting_media_features">Targeting media features</h2>
+
+<p><a href="/en-US/docs/CSS/@media#Media_features">Media features</a> describe the specific characteristics of a given {{glossary("user agent")}}, output device, or environment. For instance, you can apply specific styles to widescreen monitors, computers that use mice, or to devices that are being used in low-light conditions. This example applies styles when the user's <em>primary</em> input mechanism (such as a mouse) can hover over elements:</p>
+
+<pre class="brush: css"><a href="/en-US/docs/CSS/@media">@media</a> (hover: hover) { ... }</pre>
+
+<p>Many media features are <em>range features</em>, which means they can be prefixed with "min-" or "max-" to express "minimum condition" or "maximum condition" constraints. For example, this CSS will apply styles only if your browser's {{glossary("viewport")}} is equal to or narrower than 12,450 pixels:</p>
+
+<pre class="brush: css">@media (max-width: 12450px) { ... }</pre>
+
+<p>If you create a media feature query without specifying a value, the nested styles will be used as long as the feature's value is non-zero. For example, this CSS will apply to any device with a color screen:</p>
+
+<pre class="brush: css">@media (color) { ... }</pre>
+
+<p>If a feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false. For example, the styles nested inside the following query will never be used, because no speech-only device has a screen aspect ratio:</p>
+
+<pre class="brush: css">@media speech and (aspect-ratio: 11/5) { ... }</pre>
+
+<p>For more media feature examples, please see the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features">reference page</a> for each specific feature.</p>
+
+<h2 id="Creating_complex_media_queries">Creating complex media queries</h2>
+
+<p>Sometimes you may want to create a media query that depends on multiple conditions. This is where the <em>logical operators</em> come in: <code>not</code>, <code>and</code>, and <code>only</code>. Furthermore, you can combine multiple media queries into a <em>comma-separated list</em>; this allows you to apply the same styles in different situations.</p>
+
+<p>In the previous example, we've already seen the <code>and</code> operator used to group a media <em>type</em> with a media <em>feature</em>. The <code>and</code> operator can also combine multiple media features into a single media query. The <code>not</code> operator, meanwhile, negates a media query, basically reversing its normal meaning. The <code>only</code> operator prevents older browsers from applying the styles.</p>
+
+<div class="note">
+<p><strong>Note:</strong> In most cases, the <code>all</code> media type is used by default when no other type is specified. However, if you use the <code>not</code> or <code>only</code> operators, you must explicitly specify a media type.</p>
+</div>
+
+<h3 id="and"><code>and</code></h3>
+
+<p>The <code>and</code> keyword combines a media feature with a media type <em>or</em> other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:</p>
+
+<pre class="brush: css">@media (min-width: 30em) and (orientation: landscape) { ... }</pre>
+
+<p>To limit the styles to devices with a screen, you can chain the media features to the <code>screen</code> media type:</p>
+
+<pre class="brush: css">@media screen and (min-width: 30em) and (orientation: landscape) { ...  }</pre>
+
+<h3 id="comma-separated_lists">comma-separated lists</h3>
+
+<p>You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680 pixels <em>or</em> is a screen device in portrait mode:</p>
+
+<pre class="brush: css">@media (min-height: 680px), screen and (orientation: portrait) { ... }</pre>
+
+<p>Taking the above example, if the user had a printer with a page height of 800 pixels, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480 pixels, the second query would apply and the media statement would still return true.</p>
+
+<h3 id="not"><code>not</code></h3>
+
+<p>The <code>not</code> keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The <code>not</code> keyword can't be used to negate an individual feature query, only an entire media query. The <code>not</code> is evaluated last in the following query:</p>
+
+<pre class="brush: css">@media not all and (monochrome) { ... }
+</pre>
+
+<p>... so that the above query is evaluated like this:</p>
+
+<pre class="brush: css">@media not (all and (monochrome)) { ... }
+</pre>
+
+<p>... rather than like this:</p>
+
+<pre class="example-bad brush: css">@media (not all) and (monochrome) { ... }</pre>
+
+<p>As another example, the following media query:</p>
+
+<pre class="brush: css">@media not screen and (color), print and (color) { ... }
+</pre>
+
+<p>... is evaluated like this:</p>
+
+<pre class="brush: css">@media (not (screen and (color))), print and (color) { ... }</pre>
+
+<h3 id="only"><code>only</code></h3>
+
+<p>The <code>only</code> keyword prevents older browsers that do not support media queries with media features from applying the given styles. <em>It has no effect on modern browsers.</em></p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="only screen and (color)" href="modern-styles.css" /&gt;
+</pre>
+
+<h2 id="Mozilla-specific_media_features">Mozilla-specific media features</h2>
+
+<p>Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features in the future.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-mac-graphite-theme">-moz-mac-graphite-theme</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-maemo-classic">-moz-maemo-classic</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-device-pixel-ratio">-moz-device-pixel-ratio</a> {{deprecated_inline("16")}}</li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-os-version">-moz-os-version</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-end-backward">-moz-scrollbar-end-backward</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-end-forward">-moz-scrollbar-end-forward</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-start-backward">-moz-scrollbar-start-backward</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-start-forward">-moz-scrollbar-start-forward</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-thumb-proportional">-moz-scrollbar-thumb-proportional</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-touch-enabled">-moz-touch-enabled</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-windows-accent-color-in-titlebar">-moz-windows-accent-color-in-titlebar</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-windows-classic">-moz-windows-classic</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-windows-compositor">-moz-windows-compositor</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-windows-default-theme">-moz-windows-default-theme</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-windows-glass">-moz-windows-glass</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-windows-theme">-moz-windows-theme</a></li>
+</ul>
+
+<h2 id="WebKit-specific_media_features">WebKit-specific media features</h2>
+
+<p id="-webkit-transform-3d">For WebKit-specific media features, please see the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features">reference page</a> for each specific feature.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</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</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("21")}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatIE("9.0")}}</td>
+   <td>{{CompatOpera("9")}}</td>
+   <td>{{CompatSafari("4")}}</td>
+  </tr>
+  <tr>
+   <td><code>grid</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} <sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>resolution</code></td>
+   <td>{{CompatChrome("29")}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}} <sup>[2]</sup><br>
+    {{CompatGeckoDesktop("8.0")}} <sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>scan</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-min-device-pixel-ratio</code>, <code>-webkit-max-device-pixel-ratio</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[7]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transform-3d</code></td>
+   <td>{{CompatVersionUnknown}}<sup>[5]</sup></td>
+   <td>{{CompatGeckoDesktop("49")}}<sup>[6]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[5]</sup></td>
+   <td>{{CompatSafari("1.0")}}<sup>[5]</sup></td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transform-2d</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[5]</sup></td>
+   <td>{{CompatSafari("1.0")}}<sup>[5]</sup></td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transition</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[5]</sup></td>
+   <td>{{CompatSafari("1.0")}}<sup>[5]</sup></td>
+  </tr>
+  <tr>
+   <td><code>display-mode</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("47")}}<sup>[8]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</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 Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>grid</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>resolution</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>scan</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-min-device-pixel-ratio</code>, <code>-webkit-max-device-pixel-ratio</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transform-3d</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transform-2d</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transition</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>display-mode</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(47)}}<sup>[8]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>grid</code> media type is not supported.</p>
+
+<p>[2] Supports {{cssxref("&lt;integer&gt;")}} values only.</p>
+
+<p>[3] Supports {{cssxref("&lt;number&gt;")}} values, as per the spec.</p>
+
+<p>[4] <code>tv</code> media type is not supported.</p>
+
+<p>[5] See {{WebKitBug(22494)}}.</p>
+
+<p>[6] Implemented for Web compatibility reasons in Gecko 46.0 {{geckoRelease("46.0")}} behind the preference <code>layout.css.prefixes.webkit</code> defaulting to <code>false</code>. See {{bug(1239799)}}. Since Gecko 49.0 {{geckoRelease("49")}} <code>layout.css.prefixes.webkit</code> defaults to <code>true</code>.</p>
+
+<p>[7] Implemented as aliases for <code>min--moz-device-pixel-ratio</code> and <code>max--moz-device-pixel-ratio</code> for Web compatibility reasons in Gecko 45.0 {{geckoRelease("45.0")}} (see {{bug(1176968)}}) behind the preferences <code>layout.css.prefixes.webkit</code> and <code>layout.css.prefixes.device-pixel-ratio-webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49")}} <code>layout.css.prefixes.webkit</code> defaults to <code>true</code>.</p>
+
+<p>[8] Only the <code>fullscreen</code> and <code>browser</code> values of <code>display-mode</code> were supported in 47. <code>minimal-ui</code> and <code>standalone</code> were added in Firefox 57.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="internal" href="/en-US/docs/CSS/@media#Media_types">Media types</a></li>
+ <li><a href="/en-US/docs/CSS/@media#Media_features">Media features</a></li>
+ <li><a href="/en-US/docs/CSS/Using_media_queries_from_code">Testing media queries using code</a></li>
+ <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a></li>
+</ul>
diff --git a/files/fa/web/css/position/index.html b/files/fa/web/css/position/index.html
new file mode 100644
index 0000000000..d0ccad0e5f
--- /dev/null
+++ b/files/fa/web/css/position/index.html
@@ -0,0 +1,173 @@
+---
+title: موقعیت
+slug: Web/CSS/position
+translation_of: Web/CSS/position
+---
+<p dir="rtl">{{CSSRef}}</p>
+
+<h2 dir="rtl" id="خلاصه">خلاصه</h2>
+
+<p dir="rtl">ویژگی <code style="font-size: 14px;">position <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a></code> قوانین دیگری برای موقعیت دادن به عناصر انتخاب می‌کند، طراحی شده تا برای افکت‌های انیمیشن نوشته شده مفید باشد.</p>
+
+<p dir="rtl">{{cssinfo}}</p>
+
+<p dir="rtl">یک <strong>عنصر  موقعیت گرفته</strong> عنصری است که ویژگی موقعیت <a href="/en-US/docs/CSS/computed_value" title="/en-US/docs/CSS/computed_value">محاسبه شده</a> relative، absolute، یا fixed است.</p>
+
+<p dir="rtl">یک <strong>عنصر مستقل موقعیت گرفته</strong> شده عنصری است که ویژگی موقعیت <a href="/en-US/docs/CSS/computed_value" title="/en-US/docs/CSS/computed_value">محاسبه شده</a> absolute یا fixed است.</p>
+
+<p dir="rtl">{{Cssxref("top")}}، {{Cssxref("right")}}، {{Cssxref("bottom")}}، و {{Cssxref("left")}} ویژگی‌هایی هستند که موقعیت عناصر موقعیت داده شده را مشخص می‌کنند.</p>
+
+<h2 dir="rtl" id="نحو">نحو</h2>
+
+<p dir="rtl"> </p>
+
+<pre class="twopartsyntaxbox" dir="rtl" style="margin-top: 0px; padding: 0px; white-space: normal; font-size: 14px; line-height: 18px;"><a href="/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("position")}}</pre>
+
+<pre dir="rtl" style="margin-bottom: 1.286em; padding: 0px; white-space: normal; font-size: 14px; line-height: 18px;">position: static position: relative position: absolute position: fixed position: inherit</pre>
+
+<h3 dir="rtl" id="مقادیر">مقادیر</h3>
+
+<p dir="rtl"><strong><em>static</em></strong></p>
+
+<p dir="rtl">رفتار عادی. ویژگی‌های top، right، bottom، و left اعمال نمی‌شوند.</p>
+
+<p dir="rtl"><strong><em>relative</em></strong></p>
+
+<p dir="rtl">عناصر را طوری روی سطح پخش می‌کند گویی موقعیت داده نشدند، و  سپس موقعیت عنصر را تنظیم می‌کند، بدون آنکه ترکیب را تغییر دهد (بنابراین برای عنصر یک جای باز جایی که باید داشته باشد و موقعیت داده نشده کنار می‌گذارد). position: relative روی عناصر <code>table-*-group</code>، <code>table-row</code>، <code>table-column</code>، <code>table-cell</code>، و <code>table-caption</code> بی تاثیر است.</p>
+
+<p dir="rtl"><strong><em>absolute</em></strong></p>
+
+<p dir="rtl">برای عنصر فضا کنار نمی‌گذارد. در عوض، در موقعیت نسبی مشخص شده نسبت به نزدیک‌ترین والد موقعیت داده شده یا نسبت به بلوک شامل موقعیت می‌دهد. جعبه‌هایی که موقعیت مستقل دارند می‌توانند حاشیه/margin داشته باشند، آنها با هیچ یک از حواشی دیگر فروپاشی نمی‌کنند.</p>
+
+<p dir="rtl"><strong><em>fixed</em></strong></p>
+
+<p dir="rtl">برای عنصر فضا کنار نمی‌گذارد. در عوض، در موقعیت نسبی مشخص شده نسبت به نما/viewport صفحه‌ی نمایش موقعیت می‌دهد و با حرکت دادن صفحه/scroll حرکت نمی‌کند. در زمان چاپ، در همان موقعیت روی هر صفحه ثابت می‌ماند.</p>
+
+<h2 dir="rtl" id="نمونه‌ها">نمونه‌ها</h2>
+
+<h3 dir="rtl" id="موقعیت_دادن_نسبی">موقعیت دادن نسبی</h3>
+
+<p dir="rtl">برای نسبی موقعیت دادن یک عنصر که از بالا و چپ ۲۰ پیکسل از موقعیت عادی خودش تفاوت دارد، دستور CSS زیر استفاده می‌شود.</p>
+
+<pre dir="rtl">#two { position: relative; top: 20px; left: 20px; }</pre>
+
+<p dir="rtl">به عناصر دیگر توجه کنید که چطور نمایش داده می‌شوند در حالی که "Two" در موقعیت عادی خودش بود و فضا درنظر می‌گیرد.</p>
+
+<p dir="rtl"><img alt="" src="https://developer.mozilla.org/@api/deki/files/4922/=relative-positioning.png" style="height: 136px; width: 519px;"></p>
+
+<h3 dir="rtl" id="موقعیت_دادن_مستقل">موقعیت دادن مستقل</h3>
+
+<p dir="rtl">عناصری که نسبی موقعیت داده شدند همچنان در روند عادی عناصر در سند درنظر گرفته می‌شوند. در مقابل، عنصری که مستقل موقعیت داده شده از روند خارج شده بنابراین زمانی که عناصر دیگر قرار داده می‌شود هیچ فضایی نمی‌گیرد. عنصری که موقعیت مستقل گرفته است موقعیت نسبی نسبت به نزدیک‌ترین والد موقعیت داده شده دارد. اگر والدی که موقعیت گرفته باشه وجود نداشته باشد، ظرف آغازین استفاده می‌شود.</p>
+
+<p dir="rtl">در مثال زیر، والد آبی رنگ div موقعیت نسبی گرفته است (پس نزدیک‌ترین والد موقعیت گرفته شده خواهد بود) و جعبه‌ی Two مستقل موقعیت گرفته است:</p>
+
+<pre dir="rtl">#ancestor { position: relative; background: #ddf; width: 500px; }
+
+#two { position: absolute; top: 20px; left: 20px; }</pre>
+
+<p dir="rtl"><img alt="" src="https://developer.mozilla.org/@api/deki/files/4923/=absolute-positioning.png" style="height: 134px; width: 518px;"></p>
+
+<p dir="rtl">اگر #ancestor موقعیت نسبی نداشته بود، جعبه‌ی Two با موقعیت نسبی نسبت به بالاترین گوشه سمت چپ صفحه ظاهر می‌شد.</p>
+
+<p dir="rtl">موقعیت دادن ثابت</p>
+
+<p dir="rtl">موقعیت ثابت مشابه موقعیت دادن مستقل است، با این استثنا که بلوک شامل عنصر همان نما/viewport است. این موقعیت اغلب برای ساخت یک عنصر شناوری که حتی پس از حرکت دادن صفحه/scroll در همان موقعیت می‌ماند استفاده می‌شود. در مثال زیر جعبه‌ی "One" با فاصله‌ی ۸۰ پیکسل از بالا و صفحه و ۲۰ پیکسل از سمت چپ موقعیت ثابت دارد:</p>
+
+<pre dir="rtl">#one { position: fixed; top: 80px; left:20px; }</pre>
+
+<p dir="rtl">وقتی بالای صفحه را نگاه می‌کنید، جعبه در بالاترین گوشه سمت چپ ظاهر می‌شود، و پس از حرکت دادن صفحه، در همان جایگاه نسبی نسبت به نما باقی می‌ماند:</p>
+
+<p dir="rtl"><img alt="" src="https://developer.mozilla.org/@api/deki/files/4924/=fixed-1.png?size=thumb" style="height: 279px; width: 356px;"></p>
+
+<p dir="rtl"><img alt="" src="https://developer.mozilla.org/@api/deki/files/4925/=fixed-2.png?size=thumb" style="height: 222px; width: 352px;"></p>
+
+<h2 dir="rtl" id="نکات">نکات</h2>
+
+<p dir="rtl">برای عناصری که موقعیت نسبی دارند، ویژگی {{Cssxref("top")}} یا {{Cssxref("bottom")}}  جابجایی عمودی از موقعیت عادی و ویژگی {{Cssxref("left")}} یا {{Cssxref("right")}} جابجایی افقی را تعیین می‌کنند.</p>
+
+<p dir="rtl">برای عناصری که موقعیت مستقل دارند، ویژگی‌های {{Cssxref("top")}}، {{Cssxref("right")}}، {{Cssxref("bottom")}}، و {{Cssxref("left")}} جابجایی‌ها از ضلع بلوک شامل عنصر(عنصری که نسبت به آن موقعیت نسبی دارد) تعیین می‌کنند. حاشیه برای آن عنصر اگر وجود داشته باشد نخست حاشیه‌ها اعمال می‌شوند سپس جابجایی‌ها.</p>
+
+<p dir="rtl">اکثر اوقات، عناصر مستقل موقعیت گرفته شده مقادیر خودکار/auto برای {{Cssxref("height")}} و {{Cssxref("width")}} دارند تا طول و عرض عنصر متناسب با محتوای آن تغییر کند.</p>
+
+<p dir="rtl"><span style="line-height: 21px;">اگر {{Cssxref("top")}} و {{Cssxref("bottom")}} هر دو تعیین شوند(فنی، نه خودکار)، {{Cssxref("top")}} برنده می‌شود.</span></p>
+
+<p dir="rtl"><span style="line-height: 21px;">اگر }}Cssxref("left")}} و {{Cssxref("right")}} هر دو تعیین شوند، {{Cssxref("left")}} وقتی {{Cssxref("direction")}} ltr/چپ به راست هست (انگلیسی، ژاپنی افقی، غیره.) و {{Cssxref("right")}} برنده خواهد شد وقتی {{Cssxref("direction")}} rtl/راست به چپ هست(پارسی، عبری، غیره.).</span></p>
+
+<h2 dir="rtl" id="مشخصات"><span style="line-height: 21px;">مشخصات</span></h2>
+
+<table class="standard-table" dir="rtl">
+ <thead>
+  <tr>
+   <th scope="col">دیدگاه</th>
+   <th scope="col">وضعیت</th>
+   <th scope="col">مشخصات</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td> </td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 dir="rtl" id="سازگاری_مرورگر">سازگاری مرورگر</h2>
+
+<p dir="rtl">{{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>1.0 (1.0) ({{anch("Gecko notes", "See notes")}})</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>fixed </code>value</td>
+   <td>1.0</td>
+   <td>1.0 (1.0)</td>
+   <td>7.0</td>
+   <td>4.0</td>
+   <td>1.0 (85)</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>1.0 (1.0) ({{anch("Gecko notes", "See notes")}})</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/fa/web/css/pseudo-elements/index.html b/files/fa/web/css/pseudo-elements/index.html
new file mode 100644
index 0000000000..ab3de8d597
--- /dev/null
+++ b/files/fa/web/css/pseudo-elements/index.html
@@ -0,0 +1,97 @@
+---
+title: Pseudo-elements
+slug: Web/CSS/Pseudo-elements
+translation_of: Web/CSS/Pseudo-elements
+---
+<div>{{CSSRef}}</div>
+
+<p dir="rtl">یک CSS <strong>pseudo-element</strong> کلمه کلیدی است که به انتخابگر اضافه می‌شود و اجازه می‌دهد قسمت خاصی از عنصر انتخاب شده را آرایش کنید. برای مثال، {{ Cssxref("first-line::") }} می‌تواند برای تغییر نوشتار و رنگ خط اول یک پاراگراف مورد استفاده قرار گیرد.</p>
+
+<pre class="brush: css no-line-numbers">/* The first line of every &lt;p&gt; element. */
+p::first-line {
+  color: blue;
+  text-transform: uppercase;
+}</pre>
+
+<div class="note">
+<p><strong>Note:</strong> In contrast to pseudo-elements, {{cssxref("pseudo-classes")}} can be used to style an element based on its <em>state</em>.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">selector::pseudo-element {
+  property: value;
+}</pre>
+
+<p>You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.</p>
+
+<div class="note">
+<p><strong>Note:</strong> As a rule, double colons (<code>::</code>) should be used instead of a single colon (<code>:</code>). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.</p>
+</div>
+
+<h2 id="Index_of_standard_pseudo-elements">Index of standard pseudo-elements</h2>
+
+<div class="index">
+<ul>
+ <li>{{ Cssxref("::after") }}</li>
+ <li>{{ Cssxref("::before") }}</li>
+ <li>{{ cssxref("::cue")}}</li>
+ <li>{{ Cssxref("::first-letter") }}</li>
+ <li>{{ Cssxref("::first-line") }}</li>
+ <li>{{ Cssxref("::selection") }}</li>
+ <li>{{ Cssxref("::slotted") }}</li>
+ <li>{{ Cssxref("::backdrop") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>Lowest Version</th>
+   <th>Support of</th>
+  </tr>
+  <tr>
+   <td rowspan="2">Internet Explorer</td>
+   <td>8.0</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>9.0</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>1.0 (1.5)</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">Opera</td>
+   <td>4.0</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>7.0</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a></li>
+</ul>
diff --git a/files/fa/web/css/specificity/index.html b/files/fa/web/css/specificity/index.html
new file mode 100644
index 0000000000..fe692075a4
--- /dev/null
+++ b/files/fa/web/css/specificity/index.html
@@ -0,0 +1,343 @@
+---
+title: Specificity
+slug: Web/CSS/Specificity
+translation_of: Web/CSS/Specificity
+---
+<p> </p>
+
+<div>{{CSSRef}}</div>
+
+<p class="summary"><strong>Specificity</strong> is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of <a href="/en-US/docs/Web/CSS/CSS_Reference#Selectors">CSS selectors</a>.</p>
+
+<h2 id="How_is_specificity_calculated">How is specificity calculated?</h2>
+
+<p>Specificity is a weight that is applied to a given CSS declaration, determined by the number of each <a href="#Selector_Types">selector type</a> in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, <a href="#directly-targeted-elements">directly targeted elements</a> will always take precedence over rules which an element inherits from its ancestor.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> <a href="#Tree_proximity_ignorance">Proximity of elements</a> in the document tree has no effect on the specificity.</p>
+</div>
+
+<h3 id="Selector_Types">Selector Types</h3>
+
+<p>The following list of selector types increases by specificity:</p>
+
+<ol>
+ <li><a href="/en-US/docs/Web/CSS/Type_selectors">Type selectors</a> (e.g., <code>h1</code>) and pseudo-elements (e.g., <code>::before</code>).</li>
+ <li><a href="/en-US/docs/Web/CSS/Class_selectors">Class selectors</a> (e.g., <code>.example</code>), attributes selectors (e.g., <code>[type="radio"]</code>) and pseudo-classes (e.g., <code>:hover</code>).</li>
+ <li><a href="/en-US/docs/Web/CSS/ID_selectors">ID selectors</a> (e.g., <code>#example</code>).</li>
+</ol>
+
+<p>Universal selector ({{CSSxRef("Universal_selectors", "*")}}), combinators ({{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", "&gt;")}}, {{CSSxRef("General_sibling_combinator", "~")}}, <a href="/en-US/docs/Web/CSS/Descendant_combinator" style="white-space: nowrap;">'<code> </code>'</a>, {{CSSxRef("Column_combinator", "||")}}) and negation pseudo-class ({{CSSxRef(":not", ":not()")}}) have no effect on specificity. (The selectors declared <em>inside</em> <code>:not()</code> do, however.)</p>
+
+<p>For more information, visit: <a href="https://specifishity.com">https://specifishity.com</a></p>
+
+<p>Inline styles added to an element (e.g., <code>style="font-weight: bold;"</code>) always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.</p>
+
+<h3 id="The_!important_exception">The <code>!important</code> exception</h3>
+
+<p>When an <code>important</code> rule is used on a style declaration, this declaration overrides any other declarations. Although technically <code>!important</code> has nothing to do with specificity, it interacts directly with it. Using <code>!important,</code> however, is <strong>bad practice</strong> and should be avoided because it makes debugging more difficult by breaking the natural <a href="/en-US/docs/Web/CSS/Cascade">cascading</a> in your stylesheets. When two conflicting declarations with the <code>!important</code> rule are applied to the same element, the declaration with a greater specificity will be applied.</p>
+
+<p><strong>Some rules of thumb:</strong></p>
+
+<ul>
+ <li><strong>Always</strong> look for a way to use specificity before even considering <code>!important</code></li>
+ <li><strong>Only</strong> use <code>!important</code> on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap or normalize.css).</li>
+ <li><strong>Never</strong> use <code>!important</code> when you're writing a plugin/mashup.</li>
+ <li><strong>Never</strong> use <code>!important</code> on site-wide CSS.</li>
+</ul>
+
+<p><strong>Instead of using <code>!important</code>, consider:</strong></p>
+
+<ol>
+ <li>Make better use of the CSS cascade</li>
+ <li>
+  <p>Use more specific rules. By indicating one or more elements before the element you're selecting, the rule becomes more specific and gets higher priority:</p>
+
+  <pre class="brush: html">&lt;div id="test"&gt;
+  &lt;span&gt;Text&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+  <pre class="brush: css">div#test span { color: green; }
+div span { color: blue; }
+span { color: red; }</pre>
+
+  <p>No matter the order, text will be green because that rule is most specific. (Also, the rule for blue overwrites the rule for red, notwithstanding the order of the rules)</p>
+ </li>
+ <li>As a nonsense special case for (2), duplicate simple selectors to increase specificity when you have nothing more to specify.
+  <pre class="brush: css">#myId#myId span { color: yellow; }
+.myClass.myClass span { color: orange; }</pre>
+ </li>
+</ol>
+
+<h4 id="How_!important_can_be_used">How !important can be used:</h4>
+
+<h5 id="A)_Overriding_inline_styles">A) Overriding inline styles</h5>
+
+<p>Your global CSS file that sets visual aspects of your site globally may be overwritten by inline styles defined directly on individual elements. Both inline styles and !important are considered very bad practice, but sometimes you need the latter to override the former.</p>
+
+<p>In this case, you could set certain styles in your global CSS file as !important, thus overriding inline styles set directly on elements.</p>
+
+<pre class="brush: html">&lt;div class="foo" style="color: red;"&gt;What color am I?&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.foo[style*="color: red"] {
+  color: firebrick !important;
+}
+</pre>
+
+<p>Many JavaScript frameworks and libraries add inline styles. Using <code>!important</code> with a very targeted selector is one way to override these inline styles.</p>
+
+<h5 id="B)_Overriding_high_specificity">B) Overriding high specificity</h5>
+
+<pre class="brush: css">#someElement p {
+  color: blue;
+}
+
+p.awesome {
+  color: red;
+}</pre>
+
+<p>How do you make <code>awesome</code> paragraphs always turn red, even ones inside <code>#someElement</code>? Without <code>!important</code>, the first rule will have more specificity and will win over the second rule.</p>
+
+<h4 id="How_to_override_!important">How to override <code>!important</code></h4>
+
+<p>A) Add another CSS rule with <code>!important</code>, and either give the selector a higher specificity (adding a tag, id or class to the selector), or add a CSS rule with the same selector at a later point than the existing one. This works because in a specificity tie, the last rule defined wins.</p>
+
+<p>Some examples with a higher specificity:</p>
+
+<pre class="brush: css">table td    { height: 50px !important; }
+.myTable td { height: 50px !important; }
+#myTable td { height: 50px !important; }
+</pre>
+
+<p>B) Or add the same selector after the existing one:</p>
+
+<pre class="brush: css">td { height: 50px !important; }</pre>
+
+<p>C) Or, preferably, rewrite the original rule to avoid the use of <code>!important</code> altogether.</p>
+
+<pre class="brush: css">[id="someElement"] p {
+  color: blue;
+}
+
+p.awesome {
+  color: red;
+}</pre>
+
+<p>Including an id as part of an attribute selector instead of as an id selector gives it the same specificity as a class. Both selectors above now have the same weight. In a specificity tie, the last rule defined wins.</p>
+
+<h4 id="For_more_information_visit">For more information, visit:</h4>
+
+<ul>
+ <li><a href="https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css">https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css</a></li>
+ <li><a href="https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean">https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean</a></li>
+ <li><a href="https://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css">https://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css</a></li>
+ <li><a href="https://stackoverflow.com/questions/11178673/how-to-override-important">https://stackoverflow.com/questions/11178673/how-to-override-important</a></li>
+ <li><a href="https://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css">https://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css</a></li>
+</ul>
+
+<h3 id="The_is_and_not_exceptions" name="The_is_and_not_exceptions"><a id="The_not_exception" name="The_not_exception">The <code>:is()</code> and <code>:not()</code> exceptions</a></h3>
+
+<p>The matches-any pseudo-class {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} and the negation pseudo-class {{CSSxRef(":not", ":not()")}} are <em>not</em> considered a pseudo-class in the specificity calculation. But selectors placed into the pseudo-class count as normal selectors when determining the count of <a href="#Selector_Types">selector types</a>.</p>
+
+<div id="The_not_exception-example">
+<p>This chunk of CSS ...</p>
+
+<pre class="brush: css">div.outer p {
+  color: orange;
+}
+
+div:not(.outer) p {
+  color: blueviolet;
+}
+</pre>
+
+<p>... when used with the following HTML ...</p>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;p&gt;This is in the outer div.&lt;/p&gt;
+  &lt;div class="inner"&gt;
+    &lt;p&gt;This text is in the inner div.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>... appears on the screen like this:</p>
+
+<p>{{EmbedLiveSample("The_not_exception-example")}}</p>
+</div>
+
+<h3 id="The_where_exception" name="The_where_exception">The <code>:where()</code> exception {{Experimental_Inline}}</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<p>The specificity-adjustment pseudo-class {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} always has its specificity replaced with zero.</p>
+
+<p>This chunk of CSS ...</p>
+
+<pre class="brush: css">div:where(.outer) p {
+  color: orange;
+}
+
+div p {
+  color: blueviolet;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css;">#no-where-support {
+  margin: 0.5em;
+  border: 1px solid red;
+}
+
+#no-where-support:where(*) {
+  display: none !important;
+}
+</pre>
+</div>
+
+<p>... when used with the following HTML ...</p>
+
+<div class="hidden">
+<pre class="brush: html;">&lt;div id=no-where-support&gt;
+⚠️ Your browser doesn't support the &lt;code&gt;&lt;a href="https://developer.mozilla.org/docs/Web/CSS/:where"&gt;:where()&lt;/a&gt;&lt;/code&gt; pseudo-class.
+&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;p&gt;This is in the outer div.&lt;/p&gt;
+  &lt;div class="inner"&gt;
+    &lt;p&gt;This text is in the inner div.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>... appears on the screen like this:</p>
+
+<p>{{EmbedLiveSample("The_where_exception")}}</p>
+
+<h3 id="Form-based_specificity">Form-based specificity</h3>
+
+<p>Specificity is based on the form of a selector. In the following case, the selector <code>*[id="foo"]</code> counts as an attribute selector for the purpose of determining the selector's specificity, even though it selects an ID.</p>
+
+<p>The following CSS styles ...</p>
+
+<pre class="brush: css">*#foo {
+  color: green;
+}
+
+*[id="foo"] {
+  color: purple;
+}
+</pre>
+
+<p>... when used with this markup ...</p>
+
+<pre class="brush: html">&lt;p id="foo"&gt;I am a sample text.&lt;/p&gt;
+</pre>
+
+<p>... end up looking like this:</p>
+
+<p>{{EmbedLiveSample("Form-based_specificity")}}</p>
+
+<p>This is because it matches the same element but the ID selector has a higher specificity.</p>
+
+<h3 id="Tree_proximity_ignorance">Tree proximity ignorance</h3>
+
+<p>The proximity of an element to other elements that are referenced in a given selector has no impact on specificity. The following style declaration ...</p>
+
+<pre class="brush: css">body h1 {
+  color: green;
+}
+
+html h1 {
+  color: purple;
+}
+</pre>
+
+<p>... with the following HTML ...</p>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Here is a title!&lt;/h1&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>... will render as:</p>
+
+<p>{{EmbedLiveSample("Tree_proximity_ignorance")}}</p>
+
+<p>This is because the two declarations have equal <a href="#Selector_Types">selector type</a> counts, but the <code>html h1</code> selector is declared last.</p>
+
+<h3 id="Directly_targeted_elements_vs._inherited_styles">Directly targeted elements vs. inherited styles</h3>
+
+<p>Styles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule. This CSS ...</p>
+
+<pre class="brush: css">#parent {
+  color: green;
+}
+
+h1 {
+  color: purple;
+}</pre>
+
+<p>... with the following HTML ...</p>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;body id="parent"&gt;
+    &lt;h1&gt;Here is a title!&lt;/h1&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>... will also render as:</p>
+
+<p>{{EmbedLiveSample("Directly_targeted_elements_vs._inherited_styles")}}</p>
+
+<p>This is because the <code>h1</code> selector targets the element specifically, but the green selector is only inherited from its parent.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#specificity-rules", "Calculating a selector's specificity")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Add the specificity adjustment selector {{CSSxRef(":where", ":where()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#specificity", "Calculating a selector's specificity")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td>Add <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html#specificity", "Calculating a selector's specificity")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Add <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#cascading-order", "Cascading order")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Specificity Calculator: An interactive website to test and understand your own CSS rules - <a href="https://specificity.keegan.st/">https://specificity.keegan.st/</a></li>
+ <li>CSS3 Selectors Specificity - <a class="external" href="http://www.w3.org/TR/selectors/#specificity" rel="freelink">http://www.w3.org/TR/selectors/#specificity</a></li>
+ <li>{{CSS_Key_Concepts}}</li>
+</ul>
diff --git a/files/fa/web/css/top/index.html b/files/fa/web/css/top/index.html
new file mode 100644
index 0000000000..b0b4af4e6f
--- /dev/null
+++ b/files/fa/web/css/top/index.html
@@ -0,0 +1,194 @@
+---
+title: بالا
+slug: Web/CSS/top
+tags:
+  - top
+  - بالا
+translation_of: Web/CSS/top
+---
+<div dir="rtl">{{CSSRef}}</div>
+
+<h2 dir="rtl" id="Summary" name="Summary">خلاصه مطلب</h2>
+
+<p dir="rtl">ویژگی CSS <code>top</code> قسمتی از موقعیت عناصر موقعیت داده شده (positioned elements) را مشخص می‌کند. این ویژگی تاثیری بر عناصری که موقعیت داده نشده اند (non-positioned)، ندارد.</p>
+
+<p dir="rtl">برای عناصری که موقعیت مستقل دارند (آنهایی که همراه {{Cssxref("position")}}: <code>absolute</code> یا {{Cssxref("position")}}: <code>fixed</code> هستند)، فاصله‌ی بین ضلع بالای حاشیه از عنصر و ضلع بالای بلوک شامل خودش را مشخص می‌کند.</p>
+
+<p dir="rtl">برای عناصری که موقعیت نسبی دارند (آنهایی که همراه {{Cssxref("position")}}: <code>relative</code> هستند)، اندازه‌ی حرکتی که عنصر به زیر موقعیت عادی خود دارد مشخص می‌کند.</p>
+
+<p dir="rtl">وقتی هر دو ویژگی {{Cssxref("top")}} و {{Cssxref("bottom")}} تعیین شده باشند، موقعیت عنصر بیش از حد محدود هست و ویژگی {{Cssxref("top")}} اولویت دارد: مقدار محاسبه شده‌ی {{Cssxref("bottom")}} روی -{{Cssxref("top")}} قرار می گیرد، درحالی که مقدار خودش که تعیین گردیده نادیده گرفته می‌شود.</p>
+
+<p dir="rtl">{{cssinfo}}</p>
+
+<h2 dir="rtl" id="Syntax" name="Syntax">روش استفاده</h2>
+
+<pre class="twopartsyntaxbox" dir="rtl"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("top")}}
+</pre>
+
+<pre dir="rtl">top: 3px         /* &lt;length&gt; مقادیر */
+top: 2.4em
+
+top: 10%         /* &lt;percentages&gt; of the height of the containing block */
+
+top: auto
+
+top: inherit
+</pre>
+
+<h3 dir="rtl" id="مقادیر">مقادیر</h3>
+
+<dl>
+ <dt dir="rtl"><code>&lt;طول&gt;</code></dt>
+ <dd dir="rtl">یک عدد منفی، null، یا مثبت  هست که {{cssxref("&lt;length&gt;")}} نشان می‌دهد:</dd>
+ <dd>
+ <ul dir="rtl">
+  <li>برای عناصر با موقعیت مستقل (absolutely)، فاصله ازقسمت بالایی (لبه ی بالای) بلوک را مشخص می کند؛</li>
+  <li>برای عناصر با موقعیت نسبی (relative)، اگر در حالت معمول (normal flow)  موقعیتی (position) مشخص نشده باشد، عنصر نسبت به موقعیت معمول (normal) خود به سمت پایین حرکت می کند.</li>
+ </ul>
+ </dd>
+ <dt dir="rtl"><code>&lt;درصد&gt;</code></dt>
+ <dd dir="rtl">یک {{cssxref("&lt;percentage&gt;")}} از ارتفاع بلوک شامل است، همانطور که در <a href="#" title="#">خلاصه</a> شرح داده شد مورد استفاده قرار می‌گیرد.</dd>
+ <dt dir="rtl"><code>خودکار</code></dt>
+ <dd dir="rtl">کلیدواژه‌ای است که بیان می‌کند:</dd>
+ <dd>
+ <ul dir="rtl">
+  <li>برای عناصر با موقعیت مستقل، موقعیت عنصر بر مبنای ویژگی {{Cssxref("bottom")}} و ارتفاع مربوط تنظیم می‌شود: <code>auto</code> بعنوان ارتفاع بر مبنای محتوا.</li>
+  <li>برای عناصر با موقعیت نسبی، جابجایی عنصر از موقعیت اصلی خود بر مبنای  ویژگی {{Cssxref("bottom")}} تنظیم می‌شود، یا اگر {{Cssxref("bottom")}} هم <code>auto</code> باشد، عنصر را جابجا نمی‌کند.</li>
+ </ul>
+ </dd>
+ <dt dir="rtl"><code>به ارث بردن</code></dt>
+ <dd dir="rtl">کلیدواژه‌ای است که نشان می‌دهد مقدار همان مقداری است که از عنصر والد خود محاسبه شده است (ممکن است بلوک شامل عنصر نباشد).</dd>
+ <dd dir="rtl">مقدار نخست محاسبه می‌شود سپس بر اساس نوع آن که {{cssxref("&lt;length&gt;")}}، {{cssxref("&lt;percentage&gt;") }}، یا کلیدواژه‌ی <code>auto</code> است بکار می‌رود.</dd>
+</dl>
+
+<h2 dir="rtl" id="Examples" name="Examples">نمونه‌ها</h2>
+
+<pre class="brush: css" dir="rtl">/* body می‌تواند با واحد px تعیین شود همینطور برای div */
+body{
+  width: 100%;
+  height: 100%;
+}
+
+/* برای div هم می‌توان از واحد ٪ استفاده کرد */
+div {
+  position: absolute;
+  left: 15%;
+  top: 30%;
+  bottom: 30%;
+  width: 70%;
+  height: 40%;
+  text-align: left;
+  border: 3px rgb(0,0,0) solid;
+}</pre>
+
+<pre class="brush: html" dir="rtl"> &lt;?xml version="1.0" encoding="utf-8"?&gt;
+ &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+ &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
+   &lt;head&gt;
+     &lt;meta http-equiv="Content-Type" content="application/xhtml+xml" /&gt;
+     &lt;title&gt;Mozilla.org height top left width percentage CSS&lt;/title&gt;
+     &lt;style type="text/css"&gt;
+       /* body می‌تواند با واحد px تعیین شود همینطور برای div */
+       body {
+         width: 100%;
+         height: 100%;
+       }
+       /* برای div هم می‌توان از واحد ٪ استفاده کرد */
+       div {
+         position: absolute;
+         left: 15%;
+         top: 30%;
+         bottom: 30%;
+         width: 70%;
+         height: 40%;
+         text-align: left;
+         border: 3px rgb(0,0,0) solid;
+       }
+     &lt;/style&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;center&gt;
+        &lt;div&gt;
+             ...محتوای آزمایشی...
+        &lt;/div&gt;
+      &lt;/center&gt;
+
+   &lt;/body&gt;
+ &lt;/html&gt;</pre>
+
+<h2 dir="rtl" id="Specifications" name="Specifications">مشخصات</h2>
+
+<table class="standard-table" dir="rtl">
+ <thead>
+  <tr>
+   <th scope="col">مشخصات</th>
+   <th scope="col">وضعیت</th>
+   <th scope="col">دیدگاه</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'top')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>top</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 dir="rtl" id="Browser_compatibility" name="Browser_compatibility">سازگاری مرورگر</h2>
+
+<p dir="rtl">{{CompatibilityTable}}</p>
+
+<div dir="rtl" 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</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div dir="rtl" id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fa/web/css/transform-function/index.html b/files/fa/web/css/transform-function/index.html
new file mode 100644
index 0000000000..8e2080e302
--- /dev/null
+++ b/files/fa/web/css/transform-function/index.html
@@ -0,0 +1,163 @@
+---
+title: <transform-function>
+slug: Web/CSS/transform-function
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Transforms
+  - Layout
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/transform-function
+---
+<div>{{CSSRef}}</div>
+
+<p>The <strong><code>&lt;transform-function&gt;</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">data type</a> represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the {{cssxref("transform")}} property.</p>
+
+<h2 id="Describing_transformations_mathematically">Describing transformations mathematically</h2>
+
+<p>Various coordinate models can be used to describe an HTML element's size and shape, as well as any transformations applied to it. The most common is the <a href="https://en.wikipedia.org/wiki/Cartesian_coordinate_system">Cartesian coordinate system</a>, although <a href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> are also sometimes used.</p>
+
+<h3 id="Cartesian_coordinates"><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a>Cartesian coordinates</h3>
+
+<p>In the Cartesian coordinate system, a two-dimensional point is described using two values: an x coordinate (abscissa) and a y coordinate (ordinate). This is represented by the vector notation <code>(x, y)</code>.</p>
+
+<p>In CSS (and most computer graphics), the origin <code>(0, 0)</code> represents the<em> top-left</em> corner of any element. Positive coordinates are down and to the right of the origin, while negative ones are up and to the left. Thus, a point that's 2 units to the right and 5 units down would be <code>(2, 5)</code>, while a point 3 units to the left and 12 units up would be <code>(-3, -12)</code>.</p>
+
+<h3 id="Transformation_functions">Transformation functions</h3>
+
+<p>Transformation functions alter the appearance of an element by manipulating the values of its coordinates. A linear transformation function is described using a 2x2 matrix, like this:</p>
+
+<div style="text-align: center;">
+<p><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></p>
+</div>
+
+<p>The function is applied to an element by using matrix multiplication. Thus, each coordinate changes based on the values in the matrix:</p>
+
+<div style="text-align: center;"><a href="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png"><img src="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png?size=webview" style="height: 32px; width: 189px;"></a></div>
+
+<p><br>
+ It is even possible to apply several transformations in a row:</p>
+
+<div style="text-align: center;"><a href="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png"><img src="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png?size=webview" style="height: 32px; width: 313px;"></a></div>
+
+<p><br>
+ With this notation, it is possible to describe, and therefore compose, most common transformations: rotations, scaling, or skewing. (In fact, all transformations that are linear functions can be described.) Composite transformations are effectively applied in order from right to left.</p>
+
+<p>However, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. The translation vector <code>(tx, ty)</code> must be expressed separately, as two additional parameters.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Though trickier than Cartesian coordinates, <a class="external" href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> in <a class="external" href="https://en.wikipedia.org/wiki/Projective_geometry">projective geometry</a> lead to 3x3 transformation matrices, and can simply express translations as linear functions.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>The <code>&lt;transform-function&gt;</code> data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D.</p>
+
+<h3 id="Matrix_transformation">Matrix transformation</h3>
+
+<dl>
+ <dt>{{cssxref("transform-function/matrix","matrix()")}}</dt>
+ <dd>Describes a homogeneous 2D transformation matrix.</dd>
+ <dt>{{cssxref("transform-function/matrix3d","matrix3d()")}}</dt>
+ <dd>Describes a 3D transformation as a 4x4 homogeneous matrix.</dd>
+</dl>
+
+<h3 id="Perspective">Perspective</h3>
+
+<dl>
+ <dt>{{cssxref("transform-function/perspective","perspective()")}}</dt>
+ <dd>Sets the distance between the user and the z=0 plane.</dd>
+</dl>
+
+<h3 id="Rotation">Rotation</h3>
+
+<dl>
+ <dt>{{cssxref("transform-function/rotate","rotate()")}}</dt>
+ <dd>Rotates an element around a fixed point on the 2D plane.</dd>
+ <dt>{{cssxref("transform-function/rotate3d","rotate3d()")}}</dt>
+ <dd>Rotates an element around a fixed axis in 3D space.</dd>
+ <dt>{{cssxref("transform-function/rotateX","rotateX()")}}</dt>
+ <dd>Rotates an element around the horizontal axis.</dd>
+ <dt>{{cssxref("transform-function/rotateY","rotateY()")}}</dt>
+ <dd>Rotates an element around the vertical axis.</dd>
+ <dt>{{cssxref("transform-function/rotateZ","rotateZ()")}}</dt>
+ <dd>Rotates an element around the z-axis.</dd>
+</dl>
+
+<h3 id="Scaling_(resizing)">Scaling (resizing)</h3>
+
+<dl>
+ <dt>{{cssxref("transform-function/scale","scale()")}}</dt>
+ <dd>Scales an element up or down on the 2D plane.</dd>
+ <dt>{{cssxref("transform-function/scale3d","scale3d()")}}</dt>
+ <dd>Scales an element up or down in 3D space.</dd>
+ <dt>{{cssxref("transform-function/scaleX","scaleX()")}}</dt>
+ <dd>Scales an element up or down horizontally.</dd>
+ <dt>{{cssxref("transform-function/scaleY","scaleY()")}}</dt>
+ <dd>Scales an element up or down vertically.</dd>
+ <dt>{{cssxref("transform-function/scaleZ","scaleZ()")}}</dt>
+ <dd>Scales an element up or down along the z-axis.</dd>
+</dl>
+
+<h3 id="Skewing_(distortion)">Skewing (distortion)</h3>
+
+<dl>
+ <dt>{{cssxref("transform-function/skew","skew()")}}</dt>
+ <dd>Skews an element on the 2D plane.</dd>
+ <dt>{{cssxref("transform-function/skewX","skewX()")}}</dt>
+ <dd>Skews an element in the horizontal direction.</dd>
+ <dt>{{cssxref("transform-function/skewY","skewY()")}}</dt>
+ <dd>Skews an element in the vertical direction.</dd>
+</dl>
+
+<h3 id="Translation_(moving)">Translation (moving)</h3>
+
+<dl>
+ <dt>{{cssxref("transform-function/translate","translate()")}}</dt>
+ <dd>Translates an element on the 2D plane.</dd>
+ <dt>{{cssxref("transform-function/translate3d","translate3d()")}}</dt>
+ <dd>Translates an element in 3D space.</dd>
+ <dt>{{cssxref("transform-function/translateX","translateX()")}}</dt>
+ <dd>Translates an element horizontally.</dd>
+ <dt>{{cssxref("transform-function/translateY","translateY()")}}</dt>
+ <dd>Translates an element vertically.</dd>
+ <dt>{{cssxref("transform-function/translateZ","translateZ()")}}</dt>
+ <dd>Translates an element along the z-axis.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p> </p>
+
+
+
+<p>{{Compat("css.types.transform-function")}}</p>
+
+<p> </p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>CSS {{cssxref("transform")}} property</li>
+</ul>
diff --git a/files/fa/web/css/transform-function/rotate()/index.html b/files/fa/web/css/transform-function/rotate()/index.html
new file mode 100644
index 0000000000..28c924605d
--- /dev/null
+++ b/files/fa/web/css/transform-function/rotate()/index.html
@@ -0,0 +1,85 @@
+---
+title: rotate()
+slug: Web/CSS/transform-function/rotate()
+translation_of: Web/CSS/transform-function/rotate()
+---
+<div>{{CSSRef}}</div>
+
+<p dir="rtl">تابع <strong><code>()rotate</code></strong> یک جابجایی که چرخشی دوبعدی نسبت به نقطه‌ای ثابت است را بوجود می‌آورد. نوع خروجی این تابع از جنس {{cssxref("&lt;transform-function&gt;")}} می‌باشد.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12113/rotate.png" style="height: 175px; width: 258px;"></p>
+
+<p dir="rtl">محور چرخش از طریق مقدار دهی خاصیت {{ cssxref("transform-origin") }} مشخص می‌شود.</p>
+
+<h2 id="نحو">نحو</h2>
+
+<p dir="rtl">مقدار ساخته شده با تابع <code>()rotate</code> برای چرخش، توسط {{cssxref("&lt;angle&gt;")}} مشخص می‌شود. اگر علامت آن مثبت باشه در جهت ساعتگرد حرکت می‌کند؛ اگر منفی باشد در جهت پاد ساعتگرد حرکت می‌کند. چرخش  °180 بازتاب نقطه نامیده می‌شود.</p>
+
+<pre class="syntaxbox notranslate">rotate(<em>a</em>)
+</pre>
+
+<h3 id="مقادیر">مقادیر</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td>
+   <td><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[cos(a) sin(a) -sin(a) cos(a) 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="مثال‌ها">مثال‌ها</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotated"&gt;Rotated&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
+  background-color: pink;
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Examples", "auto", 180)}}</p>
+
+<h2 id="سازگاری_مرورگرها">سازگاری مرورگرها</h2>
+
+<p>برای اطلاعات مربوط به سازگاری، لطفا <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> را ببنید.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><code><a href="/en-US/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></li>
+</ul>
diff --git a/files/fa/web/css/انتخابگرـنوع/index.html b/files/fa/web/css/انتخابگرـنوع/index.html
new file mode 100644
index 0000000000..5a4b5e4c89
--- /dev/null
+++ b/files/fa/web/css/انتخابگرـنوع/index.html
@@ -0,0 +1,78 @@
+---
+title: انتخابگر نوع
+slug: Web/CSS/انتخابگرـنوع
+translation_of: Web/CSS/Type_selectors
+---
+<div>{{CSSRef}}</div>
+
+<p dir="rtl"><strong>انتخابگر نوع</strong> با نوع عنصر انتخاب می‌کند. به عبارت دیگر این انتخابگر به وسیله نوع عنصر، تمام عنصرهای تطابق داده شده را انتخاب می‌کند.</p>
+
+<pre class="brush: css no-line-numbers">/* را انتخاب می‌کند &lt;a&gt; همه عنصرهای */
+a {
+  color: red;
+}</pre>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">element { <em>style properties</em> }
+</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span {
+  background-color: skyblue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span&gt;Here's a span with some text.&lt;/span&gt;
+&lt;p&gt;Here's a p with some text.&lt;/p&gt;
+&lt;span&gt;Here's a span with more text.&lt;/span&gt;
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Example', '100%', 150)}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>No changes</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>No changes</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.selectors.type")}}</p>
diff --git a/files/fa/web/css/انتخابگرـویژگی/index.html b/files/fa/web/css/انتخابگرـویژگی/index.html
new file mode 100644
index 0000000000..54cf34cd5d
--- /dev/null
+++ b/files/fa/web/css/انتخابگرـویژگی/index.html
@@ -0,0 +1,182 @@
+---
+title: انتخابگر ویژگی
+slug: Web/CSS/انتخابگرـویژگی
+translation_of: Web/CSS/Attribute_selectors
+---
+<div>{{CSSRef}}</div>
+
+<p dir="rtl"><strong>انتخابگر ویژگی</strong> بر اساس وجود ویژگی یا مقدار ویژگی انتخاب می‌کند.</p>
+
+<pre class="brush: css no-line-numbers">/* را داشته باشند title که ویژگی &lt;a&gt; عنصرهای */
+a[title] {
+  color: purple;
+}
+
+/* باشد "https://example.org" آن برابر با  href که ویژگی  &lt;a&gt; عنصرهای */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* باشد "example" آن در بردارنده‌ی href که ویژگی &lt;a&gt; عنصرهای */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* به پایان رسیده باشد ".org" آن با href که ویژگی &lt;a&gt; عنصرهای */
+a[href$=".org"] {
+  font-style: italic;
+}</pre>
+
+<dl>
+ <dt><code>[<em>attr</em>]</code></dt>
+ <dd>Represents elements with an attribute name of <em>attr</em>.</dd>
+ <dt><code>[<em>attr</em>=<em>value</em>]</code></dt>
+ <dd>Represents elements with an attribute name of <em>attr</em> whose value is exactly <em>value</em>.</dd>
+ <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt>
+ <dd>Represents elements with an attribute name of <em>attr</em> whose value is a whitespace-separated list of words, one of which is exactly <em>value</em>.</dd>
+ <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt>
+ <dd>Represents elements with an attribute name of <em>attr</em> whose value can be exactly <em>value</em> or can begin with <em>value</em> immediately followed by a hyphen, <code>-</code> (U+002D). It is often used for language subcode matches.</dd>
+ <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt>
+ <dd>Represents elements with an attribute name of <em>attr</em> whose value is prefixed (preceded) by <em>value</em>.</dd>
+ <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt>
+ <dd>Represents elements with an attribute name of <em>attr</em> whose value is suffixed (followed) by <em>value</em>.</dd>
+ <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt>
+ <dd>Represents elements with an attribute name of <em>attr</em> whose value contains at least one occurrence of <em>value</em> within the string.</dd>
+ <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt>
+ <dd>Adding an <code>i</code> (or <code>I</code>) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Links">Links</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">a {
+  color: blue;
+}
+
+/* Internal links, beginning with "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Links with "example" anywhere in the URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Links with "insensitive" anywhere in the URL,
+   regardless of capitalization */
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Links that end in ".org" */
+a[href$=".org"] {
+  color: red;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="#internal"&gt;Internal link&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://example.com"&gt;Example link&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#InSensitive"&gt;Insensitive internal link&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://example.org"&gt;Example org link&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample('Links')}}</p>
+
+<h3 id="Languages">Languages</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">/* All divs with a `lang` attribute are bold. */
+div[lang] {
+  font-weight: bold;
+}
+
+/* All divs in US English are blue. */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* All divs in Portuguese are green. */
+div[lang="pt"] {
+  color: green;
+}
+
+/* All divs in Chinese are red, whether
+   simplified (zh-CN) or traditional (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* All divs with a Traditional Chinese
+   `data-lang` are purple. */
+/* Note: You could also use hyphenated attributes
+   without double quotes */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div lang="en-us en-gb en-au en-nz"&gt;Hello World!&lt;/div&gt;
+&lt;div lang="pt"&gt;Olá Mundo!&lt;/div&gt;
+&lt;div lang="zh-CN"&gt;世界您好！&lt;/div&gt;
+&lt;div lang="zh-TW"&gt;世界您好！&lt;/div&gt;
+&lt;div data-lang="zh-TW"&gt;?世界您好！&lt;/div&gt;
+</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample('Languages')}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Adds modifier for ASCII case-insensitive attribute value selection</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.selectors.attribute")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Selecting a single element: {{domxref("Document.querySelector()")}}, {{domxref("DocumentFragment.querySelector()")}}, or {{domxref("Element.querySelector()")}}</li>
+ <li>Selecting all matching elements: {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}}, or {{domxref("Element.querySelectorAll()")}}</li>
+ <li>The above methods are all implemented based on the {{domxref("ParentNode")}} mixin; see {{domxref("ParentNode.querySelector()")}} and {{domxref("ParentNode.querySelectorAll()")}}</li>
+</ul>
diff --git a/files/fa/web/css/بزرگنمایی/index.html b/files/fa/web/css/بزرگنمایی/index.html
new file mode 100644
index 0000000000..e664b6b4cc
--- /dev/null
+++ b/files/fa/web/css/بزرگنمایی/index.html
@@ -0,0 +1,134 @@
+---
+title: بزرگنمایی
+slug: Web/CSS/بزرگنمایی
+translation_of: Web/CSS/zoom
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><span class="seoSummary">The non-standard <strong><dfn><code>zoom</code></dfn></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property can be used to control the magnification level of an element.</span> {{cssxref("transform-function/scale", "transform: scale()")}} should be used instead of this property, if possible. However, unlike CSS Transforms, <code>zoom</code> affects the layout size of the element.</p>
+
+<pre class="brush: css no-line-numbers">/* Keyword values */
+zoom: normal;
+zoom: reset;
+
+/* &lt;percentage&gt; values */
+zoom: 50%;
+zoom: 200%;
+
+/* &lt;number&gt; values */
+zoom: 1.1;
+zoom: 0.7;
+
+/* Global values */
+zoom: inherit;
+zoom: initial;
+zoom: unset;</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Render this element at its normal size.</dd>
+ <dt><code>reset</code> {{non-standard_inline}}</dt>
+ <dd>Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing <kbd>Ctrl</kbd>-<kbd>-</kbd> or <kbd>Ctrl</kbd>+<kbd>+</kbd> keyboard shortcuts) to the document. Only supported by WebKit (and possibly Blink).</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Zoom factor. <code>100%</code> is equivalent to <code>normal</code>. Values larger than <code>100%</code> zoom in. Values smaller than <code>100%</code> zoom out.</dd>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>Zoom factor. Equivalent to the corresponding percentage (<code>1.0</code> = <code>100%</code> = <code>normal</code>). Values larger than <code>1.0</code> zoom in. Values smaller than <code>1.0</code> zoom out.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="First_example">First example</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p class="small"&gt;Small&lt;/p&gt;
+&lt;p class="normal"&gt;Normal&lt;/p&gt;
+&lt;p class="big"&gt;Big&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p.small {
+  zoom: 75%;
+}
+p.normal {
+  zoom: normal;
+}
+p.big {
+  zoom: 2.5;
+}
+p {
+  display: inline-block;
+}
+p:hover {
+  zoom: reset;
+}
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample('First_example')}}</p>
+
+<h3 id="Second_example">Second example</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div id="a" class="circle"&gt;&lt;/div&gt;
+&lt;div id="b" class="circle"&gt;&lt;/div&gt;
+&lt;div id="c" class="circle"&gt;&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">div.circle {
+  width: 25px;
+  height: 25px;
+  border-radius: 100%;
+  text-align: center;
+  vertical-align: middle;
+  display: inline-block;
+  zoom: 1.5;
+}
+div#a {
+  background-color: gold;
+  zoom: normal;
+}
+div#b {
+  background-color: green;
+  zoom: 200%;
+}
+div#c {
+  background-color: blue;
+  zoom: 2.9;
+}
+</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample('Second_example')}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>This property is nonstandard and originated in Internet Explorer. Apple has <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW15">a description in the Safari CSS Reference</a>. Rossen Atanassov of Microsoft has <a href="http://cdn.rawgit.com/atanassov/css-zoom/master/Overview.html">an unofficial draft specification proposal on GitHub</a>.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.zoom")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/almanac/properties/z/zoom/"><code>zoom</code> entry in CSS-Tricks' CSS Almanac</a></li>
+ <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/zoom"><code>zoom</code> viewport descriptor</a>, for use with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport"><code>@viewport</code></a></li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=390936">Bug 390936: Implement Internet Explorer <code>zoom</code> property for CSS </a>on the Firefox issue tracker Bugzilla</li>
+</ul>