CSS

يحدد المتصفح الأنماط التي يجب عرضها على عنصر بناءً على خصوصية قواعد CSS. نفترض أن المتصفح قد حدد بالفعل القواعد التي تطابق عنصرًا معينًا. من بين القواعد المطابقة، يتم حساب الخصوصية، وهي أربع قيم مفصولة بفاصلة، a, b, c, d لكل قاعدة بناءً على ما يلي:

1. a ما إذا كانت الأنماط المضمنة مستخدمة. إذا كان إعلان الخاصية نمطًا مضمنًا على العنصر، فإن a يساوي 1، وإلا فهو 0.
2. b هو عدد محددات الهوية (ID selectors).
3. c هو عدد محددات الفئات والسمات والفئات الزائفة (classes, attributes and pseudo-classes selectors).
4. d هو عدد محددات الوسوم والعناصر الزائفة (tags and pseudo-elements selectors).

الخصوصية الناتجة ليست درجة، بل مصفوفة من القيم يمكن مقارنتها عمودًا بعمود. عند مقارنة المحددات لتحديد أي منها يتمتع بأعلى خصوصية، انظر من اليسار إلى اليمين، وقارن أعلى قيمة في كل عمود. لذا فإن قيمة في العمود b ستتجاوز القيم في العمودين c و d، مهما كانت. وعلى هذا النحو، فإن خصوصية 0,1,0,0 ستكون أكبر من 0,0,10,10.

في حالات الخصوصية المتساوية: القاعدة الأحدث هي التي تُحتسب. إذا كنت قد كتبت نفس القاعدة في ورقة الأنماط الخاصة بك (بغض النظر عما إذا كانت داخلية أو خارجية) مرتين، فإن القاعدة السفلية في ورقة الأنماط الخاصة بك هي الأقرب إلى العنصر المراد تصميمه، وتعتبر أكثر تحديدًا وبالتالي سيتم تطبيقها.

سأكتب قواعد CSS بخصوصية منخفضة بحيث يمكن تجاوزها بسهولة إذا لزم الأمر. عند كتابة كود مكتبة مكونات واجهة المستخدم CSS، من المهم أن تكون لها خصوصية منخفضة حتى يتمكن مستخدمو المكتبة من تجاوزها دون استخدام قواعد CSS معقدة للغاية لمجرد زيادة الخصوصية أو اللجوء إلى !important.

• إعادة التعيين (Resetting) - تهدف إعادة التعيين إلى إزالة جميع أنماط المتصفح الافتراضية من العناصر. على سبيل المثال، يتم إعادة تعيين margins و paddings و font-sizes لجميع العناصر لتكون متماثلة. سيتعين عليك إعادة تعريف التنسيق للعناصر الطباعية الشائعة.
• التطبيع (Normalizing) - يحافظ التطبيع على الأنماط الافتراضية المفيدة بدلاً من "إزالة التنسيق" لكل شيء. كما أنه يصحح الأخطاء في تبعيات المتصفح الشائعة.

سأختار إعادة التعيين عندما يكون لدي تصميم موقع مخصص للغاية أو غير تقليدي بحيث أحتاج إلى الكثير من التنسيق الخاص بي ولا أحتاج إلى الحفاظ على أي تنسيق افتراضي.

Float هي خاصية تحديد موضع CSS. تظل العناصر العائمة جزءًا من تدفق الصفحة، وستؤثر على موضع العناصر الأخرى (مثل تدفق النص حول العناصر العائمة)، على عكس عناصر position: absolute، التي تُزال من تدفق الصفحة.

يمكن استخدام خاصية clear في CSS لتحديد موضعها أسفل العناصر العائمة left/right/both.

إذا كان العنصر الأصلي لا يحتوي إلا على عناصر عائمة، فسوف ينهار ارتفاعه إلى لا شيء. يمكن إصلاحه عن طريق مسح العوم بعد العناصر العائمة في الحاوية ولكن قبل إغلاق الحاوية.

تستخدم خدعة .clearfix CSS محددًا زائفًا ذكيًا (::after) لمسح العوامات. بدلاً من تعيين تجاوز (overflow) على العنصر الأصلي، يمكنك تطبيق فئة إضافية clearfix عليه. ثم قم بتطبيق CSS هذا:

.clearfix::after {
  content: ' ';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

بدلاً من ذلك، أعط خاصية overflow: auto أو overflow: hidden للعنصر الأصلي التي ستنشئ سياق تنسيق كتلة جديد داخل العناصر التابعة وسوف تتوسع لاحتواء عناصرها التابعة.

تتحكم خاصية z-index في CSS في ترتيب التراص الرأسي للعناصر المتداخلة. يؤثر z-index فقط على العناصر التي لديها قيمة position ليست static.

بدون أي قيمة z-index، تتراص العناصر بالترتيب الذي تظهر به في DOM (العنصر الأدنى في نفس المستوى الهرمي يظهر في الأعلى). العناصر ذات الموضع غير الثابت (وأطفالها) ستظهر دائمًا فوق العناصر ذات الموضع الثابت الافتراضي، بغض النظر عن التسلسل الهرمي لـ HTML.

سياق التراص هو عنصر يحتوي على مجموعة من الطبقات. ضمن سياق التراص المحلي، يتم تعيين قيم z-index لأطفالها بالنسبة إلى هذا العنصر بدلاً من الجذر المستند. لا يمكن للطبقات خارج هذا السياق - أي العناصر الشقيقة لسياق التراص المحلي - الجلوس بين الطبقات داخلها. إذا كان العنصر B يقع فوق العنصر A، فإن العنصر C، وهو ابن العنصر A، لا يمكن أبدًا أن يكون أعلى من العنصر B حتى لو كان للعنصر C قيمة z-index أعلى من العنصر B.

كل سياق تراص مكتفٍ ذاتيًا - بعد تراص محتويات العنصر، يتم اعتبار العنصر بأكمله في ترتيب التراص لسياق التراص الأصلي. عدد قليل من خصائص CSS تُطلق سياق تراص جديد، مثل opacity أقل من 1، filter ليس none، و transform ليس none.

_ملاحظة: ما الذي يؤهل العنصر بالضبط لإنشاء سياق تراص مذكور في هذه المجموعة الطويلة من [القواعد].

سياق التنسيق الكتلي (BFC) هو جزء من عرض CSS المرئي لصفحة الويب حيث يتم وضع مربعات الكتل. العناصر العائمة (floats)، العناصر الموضوعة بشكل مطلق (absolutely positioned elements)، inline-blocks، table-cells، table-captions، والعناصر ذات overflow بخلاف visible (باستثناء عندما تكون هذه القيمة قد انتشرت إلى منفذ العرض) تنشئ سياقات تنسيق كتل جديدة.

معرفة كيفية إنشاء سياق تنسيق كتلة مهمة، لأنه بدون القيام بذلك، لن يحتوي الصندوق الحاوي على [عناصر فرعية عائمة]. هذا مشابه لانهيار الهوامش، ولكنه أكثر خبثًا حيث ستجد صناديق كاملة تنهار بطرق غريبة.

BFC هو مربع HTML يستوفي شرطًا واحدًا على الأقل من الشروط التالية:

• قيمة float ليست none.
• قيمة position ليست static ولا relative.
• قيمة display هي table-cell، table-caption، inline-block، flex، أو inline-flex، grid، أو inline-grid.
• قيمة overflow ليست visible.

في BFC، تلامس الحافة الخارجية اليسرى لكل مربع الحافة اليسرى للكتلة المحتوية (للتنسيق من اليمين إلى اليسرى، تلامس الحواف اليمنى).

تنهار الهوامش العمودية بين مربعات مستوى الكتلة المتجاورة في BFC. اقرأ المزيد عن [انهيار الهوامش].

• طريقة div الفارغة - <div style="clear:both;"></div>.
• طريقة Clearfix - ارجع إلى فئة .clearfix أعلاه.
• طريقة overflow: auto أو overflow: hidden - سيُنشئ العنصر الأب سياق تنسيق كتلة جديد ويتوسع ليحتوي على العناصر الفرعية العائمة.

في المشاريع الكبيرة، سأكتب فئة مساعدة .clearfix وأستخدمها في الأماكن التي أحتاجها. قد يؤدي overflow: hidden إلى قص العناصر الفرعية إذا كانت أطول من العنصر الأب وليس مثاليًا جدًا.

تجمع CSS sprites صورًا متعددة في صورة واحدة أكبر. إنها تقنية شائعة الاستخدام للأيقونات (يستخدمها Gmail). كيفية تطبيقها:

1. استخدم مولد الرسوم المتحركة الذي يجمع صورًا متعددة في صورة واحدة ويولد CSS المناسب لها.
2. ستحتوي كل صورة على فئة CSS مقابلة مع خصائص background-image و background-position و background-size المعرفة.
3. لاستخدام تلك الصورة، أضف الفئة المقابلة إلى عنصرك.

المزايا:

• تقليل عدد طلبات HTTP لصور متعددة (مطلوب طلب واحد فقط لكل ورقة رسوم متحركة). ولكن مع HTTP2، لم يعد تحميل صور متعددة يمثل مشكلة كبيرة.
• تنزيل مسبق للأصول التي لن يتم تنزيلها إلا عند الحاجة، مثل الصور التي تظهر فقط عند حالات شبه ::hover. لن يُرى وميض.

• بعد تحديد المشكلة والمتصفح المتسبب فيها، استخدم ورقة أنماط منفصلة لا تُحمل إلا عند استخدام هذا المتصفح المحدد. تتطلب هذه التقنية العرض من جانب الخادم (server-side rendering) على الرغم من ذلك.
• استخدم مكتبات مثل Bootstrap التي تتعامل بالفعل مع مشكلات التنسيق هذه نيابة عنك.
• استخدم autoprefixer لإضافة بادئات البائعين تلقائيًا إلى الكود الخاص بك.
• استخدم Reset CSS أو Normalize.css.
• إذا كنت تستخدم Postcss (أو مكتبة تحويل مشابهة)، فقد تكون هناك مكونات إضافية تسمح لك باختيار استخدام بناء جملة CSS الحديث (وحتى مقترحات W3C) التي ستحول تلك الأقسام من الكود الخاص بك إلى كود آمن مطابق سيعمل في الأهداف التي استخدمتها.

• التدهور المتسامح (Graceful degradation) - ممارسة بناء تطبيق للمتصفحات الحديثة مع ضمان بقائه وظيفيًا في المتصفحات القديمة.
• التحسين التدريجي (Progressive enhancement) - ممارسة بناء تطبيق لمستوى أساسي من تجربة المستخدم، ولكن إضافة تحسينات وظيفية عندما يدعمها المتصفح.
• استخدم [caniuse.com] للتحقق من دعم الميزات.
• Autoprefixer لإدراج بادئات البائعين تلقائيًا.
• الكشف عن الميزات باستخدام [Modernizr].
• استخدم استعلامات ميزات CSS [@support]

ترتبط هذه التقنيات بإمكانية الوصول (a11y).

• width: 0; height: 0. اجعل العنصر لا يشغل أي مساحة على الشاشة على الإطلاق، مما يؤدي إلى عدم إظهاره.
• position: absolute; left: -99999px. ضعه خارج الشاشة.
• text-indent: -9999px. يعمل هذا فقط على النص داخل عناصر block. هذه خدعة شائعة الاستخدام ومشهورة، ولكن لها [بعض العيوب] مثل التسبب في مشاكل في الأداء، لذلك قد ترغب في التفكير في استخدام text-indent: 100% بدلاً من ذلك.
• العلامات الوصفية (Meta tags). على سبيل المثال باستخدام Schema.org و RDF و JSON-LD.
• WAI-ARIA. مواصفة فنية من W3C تحدد كيفية زيادة إمكانية الوصول إلى صفحات الويب.

حتى لو كان WAI-ARIA هو الحل المثالي، فسأختار نهج تحديد الموضع absolute، لأنه الأقل من حيث المحاذير، ويعمل مع معظم العناصر وهو أسلوب سهل.

قبل أن يصبح Flex شائعًا (حوالي عام 2014)، كان نظام الشبكة القائم على float هو الأكثر موثوقية لأنه لا يزال يتمتع بأكبر دعم للمتصفحات بين الأنظمة البديلة الموجودة (flex، grid). استخدم Bootstrap نهج float حتى Bootstrap 4 الذي تحول إلى نهج flex. في وقت كتابة هذا (2020)، يُعد flex النهج الموصى به لبناء أنظمة الشبكة ولديه [دعم متصفح جيد].

بالنسبة للمغامرين، يمكنهم البحث في [تخطيط شبكة CSS]، والذي يستخدم خاصية grid الجديدة اللامعة؛ وهو أفضل حتى من flex لبناء تخطيطات الشبكة وسيكون الطريقة الفعلية للقيام بذلك في المستقبل.

نعم. مثال على ذلك هو تحويل نظام التنقل المكدس (stacked pill navigation) إلى نظام تنقل علامات التبويب الثابت في الأسفل (fixed-bottom tab navigation) بعد نقطة توقف معينة (breakpoint).

نعم، هناك عدة طرق لتلوين الأشكال (بما في ذلك تحديد السمات على الكائن) باستخدام CSS المضمن، أو قسم CSS مضمن، أو ملف CSS خارجي. معظم SVG الذي ستجده على الويب يستخدم CSS المضمن، ولكن هناك مزايا وعيوب مرتبطة بكل نوع.

يمكن إجراء التلوين الأساسي عن طريق تعيين سمتين على العقدة: fill و stroke. تحدد fill اللون داخل الكائن وتحدد stroke لون الخط المرسوم حول الكائن. يمكنك استخدام نفس مخططات ألوان CSS التي تستخدمها في HTML، سواء كانت أسماء ألوان (أي red)، أو قيم RGB (أي rgb(255,0,0))، أو قيم Hex، أو قيم RGBA، إلخ.

<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8" />

fill="purple" أعلاه هو مثال على سمة عرض. ومن المثير للاهتمام، وعلى عكس الأنماط المضمنة مثل style="fill: purple" التي تُعد أيضًا سمة، يمكن [تجاوز سمات العرض بواسطة أنماط CSS] المعرفة في ورقة الأنماط. لذا، إذا قمت بشيء مثل svg { fill: blue; } فإنه سيتجاوز التعبئة الأرجوانية التي حددناها.

نعم، هناك أربعة أنواع من خصائص @media (بما في ذلك screen):

• all - لجميع أجهزة نوع الوسائط
• print - للطابعات
• speech - لقارئات الشاشة التي "تقرأ" الصفحة بصوت عالٍ
• screen - لشاشات الكمبيوتر والأجهزة اللوحية والهواتف الذكية وما إلى ذلك.

إليك مثال على استخدام نوع وسائط print:

@media print {
  body {
    color: black;
  }
}

أولاً، افهم أن المتصفحات تطابق المحددات من اليمين إلى اليسار (محدد المفتاح). تقوم المتصفحات بتصفية العناصر في DOM وفقًا لمحدد المفتاح وتتنقل لأعلى عبر العناصر الأبوية لتحديد التطابقات. كلما كان طول سلسلة المحدد أقصر، زادت سرعة المتصفح في تحديد ما إذا كان هذا العنصر يطابق المحدد. وبالتالي، تجنب المحددات الرئيسية التي هي علامات ومحددات عالمية. فهي تطابق عددًا كبيرًا من العناصر وستضطر المتصفحات إلى بذل المزيد من الجهد في تحديد ما إذا كانت العناصر الأبوية تطابق أم لا.

توصي منهجية [BEM (Block Element Modifier)] بأن يكون لكل شيء فئة واحدة، وحيث تحتاج إلى تسلسل هرمي، يتم تضمين ذلك في اسم الفئة أيضًا، وهذا يجعل المحدد فعالًا وسهل التجاوز بشكل طبيعي.

كن على دراية بخصائص CSS التي [تُطلق] إعادة التدفق (reflow)، وإعادة الرسم (repaint)، والتراكب (compositing). تجنب كتابة الأنماط التي تغير التخطيط (تُطلق إعادة التدفق) حيثما أمكن.

المزايا:

• يصبح CSS أكثر قابلية للصيانة.
• سهولة كتابة محددات متداخلة.
• متغيرات لتنسيق متسق. يمكن مشاركة ملفات التنسيق عبر مشاريع مختلفة.
• Mixins لإنشاء CSS متكرر.
• ميزات Sass مثل الحلقات والقوائم والخرائط يمكن أن تجعل التكوين أسهل وأقل إسهابًا.
• تقسيم الكود إلى ملفات متعددة. يمكن تقسيم ملفات CSS أيضًا ولكن القيام بذلك سيتطلب طلب HTTP لتنزيل كل ملف CSS.

العيوب:

• يتطلب أدوات للمعالجة المسبقة. قد يكون وقت إعادة الترجمة بطيئًا.
• عدم كتابة CSS قابل للاستخدام حاليًا ومحتمل. على سبيل المثال، باستخدام شيء مثل [postcss-loader] مع [webpack]، يمكنك كتابة CSS متوافق مع المستقبل، مما يسمح لك باستخدام أشياء مثل متغيرات CSS بدلاً من متغيرات Sass. وبالتالي، أنت تتعلم مهارات جديدة يمكن أن تؤتي ثمارها إذا/عندما تصبح معيارية.

الإيجابيات:

• معظم المزايا المذكورة أعلاه.
• يتم كتابة أقل في JavaScript، وهو ما يتناسب جيدًا مع Node.

السلبيات:

• أستخدم Sass عبر node-sass، وهو ربط لـ LibSass مكتوب بلغة C++. يجب علي إعادة تجميعه بشكل متكرر عند التبديل بين إصدارات Node.
• في Less، تبدأ أسماء المتغيرات بـ @، مما قد يربك مع كلمات CSS الأساسية مثل @media و @import وقاعدة @font-face.

استخدم @font-face وحدد font-family لأوزان الخطوط المختلفة (font-weights).

يرتبط هذا الجزء بما ورد أعلاه حول كتابة CSS فعال. تطابق المتصفحات المحددات من اليمين إلى اليسار (محدد المفتاح). تقوم المتصفحات بتصفية العناصر في DOM وفقًا لمحدد المفتاح وتنتقل لأعلى عبر العناصر الأصلية لتحديد التطابقات. كلما كان طول سلسلة المحدد أقصر، زادت سرعة المتصفح في تحديد ما إذا كان هذا العنصر يطابق المحدد.

على سبيل المثال، باستخدام هذا المحدد p span، تجد المتصفحات أولاً جميع عناصر <span> وتنتقل لأعلى عبر آبائها وصولاً إلى الجذر للعثور على عنصر <p>. بالنسبة لـ <span> معين، بمجرد العثور على <p>، يعرف أن <span> يتطابق ويمكنه إيقاف المطابقة.

العنصر الزائف في CSS هو كلمة مفتاحية تُضاف إلى مُحدد تتيح لك تنسيق جزء معين من العنصر (العناصر) المُحدد. يمكن استخدامها للزخرفة (:first-line, :first-letter) أو إضافة عناصر إلى الترميز (بالتزامن مع content: ...) دون الحاجة إلى تعديل الترميز (:before, :after).

• يمكن استخدام :first-line و :first-letter لتزيين النص.
• تُستخدم في خدعة .clearfix كما هو موضح أعلاه لإضافة عنصر ذي مساحة صفرية مع clear: both.
• تستخدم الأسهم المثلثة في تلميحات الأدوات :before و :after. يشجع ذلك على فصل الاهتمامات لأن المثلث يُعتبر جزءًا من التنسيق وليس جزءًا من DOM حقًا.

يصف نموذج الصندوق CSS الصناديق المستطيلة التي يتم إنشاؤها للعناصر في شجرة المستند وتخطيطها وفقًا لنموذج التنسيق المرئي. يحتوي كل صندوق على منطقة محتوى (مثل نص أو صورة وما إلى ذلك) ومناطق اختيارية محيطة مثل padding و border و margin.

نموذج الصندوق CSS مسؤول عن حساب:

• مقدار المساحة التي يشغلها عنصر الكتلة.
• ما إذا كانت الحدود و/أو الهوامش تتداخل أو تنهار أم لا.
• أبعاد الصندوق.

نموذج الصندوق لديه القواعد التالية:

• يتم حساب أبعاد عنصر الكتلة بواسطة width و height و padding و borders و margins.
• إذا لم يتم تحديد height، فسيكون عنصر الكتلة مرتفعًا بقدر المحتوى الذي يحتويه، بالإضافة إلى padding (ما لم تكن هناك عوامات، والتي انظرها أدناه).
• إذا لم يتم تحديد width، فسيتوسع عنصر الكتلة غير العائم ليناسب عرض العنصر الأصل الخاص به مطروحًا منه padding.
• يتم حساب height لعنصر بواسطة height المحتوى.
• يتم حساب width لعنصر بواسطة width المحتوى.
• افتراضيًا، لا تعتبر paddings و borders جزءًا من width و height للعنصر.

• افتراضيًا، يتم تطبيق box-sizing: content-box على العناصر، ويتم احتساب حجم المحتوى فقط.
• يغير box-sizing: border-box طريقة حساب width و height للعناصر، حيث يتم تضمين border و padding أيضًا في الحساب.
• يتم الآن حساب height العنصر بواسطة height المحتوى + padding العمودي + عرض border العمودي.
• يتم الآن حساب width العنصر بواسطة width المحتوى + padding الأفقي + عرض border الأفقي.
• أخذ paddings و borders في الاعتبار كجزء من نموذج الصندوق لدينا يتماشى بشكل أفضل مع كيفية تخيل المصممين للمحتوى في الشبكات بالفعل.

• none, block, inline, inline-block, flex, grid, table, table-row, table-cell, list-item.

| display | الوصف | | :-- | :-- | | none | لا يعرض عنصرًا (لم يعد العنصر يؤثر على تخطيط المستند). كما لم يعد يتم عرض جميع العناصر الفرعية. يتم عرض المستند كما لو أن العنصر لم يكن موجودًا في شجرة المستند | | block | يستهلك العنصر السطر بأكمله في اتجاه الكتلة (وهو عادة أفقي) | | inline | يمكن وضع العناصر جنبًا إلى جنب | | inline-block | مشابه لـ inline، ولكنه يسمح ببعض خصائص block مثل تعيين width و height | | table | يتصرف مثل عنصر <table> | | table-row | يتصرف مثل عنصر <tr> | | table-cell | يتصرف مثل عنصر <td> | | list-item | يتصرف مثل عنصر <li> مما يسمح له بتحديد list-style-type و list-style-position |

سأضيف مقارنة مع block من أجل الفائدة.

| | block | inline-block | inline | | --- | --- | --- | --- | | الحجم | يملأ عرض الحاوية الأصلية. | يعتمد على المحتوى. | يعتمد على المحتوى. | | الموضع | يبدأ في سطر جديد ولا يتسامح مع أي عناصر HTML بجانبه (إلا إذا أضفت float) | يتدفق مع المحتوى الآخر ويسمح بوجود عناصر أخرى بجانبه. | يتدفق مع المحتوى الآخر ويسمح بوجود عناصر أخرى بجانبه. | | هل يمكن تحديد width و height؟ | نعم | نعم | لا. سيتم تجاهلها إذا تم تعيينها. | | هل يمكن محاذاتها باستخدام vertical-align؟ | لا | نعم | نعم | | الهوامش والمسافات البادئة | جميع الجوانب محترمة. | جميع الجوانب محترمة. | الجوانب الأفقية فقط محترمة. الجوانب العمودية، إذا تم تحديدها، لا تؤثر على التخطيط. المساحة الرأسية التي تشغلها تعتمد على line-height، على الرغم من أن border و padding تظهر مرئيًا حول المحتوى. | | float | - | - | يصبح مثل عنصر block حيث يمكنك تعيين هوامش ومسافات بادئة عمودية. |

العنصر الموضعي هو عنصر تكون خاصية position المحسوبة له إما relative أو absolute أو fixed أو sticky.

• static - الموضع الافتراضي؛ سيتدفق العنصر في الصفحة بشكل طبيعي. لا تنطبق خصائص top، right، bottom، left و z-index.
• relative - يتم تعديل موضع العنصر بالنسبة إلى نفسه، دون تغيير التخطيط (وبالتالي يترك فجوة للعنصر حيث كان سيكون لو لم يتم وضعه).
• absolute - يتم إزالة العنصر من تدفق الصفحة وتوضيعه في موضع محدد بالنسبة إلى أقرب عنصر أب ذي موضع (إذا كان موجودًا)، أو بخلاف ذلك بالنسبة إلى كتلة الاحتواء الأولية. يمكن أن تحتوي الصناديق ذات الموضع المطلق على هوامش، ولا تنهار مع أي هوامش أخرى. لا تؤثر هذه العناصر على موضع العناصر الأخرى.
• fixed - يتم إزالة العنصر من تدفق الصفحة وتوضيعه في موضع محدد بالنسبة إلى منفذ العرض ولا يتحرك عند التمرير.
• sticky - التحديد اللزج (Sticky positioning) هو خليط من التحديد النسبي والثابت. يُعامل العنصر كموضع relative حتى يتجاوز عتبة محددة، وعند هذه النقطة يُعامل كموضع fixed.

• Bootstrap - دورة إصدار بطيئة. Bootstrap 4 كان في مرحلة ألفا لما يقرب من عامين. أضف مكون زر التدوير (spinner button)، حيث إنه شائع الاستخدام.
• Semantic UI - هيكل الكود المصدري يجعل تخصيص الثيمات صعب الفهم للغاية. نظام التنسيق غير التقليدي الخاص به صعب التخصيص. مسار التكوين مبرمج بشكل ثابت داخل مكتبة البائع. غير مصمم جيدًا لتجاوز المتغيرات على عكس Bootstrap.
• Bulma - تتطلب الكثير من الفئات والترميز غير الدلالي وغير الضروري. ليست متوافقة مع الإصدارات السابقة. ترقية الإصدارات تكسر التطبيق بطرق خفية.

نعم. Flexbox مخصص بشكل أساسي للتخطيطات أحادية البعد بينما Grid مخصص للتخطيطات ثنائية البعد.

يحل Flexbox العديد من المشاكل الشائعة في CSS، مثل توسيط العناصر عموديًا داخل حاوية، وتذييل لاصق (sticky footer)، وما إلى ذلك. يعتمد Bootstrap و Bulma على Flexbox، وربما يكون هو الطريقة الموصى بها لإنشاء التخطيطات في هذه الأيام. لقد جربت Flexbox من قبل ولكني واجهت بعض مشكلات عدم التوافق مع المتصفحات (Safari) في استخدام flex-grow، وكان علي إعادة كتابة الكود الخاص بي باستخدام inline-blocks وعمليات حسابية لحساب العروض بالنسب المئوية، لم تكن تجربة لطيفة.

Grid هو إلى حد بعيد النهج الأكثر سهولة لإنشاء تخطيطات قائمة على الشبكة (يجب أن يكون كذلك!) ولكن دعم المتصفحات ليس واسعًا في الوقت الحالي.

لاحظ أن هذين النهجين ليسا حصريين.

جعل موقع ويب متجاوبًا يعني أن بعض العناصر ستستجيب من خلال تكييف حجمها أو وظائف أخرى وفقًا لحجم شاشة الجهاز، وعادةً ما يكون عرض منفذ العرض (viewport width)، من خلال استعلامات وسائط CSS (CSS media queries)، على سبيل المثال، جعل حجم الخط أصغر على الأجهزة الأصغر.

@media (min-width: 601px) {
  .my-class {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .my-class {
    font-size: 12px;
  }
}

استراتيجية "الجوال أولاً" هي أيضًا متجاوبة، ومع ذلك فهي تتفق على أنه يجب علينا افتراض وتحديد جميع الأنماط للأجهزة المحمولة، ثم إضافة قواعد استجابة محددة للأجهزة الأخرى لاحقًا. باتباع المثال السابق:

.my-class {
  font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}

تتمتع استراتيجية "الجوال أولاً" بميزتين رئيسيتين:

• إنها أكثر كفاءة على الأجهزة المحمولة، نظرًا لأن جميع القواعد المطبقة عليها لا تحتاج إلى التحقق من أي استعلامات وسائط.
• إنها تجبر على كتابة كود أنظف فيما يتعلق بقواعد CSS المتجاوبة.

يحاول كل من التصميم المتجاوب والتصميم التكيفي تحسين تجربة المستخدم عبر الأجهزة المختلفة، مع التكيف مع أحجام منافذ العرض المختلفة، والدقة، وسياقات الاستخدام، وآليات التحكم، وما إلى ذلك.

يعمل التصميم المتجاوب على مبدأ المرونة - موقع ويب سائل واحد يمكن أن يبدو جيدًا على أي جهاز. تستخدم مواقع الويب المتجاوبة استعلامات الوسائط والشبكات المرنة والصور المتجاوبة لإنشاء تجربة مستخدم تتكيف وتتغير بناءً على مجموعة متنوعة من العوامل. مثل كرة واحدة تنمو أو تتقلص لتناسب عدة أطواق مختلفة.

التصميم التكيفي أشبه بالتعريف الحديث للتحسين التدريجي. بدلاً من تصميم مرن واحد، يكتشف التصميم التكيفي الجهاز والميزات الأخرى ثم يوفر الميزة والتخطيط المناسبين بناءً على مجموعة محددة مسبقًا من أحجام منافذ العرض والخصائص الأخرى. يكتشف الموقع نوع الجهاز المستخدم ويسلم التخطيط المحدد مسبقًا لهذا الجهاز. بدلاً من كرة واحدة تمر عبر عدة أطواق بأحجام مختلفة، سيكون لديك عدة كرات مختلفة للاستخدام اعتمادًا على حجم الطوق.

لكلتا هاتين الطريقتين بعض المشكلات التي تحتاج إلى الموازنة:

• يمكن أن يكون التصميم المتجاوب صعبًا للغاية، حيث أنك تستخدم أساسًا تخطيطًا واحدًا مرنًا ليناسب جميع المواقف. كيفية تعيين نقاط توقف استعلام الوسائط هي أحد هذه التحديات. هل تستخدم قيم نقاط توقف موحدة؟ أم تستخدم نقاط توقف منطقية لتخطيطك الخاص؟ ماذا لو تغير هذا التخطيط؟
• يتطلب التصميم التكيفي عمومًا تحليل وكيل المستخدم (user agent sniffing)، أو اكتشاف DPI، وما إلى ذلك، وكل ذلك يمكن أن يثبت عدم موثوقيته.

كلمة ريتينا هي مجرد مصطلح تسويقي يشير إلى شاشات عالية الدقة ذات نسبة بكسل أكبر من 1. الشيء الرئيسي الذي يجب معرفته هو أن استخدام نسبة بكسل يعني أن هذه الشاشات تحاكي شاشة ذات دقة أقل لعرض العناصر بنفس الحجم. في الوقت الحاضر، نعتبر جميع الأجهزة المحمولة شاشات ريتينا افتراضيًا.

تعرض المتصفحات بشكل افتراضي عناصر DOM وفقًا لدقة الجهاز، باستثناء الصور.

من أجل الحصول على رسومات واضحة وجيدة المظهر تستفيد من شاشات ريتينا، نحتاج إلى استخدام صور عالية الدقة كلما أمكن ذلك. ومع ذلك، فإن استخدام أعلى دقة للصور دائمًا سيؤثر على الأداء حيث سيلزم إرسال المزيد من البايتات عبر الشبكة.

للتغلب على هذه المشكلة، يمكننا استخدام الصور المتجاوبة، كما هو محدد في HTML5. يتطلب ذلك إتاحة ملفات بدقة مختلفة لنفس الصورة للمتصفح والسماح له بتحديد الصورة الأفضل، باستخدام سمة HTML srcset و اختياريًا sizes، على سبيل المثال:

<div responsive-background-image>
  <img
    src="/images/test-1600.jpg"
    sizes="
      (min-width: 768px) 50vw,
      (min-width: 1024px) 66vw,
      100vw"
    srcset="
      /images/test-400.jpg   400w,
      /images/test-800.jpg   800w,
      /images/test-1200.jpg 1200w
    " />
</div>

من المهم ملاحظة أن المتصفحات التي لا تدعم srcset في HTML5 (مثل IE11) ستتجاهله وتستخدم src بدلاً من ذلك. إذا كنا بحاجة حقًا إلى دعم IE11 ونريد توفير هذه الميزة لأسباب تتعلق بالأداء، فيمكننا استخدام polyfill JavaScript، على سبيل المثال.

بالنسبة للأيقونات، سأختار أيضًا استخدام SVG وخطوط الأيقونات حيثما أمكن، لأنها تُعرض بوضوح شديد بغض النظر عن الدقة.

translate() هي قيمة من خاصية CSS transform. تغيير transform أو opacity لا يُشغل إعادة تدفق (reflow) أو إعادة رسم (repaint) في المتصفح ولكنه يُشغل عمليات التكوين (compositions)؛ بينما يؤدي تغيير تحديد الموضع المطلق إلى تشغيل reflow. يتسبب transform في قيام المتصفح بإنشاء طبقة GPU للعنصر ولكن تغيير خصائص تحديد الموضع المطلق يستخدم وحدة المعالجة المركزية (CPU). وبالتالي، فإن translate() أكثر كفاءة وسيؤدي إلى أوقات رسم أقصر للحصول على رسوم متحركة أكثر سلاسة.

عند استخدام translate()، لا يزال العنصر يشغل مساحته الأصلية (يشبه position: relative إلى حد ما)، على عكس تغيير تحديد الموضع المطلق.