الفرق بين المراجعتين ل"Bootstrap/reboot"
اذهب إلى التنقل
اذهب إلى البحث
العنصُر
(إضافة عنوان) |
(إضافة روابط وتعديلات عامة) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:مجموعة تنسيقات Reboot في إطار العمل Bootstrap}}</noinclude> | <noinclude>{{DISPLAYTITLE:مجموعة تنسيقات Reboot في إطار العمل Bootstrap}}</noinclude> | ||
| − | يوفّر Reboot - وهو مجموعة من تعديلات CSS خاصّة ببعض العناصر وتوجد في ملفّ واحد - أساس عمل | + | يوفّر 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> للحصول على تباعد قابل للتمديد | + | * تحديث القيم المبدئيّة في بعضٍ من المتصفّحات من أجل استخدام وحدة القياس <code>rem</code> بدلًا من <code>em</code> للحصول على تباعد قابل للتمديد (scalable) بين المكوّنات. |
| − | * تجنّب الخاصيّة <code>margin-top</code>. تتميّز الحاشيّات العموديّة بأنّها | + | * تجنّب الخاصيّة <code>[[CSS/margin-top|margin-top]]</code>. تتميّز الحاشيّات العموديّة بأنّها تتقلّص (collapse)، ممّا ينتُج عنه نتائج غير متوقَّعة؛ والأمر الأهمّ أنّ اتّخاذ اتّجاه واحد للحاشيّات يعدّ نموذجًا ذهنيًّا أسهل. |
| − | * يجب أن تستخدم العناصر الكتليّة | + | * يجب أن تستخدم العناصر الكتليّة (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>[[CSS/font-family|font-family]]</code> و <code>[[CSS/line-height|line-height]]</code> و <code>[[CSS/text-align|text-align]]</code>. ترِث بعضٌ من عناصر الاستمارات Forms هذه القيم للحيلولة دون عدم تناسق الخطوط. |
| − | * يُعرّف العنصُر <code><body></code> - احتيّاطًا - القيمة المبدئيّة <code>#fff</code> للخاصيّة <code>background-color</code>. | + | * يُعرّف العنصُر <code>[[HTML/body|<body>]]</code> - احتيّاطًا - القيمة المبدئيّة <code>#fff</code> للخاصيّة <code>[[CSS/background-color|background-color]]</code>. |
== كومة الخطوط الأصيلة Native في نظام التشغيل == | == كومة الخطوط الأصيلة Native في نظام التشغيل == | ||
| − | توقّف الإصدار 4 من إطار العمل Bootstrap عن استخدام خطوط الويب المبدئية (Helvetica Neue، و Helvetica، و | + | توقّف الإصدار 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) | ||
| سطر 32: | سطر 32: | ||
// خطوط الأيقونات Emoji | // خطوط الأيقونات Emoji | ||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; | "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !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>[[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) == |
| − | يُعاد تعيين العنصُر <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 كثيرًا من مظهر | + | * صحّحت تنسيقات 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>. |
* عُدِّلت المربّعات النصيّة بحيثُ يمكن تعديل حجمها عموديًّا فقط، إذ أنّ تعديل الحجم أفقيًّا “يكسر” مُخطَّط الصفحة. | * عُدِّلت المربّعات النصيّة بحيثُ يمكن تعديل حجمها عموديًّا فقط، إذ أنّ تعديل الحجم أفقيًّا “يكسر” مُخطَّط الصفحة. | ||
| سطر 59: | سطر 59: | ||
=== العنوان === | === العنوان === | ||
| − | حُدِّث عنصُر العنوان (<code><address></code>) ليعيد تعيين القيمة المبدئيّة للخاصيّة <code>font-style</code> من <code>italic</code> إلى <code>normal</code>. كما أصبح يرِث قيمة الخاصيّة <code>line-height</code> وأضيفت إليه حاشيّة سفليّة بقيمة <code>1rem</code>. يوفرّ العنصُر <code><address></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>[[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>[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.0/content/reboot/ صفحة Reboot في توثيق Bootstrap]. | ||
[[تصنيف:Bootstrap]] | [[تصنيف:Bootstrap]] | ||
مراجعة 05:28، 20 مارس 2018
يوفّر 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, sans-serif,
// خطوط الأيقونات Emoji
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !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. - عُدِّلت المربّعات النصيّة بحيثُ يمكن تعديل حجمها عموديًّا فقط، إذ أنّ تعديل الحجم أفقيًّا “يكسر” مُخطَّط الصفحة.
عناصر متفرّقة
العنوان
حُدِّث عنصُر العنوان (<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 ويظهر بالتالي أنّه يمكن التفاعل معه بالنقر عليه.
يضيف 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 تبقى كما هي، وأنّ العنصُر يؤثّر على تدفّق المستند.