الفرق بين المراجعتين لصفحة: «Bootstrap/reboot»

من موسوعة حسوب
→ التعديل السابق
مرئينص الويكي
إضافة عنوان
لا ملخص تعديل
 
(3 مراجعات متوسطة بواسطة مستخدم واحد آخر غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:مجموعة تنسيقات Reboot في إطار العمل Bootstrap}}</noinclude>
<noinclude>{{DISPLAYTITLE:مجموعة تنسيقات Reboot في إطار العمل Bootstrap}}</noinclude>
يوفّر Reboot - وهو مجموعة من تعديلات CSS خاصّة ببعض العناصر وتوجد في ملفّ واحد - أساس عمل بسيطًا، ومتناسقًا وأنيقًا يُبنى عليه إطار العمل Bootstrap.
يوفّر Reboot - وهو مجموعة من تعديلات CSS خاصّة ببعض العناصر وتوجد في ملفّ واحد - أساس عمل بسيط، ومتناسق وأنيق يُبنى عليه إطار العمل Bootstrap.


== المقاربة المستخدَمة في Reboot ==
== المقاربة المستخدَمة في Reboot ==
يعتمد Reboot على مشروع Normalize ويوفّر عناصر HTML عدّة بتنسيقات مُختارة تقتصر على استخدام [[:تصنيف:CSS Selectors|محدّدات CSS]] فقط. تُطبَّق التنسيقات الإضافيّة باستخدام الأصناف فقط. على سبيل المثال، يستخدم إطار العمل Bootstrap تنسيقات Reboot لإعداد أساس عمل قاعدي لتنسيق الجداول <code><nowiki><table></nowiki></code> ثم يوفّر لاحقًا الصّنفيْن <code>‎‎.table</code>و <code>‎‎.table-bordered</code> وغيرهما لعمل تنسيقات إضافيّة على الجداول.
يعتمد Reboot على مشروع Normalize ويوفّر عناصر HTML عدّة بتنسيقات مُختارة تقتصر على استخدام [[:تصنيف:CSS Selectors|محدّدات CSS]] فقط. تُطبَّق التنسيقات الإضافيّة باستخدام الأصناف فقط. على سبيل المثال، يستخدم إطار العمل Bootstrap تنسيقات Reboot لإعداد أساس عمل قاعدي لتنسيق الجداول <code>[[HTML/table|<nowiki><table></nowiki>]]</code> ثم يوفّر لاحقًا الصّنفيْن <code>‎‎.table</code>و <code>‎‎.table-bordered</code> وغيرهما لعمل تنسيقات إضافيّة على الجداول.


نذكر في ما يلي قواعد عامّة وأسبابًا لاختيّار التنسيقات الموجودة في Reboot وتطبيق مفعولها:
نذكر في ما يلي قواعد عامّة وأسبابًا لاختيّار التنسيقات الموجودة في Reboot وتطبيق مفعولها:
* تحديث القيم المبدئيّة في بعضٍ من المتصفّحات من أجل استخدام وحدة القياس <code>rem</code> بدلًا من <code>em</code> للحصول على تباعد قابل للتمديد Scalable بين المكوّنات.
* تحديث القيم المبدئيّة في بعضٍ من المتصفّحات من أجل استخدام وحدة القياس <code>rem</code> بدلًا من <code>em</code> للحصول على تباعد قابل للتمديد (scalable) بين المكوّنات.
* تجنّب الخاصيّة <code>margin-top</code>. تتميّز الحاشيّات العموديّة بأنّها تتقلّص، ممّا ينتُج عنه نتائج غير متوقَّعة؛ والأمر الأهمّ أنّ اتّخاذ اتّجاه واحد للحاشيّات يعدّ نموذجًا ذهنيًّا أسهل.
* تجنّب الخاصيّة <code>[[CSS/margin-top|margin-top]]</code>. تتميّز الحاشيّات العموديّة بأنّها تتقلّص (collapse)، ممّا ينتُج عنه نتائج غير متوقَّعة؛ والأمر الأهمّ أنّ اتّخاذ اتّجاه واحد للحاشيّات يعدّ نموذجًا ذهنيًّا أسهل.
* يجب أن تستخدم العناصر الكتليّة Block elements وحدة القياس <code>rem</code> في الحاشيّات وذلك بهدف تمدّد أسهل عبر مختلف قياسات الأجهزة.
* يجب أن تستخدم العناصر الكتليّة (block elements) وحدة القياس <code>rem</code> في الحاشيّات وذلك بهدف تمدّد أسهل عبر مختلف قياسات الأجهزة.
* عدم تعريف الخاصيّات المرتبطة بالخاصيّة <code>font</code> إلا عند الضّرورة، واستخدام الكلمة المحجوزة <code>inherit</code> كلّ ما أمكن ذلك.
* عدم تعريف الخاصيّات المرتبطة بالخاصيّة <code>[[CSS/font|font]]</code> إلا عند الضّرورة، واستخدام الكلمة المحجوزة <code>[[CSS/inherit|inherit]]</code> كلّ ما أمكن ذلك.


== الخيارات المبدئيّة للصفحات ==
== الخيارات المبدئيّة للصفحات ==
يُحدَّث العنصران <code><html></code> و <code><body></code> لتوفير قيم مبدئيّة أفضل للتطبيق على الصّفحة كاملة. خصوصًا:
يُحدَّث العنصران <code>[[HTML/html|<html>]]</code> و <code>[[HTML/body|<body>]]</code> لتوفير قيم مبدئيّة أفضل للتطبيق على الصّفحة كاملة. خصوصًا:
* تأخذ الخاصيّة <code>box-sizing</code> القيمة <code>border-box</code>على جميع العناصر؛ بما في ذلك <code>‎*‎‎::before</code> و <code>‎*::after</code> . تضمن هذه الطريقة ألّا يُتجاوز العرض المُعرَّف بسبب الهامش أو إطار العنصُر.
* تأخذ الخاصيّة <code>[[CSS/box-sizing|box-sizing]]</code> القيمة <code>border-box</code>على جميع العناصر؛ بما في ذلك <code>‎[[CSS/Universal Selector|*]]‎‎::[[CSS/::before|before]]</code> و <code>‎[[CSS/Universal Selector|*]]::[[CSS/::after|after]]</code> . تضمن هذه الطريقة ألّا يُتجاوز العرض المُعرَّف بسبب الحاشية (<code>[[CSS/padding|padding]]</code>) أو إطار العنصُر (<code>[[CSS/border|border]]</code>).
* لا تُعرَّف قيمة أساسيّة للخاصيّة <code>font-size</code> ضمن العنصُر <code><html></code>؛ إلّا أنّه يُفتَرَض أنّ القيمة تساوي <code>16px</code> (القيمة المبدئيّة في المتصفّح). تُطبَّق الخاصيّة <code>font-size: 1rem</code> على العنصُر <code><body></code> للحصول على تمدّد متجاوب باستخدام استعلامات الوسائط مع احترام تفضيلات المستخدم وضمان مقاربة يسهُل التعاطي معها.  -يعيّن العنصُر كذلك قيمًا عامةً لكلّ من الخاصيّات <code>font-family</code>و <code>line-height</code> و <code>text-align</code>. ترِث بعضٌ من عناصر الاستمارات Forms هذه القيم للحيلولة دون عدم تناسق الخطوط.
* لا تُعرَّف قيمة أساسيّة للخاصيّة <code>[[CSS/font-size|font-size]]</code> ضمن العنصُر <code>[[HTML/html|<html>]]</code>؛ إلّا أنّه يُفتَرَض أنّ القيمة تساوي <code>16px</code> (القيمة المبدئيّة في المتصفّح). تُطبَّق الخاصيّة <code>font-size: 1rem</code> على العنصُر <code><body></code> للحصول على تمدّد متجاوب باستخدام استعلامات الوسائط مع احترام تفضيلات المستخدم وضمان مقاربة يسهُل التعاطي معها.   
* يُعرّف العنصُر <code><body></code> - احتيّاطًا - القيمة المبدئيّة <code>‎#fff</code> للخاصيّة <code>background-color</code>.
* يعيّن العنصُر كذلك قيمًا عامةً لكلّ من الخاصيّات <code>[[CSS/font-family|font-family]]</code> و <code>[[CSS/line-height|line-height]]</code> و <code>[[CSS/text-align|text-align]]</code>. ترِث بعضٌ من عناصر الاستمارات Forms هذه القيم للحيلولة دون عدم تناسق الخطوط.
* يُعرّف العنصُر <code>[[HTML/body|<body>]]</code> - احتيّاطًا - القيمة المبدئيّة <code>‎#fff</code> للخاصيّة <code>[[CSS/background-color|background-color]]</code>.


== كومة الخطوط الأصيلة Native في نظام التشغيل ==
== كومة الخطوط الأصيلة Native في نظام التشغيل ==
توقّف الإصدار 4 من إطار العمل Bootstrap عن استخدام خطوط الويب المبدئية (Helvetica Neue، و Helvetica، و Arial) واستعاض عنها ب”كومة الخطوط الأصيلة” Native font stack للحصول على عرض أفضل على جميع الأجهزة وأنظمة التشغيل.<syntaxhighlight lang="sass">
توقّف الإصدار 4 من إطار العمل Bootstrap عن استخدام خطوط الويب المبدئية (Helvetica Neue، و Helvetica، و Arial) واستعاض عنها «بمجموعة الخطوط الأصيلة» (native font stack) للحصول على عرض أفضل على جميع الأجهزة وأنظمة التشغيل.<syntaxhighlight lang="sass">
$font-family-sans-serif:
$font-family-sans-serif:
   // متصفّح Safari على OS X و iOS (خطّ San Francisco)
   // متصفّح Safari على OS X و iOS (خطّ San Francisco)
سطر 29: سطر 30:
   "Roboto",
   "Roboto",
   // خطوط الويب الأساسيّة
   // خطوط الويب الأساسيّة
   "Helvetica Neue", Arial, sans-serif,
   "Helvetica Neue", Arial
  // لينيكس
  "Noto Sans",
  // Sans serif الرجوع إلى
    sans-serif,
   // خطوط الأيقونات Emoji
   // خطوط الأيقونات Emoji
   "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
   "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
</syntaxhighlight>تُطبَّق قيمة الخاصيّة <code>font-family</code> على العنصُر <code><body></code> وترثها جميع العناصر تلقائيًّا عن طريق إطار العمل Bootstrap. حدّث المتغيّر  <code>‎$font-family-base</code> ثم أعد تجميع الملفات المصدريّة لإطار العمل Bootstrap من أجل تغيير قيمة الخاصيّة <code>font-family</code>.
</syntaxhighlight>تُطبَّق قيمة الخاصيّة <code>[[CSS/font-family|font-family]]</code> على العنصُر <code>[[HTML/body|<body>]]</code> وترثها جميع العناصر تلقائيًّا عن طريق إطار العمل Bootstrap. حدّث المتغيّر  <code>‎$font-family-base</code> ثم أعد تجميع الملفات المصدريّة لإطار العمل Bootstrap من أجل تغيير قيمة الخاصيّة <code>[[CSS/font-family|font-family]]</code>.


== الترويسات والفقرات ==
== الترويسات والفقرات ==
يُعاد تعيين جميع عناصر الترويسات - مثل <code><nowiki><h1></nowiki></code> - والفقرات (<code><nowiki><p></nowiki></code>) من أجل حذف قيم الخاصيّة <code>margin-top</code>. تُضاف القيمة <code>margin-bottom: .5rem</code> إلى جميع الترويسات والقيمة <code>margin-bottom: 1rem</code> إلى الفقرات من أجل تباعد أسهل.
يُعاد تعيين جميع عناصر الترويسات - مثل <code>[[HTML/h1-h6|<nowiki><h1></nowiki>]]</code> - والفقرات (<code>[[HTML/p|<nowiki><p></nowiki>]]</code>) من أجل حذف قيم الخاصيّة <code>[[CSS/margin-top|margin-top]]</code>. تُضاف القيمة <code>[[CSS/margin-bottom|margin-bottom]]: .5rem</code> إلى جميع الترويسات والقيمة <code>margin-bottom: 1rem</code> إلى الفقرات من أجل تباعد أسهل.


== القوائم ==
== القوائم ==
يُحذَف الهامش العلويّ - الخاصيّة <code>margin-top</code> - من جميع القوائم - <code><nowiki><ul></nowiki></code>، و <code><nowiki><ol></nowiki></code>، و <code><nowiki><dl></nowiki></code> - وتُعيَّن الهوامش السفليّة بالقيمة <code>margin-bottom: 1rem</code>. لا تحوي القوائم الفرعيّة هامشًا سفليّا.
يُحذَف الهامش العلويّ - الخاصيّة <code>[[CSS/margin-top|margin-top]]</code> - من جميع القوائم - <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code>، و <code>[[HTML/optgroup|<nowiki><ol></nowiki>]]</code>، و <code>[[HTML/dl|<nowiki><dl></nowiki>]]</code> - وتُعيَّن الهوامش السفليّة بالقيمة <code>[[CSS/margin-bottom|margin-bottom]]: 1rem</code>. لا تحوي القوائم الفرعيّة هامشًا سفليّا.


تُحدَّث قيمة الهوامش في قوائم الأوصاف (<code><nowiki><dl></nowiki></code>) من أجل الحصول على تنسيق أبسط، وهرميّة أوضح وتباعد أفضل. يعيد العنصُر <code><nowiki><dd></nowiki></code>(وصف عنصُر في قائمة أوصاف) تعيين قيمة الهامش الأيسر <code>margin-left</code> إلى <code>0</code> ويضيف هامشا سفليًّا <code>margin-bottom: .5rem</code>. يظهر الخطّ في عناصر قائمة الأوصاف (<code><nowiki><dt></nowiki></code>) بخط عريض Bold.
تُحدَّث قيمة الهوامش في قوائم الوصف (<code>[[HTML/dl|<nowiki><dl></nowiki>]]</code>) من أجل الحصول على تنسيق أبسط، وهرميّة أوضح وتباعد أفضل. يعيد العنصُر <code>[[HTML/dd|<nowiki><dd></nowiki>]]</code> (وصف عنصُر في قائمة الوصف) تعيين قيمة الهامش الأيسر <code>[[CSS/margin-left|margin-left]]</code> إلى <code>0</code> ويضيف هامشا سفليًّا <code>[[CSS/margin-bottom|margin-bottom]]: .5rem</code>. يظهر الخطّ في عناصر قائمة الأوصاف (<code>[[HTML/dt|<nowiki><dt></nowiki>]]</code>) بخط عريض Bold.


== النصوص المُهيَّأة مسبقا Preformatted text ==
== النصوص المُهيَّأة مسبقًا (Preformatted text) ==
يُعاد تعيين العنصُر <code><nowiki><pre></nowiki></code> لحذف الهامش العلويّ <code>margin-top</code> واستخدام وحدات القياس <code>rem</code> للهامش السفليّ <code>margin-bottom</code>.
يُعاد تعيين العنصُر <code>[[HTML/pre|<nowiki><pre></nowiki>]]</code> لحذف الهامش العلويّ <code>[[CSS/margin-top|margin-top]]</code> واستخدام وحدات القياس <code>rem</code> للهامش السفليّ <code>[[CSS/margin-bottom|margin-bottom]]</code>.


== الجداول Tables ==
== الجداول (Tables) ==
عُدِّلت الجداول قليلًا لتنسيق عنوان الجدول (<code><nowiki><caption></nowiki></code>)، وتقليص الإطار وضمان محاذاة نصّ (<code>text-align</code>) متناسقة عبر الجدول. يتضمّن الصّنف <code>‎.table</code> تعديلات إضافيّة على أُطُر الجداول، الحاشيّات وعناصر أخرى.
عُدِّلت الجداول قليلًا لتنسيق عنوان الجدول (<code>[[HTML/caption|<nowiki><caption></nowiki>]]</code>)، وتقليص الإطار وضمان محاذاة نصّ (<code>[[CSS/text-align|text-align]]</code>) متناسقة عبر الجدول. يتضمّن الصّنف <code>‎.table</code> تعديلات إضافيّة على أُطُر الجداول والحاشيّات وعناصر أخرى.


== الاستمارات Forms ==
== الاستمارات (Forms) ==
أعيد تعيين عناصر متعدّدة في الاستمارات لإنشاء تنسيقات قاعديّة أبسط. في ما يلي بعضٌ من أكثر التعديلات أهميّة:
أعيد تعيين عناصر متعدّدة في الاستمارات لإنشاء تنسيقات قاعديّة أبسط. في ما يلي بعضٌ من أكثر التعديلات أهميّة:
* لا يوجد إطار ولا هامش ولا حاشيّة على مجموعة حقول (<code><fieldset></code>)؛ بحيث يسهُل استخدامه لتغليف المُدخلات الفرديّة أو مجموعات المُدخلات.
* لا يوجد إطار ولا هامش ولا حاشيّة على مجموعة حقول (<code>[[HTML/fieldset|<fieldset>]]</code>)؛ بحيث يسهُل استخدامه لتغليف المُدخلات الفرديّة أو مجموعات المُدخلات.
* أعيد تنسيق العناصر <code><legend></code>، كما هي حال <code><fieldset></code>، لتُعرَض على هيئة ترويسة.
* أعيد تنسيق العناصر <code>[[HTML/legend|<legend>]]</code>، كما هي حال <code>[[HTML/fieldset|<fieldset>]]</code>، لتُعرَض على هيئة ترويسة.
* عُدِّلت طريقة عرض اللافتات (<code><label></code>) لتصبح <code>display: inline-block</code> لكي يمكن تطبيق الهامش (<code>margin</code>).
* عُدِّلت طريقة عرض اللافتات (<code>[[HTML/label|<label>]]</code>) لتصبح <code>[[CSS/display|display]]: inline-block</code> لكي يمكن تطبيق الهامش (<code>[[CSS/margin|margin]]</code>) عليها.
* صحّحت تنسيقات Normalize كثيرًا من مظهر المُدخلات (<code><input></code>)، وقوائم الاختيار (<code><select></code>)، والمربّعات النصيّة (<code><textarea></code>) والأزرار (<code><button></code>)؛ إلا أنّ تنسيقات Reboot تحذف الهوامش عنها وتعيّن القيمة <code>inherit</code> لارتفاع السّطر <code>line-height: inherit</code>.
* صحّحت تنسيقات Normalize كثيرًا من مظهر الحقول (<code>[[HTML/input|<input>]]</code>)، وقوائم الاختيار (<code>[[HTML/select|<select>]]</code>)، والمربّعات النصيّة (<code>[[HTML/textarea|<textarea>]]</code>) والأزرار (<code>[[HTML/button|<button>]]</code>)؛ إلا أنّ تنسيقات Reboot تحذف الهوامش (<code>[[CSS/margin|margin]]</code>) عنها وتعيّن القيمة <code>[[CSS/inherit|inherit]]</code> لارتفاع السّطر <code>[[CSS/line-height|line-height]]: inherit</code>.
* عُدِّلت المربّعات النصيّة بحيثُ يمكن تعديل حجمها عموديًّا فقط، إذ أنّ تعديل الحجم أفقيًّا “يكسر” مُخطَّط الصفحة.
* عُدِّلت المربّعات النصيّة بحيثُ يمكن تعديل حجمها عموديًّا فقط، إذ أنّ تعديل الحجم أفقيًّا “يكسر” مُخطَّط الصفحة.
* يُعطى للعنصرين  <code><button></code>s و<code><input></code>  الخاصية <code>cursor: pointer</code> في حال كان  ‎:<code>not(:disabled)‎</code>.
== المؤشرات والأزرار ==
يوفر Reboot  تحسينا للسمة  <code>role="button"</code>لتغيير المؤشر الافتراضي إلى <code>pointer</code>. أضف هذه السمة إلى العناصر لتبيّن أنّها تفاعلية. هذا الدور ليس حكرا على الأزرار بالضرورة، والتي لها تعديلات خاصة بها فيما يخص <code>cursor</code>.


== عناصر متفرّقة ==
== عناصر متفرّقة ==


=== العنوان ===
=== العنوان ===
حُدِّث عنصُر العنوان (<code><address></code>) ليعيد تعيين القيمة المبدئيّة للخاصيّة <code>font-style</code> من <code>italic</code> إلى <code>normal</code>. كما أصبح يرِث قيمة الخاصيّة <code>line-height</code> وأضيفت إليه حاشيّة سفليّة بقيمة <code>1rem</code>. يوفرّ العنصُر <code><address></code> معلومات التواصل للمحتوى الموجود في أقرب عنصر أب (أو لكامل المستنَد). حافظ على تهيئة الحقول باستخدام عناصر عودة للسّطر <code><nowiki><br></nowiki></code>.
حُدِّث عنصُر العنوان (<code>[[HTML/address|<address>]]</code>) ليعيد تعيين القيمة المبدئيّة للخاصيّة <code>[[CSS/font-style|font-style]]</code> من <code>italic</code> إلى <code>normal</code>. كما أصبح يرِث قيمة الخاصيّة <code>[[CSS/line-height|line-height]]</code> وأضيفت إليه حاشيّة سفليّة بقيمة <code>1rem</code>. يوفرّ العنصُر <code>[[HTML/address|<address>]]</code> معلومات التواصل للمحتوى الموجود في أقرب عنصر أب (أو لكامل المستنَد). حافظ على تهيئة الحقول باستخدام عناصر الانتقال إلى سطرٍ جديد <code>[[HTML/br|<nowiki><br></nowiki>]]</code>.


=== الاقتباس ===
=== الاقتباس ===
أعيد تعيين القيمة المبدئية للهامش (<code>margin</code>) في الاقتباسات (<code>blockquote</code>) من <code>1em 40px</code> إلى <code>0 0 1rem</code> لتكون أكثر تناسقًا مع بقيّة العناصر.
أعيد تعيين القيمة المبدئية للهامش (<code>[[CSS/margin|margin]]</code>) في الاقتباسات (<code>[[HTML/blockquote|blockquote]]</code>) من <code>1em 40px</code> إلى <code>0 0 1rem</code> لتكون أكثر تناسقًا مع بقيّة العناصر.


=== العناصر السطريّة Inline elements ===
=== العناصر السطريّة Inline elements ===
تلقّى عنصُر الاختصار <code><nowiki><abbr></nowiki></code> تنسيقات قاعديّة لجعله يبرُز في نصّ الفقرة.
تلقّى عنصُر الاختصار <code>[[HTML/abbr|<nowiki><abbr></nowiki>]]</code> تنسيقات قاعديّة لجعله يبرُز في نصّ الفقرة.


=== العنصُر <code><summary></code> ===
=== العنصُر <code>[[HTML/summary|<summary>]]</code> ===
تأخذ الخاصيّة [[CSS/cursor|<code>cursor</code>]] في العنصُر <code><summary></code> مبدئيًّا القيمة <code>text</code>، لذا أعيد تعيينها لتكون <code>pointer</code> ويظهر بالتالي أنّه يمكن التفاعل معه بالنقر عليه.
تأخذ الخاصيّة <code>[[CSS/cursor|cursor]]</code> في العنصُر <code>[[HTML/summary|<summary>]]</code> مبدئيًّا القيمة <code>text</code>، لذا أعيد تعيينها لتكون <code>pointer</code> ويظهر بالتالي أنّه يمكن التفاعل معه بالنقر عليه.


== الخاصيّة <code>[hidden]</code> في HTML5 ==
== الخاصيّة <code>[hidden]</code> في HTML5 ==
يضيف HTML5 [[HTML/Global Attributes#hidden|خاصيّة عامّة جديدة تُسمَّى <code>[hidden]</code>]] تُنسَّق مبدئيًّا حسب طريقة العرض <code>display: none</code>. استعار Reboot فكرة من [https://purecss.io/ PureCSS] تقضي بتحسين طريقة العرض المبدئيّة لتصبح <code>‎[hidden] { display: none !important; }</code> ممّا يحول دون إبطال قيمة الخاصيّة <code>display</code> عن غير قصد. لا يدعم الإصدار 10 من Internet Explorer الخاصيّة <code>[hidden]</code> إلّا أنّ تعريفها بصراحة ضمن شفرة CSS الخاصّة بإطار العمل يتلافى هذه المشكلة.<syntaxhighlight lang="html">
يضيف HTML5 [[HTML/Global Attributes#hidden|خاصيّة عامّة جديدة تُسمَّى <code>[hidden]</code>]] تُنسَّق مبدئيًّا حسب طريقة العرض <code>[[CSS/display|display]]: none</code>. استعار Reboot فكرة من [https://purecss.io/ PureCSS] تقضي بتحسين طريقة العرض المبدئيّة لتصبح <code>‎[hidden] { display: none !important; }‎</code> ممّا يحول دون إبطال قيمة الخاصيّة <code>[[CSS/display|display]]</code> عن غير قصد. لا يدعم الإصدار 10 من Internet Explorer الخاصيّة <code>[hidden]</code> إلّا أنّ تعريفها بصراحة ضمن شفرة CSS الخاصّة بإطار العمل يتلافى هذه المشكلة.<syntaxhighlight lang="html">
<input type="text" hidden>
<input type="text" hidden>
</syntaxhighlight>
</syntaxhighlight>


===== تحذير: غياب التوافق مع jQuery =====
===== تحذير: غياب التوافق مع jQuery =====
لا تتوافق الخاصيّة <code>[hidden]</code> مع التابعيْن  <code>‎$(...).hide()‎</code> و <code>‎$(...).show()‎</code> في jQuery. لهذا السّبب لا يُفضّل إطار العمل Bootstrap استخدام الخاصيّة <code>[hidden]</code> بدلا من الطرُق الأخرى للتحكّم في الخاصيّة <code>display</code>.
لا تتوافق الخاصيّة <code>[hidden]</code> مع التابعيْن  <code>‎$(...).hide()‎</code> و <code>‎$(...).show()‎</code> في jQuery. لهذا السّبب لا يُفضّل إطار العمل Bootstrap استخدام الخاصيّة <code>[hidden]</code> بدلًا من الطرائق الأخرى للتحكّم في الخاصيّة <code>[[CSS/display|display]]</code>.


استخدم [[Bootstrap/visibility|الصّنف <code>‎.invisible</code>]] إنْ كان كلّ ما تريده هو تبديل قابليّة رؤية عنصُر؛ بمعنى أنّ قيمة الخاصيّة <code>display</code> تبقى كما هي، وأنّ العنصُر يؤثّر على تدفّق المستند.
استخدم [[Bootstrap/visibility|الصّنف <code>‎.invisible</code>]] إنْ كان كلّ ما تريده هو تبديل قابليّة رؤية عنصُر؛ بمعنى أنّ قيمة الخاصيّة <code>[[CSS/display|display]]</code> تبقى كما هي، وأنّ العنصُر يؤثّر على تدفّق المستند.


== المصدر ==
== مصادر ==
* [https://getbootstrap.com/docs/4.0/content/reboot/ صفحة Reboot في توثيق Bootstrap].
* [https://getbootstrap.com/docs/4.5/content/reboot/ صفحة Reboot في توثيق Bootstrap].
[[تصنيف:Bootstrap]]
[[تصنيف:Bootstrap|{{SUBPAGENAME}}]]
[[تصنيف:Bootstrap content|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 07:54، 13 يوليو 2020

يوفّر Reboot - وهو مجموعة من تعديلات CSS خاصّة ببعض العناصر وتوجد في ملفّ واحد - أساس عمل بسيط، ومتناسق وأنيق يُبنى عليه إطار العمل Bootstrap.

المقاربة المستخدَمة في Reboot

يعتمد Reboot على مشروع Normalize ويوفّر عناصر HTML عدّة بتنسيقات مُختارة تقتصر على استخدام محدّدات CSS فقط. تُطبَّق التنسيقات الإضافيّة باستخدام الأصناف فقط. على سبيل المثال، يستخدم إطار العمل Bootstrap تنسيقات Reboot لإعداد أساس عمل قاعدي لتنسيق الجداول <table> ثم يوفّر لاحقًا الصّنفيْن ‎‎.tableو ‎‎.table-bordered وغيرهما لعمل تنسيقات إضافيّة على الجداول.

نذكر في ما يلي قواعد عامّة وأسبابًا لاختيّار التنسيقات الموجودة في Reboot وتطبيق مفعولها:

  • تحديث القيم المبدئيّة في بعضٍ من المتصفّحات من أجل استخدام وحدة القياس rem بدلًا من em للحصول على تباعد قابل للتمديد (scalable) بين المكوّنات.
  • تجنّب الخاصيّة margin-top. تتميّز الحاشيّات العموديّة بأنّها تتقلّص (collapse)، ممّا ينتُج عنه نتائج غير متوقَّعة؛ والأمر الأهمّ أنّ اتّخاذ اتّجاه واحد للحاشيّات يعدّ نموذجًا ذهنيًّا أسهل.
  • يجب أن تستخدم العناصر الكتليّة (block elements) وحدة القياس rem في الحاشيّات وذلك بهدف تمدّد أسهل عبر مختلف قياسات الأجهزة.
  • عدم تعريف الخاصيّات المرتبطة بالخاصيّة font إلا عند الضّرورة، واستخدام الكلمة المحجوزة inherit كلّ ما أمكن ذلك.

الخيارات المبدئيّة للصفحات

يُحدَّث العنصران <html> و <body> لتوفير قيم مبدئيّة أفضل للتطبيق على الصّفحة كاملة. خصوصًا:

  • تأخذ الخاصيّة box-sizing القيمة border-boxعلى جميع العناصر؛ بما في ذلك ‎*‎‎::before و ‎*::after . تضمن هذه الطريقة ألّا يُتجاوز العرض المُعرَّف بسبب الحاشية (padding) أو إطار العنصُر (border).
  • لا تُعرَّف قيمة أساسيّة للخاصيّة font-size ضمن العنصُر <html>؛ إلّا أنّه يُفتَرَض أنّ القيمة تساوي 16px (القيمة المبدئيّة في المتصفّح). تُطبَّق الخاصيّة font-size: 1rem على العنصُر <body> للحصول على تمدّد متجاوب باستخدام استعلامات الوسائط مع احترام تفضيلات المستخدم وضمان مقاربة يسهُل التعاطي معها.
  • يعيّن العنصُر كذلك قيمًا عامةً لكلّ من الخاصيّات font-family و line-height و text-align. ترِث بعضٌ من عناصر الاستمارات Forms هذه القيم للحيلولة دون عدم تناسق الخطوط.
  • يُعرّف العنصُر <body> - احتيّاطًا - القيمة المبدئيّة ‎#fff للخاصيّة background-color.

كومة الخطوط الأصيلة Native في نظام التشغيل

توقّف الإصدار 4 من إطار العمل Bootstrap عن استخدام خطوط الويب المبدئية (Helvetica Neue، و Helvetica، و Arial) واستعاض عنها «بمجموعة الخطوط الأصيلة» (native font stack) للحصول على عرض أفضل على جميع الأجهزة وأنظمة التشغيل.

$font-family-sans-serif:
  // متصفّح Safari على OS X و iOS (خطّ San Francisco)
  -apple-system,
  // Chrome < 56 على نظام OS X (خطّ San Francisco)
  BlinkMacSystemFont,
  // وندوز
  "Segoe UI",
  // أندرويد
  "Roboto",
  // خطوط الويب الأساسيّة
  "Helvetica Neue", Arial
  // لينيكس
  "Noto Sans",
  // Sans serif الرجوع إلى 
    sans-serif,
  // خطوط الأيقونات Emoji
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

تُطبَّق قيمة الخاصيّة font-family على العنصُر <body> وترثها جميع العناصر تلقائيًّا عن طريق إطار العمل Bootstrap. حدّث المتغيّر ‎$font-family-base ثم أعد تجميع الملفات المصدريّة لإطار العمل Bootstrap من أجل تغيير قيمة الخاصيّة font-family.

الترويسات والفقرات

يُعاد تعيين جميع عناصر الترويسات - مثل <h1> - والفقرات (<p>) من أجل حذف قيم الخاصيّة margin-top. تُضاف القيمة margin-bottom: .5rem إلى جميع الترويسات والقيمة margin-bottom: 1rem إلى الفقرات من أجل تباعد أسهل.

القوائم

يُحذَف الهامش العلويّ - الخاصيّة margin-top - من جميع القوائم - <ul>، و <ol>، و <dl> - وتُعيَّن الهوامش السفليّة بالقيمة margin-bottom: 1rem. لا تحوي القوائم الفرعيّة هامشًا سفليّا.

تُحدَّث قيمة الهوامش في قوائم الوصف (<dl>) من أجل الحصول على تنسيق أبسط، وهرميّة أوضح وتباعد أفضل. يعيد العنصُر <dd> (وصف عنصُر في قائمة الوصف) تعيين قيمة الهامش الأيسر margin-left إلى 0 ويضيف هامشا سفليًّا margin-bottom: .5rem. يظهر الخطّ في عناصر قائمة الأوصاف (<dt>) بخط عريض Bold.

النصوص المُهيَّأة مسبقًا (Preformatted text)

يُعاد تعيين العنصُر <pre> لحذف الهامش العلويّ margin-top واستخدام وحدات القياس rem للهامش السفليّ margin-bottom.

الجداول (Tables)

عُدِّلت الجداول قليلًا لتنسيق عنوان الجدول (<caption>)، وتقليص الإطار وضمان محاذاة نصّ (text-align) متناسقة عبر الجدول. يتضمّن الصّنف ‎.table تعديلات إضافيّة على أُطُر الجداول والحاشيّات وعناصر أخرى.

الاستمارات (Forms)

أعيد تعيين عناصر متعدّدة في الاستمارات لإنشاء تنسيقات قاعديّة أبسط. في ما يلي بعضٌ من أكثر التعديلات أهميّة:

  • لا يوجد إطار ولا هامش ولا حاشيّة على مجموعة حقول (<fieldset>)؛ بحيث يسهُل استخدامه لتغليف المُدخلات الفرديّة أو مجموعات المُدخلات.
  • أعيد تنسيق العناصر <legend>، كما هي حال <fieldset>، لتُعرَض على هيئة ترويسة.
  • عُدِّلت طريقة عرض اللافتات (<label>) لتصبح display: inline-block لكي يمكن تطبيق الهامش (margin) عليها.
  • صحّحت تنسيقات Normalize كثيرًا من مظهر الحقول (<input>)، وقوائم الاختيار (<select>)، والمربّعات النصيّة (<textarea>) والأزرار (<button>)؛ إلا أنّ تنسيقات Reboot تحذف الهوامش (margin) عنها وتعيّن القيمة inherit لارتفاع السّطر line-height: inherit.
  • عُدِّلت المربّعات النصيّة بحيثُ يمكن تعديل حجمها عموديًّا فقط، إذ أنّ تعديل الحجم أفقيًّا “يكسر” مُخطَّط الصفحة.
  • يُعطى للعنصرين <button>s و<input> الخاصية cursor: pointer في حال كان ‎:not(:disabled)‎.

المؤشرات والأزرار

يوفر Reboot  تحسينا للسمة  role="button"لتغيير المؤشر الافتراضي إلى pointer. أضف هذه السمة إلى العناصر لتبيّن أنّها تفاعلية. هذا الدور ليس حكرا على الأزرار بالضرورة، والتي لها تعديلات خاصة بها فيما يخص cursor.

عناصر متفرّقة

العنوان

حُدِّث عنصُر العنوان (<address>) ليعيد تعيين القيمة المبدئيّة للخاصيّة font-style من italic إلى normal. كما أصبح يرِث قيمة الخاصيّة line-height وأضيفت إليه حاشيّة سفليّة بقيمة 1rem. يوفرّ العنصُر <address> معلومات التواصل للمحتوى الموجود في أقرب عنصر أب (أو لكامل المستنَد). حافظ على تهيئة الحقول باستخدام عناصر الانتقال إلى سطرٍ جديد <br>.

الاقتباس

أعيد تعيين القيمة المبدئية للهامش (margin) في الاقتباسات (blockquote) من 1em 40px إلى 0 0 1rem لتكون أكثر تناسقًا مع بقيّة العناصر.

العناصر السطريّة Inline elements

تلقّى عنصُر الاختصار <abbr> تنسيقات قاعديّة لجعله يبرُز في نصّ الفقرة.

العنصُر <summary>

تأخذ الخاصيّة cursor في العنصُر <summary> مبدئيًّا القيمة text، لذا أعيد تعيينها لتكون pointer ويظهر بالتالي أنّه يمكن التفاعل معه بالنقر عليه.

الخاصيّة [hidden] في HTML5

يضيف HTML5 خاصيّة عامّة جديدة تُسمَّى [hidden] تُنسَّق مبدئيًّا حسب طريقة العرض display: none. استعار Reboot فكرة من PureCSS تقضي بتحسين طريقة العرض المبدئيّة لتصبح ‎[hidden] { display: none !important; }‎ ممّا يحول دون إبطال قيمة الخاصيّة display عن غير قصد. لا يدعم الإصدار 10 من Internet Explorer الخاصيّة [hidden] إلّا أنّ تعريفها بصراحة ضمن شفرة CSS الخاصّة بإطار العمل يتلافى هذه المشكلة.

<input type="text" hidden>
تحذير: غياب التوافق مع jQuery

لا تتوافق الخاصيّة [hidden] مع التابعيْن ‎$(...).hide()‎ و ‎$(...).show()‎ في jQuery. لهذا السّبب لا يُفضّل إطار العمل Bootstrap استخدام الخاصيّة [hidden] بدلًا من الطرائق الأخرى للتحكّم في الخاصيّة display.

استخدم الصّنف ‎.invisible إنْ كان كلّ ما تريده هو تبديل قابليّة رؤية عنصُر؛ بمعنى أنّ قيمة الخاصيّة display تبقى كما هي، وأنّ العنصُر يؤثّر على تدفّق المستند.

مصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=Bootstrap/reboot&oldid=29695»