تعرّفنا في الجزء الأول من هذا الدرس على ما يقدّمه نظام التخطيط الشبكي Grid layout في CSS وقدّمنا ماهيّة الشبكة Grid ومساراتها Tracks. نكمل في هذا الجزء المفاهيم الأساسيّة لنظام التخطيط الشبكي.

خطوط الشبكة Grid Lines

تجدر الإشارة إلى أنه عندما نعرّف شبكة فإن ما نحدّده هو مسارات هذه الشبكة، وليس الخطوط. تعطينا الشبكة بعد تعريفها خطوطًا مرقمة لاستخدامها عند تحديد مواقع العناصر. على سبيل المثال في الشبكة أدناه، المكوَّنة من ثلاثة أعمدة وصفيْن تكون لدينا أربعة خطوط أعمدة Column lines.

تُرَقَّم خطوط الأعمدة وفقًا لوضع الكتابة في المستند. في اللغات التي تتّجه كتابتها من اليسار إلى اليمين Left to right (الإنكليزية مثلا)، يكون السطر الأول على الجانب الأيسر من الشبكة. في اللغات ذات اتجاه الكتابة من اليمين إلى اليسار Right to left (العربية مثلا)، يصبح السطر 1 على الجانب الأيمن من الشبكة. يمكن أيضًا تسمية الخطوط، سوف ننظر في كيفية فعل بذلك في درس لاحق من هذه السلسلة.

وضع العناصر وفق الخطوط

سنكتشف وضع العناصر على أساس الخطوط Line-based placement بتفصيل كامل في درس لاحق. يوضح المثال التالي كيفية القيام بذلك بطريقة بسيطة. عند وضع عنصر نستهدف السطر، بدلا من المسار.

في المثال التالي وضعنا العنصرين الأوليْن على ثلاثة مسارات أعمدة Column track، وذلك باستخدام الخصائص grid-row-start ،grid-row-end grid-column-start وgrid-column-end. بالعمل من اليسار إلى اليمين،

يوضَع العنصر الأول (box1) على خط العمود 1، ويمتد إلى خط العمود 4 الذي يوجد في حالتنا أقصى يمين الشبكة. يبدأ هذا العنصُر في خط الصف 1 (في الأعلى) وينتهي في خط الصف 3؛ وبالتالي يمتد على اثنين من مسارات الصفوف Row tracks.

يبدأ العنصر الثاني (box2) على خط عمود الشبكة 1، ويمتد على مسار واحد. هذا هو الوضع المبدئي، لذا لسنا بحاجة إلى تحديد خط النهاية. كما أنه يمتد على اثنين من مسارات الصفوف ابتداءً من خط الصف 3 إلى خط الصف 5. والعناصر الأخرى تضع نفسها في المساحات الفارغة على الشبكة.

<div class="wrapper">
   <div class="box1">One</div>
   <div class="box2">Two</div>
   <div class="box3">Three</div>
   <div class="box4">Four</div>
   <div class="box5">Five</div>
</div>

.wrapper { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-auto-rows: 100px; 
} 
.box1 { 
    grid-column-start: 1; 
    grid-column-end: 4; 
    grid-row-start: 1; 
    grid-row-end: 3; 
} 
.box2 { 
    grid-column-start: 1; 
    grid-row-start: 3; 
    grid-row-end: 5; 
}

لا تنس أنه يمكنك استخدام Grid Inspector في أدوات مطوري فايرفوكس لترى كيف توضع العناصر على خطوط الشبكة.

خلايا الشبكة Grid Cells

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

تظهر في الصورة أدناه شبكة الخلايا مع تحديد الخليّة الأولى في الشبكة

مناطق الشبكة Grid areas

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

المزاريب Gutters

يمكن إنشاء المزاريب أو الأزقة بين خلايا الشبكة باستخدام الخاصيّتين grid-column-gap وgrid-row-gap، أو بالخاصيّة المختصرة grid-gap. في المثال التالي أنشأنا فجوة gap بقياس 10 بكسل بين الأعمدة و 1em بين الصفوف.

.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-column-gap: 10px;
   grid-row-gap: 1em;
}

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

تُحسَب المساحة التي تأخذها الفجوات قبل إسناد المساحة إلى المسارات ذات القياس المرن (الوحدة fr). تعمل الفجوات لأغراض التحجيم مثل مسارات الشبكة العادية ، ولكن لا يمكنك وضع أي شيء في الفجوات. بالنسبة للتموضع وفقا لخطوط الشبكة فإن التعامل مع الفجوات يكون على أساس أنها خطّ ثخين.

الشبكات المتداخلة Nesting grids

يمكن لعنصر في شبكة أن يصبح حاوية لشبكة أخرى. لدينا في المثال التالي شبكة أنشأناه سابقا، وتتكوّن من ثلاثة أعمدة وصفَّين، مع عصرَين مُتموضعَيْن (box1 وbox2)؛ إلا أن العنصر الأول في المثال أدناه يحتوي على عناصر فرعية. وبما أن هذه العناصر ليست متفرّعة مباشرةً عن العنصر الذي عرّفنا عليه الشبكة فإنها لا تشارك في تخطيط الشبكة.

<div class="wrapper">
   <div class="box box1">
       <div class="nested">a</div>
       <div class="nested">b</div>
        <div class="nested">c</div>
    </div>
    <div class="box box2">Two</div>
    <div class="box box3">Three</div>
    <div class="box box4">Four</div>
    <div class="box box5">Five</div>
</div>

إذا طبّقنا الخاصيّة display: grid على الصّنف box1 فإنه سيكون بإمكاننا تعريف مسارات على عنصر الصنف ويصبح هو الآخر شبكة، تتموضع داخلها العناصر.

.box1 {
   grid-column-start: 1;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
}

في هذه الحالة الشبكة المتداخلة ليس لها علاقة بالشبكة الأم parent. كما ترون في المثال أن grid-gap لم ترث من الشبكة الأم وخطوط في الشبكة المتداخلة لم يتم محاذاتها مع الخطوط في الشبكة الأم.

وضع العناصر في طبقات باستخدام z-index

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

<div class="wrapper">
   <div class="box box1">One</div>
   <div class="box box2">Two</div>
   <div class="box box3">Three</div>
   <div class="box box4">Four</div>
   <div class="box box5">Five</div>
</div>

.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
}
.box1 {
   grid-column-start: 1;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
}
.box2 {
   grid-column-start: 1;
   grid-row-start: 2;
   grid-row-end: 4;
}

العنصر box2 الآن متداخل مع العنصر box1. يظهر العنصر box2 فوق العنصر box1 لأنbox2 يأتي بعد box1في ترتيب العناصر.

التحكم في الترتيب

يمكننا التحكم في ترتيب العناصر التي تتراكب باستخدام خاصية z-index تمامًا كما هو الحال مع تموضع العناصر. إذا أعطينا قيمة أقل للخاصيّة z-index في box2 من box1 فسيُعرَض تحت box1.

.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
}

.box1 {
   grid-column-start: 1;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
   z-index: 2;
}
.box2 {
   grid-column-start: 1;
   grid-row-start: 2;
   grid-row-end: 4;
   z-index: 1;
}

كان هذا الدرس والدرس الذي قبله نظرة سريعة جدا على المفاهيم الأساسيّة لنظام التخطيط الشبكي Grid Layout. تمعّن في أمثلة التعليمات البرمجية وجرّب التغيير في القيم والخصائص لكي تتبلور في ذهنك المفاهيم الأساسية في التعامل مع نظام التخطيط الشبكي في CSS.

ترجمة - بتصرّف - للمقال Basic concepts of grid layout الذي اشترك في كتابته مساهمو موزيللا Mozilla contributors.

يضيف التخطيط الشبكي Grid layout في CSS نظامَ شبكةٍ ثنائي الأبعاد إلى الأنماط لاستخدامه في تخطيط مساحة رئيسية لصفحة ويب أو عناصر صغيرة في واجهة المستخدم.

سنتعرّف في هذه المقالة على نظام التخطيط الشبكي في CSS مع شرح أمثلة عملية للمفاهيم الأساسية في بناء هذا التخطيط. سنتطرَّق إلى المفاهيم المذكورة في هذا الدرس بتفصيل أكثر في دروس قادمة.

ماهي الشبكة Grid؟

هي مجموعة متقاطعة من الخطوط الأفقية والعمودية، مجموعة تمثل الصفوف وأخرى تمثل الأعمدة، توضع عناصر الشبكة وفقًا لخطوط الأعمدة Columns والصفوف (الأسطُر) Rows.

لدى نظام التخطيط الشبكي الميزات التالية:

• قياسات مسار Track ثابتة وقياسات مرنة: يمكنك إنشاء شبكة بقياس وحجم مسارات ثابت Fixed track sizes - باستخدام وحدة القياس بكسل Pixel مثلًا، ويمكنك إنشاء شبكة باستخدام قياسات مرنة اعتمادًا على النسبة المئوية أو باستخدام وحدة fr الجديدة المصممة لهذا الغرض.
• تموضع العنصر: يمكنك وضع العناصر في موقع دقيق على الشبكة باستخدام أرقام الأسطر، الأسماء أو عن طريق استهداف منطقة من الشبكة. تحوي الشبكة أيضًا على خوارزمية للتحكم في وضع العناصر التي لم يُحدَّد موضعها بصراحة على الشبكة.
• إنشاء مسارات إضافية للاحتفاظ بالمحتوى: يمكنك تعريف شبكة على نحو صريح عن طريق تخطيط الشبكة ولكن نظام تخطيط الشبكة يتعامل أيضًا مع المحتوى المضاف خارج الشبكة المعلن عنها، بإضافة صفوف وأعمدة إضافية حسب الحاجة.
  تُضمَّن ميزات مثل “إضافة أعمدة ما دام في العنصر الحاوي Container مساحة لاستقبالها” في نظام تخطيط الشبكة.
• التحكم بالمحاذاة Alignment: تحتوي الشبكة على ميزات المحاذاة للتحكم في كيفية محاذاة العناصر مرة واحدة في مساحة الشبكة، وكيف تُحاذى الشبكة بالكامل.
• التحكم في المحتوى المتداخل Overlapping Content: يمكن وضع أكثر من عنصر واحد في خلية الشبكة، أو يمكن أن تتداخل المناطق جزئيًا. ويمكن بعدها التحكم في هذه الطبقات باستخدام الخاصيّة z-index.

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

حاوية الشبكة Grid Container

تُنشَأ حاوية شبكة بتعيين الخاصيّة display بالقيمة grid أو inline-grid على عنصر. وبمجرد فعل ذلك تصبح جميع العناصر المتفرّعة مباشرة عن العنصر المذكور عناصر شبكة.

لدينا في المثال أدناه عنصر div يُطبَّق عليه الصنف wrapper. يحوي هذا العنصر بداخله خمسة عناصر أبناء.

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

لنجعل جميع العناصر التي يُطبَّق عليها الصنف .wrapper حاوية شبكة، بإعطائه الخاصيّة display: grid:

.wrapper {
  display: grid;
}

جميع العناصر المتفرّعة مباشرة من العنصر div السابق هي الآن عناصر شبكة. في متصفح الويب، لن ترى أي فرق في كيفية عرض العناصر مقارنة بحالتها قبل تحويلها إلى شبكة، حيث إن الشبكة قد أنشأت عمود شبكة واحدًا للعناصر.

عند هذه النقطة، قد تجد أنه من المفيد العمل على إصدار فايرفوكس للمطورين، والذي يتيح أداة Grid Inspector في أدوات مطور الويب. إذا عرضت هذا المثال في فايرفوكس وتفحصت الشبكة التي أنشأتها في المثال فستشاهد رمزًا صغيرًا بجوار قيمة الشبكة. عند النقر عليه فإن المتصفّح سيرسُم شبكة على العنصر في الصفحة.

تعطيك هذه الأداة فكرة أفضل عن مايحدث مع الشبكات الخاصة بك بصريًا.

مسارات الشبكة Grid Tracks

تُعرَّف الصفوف (الأسطر) والأعمدة على الشبكة باستخدام الخصائص grid-template-rows وgrid-template-columns التي تحدد مسارات الشبكة.

مسار الشبكة Grid track هو المسافة أو البعد بين أي خطَّيْن متجاوريْن على الشبكة. في الصورة أدناه يمكنك أن ترى مسارًا محدّدًا باللون الأخضر: هذا هو مسار الصف الأول في الشبكة.

لنضف مسارًا إلى مثالنا السابق عن طريق إضافة الخاصية grid-template-columns ثم نحدّد قياس مسارات الأعمدة Column tracks.

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

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

وحدة القياس fr

يمكن تعريف المسارات باستخدام أي وحدة قياس. تقدّم الشبكة أيضًا وحدة قياس إضافية لمساعدتنا على إنشاء مسارات مرنة Flexible tracks. وهي وحدة fr الجديدة التي تمثل جزءًا من المساحة المتاحة في العنصُر الحاوي للشبكة.

يُنشئ المثال التالي ثلاثة مسارات متساوية العرض تزداد وتتقلص وفقًا للمساحة المتاحة.

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

في المثال التالي، عرّفنا شبكة من مسار بقياس 2fr ثم مسارين بقياس 1fr. تُقسَّم المساحة المتاحة إلى أربعة. يُعطَى جزآن للمسار الأول وجزء واحد لكل من المسارَيْن الآخريْن.

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

في المثال الأخير، سوف نمزج بين استخدام وحدة القياس الثابتة pixel مع وحدات الأجزاء fr.

المسار الأول هو 500 بكسل. تُؤخذ قيمة هذا العرض الثابت من المساحة المتاحة. وتُقسَّم المساحة المتبقية إلى ثلاثة أجزاء وتُخَصص بالتناسب مع اثنين من المسارات المرنة fr.

.wrapper {
  display: grid;
  grid-template-columns: 500px 1fr 2fr;
}

إنشاء مسارات باستخدام التعليمة ()repeat

لإنشاء شبكات كبيرة مع الكثير من المسارات يمكن استخدام التعليمة ()repeat لتكرار عناصر المسارات أو أجزاء منها.

يمكن أن تُكتَب الشبكة التاليّة:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

بالطريقة أدناه:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

يمكن تطبيق التعليمة ()repeat على جزء من عناصر المسار. ننشئ في المثال التالي شبكة بمسار ابتدائي على 20 بكسل، ثم ننشئ الجزء الموالي من الشبكة بتكرار مسار ذي قياس 1fr ست مرات ثم ننشئ في الأخير مسارا قياسه 20 بكسل.

.wrapper {
  display: grid;
  grid-template-columns: 20px repeat(6, 1fr) 20px;
}

يمكن استخدام التعليمة ()repeat لإنشاء نمط من المسارات المتكرّرة. ننشئ في المثال التالي شبكة من عشرة مسارات وذلك بتكرار النمط “مسار بقياس 1fr يليه مسار بقياس 2fr” خمس مرات.

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr 2fr);
}

الشبكة الضمنية Implicit والشبكة الصريحة Explicit

عرّفنا في الأمثلة السابقة لإنشاء الشبكات مسارات الأعمدة باستخدام الخاصية grid-template-columns، ولكن لندع الشبكة تنشئ صفوفًا حسب الحاجة للمحتوى. تُنشَأ هذه الصفوف في الشبكة الضمنية.

تتكون الشبكة الصريحة من الصفوف والأعمدة التي نحددها باستخدام grid-template-rows وgrid-template-columns. إن أضفت محتوى خارج الشبكة المحدَّدة تلك، أو إن احتجت لمسارات جديدة في الشبكة نظرا لكميّة المحتوى؛ فإن الشبكة ستُنشئ الصفوف والأعمدة في الشبكة الضمنية. تأخذ هذه المسارات مبدئيًّا قياسا تلقائيا Auto-sized، لذا سيعتمد القياس على المحتوى الموجود بها.

يمكنك أيضا تعيين قياس محدد للمسارات التي تُنشَأ في الشبكة الضمنية باستخدام خاصتيْ grid-auto-rows وgrid-auto-columns. في المثال التالي، استخدمنا grid-auto-rows لضمان أن المسارات التي تُنشَأ في الشبكة الضمنية ذات ارتفاع 200 بكسل.

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
}

قياس المسارات و ()minmax

قد نرغب، عند إعداد شبكة صريحة أو تحديد قياس الصفوف أو الأعمدة التي أُنشِئت تلقائيًّا،في منح المسارات قياسًا أدنى؛ مع التأكد من أنها ستتوسّع لتتناسب مع أي محتوى يُضاف إليها. على سبيل المثال، قد أرغب في ألا تتقلص الصفوف إلى أقلّ من 100 بكسل، ولكن إذا كان المحتوى الخاص بي يمتد إلى 300 بكسل في الارتفاع، فأود أن يمتد الصف إلى هذا الارتفاع.

الحل هو استخدام الدّالة ()minmax. في المثال التالي استخدمنا الدّالة ()minmax قيمةً للخاصيّة grid-auto-rows. ستُنشَأ الصفوف تلقائيا بحد أدنى يبلغ 100 بكسل طولًا، وحد أقصى تلقائي auto. يعني استخدام auto أن الحجم سوف يبدو في حجم المحتوى ويمتد لإعطاء مساحة لأطول محتوى في خلية موجودة في هذا الصف.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

<div class="wrapper">
   <div>One</div>
   <div>Two
   <p>I have some more content in.</p>

<p>This makes me taller than 100 pixels.</p>
</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

ألقينا في هذا الدرس نظرة عامّة على الشبكة في نظام التتخطيط الشبكي ومساراتها وكيفية تعريفها. سنكمل في الدرس الموالي حديثنا عن نظام التخطيط الشبكي ونتعرَّف على خطوط الشبكة واستخداماتها.

ترجمة - بتصرّف - للمقال Basic concepts of grid layout الذي اشترك في كتابته مساهمو موزيللا Mozilla contributors.

حقوق الصورة الصورة البارزة محفوظة لـ Freepik

بناء المواقع الإلكترونية أمر ممتع ومحبط في نفس الوقت، وعادة ما يكون سبب الإحباط هو السعي لتوحيد مظهر وأداء الموقع الإلكتروني في جميع المتصفحات، ولا شكّ أن مصمّمي الواجهات الأمامية قد مرّوا بحالة الإحباط هذه بشكل أو بآخر.

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

يوجد عدد من الممارسات الجيدة التي تتيح للموقع الإلكتروني أن يعمل على نحو جيّد في جميع المتصفحات. ينصح عادة بتوفير الدعم التراجعي Fallback support عند استخدام خصائص CSS 3 وذلك لدعم المتصفحات القديمة، وهناك تقنيات أخرى مثل الـ Shivs و Polyfills وهي عبارة عن ملحقات JavasScript صغيرة تضيف الدعم لعدد من المزايا المطلوبة التي لا تدعمها المتصفحات القديمة مبدئيًّا.

HTML Shiv

أحد أشهر الملحقات التي تقدّم الدعم التراجعي هو HTML5 Shivs، وقد أنشأ Remy Sharp هذا الملحق لإتاحة استخدام عناصر HTML 5 في Internet Explorer 8 وما قبله، ولا يكتفي هذا الملحق بتوفير الدعم لعناصر HTML5 فقط، بل يتجاوز ذلك إلى إمكانية تنسيقها بواسطة CSS.

يجب تنزيل آخر إصدار من هذا الملحق من Google حيث يحتفظ Remy بآخر الإصدارات، ثم ضيافتها على الخادوم الخاص بك. وللحصول على أفضل أداء يفضّل الإشارة إلى ملف JavaScript الخاص بالإضافة في بداية الصفحة ضمن الوسم <head>، مباشرة بعد الإشارة إلى ملفات CSS. كذلك يجب وضع شفرة جلب الإضافة ضمن تعليق مشروط لتضمن تنزيل الملفات في الإصدار الثامن من Internet Explorer وما دونه.

<!--[if lt IE 9]>
  <script src="html5shiv.js"></script>
<![endif]-->

وبعد إنشاء عناصر HTML5 الجديدة في مستوى Block باستخدام HTML5 Shiv يجب تحديد وتحديث تلك العناصر بواسطة التصريح display:block.

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

لا يعرّف الإصداران الثامن والتاسع من Internet Explorer أنماط بعض عناصر HTML5 بطريقة صحيحة في مستوى Inline-block، لذا تجب إضافة التصريح display: inline-block إلى هذه العناصر.

بهذا يمكنك استخدام أي عنصر من عناصر HTML5 في جميع إصدارات Internet Explorer.

audio,
canvas,
video {
  display: inline-block;
}

ما الفرق بين Shiv و Shim

قد تسمع أو تقرأ في بعض المواقع عن HTML5 Shim، وقد تتساءل إن كان هناك فرق بينها وبين HTML5 Shiv. في الواقع لا يوجد أي فارق يذكر بين هذين المصطلحين، وكلاهما يستخدمان للتعبير عن المعنى ذاته.

الكشف عن المزايا المتاحة في المتصفح

تؤدي HTML5 Shiv عملًا جيّدًا مع التعليقات المشروطة في تعريف المتصفح بخصائص HTML5 وعناصرها الجديدة، ولكن باستخدام هذه الطريقة فإنك تحدّد مسبقًا المتصفح الذي لا يدعم هذه الخصائص. هناك طريقة أخرى لتوفير الدعم لعناصر وخصائص معينة في HTML5 و CSS3 بغض النظر عن المتصفح المستخدم.

توفّر مكتبة Modernizr وسيلة للكشف عن ميزات المتصفح من خلال كتابة شفرات CSS و JavaScript مشروطة بالاستناد إلى دعم المتصفح لخاصّية معينة أم لا. فعلى سبيل المثال، إن كان أحد المتصفحات يدعم خاصّية الأركان الدائرية فستقوم Moderinzr بإضافة الصنف borderradius إلى عنصر html. أما إن كان المتصفح لا يدعم هذه الخاصّية، تقوم مكتبة Modernizr بإضافة الصنف no-borderradius إلى عنصر html.

تنزيل مكتبة Modernizr

لتشغيل مكتبة Modernizr في موقعك توجّه إلى صفحة التنزيل الخاصة بالمكتبة حيث يمكنك اختيار الخصائص التي ترغب في الكشف عنها. بعد تنزيل المكتبة ارفعها إلى الخادوم الخاص بك ثم أشر إلى الملف ضمن الوسم head في صفحة HTML مباشرة بعد آخر إشارة لملفات الأنماط.

من الجدير بالذكر أنّه يمكن تخصيص Modernizr لتتضمن HTML5 Shiv، وبهذا لا حاجة للإشارة إليها في بداية Modernizr.

<script src="modernizr.js"></script>

التطبيق الشرطي لأنماط CSS

بمجرد أن تبدأ مكتبة Modernizr بالعمل يصبح بالإمكان تطبيق أنماط CSS بالاعتماد على وجود أو عدم وجود خصائص معينة في المتصفح الذي يعرض الموقع الإلكتروني. تستطيع Modernizr الكشف عن معظم الخصائص والقيم التي تقدّمها CSS3 ويمكنك التعرّف عليها من خلال توثيقات المكتبة على شبكة الإنترنت.

يجدر الانتباه إلى أنّه قد يكون من غير الضروري الكشف عن الخصائص المتعلقة ببعض الأنماط، فعلى سبيل المثال عندم استخدام قيمة لون بصيغة RGBa يمكن تقديم دعم تراجعي لهذه القيمة من خلال توفير قيمة اللون بصيغة hexadecimal دون الحاجة إلى اللجوء لتقنية الكشف عن الخصائص. عندما تقرّر استخدام تقنية الكشف عن الخصائص من الضروري أن تحافظ على تنظيم الشفرات وأن تراعي مسألة الأداء. تجنّب قدر الإمكان تكرار الشفرة لأكثر من مرة أو إنشاء طلبات HTTP إضافية.

button {
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  outline: 0;
}

/* With CSS Gradient Styles */

.cssgradients button {
  border: 1px solid #0080c2;
  background: linear-gradient(#00a2f5, #0087cc);
  border-radius: 6px;
  padding: 15px 30px;
}
.cssgradients button:hover {
  background: linear-gradient(#1ab1ff, #009beb);
}
.cssgradients button:active {
  box-shadow: inset 0 1px 10px rgba(255, 255, 255, .5);
}

/* Without CSS Gradient Styles */

.no-cssgradients button {
  background: transparent url("button.png") 0 0 no-repeat;
  padding: 16px 31px;
}
.no-cssgradients button:hover {
  background-position: 0 -49px;
}
.no-cssgradients button:active {
  background-position: 0 -98px;
}

في المثال السابق تمكن ملاحظة أن الزرّ يرث أنماطًا مبدئية، ولكن الأنماط المخصّصة تطبّق بالاستناد إلى دعم المتصفح لخاصية الخلفية المتدرّجة في CSS3، إضافة إلى خاصيتيْ الأركان الدائرية والظلال. إن كان المتصفح يدعم هذه الخصائص، فسيحصل الزرّ على خلفية متدرجة وعلى ظلّ وحواف دائرية، أما في حال عدم دعم المتصفح لهذه الخصائص فيحصل الزرّ على صورة خلفية تتضمن جميع هذه التأثيرات. بهذه الطريقة لا توجد شفرات زائدة ولا يُرسَل طلب HTTP إلا عند الحاجة.

عند العمل مع تقنية الكشف عن خصائص CSS3 يكون من الصعب تخمين مظهر عنصر معين في المتصفحات التي لا تدعم الخصائص الجديدة، ولحسن الحظ هناك أداة تدعى deCSS3 تعمل على تعطيل جميع خصائص CSS3 في الصفحة ما يسمح لك بالتعرف على مظهر موقعك الإلكتروني عندما لا تُستخدَم CSS3، إضافة إلى اختبار الأنماط المشروطة المستخدمة في الموقع. لتحصل على فكرة سريعة عن الخصائص والميزات التي يدعمها متصفّح معين،زر الموقع haz.io باستخدام ذلك المتصفح.

التنزيل الشرطي للملفات

إضافة إلى التنزيل الشرطي للأنماط، تقدّم مكتبة Modernizr وسيلة لاستخدام تقنية الكشف عن الخصائص في JavaScript، حيث يصبح بالإمكان تنزيل ملفات الـ Polyfills وغيرها من الملفات بالاستناد إلى وجود خاصية معينة والاستعانة بمكتبة jQuery وتابع getScript الخاص بهذه المكتبة.

يمكن استخدام مكتبة Modernizr في العبارات الشرطية وذلك لتشغيل شفرات متنوعة اعتمادًا على تحقق الشرط أو عدمه. في المثال التالي تتحقّق Modernizr من دعم المتصفح لخاصية التخزين المحلي Local storage. إن كانت هذه الخاصّية متوفرة في المتصفح، يُنزَّل الملف storage.js باستخدام jQuery وتابع getScript، أما إن كانت هذه الخاصّية غير مدعومة في المتصفح فيُستعان بـ jQuery لتنزيل ملف storage-polyfills.js وبواسطة التابع ذاته.

$(document).ready(function() {
  if (Modernizr.localstorage) {
    // التخزين المحلّي متوفّر
    jQuery.getScript('storage.js');
  } else {
    // التخزين المحلّي غير متوفّر
    jQuery.getScript('storage-polyfill.js');
  }
});

التنزيل الشرطي بالاستناد إلى استعلام الوسيط Media Query

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

$(document).ready(function() {
  if (Modernizr.mq('screen and (min-width: 640px)')) {
    jQuery.getScript('tabs.js');
  }
});

تتحقق Modernizer في المثال الموضح أعلاه ممّا إذا كان عرض الشاشة أكبر من 640 بكسلًا، أي شاشات حواسيب سطح المكتب بصورة رئيسية، ثم تُنزِّل ملف tabs.js بالاعتماد على تحقق الشرط. من الضروري الانتباه إلى أن التحقق من هذا الشرط يتم مرة واحدة فقط وذلك عند تنزيل الصفحة، وهذا يعني أنّه لن يُتحقَّق من هذا الشرط عندما يغيّر المستخدم حجم الصفحة، وإن تطلب الأمر إعادة التحقق من جديد، فيجب استخدام شفرة JavaScript إضافية للقيام بذلك.

التشغيل الشرطي للشفرات

يمكن التحقق من جميع الخصائص التي تقدّمها HTML5 و CSS3 باستخدام Modernizr ومن خلال JavaScript. فعلى سبيل المثال، يستحسن تعطيل عمل التلميحات Tooltips في أجهزة الهاتف المحمول نظرًا لعدم توفّر التحليق Hover في هذه الأجهزة، والاستعاضة عن ذلك بعرض التلميحات على هيئة نصوص صرفة. يمكن تغليف الشفرة المسؤولة عن استدعاء التلميحات بعبارة شرطية تمنع تنزيل الشفرة عند استعراض الموقع في الشاشات الصغيرة.

$(document).ready(function() {
  if (Modernizr.mq('screen and (max-width: 400px)')) {
    $('.size').text('small');
  }
});

يوضح المثال السابق على نحو مبسط طريقة تنفيذ شفرة JavaScript بالاستناد إلى شرط وضعته Modernizr. إن كان عرض الشاشة عند تنزيل الصفحة أكبر من 800 بكسل فلن يحدث شيء. ولكن إن كان عرض الشاشة أصغر من هذا الرقم تُبْدَل ‘large’ بكلمة ‘small’.

HTML5 و CSS3 Polyfills

تتوفّر في الوقت الحاضر polyfills لمختلف مزايا HTML5 وCSS3 تقريبًا، وقد وفّر الفريق المسؤول عن تطوير Modernizr قائمة مفصّلة بالـ polyfills المتوفّرة، والتي يمكن استخدامها حسب الحاجة.

كذلك وضع نفس الفريق قائمة بجميع ميزات HTML5 و CSS3 الجديدة إضافة إلى تعليمات استخدام هذه الميزات بصورة صحيحة. يجب الانتباه إلى أنّه لا تحتاج جميع هذه الميزات إلى الـ Polyfills، إذ يمكن الاستفادة من بعضها مباشرة أو من خلال الدعم التراجعي.

اختبار الموقع في متصفحات مختلفة

ربّما تكون عملية اختبار الموقع الإلكتروني سواء من ناحية التصميم أو التطوير في المتصفحات أمرًا متعبًا للغاية، وبصورة عامة فإنّ المتصفحات الحديثة مثل Chrome، Firefox و Safari تعمل جيّدًا، إلا أن غالبية المشاكل تظهر في متصفح Internet Explorer، إضافة إلى أن اختبار إصدارات مختلفة من هذا المتصفح قد يكون أمرًا صعبًا.

هناك العديد من الخدمات التي تساعد على اختبار الموقع الإلكتروني في المتصفحات المختلفة، بعضها تفاعلي وبعضها لا. تساعد القدرة على التفاعل مع المتصفح بدلًا من رؤية لقطة شاشة للموقع كثيرًا على تنقيح الشفرة البرمجية. ومن أفضل الطرق لاستخدام إصدارات مختلفة من متصفح Internet Explorer هي استخدام الآلات الافتراضية Virtual Machines، بحيث تتضمن كل آلة إصدارًا مختلفًا من هذا المتصفح.

يظهر في الصورة أعلاه برنامج VirtualBox يعمل على نظام Mac OS X مع المتصفح Internet Explorer من الإصدار السادس إلى التاسع.

تقدّم Microsoft مجموعة من الحواسيب الافتراضية Virtual PCs التي يمكن استخدامها في عملية الاختبار، ولكن يمكن لعملية الإعداد أن تكون مرهقة وصعبة. لحسن الحظ قام Greg Thornton ببناء أداة تُؤَتْمِت عملية تنصيب الآلات الافتراضية. تستغرق عملية التنصيب بعض الوقت وذلك لتنزيل جميع الآلات الافتراضية المتوفرة، وستحتاج كذلك إلى مساحة كبيرة على القرص الصلب، ولكن يمكن تثبيت الآلات الافتراضية التي تحتاج إليها فقط، وبالنظر إلى وتيرة استخدامك لهذه الآلات الافتراضية، قد يكون من الأفضل تنصيبها على قرص صلب خارجي.

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

يظهر في الصورة أعلاه الإصدار السابع من Internet Explorer يعمل في آلة افتراضية مع استخدام أداة Firebug Lite لتنقيح الشفرة البرمجية.

ترجمة - وبتصرّف - للمقال Feature Support & Polyfills لصاحبه Shay Howe.

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

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

إستراتيجية وبنية الشفرة الأساسية

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

بنية الأنماط Styles

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

    # Base
      – normalize.css
      – layout.css
      – typography.css

    # Components
      – alerts.css
      – buttons.css
      – forms.css
      – list.css
      – nav.css
      – tables.css

    # Modules
      – aside.css
      – footer.css
      – header.css

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

يتضمن المجلد base الأنماط الشائعة والمتغيّراات المستخدمة في أرجاء الموقع الإلكتروني كالأنماط المتعلقة بمخطط الصفحات وتنسيق النصوص على سبيل المثال. أما المجلد components (المكوّنات) فيتضمن الأنماط الخاصة بعناصر واجهة الاستخدام والتي يمكن تقسيمها إلى مكونات مختلفة مثل التنبيهات والأيقونات. أخيرًا، يتضمن المجلد modules (الوحدات) الأنماط الخاصة بأقسام الصفحة المختلفة، والتي تُحدَّد حسب طبيعة المشروع واحتياجاته.

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

إن ترتيب الأنماط بهذه الأسلوب ليس أمر مستحدثًا، وقد ورد ذكره سابقًا في عدد من منهجيات CSS مثل CSS كائنية التوجه Object Oriented CSS أو OOCSS اختصارًا، وبنية CSS القابلة للتجميع والتوسع Scalable and Modular Architecture for CSS أو SMACSS اختصارًا. لكل واحدة من هذه المنهجيات آراؤها الخاصة حول بنية الملفات وكذلك حول طريقة استخدام الأنماط.

CSS كائنية التوجه

Nicole Sullivan واحدة من روّاد منهجية CSS كائنية التوجه وذلك في عملها المتمثّل في كتابة الأنماط الخاصة بالمواقع الإلكترونية الكبيرة. تضع هذه المنهجية مبدأين أساسيين يساعدان على بناء مواقع إلكترونية قابلة للتوسع تعتمد على بنية قوية ومتماسكة وبمقدار معقول من الشفرة البرمجية. وهذا المبدآن هما:

• فصل البنية عن القشرة،
• فصل المحتوى عن الحاوي.

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

أما فصل المحتوى عن الحاوي فيعني عدم اعتماد العناصر الأبناء على العنصر الأب، فعلى سبيل المثال يجب أن يظهر العنوان بنفس المظهر بغض النظر عن العنصر الأب الذي يحتويه. ولتحقيق هذا، يجب أن ترث العناصر أنماطًا مبدئية، ثم تُوسَّع هذه الأنماط حسب الحاجة.

HTML

    <div class="alert alert-error">
      <p class="msg">...</p>
    </div>

CSS

    .alert {...}
    .alert-error {...}
    .msg {...}

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

بنية CSS القابلة للتجميع والتوسع

المنهجية الثانية في تنظيم شفرة CSS هي المنهجية التي طوّرها Jonathan Snook تحت اسم بنية CSS القابلة للتجميع والتوسع. تدعو هذه المنهجية إلى تقسيم الأنماط إلى خمسة فئات رئيسية، هي:

• الأساس Base،
• المخطط Layout،
• الوحدة Module،
• الحالة State،
• السمة Theme.

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

HTML

    <div class="alert is-error">
      <p>...</p>
    </div>

CSS

    .alert {...}
    .alert.is-error {...}
    .alert p {...}
    .alert.is-error p {...}

في المثال السابق يكون الصنف alert ضمن فئة الوحدة في حين أن الصنف is-error يكون ضمن فئة الحالة. بعد ذلك تُتوارث الأصناف من هذه الفئات حسب الحاجة.

أي منهجية ستختار؟

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

تحسين الأداء بواسطة المحدّدات Selectors

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

اجعل المحدّدات قصيرة قدر الإمكان

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

    /* سيء */
    header nav ul li a {...}

    /* جيد */
    .primary-link {...}

    /* سيء */
    button strong span {...}
    button strong span .callout {...}

    /* جيد */
    button span {...}
    button .callout {...}

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

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

إن الهدف الأساسي من تقصير المحدّدات هو تقليل التخصصية وكتابة شفرة أوضح وأكثر ترتيبًا.

استخدم الأصناف Classes دائمًا

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

تُصيَّر المحدّدات من اليمين إلى اليسار؛ لذا فمن الضروري أن تعتني جيّدًا بـ المحدّد الرئيسي Key selector وهو المحدد الأخير ضمن قائمة المحدّدات من الجهة اليمنى، وهو محدّد مهمّ للغاية؛ لأنّه يحدّد العنصر الأول الذي سيعثر عليه المتصفح أثناء بحثه ضمن الصفحة، وسيؤدي عدم الاعتناء بالمحدد الرئيسي إلى دخول المتصفح في فوضى عارمة.

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

    /* سيء */
    #container header nav {...}

    /* جيد */
    .primary-nav {...}

    /* سيء */
    article.feat-post {...}

    /* جيد */
    .feat-post {...}

يجدر بك كذلك الابتعاد عن استخدام محدّدات المعرّفات ID selectors قدر الإمكان؛ ذلك لأنّها محدّدات مخصّصة جدًّا ولا تسمح بإعادة استخدامها في أي مكان آخر، ويسعني القول إنّ استخدام المعرّف لا يختلف كثيرًا عن استخدام !important.

الشفرة القابلة لإعادة الاستخدام

إن أحجام الملفات الكبيرة وعمليات التصيير غير الضرورية التي يقوم بها المتصفح هي من أكبر العوائق التي تقف في وجه الأداء الجيد. وإعادة استخدام الأنماط قدر الإمكان من أسرع الطرق في تقليل حجم ملفات CSS، إذ يجب دمج أنماط الواجهة Interface patterns والأنماط المكررة ليكون بالإمكان مشاركة الشفرة ذاتها على عدد من العناصر. فعلى سبيل المثال لو كانت هناك وحدتان تتشاركان في عدد من الخصائص (كلون الخلفية، والأركان الدائرية، والظل) فلا حاجة على الإطلاق للتصريح عن النمط ذاته مرتين، بل يمكن دمج هذه الخصائص في صنف واحد، وبهذا تكتب الأنماط مرة واحدة ويكون بالإمكان مشاركتها في أماكن مختلفة.

ولكن يجب الانتباه إلى أنّ إعادة استخدام الشفرة لا يكون على حساب الدلالية Semantics. يمكن في هذه الحالة استخدام زوج من المحددات وفصلهما بفاصلة، وبهذا يمكن للأنماط أن تكون متوارثة بين المحدّدين في الوقت ذاته. هناك طريقة أخرى غالبًا ما نراها في منهجيتيْ OOCSS و SMACSS اللتين تحدّثنا عنهما سابقًا، وتتلخّص هذه الطريقة في تعريف الأنماط في صنف واحد، ثم تطبيق أصناف متعددة على العنصر ذاته.

    /* سيء */
    .news {
      background: #eee;
      border-radius: 5px;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
    }
    .social {
      background: #eee;
      border-radius: 5px;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
    }

    /* جيد */
    .news,
    .social {
      background: #eee;
      border-radius: 5px;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
    }

    /* الأفضل */
    .modal {
      background: #eee;
      border-radius: 5px;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
    }

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

الخطوة المواليّة لتنظيم شفرة CSS هي معرفة أساسيّات تحسين أداء الموقع.

ترجمة - وبتصرّف - للمقال Performance & Organization لصاحبه Shay Howe.
حقوق الصورة البارزة محفوظة لـ Freepik

كانت القدرة على التحكم بتأثيرات الانتقال Transitions والحركة Animations من إحدى الميزات التي أتت بها CSS3، وقد كان مطورو الواجهات الأمامية بحاجة كبيرة إلى مثل هذه الميزة لتصميم هذه التأثيرات باستخدام HTML و CSS فقط دون الحاجة إلى استخدام Javascript أو Flash، وقد تحققت رغبتهم أخيرًا وبعد سنوات عديدة.

تتيح تأثيرات الانتقال في CSS3 تغيير مظهر أو سلوك العنصر عندما تتغير حالته، كأن يُمرَّر مؤشر الفأرة فوق العنصر hover، أو عند التركيز focus أو التنشيط active أو استهداف العنصر.

أما تأثيرات الحركة في CSS3 فتتيح تغيير هيئة وسلوك العنصر من خلال مفاتيح keyframes متعددة، وهذا يعني أن تأثيرات الانتقال تقدّم تغيّرًا من حالة إلى أخرى، في حين أن تأثيرات الحركة تقدّم نقاطًا متعددة من الانتقالات من خلال مفاتيح مختلفة.

تأثيرات الانتقال

مثلما ذكرنا سابقًا، فإنّه ولكي يحدث تأثير الانتقال يجب أن يحدث تغير في حالة العنصر، كذلك يجب تعريف أنماط مختلفة لكل حالة من هذه الحالات. وأسهل طريقة لتحديد الأنماط لمختلف الحالات هي استخدام أشباه الأصناف التالية: :hover، :focus، :active ،:target.

هناك أربعة خصائص مرتبطة بتأثيرات الانتقال وهي: transition-property، transition-duration، transition-timing-function، و transition-delay. ليست جميع هذه الخصائص مطلوبة لإنتاج تأثيرات الحركة، ولكن الخصائص الثلاثة الأولى هي الأكثر استخدامًا.

في المثال التالي سيتغير لون خلفية background الصندوق خلال ثانية واحدة وبطريقة تدريجية خطّية linear.

    .box {
      background: #2db34a;
      transition-property: background;
      transition-duration: 1s;
      transition-timing-function: linear;
    }
    .box:hover {
      background: #ff7b29;
    }

سوابق المتصفحات Vendor Prefixes

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

ولغرض التوضيح فقط، فإن الشفرة السابقة ستكون هكذا:

    .box {
        background: #2db34a;
        -webkit-transition-property: background;
           -moz-transition-property: background;
             -o-transition-property: background;
                transition-property: background;
        -webkit-transition-duration: 1s;
           -moz-transition-duration: 1s;
             -o-transition-duration: 1s;
                transition-duration: 1s;
        -webkit-transition-timing-function: linear;
           -moz-transition-timing-function: linear;
             -o-transition-timing-function: linear;
                transition-timing-function: linear;
    }
    .box:hover {
      background: #ff7b29;
    }

خاصية الانتقال

تحدّد خاصية transition-property بدقّة الخصائص التي سيتم تغييرها بالتزامن مع الخصائص الانتقالية الأخرى. تتغيّر جميع الخصائص - مبدئيًّا - ضمن الحالات المختلفة للعنصر، ولكن يمكن تحديد الخصائص المراد تغييرها ضمن قيمة transition-property وستتأثّر تلك الخصائص فقط بتأثيرات الانتقال.

في المثال السابق قمنا بتعريف الخاصية background قيمةً لـ transition-property، وهذا يعني أنّها ستكون الخاصية الوحيدة التي ستخضع للتغيّر خلال ثانية واحدة وبطريقة تدريجية خطّية linear. بمعنى أنّه في حال وجود عدد من الخصائص لعنصر معيّن عند تغيّر حالته، ولكنّها غير معرّفة كقيمة لـ transition-property فإنّها لن تتلقى تأثيرات الانتقال كتلك المعرّفة في الخصائص transition-duration أو transition-timing-function.

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

    .box {
        background: #2db34a;
        border-radius: 6px
        transition-property: background, border-radius;
        transition-duration: 1s;
        transition-timing-function: linear;
      }
      .box:hover {
        background: #ff7b29;
        border-radius: 50%;
      }

الخصائص التي تسمح بتطبيق تأثيرات الانتقال عليها

من الضروري الانتباه إلى أنّه لا تتقبّل جميع الخصائص تطبيق تأثيرات الانتقال عليها، بل فقط تلك العناصر التي تمتلك نقاطًا وسطية قابلة للتعريف. فخصائص مثل الألوان، حجم الخط وما شابهها يمكن تطبيق تأثيرات الانتقال عليها نظرًا لكونها تملك قيمًا معرّفة بين بعضها البعض. في حين أن خاصية display على سبيل المثال لا يمكنها تقبّل تأثيرات الانتقال لأنّها لا تملك أيّة قيم وسطية. القائمة التالية تبيّن مجموعة من الخصائص الشائعة التي يمكن تطبيق تأثيرات الانتقال عليها:

• background-color
• background-position
• border-color
• border-width
• border-spacing
• bottom
• clip
• color
• crop
• font-size
• font-weight
• height
• left
• letter-spacing
• line-height
• margin
• max-height
• max-width
• min-height
• min-width
• opacity
• outline-color
• outline-offset
• outline-width
• padding
• right
• text-indent
• text-shadow
• top
• vertical-align
• visibility
• width
• word-spacing
• z-index

مدة تأثير الانتقال

يمكن تعيين المدة التي يستغرقها تأثير الانتقال من خلال خاصية transition-duration، ويمكن استخدام وحدات توقيت عامة وهي الثانية (s) والمللي ثانية (ms)، ويمكن استخدام الأعداد العشرية في تعيين هذه القيمة، فمثلًا يمكن استخدام الصيغة التالية: .2s.

عند تطبيق تأثير الانتقال على خصائص متعددة يمكن تعيين مدد متعددة أيضًا لكل خاصية، وكما هو الحال عند تعيين قيمة خاصية transition-property يمكن استخدام الفاصلة لتعيين قيم متعددة لخاصية مدة الانتقال. ولكن من الواجب الانتباه إلى أنّه عند تعيين مدد متعددة يجب مراعاة الترتيب المتّبع في تعيين الخصائص التي ستتلقّى تأثير الانتقال بواسطة خاصية transition-property، بمعنى أنّ القيمة الأولى في هذا الخاصية ستأخذ القيمة الأولى في خاصية transition-duration وهكذا دواليك.

وإن طُبِّق تأثير الانتقال على خصائص متعددة مع تعيين قيمة واحدة لمدّة التأثير، فإن تلك القيمة ستطبّق على جميع الخصائص.

    .box {
    background: #2db34a;
      border-radius: 6px;
      transition-property: background, border-radius;
      transition-duration: .2s, 1s;
      transition-timing-function: linear;
    }
    .box:hover {
      background: #ff7b29;
      border-radius: 50%;
    }

توقيت تأثير الانتقال

تُستخدَم خاصّية transition-timing-function لتعيين سرعة تأثير الانتقال، ويمكن لهذا التأثير أن يمتلك سرعات مختلفة ضمن مدة زمنية واحدة وذلك بعد تعيين المدة من خلال خاصية transition-duration. وهناك قيم مفتاحية شائعة تُستخدَم مع هذه الخاصية مثل linear، ease-in، ease-out و ease-in-out.

عند استخدام قيمة linear فإن الحركة تكون بسرعة ثابتة من حالة إلى أخرى، أما عند استخدام القيمة ease-in فإن الحركة تبدأ ببطء وتتسارع تدريجيًا مع مرور الوقت، وعند استخدام القيمة ease-out فإن الحركة تبدأ بسرعة وتتباطئ تدريجيًا مع مرور الوقت. أما عند استخدام القيمة ease-in-out فإن الحركة تبدأ بطيئة ثم تتسارع في الوسط لتعود إلى التباطؤ قبل الوصول إلى نهاية المدة المحددة للتأثير.

تمتلك كل دالة توقيت منحنى بيزيه مكعبي Cubic-Bezier curve يمكن تعيين قيمه بدقّة بواسطة القيمة cubic-bezier(x1, y1, x2, y2) إضافة إلى قيم أخرى هي step-start و step-stop إلى جانب قيمة فريدة تحدّد من خلال steps(number_of_steps, direction).

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

    .box {
      background: #2db34a;
      border-radius: 6px;
      transition-property: background, border-radius;
      transition-duration: .2s, 1s;
      transition-timing-function: linear, ease-in;
    }
    .box:hover {
      background: #ff7b29;
      border-radius: 50%;
    }

تأخير تأثير الانتقال

إضافة إلى التصريح عن كل من خاصية التأثير والمدة الزمنية ودوال التوقيت، يمكن كذلك تعيين فترة تأخير تأثير الانتقال من خلال خاصّية transition-delay، حيث تُعيَّن قيمة زمنية - بالثانية أو بالمللي ثانية - تحدد الفترة الزمنية التي تسبق انطلاق التأثير. وكما هو الحال مع جميع خصائص تأثيرات الانتقال، يمكن تأخير عدد من التأثيرات من خلال إضافة قيم متعددة مفصولة بفواصل.

    .box {
      background: #2db34a;
      border-radius: 6px
      transition-property: background, border-radius;
      transition-duration: .2s, 1s;
      transition-timing-function: linear, ease-in;
      transition-delay: 0s, 1s;
    }
    .box:hover {
      background: #ff7b29;
      border-radius: 50%;
    }

الصيغة المختصرة لتأثيرات الانتقال

قد يصبح التصريح عن خصائص الانتقال واحدة تلو الأخرى أمرًا مجهدًا، خصوصًا مع استخدام سوابق المتصفحات، ولحسن الحظّ يمكن اختصار العملية من خلال استخدام الخاصية transition والتي تدعم جميع الخصائص والقيم السابقة. فباستخدام قيمة transition لوحدها، يمكنك تعريف كل خصائص تأثيرات الانتقال وبالترتيب التالي: transition-property, transition-duration, transition-timing-function, وأخيرًا transition-delay. ولا حاجة لاستخدام الفواصل عند تعريف قيم هذه الخصائص إلا إذا كنت تعرّف تأثيرات انتقال متعددة.

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

    .box {
      background: #2db34a;
      border-radius: 6px;
      transition: background .2s linear, border-radius 1s ease-in 1s;
    }
    .box:hover {
      color: #ff7b29;
      border-radius: 50%;
    }

تطبيق تأثيرات الانتقال على أيقونة

HTML

   <button>Awesome Button</button>

CSS

   button {
      border: 0;
      background: #0087cc;
      border-radius: 4px;
      box-shadow: 0 5px 0 #006599;
      color: #fff;
      cursor: pointer;
      font: inherit;
      margin: 0;
      outline: 0;
      padding: 12px 20px;
      transition: all .1s linear;
    }
    button:active {
      box-shadow: 0 2px 0 #006599;
      transform: translateY(3px);
    }

(تجربة حية)

بطاقة متقلّبة

HTML

    <div class="card-container">
      <div class="card">
        <div class="side">...</div>
        <div class="side back">...</div>
      </div>
    </div>

CSS

    .card-container {
      height: 150px;
      perspective: 600;
      position: relative;
      width: 150px;
    }
    .card {
      height: 100%;
      position: absolute;
      transform-style: preserve-3d;
      transition: all 1s ease-in-out;
      width: 100%;
    }
    .card:hover {
      transform: rotateY(180deg);
    }
    .card .side {
      backface-visibility: hidden;
      height: 100%;
      position: absolute;
      width: 100%;
    }
    .card .back {
      transform: rotateY(180deg);
    }

(تجربة حية)

تأثيرات الحركة

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

مفاتيح تأثيرات الحركة

يمكن استخدام قاعدة @keyframes لتعيين النقاط التي يجب أن يحدث فيها تأثير الانتقال. تتضمن هذه القاعدة اسم تأثير الحركة، والنقاط التي تحدث فيها الحركة، والخصائص التي نرغب في تحريكها.

    @keyframes slide {
      0% {
        left: 0;
        top: 0;
      }
      50% {
        left: 244px;
        top: 100px;
      }
      100% {
        left: 488px;
        top: 0;
      }
    }

إضافة سوابق المتصفحات إلى قاعدة keyframe

تجب إضافة سوابق المتصفحات إلى قاعدة @keyframes كما هو الحال مع خصائص تأثيرات الانتقال والحركة، وكما يلي:

• @-moz-keyframes
• @-o-keyframes
• @-webkit-keyframes

يحمل تأثير الحركة في المثال السابق اسم slide، وقد أفصحنا عنه مباشرة بعد قاعدة @keyframes. تُعيَّن نقاط حدوث الحركة باستخدام النسبة المئوية، ابتداءً من 0% وانتهاءً بـ 100% ونقطة وسطية عند 50%. كما يمكن استخدام الكلمات المفتاحية from و to بدلًا من 0% و 100%، كما يمكن تعيين أي عدد من النقاط ضمن هذا المدى. يُصرَّح عن خصائص العنصر التي نرغب في تحريكها داخل كل نقطة، وفي المثال السابق كانت الخصائص المطلوبة هي left و top.

من الضروري الانتباه إلى أنّه يمكن تحريك خاصّيّة واحدة فقط كما هو الحال مع تأثيرات الانتقال. فعلى سبيل المثال إن كنت ترغب في تحريك عنصر من الأعلى إلى الأسفل، فإن التحريك من top:0; إلى bottom: 0; لن يجدي نفعًا، لأن الحركة يمكن تطبيقها على خاصية واحدة فقط، وليس من خاصّية إلى أخرى؛ لذا من أجل تحريك العنصر من الأعلى إلى الأسفل يجب التحريك من top: 0; إلى top: 100%;.

(تجربة حية).

اسم تأثير الحركة

بعد تعيين مفاتيح الحركة الخاصّة بتأثير الحركة، يجب إسنادها إلى أحد العناصر في الصفحة. وللقيام بذلك نستخدم خاصّية animation-name مع الاسم الذي عيّناه لقاعدة @keyframes، وتستخدم هذه الخاصّية مع العنصر الذي نرغب في تطبيق تأثيرات الحركة عليه.

    .stage:hover .ball {
      animation-name: slide;
    }

لا يكفي استخدام خاصّية animation-name لوحدها، بل يجب تعيين قيمة لخاصية animation-duration ليعرف المتصفح المدة اللازمة لانتهاء التأثير.

مدة تأثير الحركة، دالة التوقيت، وتأخير الحركة

بعد أن تُعيّن قيمة خاصّية animation-name ستسلك تأثيرات الحركة نفس سلوك تأثيرات الانتقال، إذ يمكن تعيين مدّة التأثير وتعريف دالة التوقيت وتأخير التأثير حسب الرغبة. وليبدأ تأثير الحركة بالعمل فإنه بحاجة إلى تعيين مدّة التأثير من خلال خاصية animation-duration، وكما هو الحال مع تأثيرات الانتقال، يمكن لقيمة هذه الخاصّية أن تكون بالثانية أو بالمللي ثانية.

    .stage:hover .ball {
      animation-name: slide;
      animation-duration: 2s;
    }

يمكن تعريف دالّة التوقيت وتأخير تأثّر الحركة باستخدام الخاصّيتين animation-timing-function و animation-delay على التوالي، ولا يوجد أي فرق في القيم التي تستقبلها هاتان الخاصيتان أو طريقة عملها بين تأثيرات الانتقال وتأثيرات الحركة.

    .stage:hover .ball {
      animation-name: slide;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-delay: .5s;
    }

في المثال التالي سترتدّ الكرة (العنصر<figure> مع النمط ball) أثناء تحرّكها إلى جهة اليسار، ويمكن مشاهدة الحركة من خلال تمرير مؤشر الفأرة فوق العنصر <div> ذي النمط stage.

HTML

    <div class="stage">
      <figure class="ball"></figure>
    </div>

CSS

      0% {
        left: 0;
        top: 0;
      }
      50% {
        left: 244px;
        top: 100px;
      }
      100% {
        left: 488px;
        top: 0;
      }
    }
    .stage {
      height: 150px;
      position: relative;
    }
    .ball {
        height: 50px;
        position: absolute;
        width: 50px;
    }
    .stage:hover .ball {
      animation-name: slide;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-delay: .5s;
    }

(تجربة حية)

تخصيص تأثيرات الحركة

تتيح تأثيرات الحركة المزيد من التخصيص لسلوك العنصر، فيمكن تعيين عدد مرات تكرار الحركة والاتجاه الذي ستنتهي فيه الحركة.

تكرار تأثير الحركة

لا يتكرر تأثير الحركة بصورة افتراضية بل يتوقف بعد إتمام الدورة الأولى، ولجعل التأثير يتكرّر مرات متعددة يمكن استخدام خاصّية animation-iteration-count، وتتضمن قيم هذه الخاصية إمّا أعداد صحيحة أو كلمة infinite المفتاحية. في الحالة الأولى سيتكرر تأثير الحركة بحسب العدد المحدّد، أما في الحالة الثانية فإن تأثير الحركة سيتكرّر إلى ما لا نهاية.

    .stage:hover .ball {
      animation-name: slide;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-delay: .5s;
      animation-iteration-count: infinite;
    }

(تجربة حية)

اتجاه تأثير الحركة

وإلى جانب القدرة على تعيين عدد مرات تكرار تأثير الحركة، يمكن كذلك تعيين اتجاه انتهاء التأثير باستخدام الخاصية animation-direction، وتأخذ هذه الخاصية القيم: normal، reverse، alternate و alternate-reverse.

استخدام القيمة normal يعني أن الحركة ستسير بشكل طبيعي من البداية إلى النهاية، أما القيمة reverse فتعني أن الحركة ستسير بعكس الطريقة المصرّح عنها في قاعدة @keyframes، أي ستبدأ الحركة من 100% وتنتهي بـ 0%.

عند استخدام القيمة alternate فإن الحركة ستسير جيئة وذهابًا، أي ستبدأ الحركة من 0% لتتّجه إلى 100% ثم تعود من هذه القيمة إلى 0% مرة أخرى. يمكن تحديد عدد مرّات تكرار الحركة بالاتجاه الأمامي والخلفي وذلك باستخدام الخاصّية animation-iteration-count، حيث يبدأ العدّ من الرقم 1 فتبدأ الحركة من القيمة 0% وصولًا إلا 100% وتكتمل الدورة الأولى، بعد ذلك نعود من القيمة 100% إلى 0% فتضاف دورة أخرى إلى العدّاد، وبهذا نحصل على دورتين بالمجمل. تعمل القيمة alternate كذلك على قلب دوال التوقيت عند بدء الحركة بشكل عكسي، فإن كان تأثير الحركة يستخدم القيمة ease-in عند التحرك من 0% إلى 100% فإنّه سيستخدم القيمة ease-out عند الانتقال من 100% إلى 0%.

أخيرًا، تدمج القيمة alternate-reverse القيمتين alternate و reverse، وتكون الحركة بالاتجاه الخلفي ثم بالاتجاه الأمامي، أي تبدأ الحركة من 100% باتجاه 0% لتعود مرّة أخرى إلى 100%.

    .stage:hover .ball {
      animation-name: slide;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-delay: .5s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }

(تجربة حية)

حالة تأثير الحركة

تسمح خاصّية animation-play-state بتشغيل تأثير الحركة أو إيقافه مؤقتًا باستخدام خيارين هما running و paused على التوالي. عند إعادة تشغيل تأثير الحركة المتوقف مؤقتًا فإنّ التأثير يعود إلى الحركة من النقطة التي توقّف عندها وليس من نقطة البداية.

في المثال التالي تم تعيين قيمة paused للخاصّية animation-play-state وذلك عند النقر على العنصر

    .stage:hover .ball {
      animation-name: slide;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-delay: .5s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }
    .stage:active .ball {
      animation-play-state: paused;
    }

(تجربة حية)

نمط التعبئة الخاصّ بتأثير الحركة

تعرّف الخاصّية animation-fill-mode النمط الذي سيطبّق على العنصر قبل أو بعد أو قبل وبعد عمل تأثير الحركة، ولهذه الخاصّية أربع قيم هي: none, forwards, backwards, و both.

عند استخدام القيمة none لن يتم تطبيق أي نمط على العنصر قبل أو بعد تطبيق تأثير الحركة.

القيمة forwards ستحافظ على الأنماط المعرّفة في المفتاح الحركي الأخير، ولكن يجب الانتباه إلى أن هذه الأنماط قد تتأثّر بقيم الخاصّيتين animation-direction و animation-iteration-count فتتغيّر نقطة انتهاء تأثير الحركة.

القيمة backwards ستطبّق الأنماط الموجودة في المفتاح الحركي الأول بمجرد أن يتم تعريفها، وقبل انطلاق تأثير الحركة، وهذا يتضمن تطبيق تلك الأنماط خلال مدة التأخير المحدّدة لتأثير الحركة. إلى جانب ذلك، فإنّ القيمة backwards قد تتأثّر بقيمة الخاصّية animation-direction.

وأخيرًا، فإنّ القيمة both تجمع في عملها بين عمل القيمتين السابقتين.

    .stage:hover .ball {
      animation-name: slide;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-delay: .5s;
      animation-fill-mode: forwards;
    }
    .stage:active .ball {
      animation-play-state: paused;
    }

(تجربة حية)

صيغة مختصرة لتأثيرات الحركة

كما هو الحال مع تأثيرات الانتقال، هناك صيغة مختصرة لتعريف تأثيرات الحركة، ويتم ذلك من خلال استخدام الخاصية animation بدلًا من تعريف القيم واحدة تلو الأخرى. وتأخذ القيم التابعة لهذه الخاصية الترتيب التالي: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, وأخيرًا animation-play-state.

    .stage:hover .ball {
      animation: slide 2s ease-in-out .5s infinite alternate;
    }
    .stage:active .ball {
      animation-play-state: paused;
    }

(تجربة حية)

ترجمة - وبتصرّف - للمقال Transitions & Animations لصاحبه Shay Howe.

سنستعمل في هذا الدرس تحريكات CSS بسيطة إضافةً إلى بعض شفرات JavaScript لإنشاء ساعة متحركة.
سنُنشِئ هذه الساعة باستخدام HTML و CSS وخلفية SVG إضافةً إلى بعض أسطر JavaScript. سنستعمل التحريكات Animations أو الانتقالات Transitions في CSS، وسنعتمد على JavaScript لضبط التوقيت الابتدائي.

ملحوظة: يتضمّن الملف المرفق شفرة الأمثلة المذكورة في هذا الدرس.

شفرات HTML

سنبدأ بإضافة بعض شفرات HTML. فكَّرتُ بداية الأمر باستخدام ثلاثة عناصر لكل عقرب من عقارب الساعة، ومن ثم وضعتُ تلك العناصر ضمن حاوية؛ وصحيحٌ أننا نستطيع استخدام العناصر الثلاثة بمفردها مع تحريكات CSS لكننا سنحتاج إلى الحاويات (Containers) لوضع العقارب في مكانها المناسب وتحريكها.

<article class="clock">
  <div class="hours-container">
    <div class="hours"></div>
  </div>
  <div class="minutes-container">
    <div class="minutes"></div>
  </div>
  <div class="seconds-container">
    <div class="seconds"></div>
  </div>
</article>

لن نستخدم الشفرة أعلاه الآن، لكننا سنكتبها خطوة خطوة. بالنسبة للتنسيقات فسنعتمد على ملف التنسيقات assets/clocks.css في المرفق مع شرح العناصر الأساسية فيه.

إن أردتَ رؤية النتيجة التي نريد الوصول إليها بنهاية الدرس فتمكنك معاينة المستند examples/1.html الموجود في الملف المرفق.

واجهة الساعة

نستخدم الشفرة التالية في ملف التنسيقات لإعطاء الساعة شكلها الدائري.

.clock {
  border-radius: 50%;
  background: #fff url(ios_clock.svg) no-repeat center;
  background-size: 88%;
  height: 20em;
  padding-bottom: 31%;
  position: relative;
  width: 20em;
}

.clock.simple:after {
  background: #000;
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5%;
  height: 5%;
  z-index: 10;
}

أضفنا أيضًا دائرةً سوادء اللون في المنتصف وجعلناها «أعلى» من غيرها (عبر خاصية z-index) لكي تقع عقارب الساعة خلفها.

نضع المحتوى التالي في ملف HTML:

<link rel="stylesheet" href="assets/clocks.css">

<div class="demo-container clocks single">
    <article class="clock simple show"></article>
</div>

إن فتحت الملف الناتج عن هذه الخطوة (examples\2.html) في المتصفح، والذي يحوي شفرة HTML التي تحصلنا عليها لحدّ الساعة، فستجد أنه يرسم شكل الساعة ولكن من دون عقارب.

تضبط الشفرة التاليّة في ملف CSS موضع الحاويات قبل إضافة العقارب:

.minutes-container, .hours-container, .seconds-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

عقرب الساعات

نضيف الحاويّة الخاصّة بعقرب الساعات، والعنصر الخاص بالعقرب نفسه إلى ملف HTML:

<link rel="stylesheet" href="assets/clocks.css">

<div class="demo-container clocks single">
    <article class="clock simple show">
        <div class="hours-container">
            <div class="hours"></div>
        </div>
    </article>
</div>

نحصُل على الملف examples/3.html.

إن نظرت في ملف تنسيقات CSS فستجد أننا نستعمل القيمة absolute للخاصية position لجعل مكان العقرب مطلقًا.

.hours {
  background: #000;
  height: 20%;
  left: 48.75%;
  position: absolute;
  top: 30%;
  transform-origin: 50% 100%;
  width: 2.5%;
}

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

عقرب الدقائق

وهو يشبه عقرب الساعات، لكنه أطول وأضيق. نضيفه أولا إلى ملف HTML:

<link rel="stylesheet" href="assets/clocks.css">

<div class="demo-container clocks single">
    <article class="clock simple show">
        <div class="hours-container">
            <div class="hours angled"></div>
        </div>
        <div class="minutes-container" style="transform: rotateZ(6deg);">
            <div class="minutes"></div>
        </div>
    </article>
</div>

نحصُل على المستند examples/4.html. يُنسَّق الصنف في CSS على النحو التالي:

.minutes {
  background: #000;
  height: 40%;
  left: 49%;
  position: absolute;
  top: 10%;
  transform-origin: 50% 100%;
  width: 2%;
}

عقرب الثواني

أما عقرب الثواني، فهو أكثر ضيقًا من سابقه، لكنه يمتد إلى ما بعد منتصف الساعة. نضيف عنصر العقرب ضمن حاويتّه فنحصُل على examples/5.html:

<link rel="stylesheet" href="assets/clocks.css">

<div class="demo-container clocks single">
    <article class="clock simple show">
        <div class="hours-container">
            <div class="hours angled"></div>
        </div>
        <div class="minutes-container" style="transform: rotateZ(6deg);">
            <div class="minutes angled"></div>
        </div>
        <div class="seconds-container">
            <div class="seconds"></div>
        </div>
    </article>
</div>

لتنسيق طول عقرب الثواني وضيقه ضبطنا قيمة الخاصية transform-origin إلى 80%، مما يبقي 20% من العقرب ممتدةً بعيدًا عن المنتصف.

.seconds {
  background: #000;
  height: 45%;
  left: 49.5%;
  position: absolute;
  top: 14%;
  transform-origin: 50% 80%;
  width: 1%;
  z-index: 8;
}

لدينا الآن ساعة دائرية بالعقارب المطلوبة: الساعات، الدقائق والثواني؛ إلا أنّ هذه العقارب ثابتة ولا تتحرك كما يجدر بها أن تفعل. سنضبُط هذا الأمر في الفقرات التالية.

الحركة

تنتقل عقارب بعض أنواع الساعات كل ثانية محدثةً صوتًا، وأخرى تتحرك عقاربها بسلاسة. لنفعل كلا الأمرين ولنبدأ بتحريك العقارب بسلاسة أولًا. استخدمنا في كلتا الحالتين التعليمة keyframes لتحريك العقارب 360 درجة:

@keyframes rotate {
  100% {
    transform: rotateZ(360deg);
  }
}

عقرب الساعات يتحرك بخطوات متصلة

ستطلب الشِفرة السابقة من العنصر أن يدور 360 درجة إذا استخدمنا الخاصية animation في صنف CSS المطبّق على عنصر HTML. يتيح استخدام دالة الزمن linear أن تكون الحركة خطيّةً وسلسةً:

.hours-container {
  animation: rotate 43200s infinite linear;
}
.minutes-container {
  animation: rotate 3600s infinite linear;
}
.seconds-container {
  animation: rotate 60s infinite linear;
}

سندوِّر عقرب الساعات hours مرةً كل 12 ساعة (أي 43200 ثانية)، وسيدور عقرب الدقائق دورةً كاملةً كل ساعة (3600 ثانية)، أما عقرب الثواني فيكمل دورته كل دقيقة (60 ثانية).

ينتُج لدينا مستند examples/6.htmlوالذي يحوي شفرة HTML التالية:

<link rel="stylesheet" href="assets/clocks.css">

<div class="demo-container clocks single linear">
    <article class="clock simple show">
        <div class="hours-container">
            <div class="hours angled"></div>
        </div>
        <div class="minutes-container" style="transform: rotateZ(6deg);">
            <div class="minutes angled"></div>
        </div>
        <div class="seconds-container">
            <div class="seconds"></div>
        </div>
    </article>
</div>

إذا كنتَ ذا بصرٍ ثاقب، فستلاحظ حركة عقرب الدقائق البطيئة جدا؛ حيث سيحتاج إلى ساعةٍ كاملةٍ لإكمال دورانه؛ أما عقرب الثواني فسيحتاج إلى 60 ثانية فقط مما يُسهِّل ملاحظته.

عقرب الثواني يتحرك بخطوات منفصلة

يمكننا جعل حركة العقارب كما في الساعات التقليدية بتحريك عقرب الثواني 60 حركة منفصلة في الدقيقة. إحدى أبسط الطرائق لفعل ذلك هي استخدام دالة التوقيت steps، أي ستصبح الخاصية animation كما يلي:

.minutes-container {
  animation: rotate 3600s infinite steps(60);
}
.seconds-container {
  animation: rotate 60s infinite steps(60);
}

ونعدّل ملف HTML لنحصُل على مستند examples/7.html ذي المحتوى التالي (لاحظ استخدام الصنف steps مكان الصنف linear):

<link rel="stylesheet" href="assets/clocks.css">

<div class="demo-container clocks single steps">
    <article class="clock simple show">
        <div class="hours-container">
            <div class="hours angled"></div>
        </div>
        <div class="minutes-container" style="transform: rotateZ(6deg);">
            <div class="minutes angled"></div>
        </div>
        <div class="seconds-container">
            <div class="seconds"></div>
        </div>
    </article>
</div>

أصبح عقربا الساعة يتحركان 60 حركة منفصلة لإتمام الدورة، وسيحسب المتصفح تلقائيًا ما هي المسافة المقطوعة في كل خطوة.

إظهار الوقت الصحيح

صحيحٌ أنَّ الساعات السابقة جميلة، لكنها لا تعرض الوقت الحالي. يمكننا عرض الوقت الصحيح باستخدام بعض شِفرات JavaScript:

/*
 * البدء بالوقت المضبوط في جهاز المستخدم
 * From: cssanimation.rocks/clocks
 */
function initLocalClocks() {
  // Get the local time using JS
  var date = new Date;
  var seconds = date.getSeconds();
  var minutes = date.getMinutes();
  var hours = date.getHours();

  // إنشاء كائن لعقارب الساعة لثلاثة: الساعات، الدقائق والثواني
  var hands = [
    {
      hand: 'hours',
      angle: (hours * 30) + (minutes / 2)
    },
    {
      hand: 'minutes',
      angle: (minutes * 6)
    },
    {
      hand: 'seconds',
      angle: (seconds * 6)
    }
  ];
  //  ضبط زوايا العقارب
  for (var j = 0; j < hands.length; j++) {
    var elements = document.querySelectorAll('.' + hands[j].hand);
    for (var k = 0; k < elements.length; k++) {
        elements[k].style.webkitTransform = 'rotateZ('+ hands[j].angle +'deg)';
        elements[k].style.transform = 'rotateZ('+ hands[j].angle +'deg)';
        // إذا تعلق الأمر بعقرب الدقائق فإننا نحفظ الثواني لحساب موضع عقرب الدقائق في ما بعد
                if (hands[j].hand === 'minutes') {
          elements[k].parentNode.setAttribute('data-second-angle', hands[j + 1].angle);
        }
    }
  }
}

هذه الدالة تحوِّل الوقت الحالي (الساعات والدقائق والثواني) إلى الزاوية الموافقة له لكل عقربٍ من عقارب الساعة، ومن ثم ستُطبِّق الزاوية الصحيحة لكل عقرب على حدة باستخدام القيمة rotateZ على الخاصية style.transform.
نضيف إلى مستند HTML قيما مبدئيّة للخاصيّتين style.transform وdata-second-angle (التي تحفظ الثواني لحساب موضع عقرب الدقائق). بدون هذه القيم لن تجد شفرة جافاسكربت السابقة العناصر لتنفيذ التعليمات عليها.

نحصُل في ختام هذه الخطوة على المستند examples/8.html (الذي يستدعي ملف جافاسكريبت clocks.js حيث توجد دوال جافاسكربت السابقة).

سيعمل ما سبق في أغلبية المتصفحات دون مشاكل، عدا متصفح Safari الذي علينا استعمال سابقة (prefix) خاصة معه، ولهذا السبب سنستعمل الخاصية style.webkitTrasform أيضًا.

مزامنة حركة عقرب الثواني والدقائق

علينا الحرص على تحريك عقرب الدقائق عندما يبلغ عقرب الثواني الساعة الثانية عشرة، كما في الصورة المتحركة الآتية.

عندما تُرسَم الساعة على الشاشة لأوّل مرة، فيجب تحريك عقرب الدقائق بعد أقل من دقيقة واحدة، ولفعل ذلك علينا حساب متى ستنتهي أوّل دقيقة ومن ثم تحريك العقرب يدويًا. ولمّا كنّا نستعمل JavaScript لضبط الحركة الأوليّة، فسنستمر باستخدامها عبر تحريك العقرب بمقدار ست درجات كل دقيقة باستخدام الدالة setInterval.
وقبل تحريك عقرب الدقائق، علينا حساب كم تبقى من الدقيقة الحالية. ربما لاحظتَ هذه الأسطر في الشِفرة السابقة:

if (hands[j].hand === 'minutes') {
  elements[k].parentNode.setAttribute('data-second-angle', hands[j + 1].angle);
}

الأسطر السابقة تختبر إن كان العقرب هو عقرب الدقائق، وإذا تحقق ذلك فسنضبط خاصيةً باسم data-second-angle تحتوي على الزاوية الحالية لعقرب الثواني. يمكننا الاستفادة من هذه المعلومات لتحريك عقرب الدقائق.

/*
ضبط المدة المتبقية من الدقيقة عند ظهور الساعة لأول مرة، ثم تحريك العقرب كل دقيقة بعد انتهاء الدقيقة التي ظهرت فيها الساعة على الصفحة.
 */
function setUpMinuteHands() {
  // إيجاد القدر المتبقي من الدقيقة عند ظهور الساعة
  var containers = document.querySelectorAll('.minutes-container');
  var secondAngle = containers[0].getAttribute("data-second-angle");
  if (secondAngle > 0) {
    // ضبط عدّاد ينتهي مع الدقيقة الحالية من أجر تحريك عقرب الدقائق

    var delay = (((360 - secondAngle) / 6) + 0.1) * 1000;
    setTimeout(function() {
      moveMinuteHands(containers);
    }, delay);
  }
}

/*
 * تدوير العقرب بالنسبة للدقيقة الأولى
 */
function moveMinuteHands(containers) {
  for (var i = 0; i < containers.length; i++) {
    containers[i].style.webkitTransform = 'rotateZ(6deg)';
    containers[i].style.transform = 'rotateZ(6deg)';
  }
  // الاستمرار بعد الدقيقة الأولى في تدوير عقرب الدقائق كل 60 ثانية
  setInterval(function() {
    for (var i = 0; i < containers.length; i++) {
      if (containers[i].angle === undefined) {
        containers[i].angle = 12;
      } else {
        containers[i].angle += 6;
      }
      containers[i].style.webkitTransform = 'rotateZ('+ containers[i].angle +'deg)';
      containers[i].style.transform = 'rotateZ('+ containers[i].angle +'deg)';
    }
  }, 60000);
}

إضافة ارتداد للعقارب

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

عندما نضبط زاويةً جديدةً في JavaScript للعقرب، فسيُطبّق انتقالٌ (transition) في CSS الذي سيخبر المتصفح عن الحركة، وهذا يعني أنَّ شِفرة JavaScript ستتعامل مع تغيرات بسيطة في الزاوية وسيتكفّل المتصفح بعملية التحريك.
قبل فعل ذلك، علينا تحديث الشِفرة لاستخدام JavaScript لتحريك عقرب الثواني أيضًا، حيث سنستخدم الشِفرة الآتية لتحريك حاوية عقرب الثواني ستين مرة في الدقيقة:

/*
 * تحريك حاويات الثواني
 */
function moveSecondHands() {
  var containers = document.querySelectorAll('.seconds-container');
  setInterval(function() {
    for (var i = 0; i < containers.length; i++) {
      if (containers[i].angle === undefined) {
        containers[i].angle = 6;
      } else {
        containers[i].angle += 6;
      }
      containers[i].style.webkitTransform = 'rotateZ('+ containers[i].angle +'deg)';
      containers[i].style.transform = 'rotateZ('+ containers[i].angle +'deg)';
    }
  }, 1000);
}

بعد أن أصبحت حركة عقارب الثواني والدقائق مدارةً من JavaScript، فعلينا تحديث شِفرة CSS لنستبدل الخاصية transitions بالخاصية animation:

.minutes-container {
  transition: transform 0.3s cubic-bezier(.4,2.08,.55,.44);
}
.seconds-container {
  transition: transform 0.2s cubic-bezier(.4,2.08,.55,.44);
}

هذه الانتقال الذي طبّقناه على خاصية transform يستعمل دالة التوقيت cubic-bezier، وهذه الدالة ستعطي العقرب حركةً ارتداديةً إلى الخلف قبل الدوران باتجاه عقارب الساعة.

يمكنك تجربة التأثيرات المضافة في هذه الفقرة بمعاينة الملف examples/9.html.

محاكاة الساعة الموجودة في نظام iOS 7

أنا أحد معجبي بساطة الساعة المستعملة في نظام iOS 7؛ وبإعادة تنسيق العقارب وبإضافة صورة خلفية مع الأرقام، فسنتمكن بسهولة من إنشاء مثل هذه الساعة، كما في المثال examples/10.html.

هذا التصميم مبنيٌ على تصميم ساعة Swiss railway clock الشهيرة، يمكننا تعديل ساعتنا لتشبهها عبر تغيير الأنماط المستعملة واستعمال صورة خلفية جديدة، كما في المثال examples/11.html.

توافق المتصفح

يمكن للمتصفحات الحديثة التعامل مع الانتقالات والحركات في CSS بما في ذلك متصفح IE 10+‎، والإصدارات الحديثة من متصفحَي Chrome و Firefox اللذين يدعمانهما دون سابقة (prefix)، أما Safari فعلينا استعمال السابقة ‎-webkit معه.

رأينا في هذا الدرس كيفية إنشاء ساعة والتحكم في عقاربها باستخدام تأثيرات CSS وتنفيذ تعليمات جافاسكريبت. يمكنك الاستفادة من الأمثلة المذكورة في الدرس لإنشاء ساعات مخصّصة لأغراضك. إن كنت تفكّر ساعات بمناطق زمنيّة مختلفة مثل تلك التي نراها في الفنادق فيمكنك الاستعانة بمكتبتي Moment.js وMoment.js Timezone.

ترجمة –وبتصرّف– للمقال Clocks لصاحبه Donovan Hutchinson.

حقوق الصورة البارزة محفوظة لـ Freepik

سنستعرض في هذا الدرس أمثلةً عن مختلف حالات استعمال flexbox في CSS3، سنجعل الشرح مختصرًا قدر الإمكان وستُوضَّح الفكرة عبر قراءة الشيفرة؛ لذا تمعّن فيها كثيرًا، وانظر إلى ناتجها (لا تغفل أهميّة تجربتها عندك).

لمزيدٍ من المعلومات حول flexbox، فانظر درس «تعرف على CSS Flexbox وأساسيات استعماله لهيكلة صفحات الويب».

إنشاء حاوية flex

أول خطوة لإنشاء تخطيط صفحة يعتمد على flexbox هو إنشاء حاوية flex، وذلك بضبط الخاصية display إلى flex؛ يجدر بالذكر أنَّك ما زلت تحتاج إلى استخدام السابقة ‎-webkit في متصفح Safari:

.flexcontainer {
   display: -webkit-flex;
   display: flex;
}

ترتيب عناصر flex في صف

عناصر flex هي العناصر الأبناء لحاوية flex، والتي يمكن وضعها على المحور الرئيسي والمحور العمودي عليه. افتراضيًا، المحور الرئيسي هو المحور الأفقي، لذا ستوضع العناصر في صف (row)، يمكنك قلب المحور الرئيسي بضبط الخاصية flex-direction إلى column، حيث أنها مضبوطةٌ افتراضيًا إلى row:

/* ضبط الحاوية */
.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
}

ترتيب عناصر flex على شكل عمود

يمكننا ترتيب عناصر flex على شكل عمود بضبط الخاصية flex-dirextion إلى column.

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
}

تحريك عناصر flex إلى الأعلى

كيفية نقل لعناصر flex إلى الأعلى (top) يعتمد على اتجاه المحور الرئيسي. فإن كان رأسيًا (vertical) فيمكنك ضبط justify-content وإذا كان أفقيًا فاضبط align-items.

.flexcontainer {
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
}

أما الشيفرة الآتية:

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row; 
   flex-direction: row;
   -webkit-align-items: flex-start;
   align-items: flex-start;
}

فتُنتِج:

تحريك عناصر flex إلى بداية الحاوية

تحريك العناصر إلى يمين أو يسار الحاوية يعتمد على أمرين، أولهما هو المحور الرئيسي، فلو كانت الخاصية flex-direction مضبوطةً إلى row فاستعمل حينها الخاصية justify-content، وإن كانت مضبوطةٌ إلى column فاستعمل align-items؛ وثانيهما هو اتجاه الصفحة، فلو استعملتَ القيمة flex-start (كما في أمثلتنا) وكان اتجاه صفحتك من اليسار إلى اليمين فستتحرك العناصر إلى اليسار، أما لو كان اتجاه صفحتك من اليمين إلى اليسار فستتحرك العناصر إلى اليمين.

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row; 
   flex-direction: row;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
}

أما الشيفرة:

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column; 
   flex-direction: column;
   -webkit-align-items: flex-start;
   align-items: flex-start;
}

فتنتج:

تحريك عناصر flex إلى نهاية الحاوية

وكما ذكرنا في القسم السابق، ستتحرك العناصر إلى اليمين عند استخدام القيمة flex-end في حال كانت الصفحة من اليسار إلى اليمين، وستتحرك إلى اليسار عندما تكون الصفحة من اليمين إلى اليسار.

 .flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-justify-content: flex-end;
   justify-content: flex-end;
}

أما الشيفرة:

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: flex-end;
   align-items: flex-end;
}

فتنتج:

توسيط العناصر

التوسيط الأفقي والرأسي للعناصر الموجودة في حاوية flex هو أمرٌ هيّن، فكل ما علينا فعله هو ضبط القيمة center إلى الخاصية justify-content و align-items. لا اختلاف فيما لو كانت الخاصية flex-direction مضبوطةً إلى row أو column.

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row /* works with row or column */
   flex-direction: row;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}