الفرق بين المراجعتين ل"CSS/tab-size"

من موسوعة حسوب
< CSS
اذهب إلى التنقل اذهب إلى البحث
 
(مراجعتان متوسطتان بواسطة مستخدم واحد آخر غير معروضتين)
سطر 37: سطر 37:
  
 
== أمثلة ==
 
== أمثلة ==
مثال عن استخدام الخاصية <code>tab-size</code> على عنصر <code>[[HTML/pre|<nowiki><pre></nowiki>]]</code> (لاحظ أنَّ الحالة الوحيدة التي سيُعرَض فيها محرف tab في مستندات HTML هي داخل العنصر <code>[[HTML/pre|<nowiki><pre></nowiki>]]</code> أو إذا ضبطنا قيمة الخاصية <code>[[CSS/white-space|white-space]]</code> إلى <code>pre</code> أو <code>pre-wrap</code>):<syntaxhighlight lang="html">
+
مثال عن استخدام الخاصية <code>tab-size</code> على عنصر <code>[[HTML/pre|<nowiki><pre></nowiki>]]</code> (لاحظ أنَّ الحالة الوحيدة التي سيُعرَض فيها محرف tab في مستندات HTML هي داخل العنصر <code>[[HTML/pre|<nowiki><pre></nowiki>]]</code> أو إذا ضبطنا قيمة الخاصية <code>[[CSS/white-space|white-space]]</code> إلى <code>pre</code> أو <code>pre-wrap</code>):
<pre>I have tabs inside!   tab-size: initial;</pre>
+
<syntaxhighlight lang="html">
<pre class="tab-2">I have tabs inside! tab-size: 2;</pre>
+
<pre>tab تم استعمال المسافة! tab-size: initial;</pre>
<pre class="tab-4">I have tabs inside! tab-size: 4;</pre>
+
<pre class="tab-2">tab تم استعمال المسافة! tab-size: 2;</pre>
<pre class="tab-6">I have tabs inside! tab-size: 6;</pre>
+
<pre class="tab-4">tab تم استعمال المسافة! tab-size-size: 4;</pre>
<pre class="tab-em">I have tabs inside! tab-size: 1em;</pre>
+
<pre class="tab-6">tab تم استعمال المسافة! tab-size-size: 6;</pre>
 +
<pre class="tab-em">tab تم استعمال المسافة! tab-size-size: 1em;</pre>
 
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 
.tab-2  { tab-size: 2;  }
 
.tab-2  { tab-size: 2;  }
سطر 49: سطر 50:
 
.tab-em { tab-size: 1em; }
 
.tab-em { tab-size: 1em; }
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 
==دعم المتصفحات==
 
==دعم المتصفحات==
 
{| class="wikitable"
 
{| class="wikitable"

المراجعة الحالية بتاريخ 14:27، 12 أغسطس 2018

الخاصية tab-size في CSS تُستعمل لتخصيص عرض محرف الجدولة (tab) الذي له الرمز U+0009 في يونيكود.

بطاقة الخاصية

القيمة الابتدائية 8
تُطبَّق على الحاويات الكتلية.
قابلة للوراثة نعم
قابلة للتحريك نعم
القيمة المحسوبة كما حُدِّدت.
/* <integer> قيم عددية */
tab-size: 4;
tab-size: 0;

/* <length> قيم طولية */
tab-size: 10px;
tab-size: 2em;

/* قيم عامة */
tab-size: inherit;
tab-size: initial;
tab-size: unset;

أمثلة

مثال عن استخدام الخاصية tab-size على عنصر <pre> (لاحظ أنَّ الحالة الوحيدة التي سيُعرَض فيها محرف tab في مستندات HTML هي داخل العنصر <pre> أو إذا ضبطنا قيمة الخاصية white-space إلى pre أو pre-wrap):

<pre>tab تم	استعمال	المسافة!	tab-size: initial;</pre>
<pre class="tab-2">tab	تم	استعمال	المسافة!	tab-size: 2;</pre>
<pre class="tab-4">tab	تم	استعمال	المسافة!	tab-size-size: 4;</pre>
<pre class="tab-6">tab	تم	استعمال	المسافة!	tab-size-size: 6;</pre>
<pre class="tab-em">tab	تم	استعمال	المسافة!	tab-size-size: 1em;</pre>

شيفرة CSS:

.tab-2  { tab-size: 2;   }
.tab-4  { tab-size: 4;   }
.tab-6  { tab-size: 6;   }
.tab-em { tab-size: 1em; }

دعم المتصفحات

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 21 4.0 غير مدعومة 15 6.1
<length> 42 53.0 غير مدعومة 29 غير مدعومة

متصفح Edge لا يدعم هذه الخاصية.

البنية العامة

تقبل الخاصية tab-size إحدى القيمتين التاليتين.

<integer>

عدد الفراغات الموجودة في محرف tab واحد. يجب ألّا تكون هذه القيمة سالبةً.

<length>

عرض محرف tab واحد. يجب ألّا تكون هذه القيمة سالبةً.

البنية الرسمية

tab-size: <integer> | <length>;

 انظر أيضًا

  • صفحة الخاصية  line-height التي تضبط المسافة المستخدم للأسطر.
  • صفحة الخاصية  letter-spacing التي تُحدِّد ما هو التباعد بين الأحرف النصية.

مصادر ومواصفات