files/ar/web/css/order/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

---
title: order
slug: Web/CSS/order
translation_of: Web/CSS/order
---
<div dir="rtl">{{CSSRef}}</div>

<p dir="rtl"><strong><code>order</code></strong> عبارة عن خاصية <a href="/en-US/docs/Web/CSS">CSS</a> تضع الترتيب كقالب مرن او شبكة. العناصر في القالب تخزن بشكل تصاعدي القيمة و من ثم حسب ترتيب الكود المصدري.</p>

<div>{{EmbedInteractiveExample("pages/css/order.html")}}</div>


<h2 dir="rtl" id="النحو">النحو</h2>

<pre class="brush:css no-line-numbers">/* &lt;integer&gt; values */
order: 5;
order: -5;

/* Global values */
order: inherit;
order: initial;
order: unset;</pre>

<div class="note">
<p><strong>Note</strong>: <code>order</code> is only meant to affect the <em>visual order</em> of elements and not their logical or tab order. <code>order</code> must not be used on non-visual media such as <a href="/en-US/docs/Web/CSS/@media#speech">speech</a>.</p>
</div>

<h3 dir="rtl" id="القيم">القيم</h3>

<dl>
 <dt dir="rtl">{{cssxref("&lt;integer&gt;")}}</dt>
 <dd dir="rtl">تمثل المجموعة المرتبة ليستخدمه العنصر</dd>
</dl>

<h3 dir="rtl" id="الصيغة_النحوية">الصيغة النحوية</h3>

<pre class="syntaxbox" dir="rtl">{{csssyntax}}</pre>

<h2 dir="rtl" id="مثال">مثال</h2>

<p dir="rtl">هنا مثال اساسي ل html chunk:</p>

<pre class="brush:html;" dir="rtl">&lt;header&gt;...&lt;/header&gt;
&lt;main&gt;
  &lt;article&gt;Article&lt;/article&gt;
  &lt;nav&gt;Nav&lt;/nav&gt;
  &lt;aside&gt;Aside&lt;/aside&gt;
&lt;/main&gt;
&lt;footer&gt;...&lt;/footer&gt;
</pre>

<p dir="rtl">كود الcss التالي ينشأ زوجي sidebar كلاسيكي  الشكل  محيط بمحتوى الblock.نموذج تصميم الصندوق المرن يشكل blocks متساوي الحجم بشكل عمودي و يستخدم مساحة افقية حسب الامكانية.</p>

<pre class="brush:css;">main { display: flex;  text-align:center; }
main &gt; article { flex:1;        order: 2; }
main &gt; nav     { width: 200px;  order: 1; }
main &gt; aside   { width: 200px;  order: 3; }</pre>

<h3 dir="rtl" id="النتيجة">النتيجة</h3>

<p>{{ EmbedLiveSample('Example') }}</p>

<h2 dir="rtl" id="هواجز_الوصول">هواجز الوصول</h2>

<p dir="rtl">استخدام خاصية ال<code>order</code> سينشأ فصل اتصال بين العرض المرئي للمحتوى  و ترتيب ال DOM. هذا سيؤثر عكسيا على تجربة المستخدمين ذي الرؤية المنخفضة للتصفح مع مساعدة التقنيات المساعدة مثل قارئ الشاشة. اذا كان ترتيب ال(CSS) المرئي مهم, اذاً لن يكون لمستخدمي قارئ الشاشة وصصول لقراءة الترتيب الصحيح.</p>

<ul>
 <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox &amp; the keyboard navigation disconnect — Tink</a></li>
 <li><a href="http://adrianroselli.com/2015/09/source-order-matters.html">Source Order Matters | Adrian Roselli</a></li>
 <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 dir="rtl" 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('CSS3 Flexbox', '#order-property', 'order')}}</td>
   <td>{{Spec2('CSS3 Flexbox')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 dir="rtl" id="ملائمة_المتصفح">ملائمة المتصفح</h2>


<p>{{Compat("css.properties.order")}}</p>

<h2 dir="rtl" id="انظر_ايضا">انظر ايضا</h2>

<ul>
 <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
 <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></em></li>
 <li>CSS Grid Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and accessibility</a></em></li>
</ul>