المنهجية الأكثر منطقية لتنسيق شيفرة ملفات CSS وSASS

المصطلحات

التصريح عن قاعدة

التصريح عن قاعدة (rule declaration): هو الاسم المختار لمحدّد معين (أو لمجموعة من المحددات) مع مجموعة من الخاصيات المصاحبة. إليك مثالًا لتوضيح الأمر:

.listing {
  font-size: 18px;
  line-height: 1.2;
}

المحددات

إن المحددات التي رأينها عند التصريح عن قاعدة، هي الجزء الّذي سيُحدد طريقة تنسيق العناصر في شجرة DOM، وذلك بحسب الخاصيات المعرّفة في المحدّد. يمكن أن تُطابقُ المحددات عناصر HTML، أو صنف العنصر (class)، أو معرّف العنصر (ID)، أو أي سِمة من سماته. وهذه بعض الأمثلة عن المحدّدات:

.my-element-class {
  /* ... */
}

[aria-hidden] {
  /* ... */
}

الخاصيات

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

/* بعض المحددات */ {
  background: #f1f1f1;
  color: #333;
}

ملفات CSS

التنسيق

• استخدم الزر (tabs) بمقدار مسافتين (وتسمى أيضًا Soft-Tab نظرًا لأن زر Tab الإفتراضي يكون ثمان مسافات).
• يفضل استخدام الشرطة العادية (وهي -) بدل تسمية الأصناف بأسلوب سنام الجمل (camelCasing).
  • لا بأس باستخدام الشرطات السفلية والتسمية بأسلوب PascalCasing (وهي طريقة مشابهة لطريقة سنام الجمل إلا أنه يجب أن يكون أول حرف كبير) إن كنت تستخدم BEM ( والّتي سنتطرق إليها لاحقًا في هذا الدليل).
• لا تستخدم مُحدِّدات المُعرِّفات (ID).
• عند استخدام محددات متعددة في تصريح واحد لقاعدة ما، امنح كل مُحدّد سطر خاص به.
• ضع مسافة قبل قوس الافتتاح { عند التصريح عن قاعدة.
• ضع مسافة بعد : وليس قبله في الخاصيات.
• ضع أقواس الإغلاق } عند التصريح عن قاعدة في سطر جديد.
• ضع أسطر فارغة بين تصريحات القواعد.

طريقة تنسيق سيئة

.avatar{
    border-radius:50%;
    border:2px solid white; }
.no, .nope, .not_good {
    // ...
}
#lol-no {
  // ...
}

طريقة تنسيق جيدة

.avatar {
  border-radius: 50%;
  border: 2px solid white;
}

.one,
.selector,
.per-line {
  // ...
}

التعليقات

• يفضلُ استخدام التعليقات السطرية (وهي // في Sass-land) للتعليقات الكتلية.
• يفضلُ أن تضع التعليق بسطر خاص به. تجنب التعليقات في نهاية السطر.
• اكتب تعليقات تفصيلية للشيفرة البرمجية التي لا تشرح نفسها بنفسها:
  • استخدام الخاصية z-index.
  • استخدام المميزات التوافقية أو بعض الخدع المخصصة للمتصفحات.

OOCSS و BEM

نشجع على استخدام مزيج من OOCSS و BEM وذلك للأسباب التالية:

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

OOCSS

(اختصارًا "Object Oriented CSS") وهي التنسيق كائني التوجه لملفات التنسيق، هو نهج لكتابة تنسيق CSS يشجعك على التفكير بملفات التنسيق على أنها مجموعة من "الكائنات": أي أنها قابلة لإعادة استخدام أجزاءٍ منها، وقابلة للتكرار، ويمكن استخدامها بشكل مستقل عبر موقع الوِب.

لمزيد من المعلومات يمكنك الاطلاع على:

• توثيق نيكول سوليفان (Nicole Sullivan's)‏ OOCSS wiki.
• مقال مدخل إلى OOCSS‏ (Introduction to OOCSS).

BEM

(اختصارًا Block-Element-Modifier) معدلّ عنصر الكتلة وهو عبارة عن اصطلاح تسمية للأصناف في HTML و CSS. طوّر في الأصل من خلال شركة Yandex ووضعوا في حسبانهم الشيفرات البرمجية الكبيرة وقابلية التطوّر والتوسع للشيفرة، ويمكن اعتبارها بمثابة مجموعة قوية من المبادئ التوجيهية لتطبيق OOCSS. لمزيد من المعلومات يمكنك الاطلاع على:

• خدع CSS دليلك إلى منهجية BEM - CSS
• مدخل إلى BEM‏ (introduction to BEM).

نوصي بالتنويع بأشكال BEM مع "كتل" مسماة بأسلوب PascalCased، والّتي تعمل بطريقة جيدة خصيصًا عند دمجها مع المكونات (مثلما يحدث في React). لا تزال تُستخدم الشُرط السفلية والشرطات للمعدلات وسلالتهم (من سيرثُ منهم).

مثال

// ListingCard.jsx
function ListingCard() {
  return (
    <article class="ListingCard ListingCard--featured">

      <h1 class="ListingCard__title">Adorable 2BR in the sunny Mission</h1>

      <div class="ListingCard__content">
        <p>Vestibulum id ligula porta felis euismod semper.</p>
      </div>

    </article>
  );
}

/* ListingCard.css */
.ListingCard { }
.ListingCard--featured { }
.ListingCard__title { }
.ListingCard__content { }

• ‎.ListingCard: وهي عبارة عن "كتلة" وتمثل مكون عالي المستوى.
• ‎.ListingCard__title: عبارة عن "عنصر" وتمثل سلالة ‎.ListingCard التي تساعد في تكوين الكتلة ككلّ.
• ‎.ListingCard--featured: وهو عبارة عن "معدلّ" ويمثل الحالات أو التشكيلات المتختلفة لكتلة ‎.ListingCard.

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

في حين أنه من الممكن تحديد العناصر حسب المعرّف في CSS، إلا أن هذه المحددات تعدّ أسلوبًا مضادًا للنمط (anti-pattern). تقدم محدّدات المعرّفات مستوى عاليًا من التخصيص غير ضروري للتصريح عن قاعدة، بل ولن يمكننا إعادة استخدام هذه المحدّدات.

لمزيد من المعلومات حول هذا الموضوع، أحيلك لهذه المقالة CSS Wizardry's article والّتي تتحدث عن طريقة التعامل مع التخصيص.

خطاف الجافاسكربت

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

نوصي بإنشاء أصناف مخصصة للربط مع جافاسكربت مسبوقة بـ ‎.js-‎:

الحدود

استخدم 0 بدلًا من none لتحديد أن النمط ليس له حدود.

الطريقة السيئة

.foo {
  border: none;
}

الطريقة الجيدة

.foo {
  border: 0;
}

ملفات SASS

الصياغة

• استخدم الصيغة ‎.scss، ولا تستخدم أبدًا الصيغة ‎.sass الأصلي
• رتب شيفرة ملفات CSS العادية وعمليات التضمين ‎@include بطريقة منطقي (انظر أدناه)

ترتيب طريقة التصريح عن الخاصيات

• التصريح عن خاصية

أدرج جميع التصاريح القياسية للخاصيات، وأي شيء آخر ما عدا عمليات التضمين ‎@include أو المحددات المتشعّية.

.btn-green {
  background: green;
  font-weight: bold;
  // ...
}

• تصريح عن عملية تضمين ‎@include

إن تجميع ووضع جميع عمليات التضمين ‎@include في نهاية المحدّد سيسهل قراءة المحدد بالكامل.

.btn-green {
  background: green;
  font-weight: bold;
  @include transition(background 0.5s ease);
  // ...
}

• المحددات المتشعّبة

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

.btn {
  background: green;
  font-weight: bold;
  @include transition(background 0.5s ease);

  .icon {
    margin-right: 10px;
  }
}

المتغيرات

يفضل استخدام أسماء المتغيرات التي تحتوي على شرطة عادية (مثل: ‎$my-variable) بدلًا من أسماء متغيرات مثل أسلوب تسمية سنام الجمل (camelCased) -تكبير أول حرف من كلّ كلمة في اسم المتغير عدا أول كلمة- أو أسلوب snake_cased -جميع حروف اسم المتغير صغيرة-. لا مشكلة بإضافة شرطة سفلية لأسماء المتغيرات الّتي نود استخدامها فقط داخل نفس الملف(هكذا: ‎$_my-variable).

المخاليط

يجب استخدام المخاليط (mixins) لتصغير شيفرتك البرمجية، أو لتوضيحها، أو لعزل تعقيدها - بطريقة مشابهة تمامًا للدوالّ المسماة جيدًا. يمكن للمخاليط الّتي لا تقبل أي وسطاء أن تكون مفيدة لذلك، ولكن انتبه فأذا لم تستخدم خوارزميات ضغط للملفات المشروع (مثل خوارزمية gzip)، فسيُساهم ذلك في تكرار الشيفرات البرمجية غير الضرورية في التنسيقات الناتجة.

توسعة المحدّدات المُركّبة

يجب تجنب التوسعة باستخدام التعليمة ‎@extend لأنه يسلك سلوك غير معروف للبعض وغالبًا ما يكون خطير، خاصة عند استخدامه مع محددات متشعّبة. حتى إن توسيع محددات العناصر الأساسية عالية المستوى يمكن أن يسبب مشاكل إذا انتهى الأمر بتغيير ترتيب المحددات في وقت لاحق (فمثلًا إذا كانت هذه المحددات في ملفات أخرى، وتغير ترتيب تحميل الملفات فهذا سيُشكل مشكلة). يجب أن تتعامل خوارزمية الضغط Gzipping مع عمليات تصغير أحجام الملفات الّتي ستحصلُ عليها باستخدام ‎@extend، وستمنحُك المخاليط تصغيرًا جيدًا لملفات التنسيق خاصتك.

المحددات المتشعّبة

** لا تنشئ محددات متشعّبة بعمق يزيد عن ثلاثة مستويات!**

.page-container {
  .content {
    .profile {
      // STOP!
    }
  }
}

عندما تصبح المحددات طويلة، من المحتمل أنك تضطر أن لتكتب تنسيق لديه المميزات التالية:

• مقترن بشدة بملفات HTML (وهذا يعدّ نقطة ضعف في التنسيق) -أو
• محدد للغاية (وهذا يعدّ نقطة قوة في التنسيق) -أو
• غير قابل لإعادة الاستخدام.

مرة أخرى: لا تستخدم نهائيًا محددات المعرّفات المتشعبة!

في حال وجب عليك استخدام محدّد المعرّف في البداية (ويجب أن تحاول بأقصى جهدك أن تتجنبه)، فلا يجب أن تكون متشعّبة أبدًا. وإن وقعت بهذه المشكلة، فعاود النظر في الشيفرة البرمجية أو أسأل نفسك لما كلّ هذا التخصيص الشديد؟ وإن أردت كتابة ملفات HTML وCSS ذات بنية جيدة، فيجب عليك ألا تستخدم محدّدات المعرّفات المتشعبة نهائيًا.

ترجمة -وبتصرف- لدليل Airbnb لتنسيق ملفات CSS وSASS‏ (Airbnb CSS / Sass Styleguide) الموجود على موقع GitHub

هل تساءلت عن كيفية عرض صفحة الويب على مختلف أحجام الشاشات؟ لتسهيل الأمر لنفكك السؤال باستخدام المثال التالي:

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

ما النقاط الحدية لصفحات الويب المتجاوبة؟

النقاط الحدِّية (Breakpoints)، بمفهوم تصميم صفحات الويب المتجاوبة، هي مجال من القيم مصحوبة باستعلام وسائط لتغيير تصميم الصفحة بمجرد أن يكون عرض نافذة المتصفّح داخلًا في المجال المذكور.

سيتغير في مثال استعلام الوسائط التالي تصميم الصفحة من العرض الأساسي 960 بكسل عندما تُعرض على شاشة 768 بكسل:

}(media only screen and (max-width: 768px@

/* هنا تكتب تعليمات CSS */
{

تنشئ التعليمة أعلاه نقطة حدِّية عند وصول عرض نافذة المتصفح لأقل من 768 بكسل.

النقاط الحدية القياسية

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

رغم أن تلك الممارسة قابلة للنقاش، إلا أننا سنترك ذلك النقاش لوقت لاحق، ونصب تركيزنا في الاستعلامات التالية التي تمثل تلك القيم القياسية.

الاستعلام الخاص بأجهزة الجوال

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

/* هنا تكتب تعليمات CSS */

}

الاستعلام الخاص بالأجهزة اللوحية

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

/* هنا تكتب تعليمات CSS */
}

تفاصيل إضافية

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

الوضع الرأسي للجوال

@media only screen and (max-device-width : 320px) {

/* هنا تكتب تعليمات CSS */

}

الوضع الأفقي للجوال

@media only screen and (min-device-width : 321px) {

/* هنا تكتب تعليمات CSS */

}

الوضع الرأسي للجهاز اللوحي

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

/* هنا تكتب تعليمات CSS */
}

الوضع الأفقي للجهاز اللوحي

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

/* هنا تكتب تعليمات CSS */

}

إنشاء نقاط حدية مخصصة

لماذا ننشئ نقاط حدية مخصصة؟

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

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

كيف تنشئ نقطة حدية مخصصة

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

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

@media only screen and (max-device-width : 355px){

/* CSS هنا تكتب تعليمات */

}

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

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

لنتخيل أن المشكلة تبدأ بالظهور عند عرض 340 بكسل وتستمر حتى 355 بكسل، هذا هو مجال الخلل. الاستعلام المخصص سيكون كالتالي:

@media only screen and (min-device-width : 340px) and (max-device-width : 355px) and (orientation : portrait) {

/* هنا تكتب تعليمات CSS */

}

هل يجب الاعتماد في النقاط الحدية على نوع الجهاز أم مخطط الصفحة؟

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

بما أنه من الصعب إيجاد أجهزة بمقاسات عرض قريبة من تلك النقطة قرر المطور تجاهلها وحسب. هل كان ذلك قرارًا حكيما؟ لا!.

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

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

لم سيجعلك هذا تبدو محترفًا في تصميم المواقع المتجاوبة؟

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

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

ستُترجم المفاهيم العميقة بدورها إلى رؤية أفضل لأعمالك من قبل عملائك وتمنحك أساسًا أقوى لبدء التفاوض معهم.

كيف تخصص نقطة حدية مثالية؟

أولاً: تأكد من تثبيت إضافة المتصفح المناسبة

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

ثانيًا: تأمّل في القيم بين النقاط الحدِّية الحسيّة

هنا ستبحث عن قيم العرض - بالبكسلات - التي يختل عندها تصميم الموقع مستعملًا إضافة مثل Resize Window. عليك تغيير قيمة عرض نافذة المتصفح تصغيرًا وتكبيرًا لإيجاد مجالات العرض التي تظهر بها مشاكل التصميم وتوثيقها حتى لو تطلب ذلك فحص كل حجم العرض بكسلًا تلو الآخر.

ثالثًا: أنشئ استعلامات الوسائط بنفسك

استعمل ببساطة أبعاد العرض التى سجلتها سابقًا لكتابة استعلامات وسائط شبيهة بالمُدرجة أعلاه وستكون قد انتهيت!

ماذا اغتنمت

1. النقاط الحدِّية هي حيث يصل عرض نافذة موقعك لمقاس معين لينتقل إلى تصميم متناسب مع ذلك العرض.
2. النقاط الحدِّية القياسية هي الخاصة بالجوال والجهاز اللوحي بالإضافة إلى اختلاف اتجاه عرضهما.
3. من المهم دائمًا اختبار موقعك على أبعاد غير معتادة لتعزيز تماسك موقعك وتجربة الزوار.
4. تأكد أن النقاط الحدِّية المخصصة لا تتعارض مع النقاط القياسية.
5. التصميم المتفاعل هو محاولة للتحضير للمستقبل، لذا فإن قضاء وقت طويل في التركيز على الأجهزة الحالية ليست ممارسة جيدة.
6. الحرص على جودة التصميم باختلاف أبعاد العرض سيجعلك تبدو محترفًا بالنسبة للعملاء.

ترجمة - وبتصرّف - للمقال The Ultimate Overview of Responsive Web Design Breakpoints من إعداد فريق موقع 1stwebdesigner.

سيُزار موقعك الإلكتروني هذه الأيام من مجموعةٍ واسعةٍ من الأجهزة: أجهزة الحواسيب المكتبيّة ذات الشاشات الكبيرة وأجهزة الحواسيب المحمولة متوسطة الحجم والأجهزة اللوحيّة والهواتف الذكيّة وغيرها.

يتوجب على موقعك من أجل تحقيق تجربة المستخدم المثلى كمطوّر واجهة أماميّة (front-end engineer) ضبط تخطيط الصفحة (layout) استجابةً لهذه الأجهزة المختلفة (على سبيل المثال، دقّة الشاشة وأبعادها المتنوعة). يُشار إلى عملية الاستجابة لشكل جهاز المستخدم باسم (ربما توقعت ذلك) تصميم الويب المتجاوب (RWD).

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

يُمضي بعض مصممي الويب أيامًا في معالجة المشكلات الصغيرة لمستخدمي متصفح Internet Explorer ويتركون مستخدمي الأجهزة المحمولة لديهم كزوار درجة ثانية. وهذا نهج فاشل.

أطلق Mashable على عام 2013 عام تصميم الويب المتجاوب. لماذا ا؟ لأن أكثر من 30 ٪ من «حركة مرور البيانات» (traffic) الخاصّة بهم تأتي من الأجهزة المحمولة. إنّهم يتوقعون أن يصل هذا العدد إلى 50٪ بحلول نهاية العام. في الويب بشكل عام، جاءت 17.4٪ من حركة مرور بيانات الويب من الهواتف الذكيّة في عام 2013. يمثل استخدام Internet Explorer في الوقت نفسه على سبيل المثال 12٪ فقط من إجمالي حركة مرور بيانات المستعرض، بانخفاض وقدره 4٪ تقريبًا عن مثل هذا الوقت من العام الماضي (وفقًا لـ W3Schools). إذا كنت تعمل على التحسين لمتصفح معين، بدلًا من مستخدمي الهواتف الذكيّة العالميين، فأنت تضيع في التفاصيل. يمكن أن يُشكّل هذا في بعض الحالات الفرق بين النجاح والفشل - التصميم المتجاوب له آثار على معدلات التحويل (conversion rates) وتحسين ظهور الموقع في محركات البحث (SEO) ومعدلات الارتداد (bounce rates) وغيرها.

نهج تصميم الويب المتجاوب

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

أنت لا تريد في الوقت نفسه إعادة كتابة موقعك بالكامل من أجل كل حجم من عشرات الأحجام المختلفة للشاشة التي قد يُعرض عليها - فهذه الطريقة ببساطة غير مُمكنة. إنّ الحل البديل هو استعمال عناصر تصميم متجاوبة مرنة تستخدم نفس شيفرة الـ HTML للتكيّف مع حجم شاشة المستخدم.

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

استعلامات الوسائط في التصميم المتجاوب

ظهرت أنواع الوسائط للمرة الأولى في HTML4 و CSS2.1، مما أتاح وضع ملف CSS منفصل للشاشة و آخر للطباعة. وبهذه الطريقة، أصبح بالإمكان تعيين أنماط منفصلة لعرض الصفحة على الحاسوب بشكل مقابل للنسخة المطبوعة.

<link rel="stylesheet" type="text/css" href="screen.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">

أو

@media screen {
* {
  background: silver
}
}

يمكنك في CSS3 تحديد تنسيق الصفحة وتخطيطها اعتمادًا على عرض الصفحة. ولأن عرض الصفحة يرتبط بحجم جهاز المستخدم، فإنّ هذه الإمكانية تتيح لك بالتالي تحديد تخطيطات مختلفة للأجهزة المختلفة. ملاحظة: تُدعم استعلامات الوسائط من قبل جميع المتصفحات الرئيسية إنّ هذا التعريف ممكن من خلال إعداد الخصائص الأساسية: max-widt وdevice-width وorientation وcolor وهناك تعريفات أخرى ممكنة كذلك، ولكن في هذه الحالة فإنّ أهم الأشياء التي يجب وضعها في الحسبان هو الحد الأدنى من الدقّة («العرض» (width)) وإعدادات الاتجاه (أفقي أو عمودي).

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

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="main_1.css" />

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

@media screen and (min-width: 480px) {
div {
  float: left;
  background: red;
}
.......
}

التكبير الذكيّ (smart zoom)

تَستخدم متصفحات الهاتف المحمول ما يسمى «التكبير الذكي» (smart zoom) لتزويد المستخدمين بتجربة قراءة "ممتازة". يُستخدم التكبير الذكيّ في الأساس لتقليل حجم الصفحة بشكل متناسب. وهذا يمكن أن يظهر بطريقتين: (1) التكبير الذي يبدؤه المستخدم (على سبيل المثال، النقر مرتين على شاشة iPhone للتكبير على موقع الويب الحالي)، و(2) عرض نسخة مكبّرة منذ البداية من صفحة الويب عند التحميل. نظرًا لأنه يمكننا فقط استخدام استعلامات الوسائط المتجاوبة لحل أي من المشكلات التي قد يستهدفها التكبير / التصغير الذكيّ، فمن المستحسن في كثير من الأحيان (أو حتى الضروري) تعطيل التكبير والتأكّد من أنّ محتوى صفحتك يملأ المتصفح دائمًا:

<meta name="viewport" content="width=device-width, initial-scale=1" />

إننا نتحكم في مستوى تكبير الصفحة الأولي (أي مقدار التكبير عند تحميل الصفحة) عن طريق ضبط قيمة initial-scale إلى القيمة 1. إذا صُممت صفحة الويب الخاصة بك لتكون متجاوبة، فإنّه عليك أن يملأ التصميم الديناميكي المتكيّف شاشة الهاتف الذكي بطريقة ذكيّة دون الحاجة إلى أي تكبير أولي.

يمكننا إضافة إلى ذلك تعطيل التكبير / التصغير بالكامل باستخدام user-scalable=false.

عرض الصفحة (page widths)

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

لا يوجد لسوء الحظ معيار محدّد يمكن اعتماده لعرض الصفحة (page width)، ولكن غالبًا ما يتم استخدام قيم التجاوب التالية:

• 320 بكسل
• 480 بكسل
• 600 بكسل
• 768 بكسل
• 900 بكسل
• 1024 بكسل
• 1200 بكسل

يوجد مع ذلك عددًا من تعريفات العرض المختلفة. يحتوي على سبيل المثال عرض 320 وما فوق على خمس زيادات افتراضية لاستعلام الوسائط في CSS3 وهي:480، 600، 768، 992، 1382 بكسل. يمكنني أن أعدّد عشرة أساليب أخرى على الأقل إضافة إلى المثال الوارد في هذا الدليل لتطوير الويب المتجاوب.

يمكنك تغطية معظم أجهزة العرض مع أي من هذه المجموعات المنطقية من الزيادات. عمليًا لا توجد حاجة عادةً للتعامل بشكل منفصل مع جميع الأمثلة المذكورة أعلاه لعرض الصفحة- سبعة خيارات دقّة مختلفة تُعدّ مبالغةً نوعًا ما. إنّ 320px و 768px و 1200px هي القيم الأكثر استخدامًا اعتمادًا على تجربتي. يجب أن تكون هذه القيم الثلاثة كافيةً للتعامل مع الهواتف الذكيّة والأجهزة اللوحيّة / أجهزة الحواسيب المحمولة وأجهزة الحواسيب المكتبيّة بالترتيب.

العناصر الزائفة (Psuedo-Elements)

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

يمكنك من جهة أخرى أيضًا أن تكون مبدعًا باستخدام عناصر CSS الزائفة (محددات (selectors))، مثل ‎:before و‎:aft.

ملاحظة: مرّةّ أخرى، تُدعم العناصر الزائفة من قبل جميع المتصفحات الرئيسية.

تُستخدم العناصر الزائفة لتطبيق أنماط محدّدة على أجزاء محدّدة لعنصر HTML، أو لتحديد مجموعة فرعيّة معيّنة من العناصر. يتيح لك على سبيل المثال العنصر الزائف :first-line تحديد الأنماط المطبّقة فقط على السطر الأول لمحدّد معين (على سبيل المثال، p:first-line سيُطبّق على السطر الأول من كل عناصر الفقرة p).

وبالمثل، فسيُتيح لك العنصر الزائف a:visited تحديد الأنماط المطبّقة على كافة عناصر a مع الروابط التي زارها المستخدم سابقًا. كان هذا مفيدًا صراحةً.

فيما يلي مثال بسيط لتصميم متجاوب، حيث نُنشئ ثلاثة تخطيطات مختلفة لزر تسجيل الدخول لكل من أجهزة الحواسيب المكتبيّة والأجهزة اللوحيّة والهواتف الذكيّة.

سيكون لدينا على الهاتف الذكيّ فقط أيقونة، بينما سيكون على الحاسوب اللوحيّ الأيقونة نفسها مرفقةً بعبارة "User name"، سنُضيف أخيرًا للأجهزة المكتبيّة أيضًا رسالة توضيحيّة قصيرة ("Insert your user name").

.username:after {
content:"Insert your user name";
}
@media screen and (max-width: 1024px) {
.username:before {
  content:"User name";
}
}
@media screen and (max-width: 480px) {
.username:before {
  content:"";
}
}

يمكننا إنجاز ما يلي اعتمادًا فقط على العناصر الزائفة التالية:before و:after::

لمعرفة المزيد عن سحر العناصر الزائفة، يوجد لدى Chris Coyier " وصف تفصيلي جيد عن حيل CSS)(CSS-Tricks.

إذًا، من أين أبدأ؟

أنشأنا في هذا الدليل بعضًا من العناصر الأساسيّة لتَصميم ويب متجاوب (أي استعلامات الوسائط والعناصر الزائفة) وقدّمنا بعض الأمثلة لكل منها. ولكن إلى أين سنذهب الآن؟

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

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

@media screen and (max-width: 1200px) {
.menu {
  width: 100%;
}
}

@media screen and (min-width: 1200px) {
.menu {
  width: 30%;
}
}

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

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

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

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

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

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

عناصر تصميم متجاوبة أخرى

يتوجب تذكّر سلوك جميع عناصر الصفحة عند استخدام استعلامات الوسائط وليس فقط العناصر المستهدفة -لا سيما عند استخدام «الشبكات المرنة» (fluid grids)- وفي هذه الحالة (وعلى عكس الأبعاد الثابتة) ستُملئ الصفحة بالكامل في أي وقت، وسيكبر ويصغر حجم المحتوى بما يتناسب معها.

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

img {
max-width: 100%
}

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

نبذة عن أنظمة الشبكات المرنة

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

على الرغم من أن أنظمة fluid grids هذه ترتبط ارتباطًا وثيقًا بما ناقشناه هنا، إلا أنّها في الحقيقة كيان منفصل بالكامل يتطلب تعليمًا إضافيًا للمناقشة التفصيليّة. لذلك سأذكر هنا فقط بعضًا من الأُطر الرئيسيّة التي تدعم مثل هذا النهج: Bootstrap و Unsemantic و Brackets.

الخلاصة

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

ترجمة وبتصرف للمقال Introduction to Responsive Web Design: Pseudo-Elements, Media Queries, and More لصاحبه Tomislav Krnic.

لنستخدم CSS لرسم شخصية بيماكس (Baymax) من فيلم Big Hero 6.

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

تجربة حية.

عنصر واحد

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

<div class="baymax"></div>

التصميم

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

body {
  background: radial-gradient(circle at center, #fff, #fff 50%, #aaa);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100vh;
}

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

.baymax {
  border-bottom: 1.5em solid #000;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -40%);
}

تقوم الخاصية الأولى بتعيين إطار سفلي أسود بعرض 1.5em. ثمَّ يتموضع الخط باستخدام الموضع المطلق، فيندفع إلى الأسفل 50% ويتحرك من اليسار 50%. قيم الـ 50% هي بالنسبة إلى حجم العنصر الحاوي (body).

المشكلة التي نواجهها الآن هي أنَّ العنصر يبدأ من منتصف طول وعرض الشاشة. إنَّه خارج المركز.

لموازنة ذلك، نستخدم تحويلًا لسحب العنصر 50% يسارًا من عرضه، وإلى الأعلى 40% من عرضه.

عند هذه المرحلة يصبح الفم في المركز على هذا النحو:

إضافة العينين

سنستخدم العناصر الزائفة before وafter لإضافة العينين إلى الوجه. لن يحتاج هذا إلى أي عنصر HTML إضافي وتتم معالجته بالكامل باستخدام CSS.

.baymax::before {
  background: #000;
  border-radius: 50%;
  content: "";
  position: absolute;
  width: 12em;
  height: 12em;
  left: -9em;
  top: -6em;
  transform: skewX(-4deg);
}

.baymax::after {
  background: #000;
  border-radius: 50%;
  content: "";
  position: absolute;
  width: 12em;
  height: 12em;
  right: -9em;
  top: -6em;
  transform: skewX(4deg);
}

كل من هذه العناصر الزائفة لها خلفية سوداء، وحواف دائرية -border-radius: 50%; لجعلها دائرية. كلّ منها متموضع في نهاية الفم، وأخيرًا لها تحوّل skew لجعلها تبدو كأنَّها مائلة قليلًا للخلف. ستظهر النتيجة كما يلي:

البطارية منخفضة

هناك مشهدٌ مضحك في الفيلم حيث تنخفض بطارية بيماكس. فيترنَّح وتتدلَّى جفونه. يمكننا استخدام مزيج من الحركات والتدرّجات في الخلفية لإحداث التأثير.

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

.baymax::before {
  background: linear-gradient(to bottom, #efefef, #efefef 50%, #000 50%, #000);
  background-position: 0 -100%;
  background-size: 200% 200%;
  ...
}

.baymax::after {
  background: linear-gradient(to bottom, #efefef, #efefef 50%, #000 50%, #000);
  background-position: 0 -100%;
  background-size: 200% 200%;
  ...
}

نحن الآن نضيف تدرّجًا خطيًّا في الخلفية، فنجعله ضعف ارتفاع الحاوية، ثم نحدد موضعه لذا يصبح النصف العلوي خارج الحاوية.

مع وجود تدرّجات للخلفية في مكانين، يمكننا أن نضيف حركة keyframes للتحكم في حركة الجفون.

@keyframes blink {
  0%, 50% {
    background-position: 0 100%;
  }
  85%, 95% {
    background-position: 0 75%;
  }
  100% {
    background-position: 0 100%;
  }
}

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

بهذه الطريقة يمكننا ضبط الخلفية للبقاء مستيقظين حتى منتصف الحركة، ثمَّ بين الإطار 50% والإطار85%، تتحرك للأسفل، وثمَّ تستقر في نهاية الحركة.

الخطوة التالية هي إخبار العناصر الزائفة أن تستخدم إطارات الحركة هذه. أضف خاصية animation للأنماط الحالية.

.baymax::before {
  animation: blink 6s infinite;
  ...
}

.baymax::after {
  animation: blink 6s 0.1s infinite;
  ...
}

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

خاصية واحدة إضافية في المثال الثاني: تخبر المدة 0.1s بعد 6s المتصفح أن تتأخر الحركة لـ0.1 ثانية. يخلق هذا تأثير إغلاق العين الثانية بتأخيرٍ عن الأولى. وذلك يضيف التأثير المتدلي والمتعب ويجعلها تبدو أكثر واقعيةً. يجب أن تظهر النتيجة النهائية كما في الصورة:

يمكنك مشاهدة تجربة حية.

المتصفحات

حذفت في أمثلة الشفرة أيّ بادئات معتادة webkit- وmoz-. لكن خاصيّات transform وanimation يجب أن تكون مسبوقة، وأنصحك باستخدام شيء ما مثل Autoprefixer لهذا.

نسخة gif قابلة للمشاركة

إليك نسخة gif متحركة يمكنك مشاركتها على الإنترنت بسهولة:

ترجمة -وبتصرف- للمقال Baymax in CSS

سنُأحاول في هذا المنشور الإشادة بجهاز حاسوب Mac Plus الجميل من خلال إنشائه باستخدام CSS.

عن تصميم الجهاز

دعنا نبني (تقريبًا) جهاز حاسوب. ليس فقط أي حاسوب قديم، ولكن حاسوبًا كان بالنسبة للكثير منا مقدمة في عالم Apple. كانت بداية إطلالة جهاز Macintosh Plus (الاسم المختصرMr. T) لأول مرة في عام 1986 بحزم 1 ميغابايت من ذاكرة الوصول العشوائي ومعالج بسرعة 8 ميجاهرتز؛ وبصرف النظر عن كل هذه القوة، فقد كان تصميمه لطيفًا للغاية، مما جعله أكثر متعة في الاستخدام.

في هذا المشروع، سننشئ نموذجًا ثلاثة الأبعاد 3D لجهاز Macintosh Plus وعرضه في بيئة ثلاثية الأبعاد. وسنجعله يتحرك على الشاشة باستخدام حركات الإطار المفتاحي CSS Keyframe animation، لإظهار التأثير ثلاثي الأبعاد بشكل أفضل.

لماذا نستخدم CSS؟

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

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

العرض التوضيحي والشِّيفرة المصدرية

اطلع على تصميم CSS Mac Plus ويمكنك تحميل الشيفرة المصدرية الكاملة من هنا، ويمكنك عرض ملف CSS الكامل على GitHub..

البادئات

قمنا بحذف أي بادئات CSS من شيفرة المثال لتسهيل القراءة. عند العمل على ذلك بنفسك، تأكد من تضمين بادئات للمتصفحات إن لزم، مثل webkit و moz و ms و o.

إعداد المرحلة الأولى

عند إنشاء رسوم ثلاثية الأبعاد باستخدام HTML، نحتاج إلى المشهد الذي سنقوم ببنائه. سنبدأ بعنصر الحاوية:

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

هذا عنصر div بسيط بالصنف stage يعمل عمل الحاوية للكائن ثلاثي الأبعاد الخاص بنا، ولتثبيتها كحاوية ثلاثية الأبعاد، قمنا بتعيين بعض خاصياتCSS، الخاصية و perspective perspective-origin. الخاصية perspective تشبه نقطة التلاشي للمشهد، وكلما صغرت القيمة، تكون نقطة تلاشي أقصر وأكثر تأثيرًا. توضح هذه الصورة كيف يؤدي تغيير قيمة هذه الخاصية إلى تغيير شكل المشهد:

.stage {
  perspective: 1600px;
  perspective-origin: 50% 100px;
}

.example {
  transform: rotateY(45deg) translateZ(-100px);
}

.default-origin {
  transform-origin: 50% 50% 0;
}

<div class="stage">
  <div class="positioning animated">
    <div class="mac">
      <figure class="back"></figure>
      <figure class="left"></figure>
      <figure class="right"></figure>
      <figure class="top"></figure>
      <figure class="base-front"></figure>
      <figure class="base-left"></figure>
      <figure class="base-right"></figure>
      <figure class="base-back"></figure>
      <figure class="front"></figure>
      <figure class="shadow"></figure>
    </div>
  </div>
</div>

.front {
  height: 11.5em;
  width: 9.6em;
  background: #e0e0e0;
  transform: rotateX(5deg) translateZ(5.43em);
}
.back {
  height: 11.5em;
  width: 9.6em;
  background: linear-gradient(top, #f2f2f2, #e6e6e6 0.25em, #c2c2c2);
  transform: rotateX(5deg) translateZ(-5.45em) rotateY(180deg);
}
.top {
  height: 10.95em;
  width: 9.6em;
  background-color: #ebf0dc;
  background: linear-gradient(left, #fafafa, #d9d9d9 0.25em, #d9d9d9 9.35em, #fafafa);
  transform: rotateX(5deg) rotateX(90deg) translateZ(5.45em);
}
.left {
  height: 11.5em;
  width: 10.9em;
  background: linear-gradient(top, #ffffff, #e0e0e0 0.25em, #b3b3b3);
  transform: rotateX(5deg) rotateY(-90deg) translateZ(5.45em);
}
.right {
  height: 11.5em;
  width: 10.9em;
  background: linear-gradient(top, #ffffff, #e0e0e0 0.25em, #b3b3b3);
  transform: rotateX(5deg) rotateY(90deg) translateZ(4.14em);
}
.base-front {
  height: 2.1em;
  width: 9.6em;
  background: #c2c2c2;
  transform: translateY(10.7em) translateZ(5em);
}
.base-back {
  height: 2.1em;
  width: 9.6em;
  background: #b3b3b3;
  transform: translateY(10.7em) translateZ(-5em) rotateY(180deg);
}
.base-left {
  height: 2.1em;
  width: 10em;
  background: #b3b3b3;
  transform: translateY(10.7em) rotateY(-90deg) translateZ(4.99em);
}
.base-right {
  height: 2.1em;
  width: 10em;
  background: #b3b3b3;
  transform: translateY(10.7em) rotateY(90deg) translateZ(4.58em);
}
.shadow {
  width: 10em;
  height: 11em;
  background: transparent;
  transform: rotateX(90deg) translateZ(-7.4em) translateX(20em);
  box-shadow: -20.2em 0 1.8em rgba(100, 90, 100, 0.4);
}

<figure class="front">
  <span class="bezel-top"></span>
  <span class="bezel-left"></span>
  <span class="bezel-right"></span>
  <span class="bezel-bottom"></span>
</figure>

.front .bezel-top {
  border-top: 0.75em solid #f2f2f2;
  border-right: 0.5em solid transparent;
  border-left: 0.5em solid transparent;
  width: 8.6em;
}
.front .bezel-left {
  border-top: 0.5em solid #d9d9d9;
  border-right: 0.75em solid transparent;
  border-left: 0.75em solid transparent;
  width: 10em;
  transform: rotateZ(-90deg) translateX(-5.5em) translateY(-5.5em);
}
.front .bezel-right {
  border-top: 0.5em solid #d4d4d4;
  border-right: 0.75em solid transparent;
  border-left: 0.75em solid transparent;
  width: 10em;
  transform: rotateZ(90deg) translateX(5.5em) translateY(-3.62em);
}
.front .bezel-bottom {
  border-top: 0.75em solid #cccccc;
  border-right: 0.5em solid transparent;
  border-left: 0.5em solid transparent;
  width: 8.65em;
  transform: rotateZ(180deg) translateY(-10.76em);
}

<figure class="front">
  <span class="bezel-top"></span>
  <span class="bezel-left"></span>
  <span class="bezel-right"></span>
  <span class="bezel-bottom"></span>
  <figure class="screen-container">
    <span class="screen">
      <p>hello, Dave</p>
      <span class="sheen"></span>
    </span>
  </figure>
  <figure class="logo">
    <span class="image"></span>
    <span class="text">Macintosh Plus</span>
  </figure>
  <figure class="floppy"></figure>
</figure>

@font-face {
  font-family: "apple_garamondregular";
  src: url("../fonts/apple_garamond-webfont.eot");
  src: url("../fonts/apple_garamond-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/apple_garamond-webfont.woff") format("woff"), url("../fonts/apple_garamond-webfont.ttf") format("truetype"), url("../fonts/apple_garamond-webfont.svg#apple_garamondregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

.floppy {
  height: 0.2em;
  width: 2.8em;
  transform: translate3d(4.8em, 8.9em, 0);
  background: #555555;
  border-top: 0.1em solid #cccccc;
  border-right: 0.3em solid #e6e6e6;
  border-bottom: 0.1em solid #f2f2f2;
  border-left: 0.3em solid #e6e6e6;
  border-radius: 0.25em;
}

@keyframes back-and-forth {
  0% {
    transform: rotateY(40deg);
  }
  40%, 50% {
    transform: rotateY(-40deg);
  }
  90%, 100% {
    transform: rotateY(40deg);
  }
}

animation: back-and-forth 14s ease-in-out infinite;

يعد WebKit مُحرِّك متصفح ويب (web browser engine) يستخدمه كلٌّ من Safari، و Mail، و App Store، وغيرها من التطبيقات والمتصفحات التي تعمل على macOS، و iOS، ولينكس. ويعرض Webkit صفحات الويب التي تحتوي على تعليمات مكتوبة بِشيفرات Javascript و HTML و XML، ويدير أيضًا تاريخ الصفحات التي تمت زيارتها مؤخرًا.

هناك الكثير من الانتقالات المميزة و تأثيرات الحركات المتاحة للاستخدام على محرك webkit من شأنها تنشيط تجربة الويب لمستخدمي متصفح Safari.

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

اضغط هنا لعرض التجربة الحية.

يُتطلب متصفح Safari لتجريب تأثير انعكاس Webkit المتحرك.

يوضح المثال المذكور كيف يمكن استخدام تأثير التقليب لإظهار البيانات في كلا الوجهين من خلال قلب البطاقة. قم بتمرير مؤشر الفأرة فوق بطاقتي Optimus Prime و Megatron الرابِحتين في الأعلى لمشاهدة النتيجة.

الآن، دعنا نلقي نظرةً على كيفية صنع حركة التقليب هذه.

شيفرة HTML

<div id="transformers-rule">
	<div class="container megatron">
		<div class="card">
			<div class="face front">
				
			</div>
			<div class="face back">
			
			</div>
	 	</div>
	</div>
</div>

شيفرة HTML بسيطة للغاية، وتتكون بشكل أساسي من مجموعة حاويات

<div class="face front">
	<img src="megatron.png" alt="Megatron CSS flip effect" />
</div>
<div class="face back">
	<h2>Megatron</h2>
	<img src="decepticons.png" alt="Decepticons logo CSS flip effect" />
	<p>Megatron is the primary antagonist and leader of the evil Decepticons.</p>
	
	<dl>
		<dt>Skill</dt>
		<dd>7</dd>
		
		<dt>Power</dt>
		<dd>8</dd>
		
		<dt>Agility</dt>
		<dd>5</dd>
		
		<dt>Bravery</dt>
		<dd>7</dd>
		
		<dt>Speed</dt>
		<dd>4</dd>
	</dl>
</div>

.megatron {
	float: left; position: absolute; top: 30px; left: 20px;
}
	.megatron .front {
		
	}
	.megatron .back {
		width: 284px; height: 372px; padding: 20px;
		background: #a3a3a3 url(texture.png); 
	}
		.megatron .back h2 {
			width: 287px; height: 42px; margin: 0 auto 20px auto;
			background: url(megatron-title.png); text-indent: -9999px; 
		}
		.megatron img {
			float: right;
		}
		.megatron p {
			float: left; width: 185px; margin: 0 0 20px 0;
			font-size: 17px; line-height: 28px; color: #4c4c4c; 
		}

.megatron dl {
	font-size: 30px; font-weight: bold; 
	line-height: 40px; color: #717171;
	width: 264px; padding: 5px 10px; overflow: hidden; 
	background: #cfcfcf url(gradient.png) repeat-y;
	-webkit-box-shadow: 0 1px 5px #888;
	text-shadow: 0 1px 1px #f5f5f5;
}
	.megatron dl dt {
		float: left; clear: both;
	}
	.megatron dl dd {
		float: right;
	}

.container:hover .card {
	-webkit-transform: rotateY(180deg);				
}

.face {
position: absolute;
-webkit-backface-visibility: hidden;
}

يجب أن يحتوي كل موقع ويب و صفحة هبوط على زر «دعوة إلى إجراء» (Call to action، ويختصر إلى CTA) واضح. هذا يشجع المستخدِم على النقر على الحدث وتنفيذه، سواء كان ذلك لإجراء عملية شراء، أو بدء تجربة، أو إنشاء حساب.

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

1- الزر العائم Floating Button

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

2- زر CTA الأخضر المدوَّر

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

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

3- الزر المصمم عبر التصميم الماديّ (Material Button)

إذا كنت ترغب في العمل باستخدام التصميم الماديّ ل Google، فستحب مجموعة الأزرار الفريدة هذه. التصميم المادي هو تصميم مبنيٌ بنمط واحد، لكنه يوفر اثنين من التأثيرات هما: تحويم الفأرة والنقر. يستخدم الزر جزء من شيفرة SCSS / Sass لِشيفرة CSS، ولكن يمكنك تجميعه إلى CSS مباشرة من CodePen. يعمل ذلك على تسهيل نسخ و لصق الشيفرة للاستخدام الشخصي إذا لم تكن من محبي Sass.

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

4- أزرار إجراء الحدث الملونة

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

5- زر التفاعل الصغير

إذا كنت تحب تأثيرات الحركة للأزرار، يمكنك إلقاء نظرة على هذه الأزرار الدقيقة التي صممها Phil Hoyt. فقد استُخدم فيها Font Awesome مع حركات CSS مخصصة لأيقونات الأسهم. عند تحويم الفأرة فوق أي زر، تختفي تسمية الزر وتبرز بدلًا منها أيقونته.

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

6- الأزرار المحددة

هذه الأزرار المحددة متميزة عن غيرها، هي في الأساس لا تشبه أزرار CTA لكن مع وجود نص أكبر أو حجم زر أكبر، يمكن أن تكون هذه التصميمات الرائعة في المقدمة.

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

إن أحببت هذه التصاميم وقمت بتجْريبها، فستجد أنها تعمل بسلاسة في جميع متصفحات الويب الحديثة.

7- أنماط التدرج

لن تتفوق أزرار التدرج الكلاسيكي هذه عن غيرها أبدًا؛ إلا أنها تستخدم بشكل بارز في إطارات العمل الكبيرة مثل Bootstrap. باستخدام هذه الأزرار المتدرجة، يمكنك بسهولة تحديث التحويم والنقر على جميع الحركات مع الحفاظ على تنسيق الألوان. تستخدم أنماط التدريج LESS CSS الذي يجعل من الأسهل تغميق الألوان المتدرجة باستخدام النسب المئوية بدلاً من الشيفرات السداسية للألوان (hex codes)

يفضل البعض أزرار التدرج لأنها تتحد مع التصميم. وهذه بالتأكيد ليست الأنماط التدرجية الوحيدة التي ستجدها، لذا راجع موقع CodePen gradient button إن كنت تبحث عن المزيد.

8- YouTube CTA

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

ولكن إذا كنت تبحث عن زر CTA بارز لترويسة صفحتك، فلن يساعد هذا القالب كثيرًا. هي فكرة فريدة للغاية وتستحق أن تُحفظ إذا لزمك استخدام شيء مثل هذا مستقبلًا.

9- الأزرار المطوية للأسفل

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

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

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

10- تحويم CSS الخالص

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

11- CTA النابض

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

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

تستخدم معظم مواقع الويب أزرار CSS خالصة في هذه الأيام، لذا ليس من الصعب العثور على حركات تحبها وتنسخ شيفراتها للحصول على CTA.

ترجمة -وبتصرف- للمقال 10 Pure CSS Call-To-Action Button Collections لصاحبه Jake Rocheleau

هنيئًا لك، لقد أنهيت سلسلة أساسيات التحريك في CSS. آمل أن تكون قد استمتعت واستفدت منها. قبل أن نُنهي هذه السلسلة، سنستعرض سويةً بعض المصادر المفيدة للتعمق أكثر في عالم الحركات.

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

• ما هي استخدامات الحركات؟
• تجهيز بيئة العمل لإنشاء الحركات
• مدخل إلى الانتقالات: التنقل بين الحالات
• مدخل إلى الحركات: مفهوم الحركة
• تطبيق عملي: الانتقالات
• خاصيات الانتقالات
• دوال التوقيت
• الانتقالات المتعددة
• الانتقالات وجافاسكربت
• تطبيق عملي: التحريكات
• خاصيات الحركات
• تطبيق عملي: الإطارات المفتاحية
• الحركات المتعددة المتزامنة
• موجز الحركات
• رواية القصص عبر الحركات
• حرب النجوم
• إظهار المحتوى أثناء التمرير
• سهولة الوصول
• نهاية الرحلة

ملخص التحريك في CSS

لقد أعددت ملخصًا عن الانتقالات والحركات (بصيغة PDF) يلخص خاصياتها. وقد صممته ليناسب صفحة واحدة بحجم A4.

أدوات مساعدة لإنشاء الحركات

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

الإطار Animate.css

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

الإطار Hover.css

يعد الإطار Hover.css بديلاً جيدًا عن Animate.css، إذ يوفر مجموعة كبيرة من الحركات الجاهزة لتطبيقها على الروابط أو الأزرار أو الشعارات أو أي عنصر من عناصر HTML.

أدوات أخرى

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

منصة GSAP

منصة GSAP (Greensock Animation)‎ هي طريقة قائمة على JavaScript لإنشاء حركات متقدمة، وتوفر تحكمًا دقيقًا، وأداءً رائعًا. هذه الأداة تتطلّب بعض الوقت لتعلمها، لكنها مفيدة ونافعة.

الإطار Snabbt.js

الإطار Snabbt هو وسيلة قوية وفعّالة لإنشاء حركات معقدة باستخدام دوال توقيت مخصصة. إذ ينشئ مصفوفات تحويل (transform matrices) ليستخدمها المتصفح في تحريك الحركات، لهذا يتميز بأداء جيد جدًا.

الإطار CSS Animate

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

موقع Cubic-bezier.com

عندما ترغب في إضفاء الحيوية على دوال التوقيت، فإنّ موقع Cubic-bezier.com هو الأداة الأفضل لذلك. إذ يساعد على تخصيص دوال التوقيت. وقد تم تصميم أداة مشابهة في أدوات المطور في المتصفح Chrome.

ماذا بعد؟!

السؤال الذي قد يساورك الآن هو: «ماذا أفعل للانتقال إلى مستوى متقدم في مجال التحريك؟»

اقتراحي لك هو البحث عن التحديات. ابحث عن الإلهام في مواقع مثل Dribbble.com أو CodePen.io. استوحي الأفكار من المنتجات الشهيرة (كثيرًا ما أعيد تصميم تصميمات Apple) أو الأفلام أو البرامج التلفزيونية. هل يمكن محاكاتها والاستفادة منها في تصميم المواقع؟ هل ستكون لغة CSS هي الطريقة الأنسب للقيام بذلك؟ اسأل نفسك وابحث عن الإجابات بحثًا دقيقًا، فالبحث هو عماد التَعلُّم.

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

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

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

المصادر

• ترجمة وبتصرف للفصل now you know css animation من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضًا

• المقالة السابقة: قابلية الوصول
• المرجع الشامل إلى التحريك عبر CSS
• النسخة العربية الكاملة من كتاب: التحريك عبر CSS

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

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

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

• ما هي استخدامات الحركات؟
• تجهيز بيئة العمل لإنشاء الحركات
• مدخل إلى الانتقالات: التنقل بين الحالات
• مدخل إلى الحركات: مفهوم الحركة
• تطبيق عملي: الانتقالات
• خاصيات الانتقالات
• دوال التوقيت
• الانتقالات المتعددة
• الانتقالات وجافاسكربت
• تطبيق عملي: التحريكات
• خاصيات الحركات
• تطبيق عملي: الإطارات المفتاحية
• الحركات المتعددة المتزامنة
• موجز الحركات
• رواية القصص عبر الحركات
• حرب النجوم
• إظهار المحتوى أثناء التمرير
• سهولة الوصول
• نهاية الرحلة

التأكد من سهولة الوصول إلى المحتوى

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

نستخدم الحركات لإضفاء معانِي معيّنة على تصميماتنا. عند تصميم الحركات، ضع في حساباتك أنّ بعض الأشخاص لن يتمكنوا من رؤيتها. فربما يستخدمون قارئ الشاشة (screen reader)، أو أنَّ إعدادات متصفحاتهم تمنع عمل الحركات بالشكل المطلوب. تأكد من توفر المعلومات المهمة حتى في حال لم تعمل الحركة.

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

إتاحة التحكم

توصي منظمة W3C بأن يكون لأي محتوى يومض (blinking)، أو يُمرَّر، أو يُحدَّث تلقائيًا لمدة تزيد عن 5 ثوانٍ وسيلة لإيقاف الحركة مؤقتًا، أو إزالتها. يُعد استخدام الخاصية animation-play-stat إحدى طرق إيقاف الحركة عند الحاجة، كما هو موضح هنا عند التمرير.

إتاحة مدخلات بديلة

يستخدم نسبة كبيرة من زوار موقعك الهواتف التي لا تحوي مؤشر (فأرة)، ولا توجد بها حالة حومان (hover state)، لذا من المهم أخذ هذا في الحسبان عند التصميم. أحد الخيارات التي أستخدمها غالبًا هو رصد النقرة (tap) وإضافة الصنف "active" إلى العنصر المنقور. بعد ذلك أُضيف الانتقالات أو الحركات إلى الحالات '‎:hover' و '‎.active'.

الارتباك

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

لا تزعجني

المبالغة في تطبيق الحركات أو استخدام النوع الخاطئ منها يمكن أن يزعج الناس.

عندما قدمت Apple نظام التشغيل iOS7، وهو نظام تشغيل مُحدَّث لهواتفها، أدخلت فيه الكثير من الحركات. بعضها كان مزعجًا. وقد كافح بعض الأشخاص، مثلي، للقراءة في السيارة أو الحافلة، لأنّ الحركة كانت مربكة، وآخرون عجزوا عن لعب ألعاب فيديو معينة لأكثر من بضع دقائق.

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

التقيؤ عملية معقدة، وهناك جزء من أدمغتنا متخصص في التعامل معه. يقع هذا الجزء من الدماغ بالقرب من الجزء الذي يتعامل مع التوازن، ولهذا نشعر بالغثيان.

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

يُعد موقع Vestibular.org نقطة انطلاق ممتازة للتعمق أكثر في هذا الموضوع.

تسهيل الوصول للجميع

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

تمرين

إذا كانت وظيفتك تتضمن تصميم أو بناء واجهات لاستخدامها من قِبل الناس، فخصص بعض الوقت لقراءة NNGroup’s Animation for Attention and Comprehension. فكر في الكيفية التي قد يستخدم بها الناس موقعك، وما المشاكل التي قد يواجهونها إذا لم يتمكنوا من رؤية الحركات.

المصادر

• ترجمة وبتصرف للفصل accessibility من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضًا

• المقالة التالية: نهاية الرحلة
• المقالة السابقة: إظهار المحتوى عند التمرير
• النسخة العربية الكاملة من كتاب: التحريك عبر CSS

من الاستخدامات الشائعة للحركات تحريك العناصر عند تمرير (scrolling) لأسفل الصفحة، لذلك سنتعلم في هذه المقالة كيفية القيام بذلك.

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

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

• ما هي استخدامات الحركات؟
• تجهيز بيئة العمل لإنشاء الحركات
• مدخل إلى الانتقالات: التنقل بين الحالات
• مدخل إلى الحركات: مفهوم الحركة
• تطبيق عملي: الانتقالات
• خاصيات الانتقالات
• دوال التوقيت
• الانتقالات المتعددة
• الانتقالات وجافاسكربت
• تطبيق عملي: التحريكات
• خاصيات الحركات
• تطبيق عملي: الإطارات المفتاحية
• الحركات المتعددة المتزامنة
• موجز الحركات
• رواية القصص عبر الحركات
• حرب النجوم
• إظهار المحتوى أثناء التمرير
• سهولة الوصول
• نهاية الرحلة

الإطار Wow.js

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

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

هناك العديد من خيارات JavaScript التي يمكن أن تضيف أصنافًا، وأحد أفضل هذه الخيارات الإطار Wow.js. سنستخدمه لإنشاء مثال بسيط يظهر فيه المحتوى تدريجيًا أثناء التمرير.

استخدام Wow.js

استخدام Wow.js يستلزم خطوتين. الخطوة الأولى هي تنزيل إضافة JavaScript. ضع الملف wow.min.js بعد تنزيله في مجلد JavaScript الخاص بالمشروع. الخطوة التالية هي الإشارة إلى هذا الملف من داخل شيفرة HTML:

<script src="javascripts/wow.min.js"></script>

(بافتراض أن المجلد يسمى javascripts - غيّره إلى الاسم المناسب)

بعد ذلك، سنستدعي JavaScript باستخدام هذه التعليمة (الصقها بعد الشيفرة السابقة):

<script>
 new WOW().init();
</script>

يمكننا الآن إضافة الصنف "wow" إلى المحتوى، وسوف يكتفل الإطار Wow.js بتحديد ما إذا أصبح المحتوى مرئيًّا على النافذة أم لا لإظهاره بحركة لافتة.

إضافة أصناف "wow"

إن أردت تحريك عنصر معيّن عند التمرير، فأضف إليه الصنفَ wow:

<p class="wow">...</p>

هذا يعني أنه عندما يظهر العنصر في نافذة المتصفح أثناء التمرير للأسف ويصبح مرئيًّا، تضيف Wow.js الصنّف animated إلى المحتوى على النحو التالي:

<p class="wow animated">...</p>

إن أضفنا حركة مخصصة على العناصر p.animated (أي العناصر p ذات الصنف animated)، فلن تعمل الحركة إلا عند إضافة هذا الصنف.

الإخفاء والعرض

في مثالنا، سنخفي جميع العناصر ذات الصنف wow، وسنعرضها عندما يُضاف لها الصنف animated. أولاً، سنخفيها عبر الشيفرة التالية:

.wow {
  opacity: 0;
  transition: all 0.5s 0.5s ease-out;
}

سنُطبِّق أيضًا عملية انتقال (transition) هنا حتى يظهر العنصر تدريجيًا. لاحظ القيمة 0.5s، في هذا المثال أضفنا تأخيرُا (delay) لمدة نصف ثانية، يضمن هذا أن يكون العنصر موجودًا في إطار العرض (viewport) قبل أن يبدأ بالظهور التدريجي.

تحدد الشيفرة التالية كيف سيبدو العنصر عندما يُضاف إليه الصنف animated:

.animated {
  opacity: 1;
}

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

استخدام Animate.css

صُمِّم الإطار Wow.js ليتكامل مع إطار العمل Animate.css. لم أستخدمه في المثال حتى الآن لأني أفضِّل أن تفهم كيفية إنشاء الانتقالات بنفسك، لكن هناك بعض الانتقالات الممتازة الجاهزة التي يرفرها لنا الإطار Animate.css.

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

<section class="image wow bounceInUp">

يشير الصنف bounceInUp إلى أحد الحركات المضمّنة في Animate.css. إن اخترت "cog" في قسم CSS في المثال، فسترى أنني أشرت إلى إطار العمل Animate.css ضمن ملفات CSS الخارجية.

استخدام Modernizr

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

لقد أضفت Modernizr في هذا المثال فاطلع عليه بتفحُّص.

تمرين

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

المصادر

• ترجمة وبتصرف للفصل revealing content on scroll من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضًا

• المقالة التالية: سهولة الوصول
• المقالة السابقة: حرب النجوم
• النسخة العربية الكاملة من كتاب: التحريك عبر CSS

سنطبق ما تعلّمناه في المقالات السابقة، وسنصنع تحريكًا متجِهيًّا (SVG) مرحًا. سنبني عنوان فيلم حرب النجوم من إعلان "The Force Awakens".

يجمع هذا المثال بين التحريك وبين بعض خاصيات CSS الأخرى، خصوصًا الخاصية transform ودوال تحويلها scale و translate و rotate.

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

• ما هي استخدامات الحركات؟
• تجهيز بيئة العمل لإنشاء الحركات
• مدخل إلى الانتقالات: التنقل بين الحالات
• مدخل إلى الحركات: مفهوم الحركة
• تطبيق عملي: الانتقالات
• خاصيات الانتقالات
• دوال التوقيت
• الانتقالات المتعددة
• الانتقالات وجافاسكربت
• تطبيق عملي: التحريكات
• خاصيات الحركات
• تطبيق عملي: الإطارات المفتاحية
• الحركات المتعددة المتزامنة
• موجز الحركات
• رواية القصص عبر الحركات
• حرب النجوم
• إظهار المحتوى أثناء التمرير
• سهولة الوصول
• نهاية الرحلة

transform: ليست من خاصيات الحركات

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

الخاصية transform ودوالها‏ scale()‎ و translateZ()‎ و rotateY()‎

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

في هذا المثال، سنستخدم scale و translateZ معًا لخلق شعور بأنّ الكلمات تطير في الفضاء. بعد ذلك، سنستخدم rotateY لتدوير أحرف سطر الوصف. سيتطلب الدوران حول المحور Y قيام المتصفح بالرسم ثلاثي الأبعاد.

SVG و HTML و CSS

استعدادًا لهذا المثال، قمت بإنشاء ملفين من النوع SVG لأجل الجزئين Star و Wars من الشعار. لا تتردد في تحميلهما واستخدامهما.

إليك شيفرة HTML الخاصة بالمثال:

<div class="starwars-demo">
  <img src="//cssanimation.rocks/demo/starwars/images/star.svg" alt="Star" class="star">
  <img src="//cssanimation.rocks/demo/starwars/images/wars.svg" alt="Wars" class="wars">
  <h2 class="byline" id="byline">The Force Awakens</h2>
</div>

لقد استخدمنا صورة ثابتة للنجوم في الخلفية. لم أتمكن من العثور على الخط الذي استُخدِم في الإعلان الأصلي، لذلك استخدمت الخط "Lato". استخدمت التموضع المطلق (absolute positioning) لوضع المحتوى في منتصف الشاشة. سنحصل في البداية على الصورة التالية:

تحريك الكلمتين Star و Wars

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

@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);

  20% {
    opacity: 1;

  89% {
    opacity: 1;
    transform: scale(1);

  100% {
    opacity: 0;
    transform: translateZ(-1000em);

}

هناك خاصيتان تتغيران خلال مسار هذه الحركة وهما opacity و transform. إنّ تغيير العتامة (opacity) يجعل النص يبدأ شفافًا، ثم يتلاشى في النهاية لكي نتمكن من إعادة تنفيذ التحريك.

يبدأ التحويل عن طريق تحديد الحجم عند القيمة 1.5. هذا يعني أنّ الحجم الأولي للنص سيكون أكبر بنسبة 150٪ من الحجم العادي. عند النقطة 89٪، سنعيّن الخاصية transform عند القيمة scale(1)‎. هذا يعني أنه بين اللحظتين 0٪ و 89٪، سينتقل الحجم من 150٪ إلى 100٪.

التحويل transformZ الأخير يؤدي إلى تكبير الكلمتين بسرعة.

بشكل مماثل، يمكننا تطبيق الإطارات المفتاحية على الكلمة "Star":

.star {
  animation: star 10s ease-out infinite;
}

تم استخدام مجموعة مماثلة من الإطارات المفتاحية مع الكلمة "Wars".

لنجعلها ثلاثية الأبعاد

يتطلب استخدام التحويلات ثلاثية الأبعاد في CSS، سواء كانت بالتحويل على المحور Z، أو الدوران حول المحورين Y و Z، أن نضع مرحلة ثلاثية الأبعاد. وهذا يعني، في اصطلاح HTML، إنشاء حاوية (container)، وإخبار المتصفح بالحاجة إلى إنشاء بعض التحريكات ثلاثية الأبعاد.

يمكننا فعل ذلك عن طريق إضافة الشيفرة التالية إلى العنصر div ذي الصنف ‎.starwars-demo:

.starwars-demo {
  perspective: 800px;
  transform-style: preserve3d;
}

تخبر هاتان الخاصيتان المتصفحَ بأنّ أبناء الحاوية (container`s children) ينبغي أن يتموضعوا وفق شكل ثلاثي الأبعاد، بدلًا من وضعهم في مستوى مسطح. يمكنك أن تجد المزيد من التفاصيل عن هذه الخاصية في موقع CSS Tricks.

ثانياً، تخبر الخاصية persective المتصفحَ بمدى «عمق» المشهد. في هذا المثال، جعلناها تساوي 800px. تخلق القيم الأصغر تأثيرات «متطرفة» لأنّ المشهد سيكون أقصر.

سننسق الآن سطر الوصف.

تحريك الشعار "The Force Awakens"

تدور أحرف الشعار "The Force Awakens" في مكانها. يمكننا خلق هذا التأثير باستخدام التحويل rotateY. في هذا المثال، قمنا بوضع كل حرف داخل عنصر من النوع span حتى نتمكن من تطبيق التحريك على كل حرف على حدة.

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

سنُطبِّق التحريك على كل حرف على حدة.

أولًا، الإطارات المفتاحية:

@keyframes spin-letters {
  0%, 10% {
    opacity: 0;
    transform: rotateY(90deg);

  30% {
    opacity: 1;

  70%, 86% {
    transform: rotateY(0);
    opacity: 1;

  95%, 100% {
    opacity: 0;

}

في البداية، تكون الحروف مُدوّرة بزاوية 90 درجة، ثم بزاوية 70٪ خلال التحريك، إذ يتم تحريكها لمواجهة المشاهد.

يمكننا تطبيق مجموعة الإطارات المفتاحية هذه على كل عناصر span على النحو التالي:

.byline span {
  animation: spin-letters 10s linear infinite;
}

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

بجمع كل ذلك معًا، سنحصل على المشهد التالي:

تمرين

إذا كان لديك الوقت، أشجعك على إلقاء نظرة على قسم CSS في نسخة CodePen.

قد تلاحظ وجود بعض استعلامات الوسائط media في CSS. نستخدم هذه الاستعلامات لتحجيم المثال في الأجهزة الصغيرة. حاول تغيير بعض إطارات التحريك المفتاحية، أو قيم الخاصية transform لمعرفة ما سيحدث.

المصادر

• ترجمة وبتصرف للفصل star wars من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضًا

• المقالة التالية: إظهار المحتوى عند التمرير
• المقالة السابقة: رواية القصص عبر الحركات
• النسخة العربية الكاملة من كتاب: التحريك عبر CSS

تحدثنا في المقالات الماضية عن الخاصيتين transition و animation. سندمجها مع هذه المقالة في عملية التحريك لخلق تأثير التحويم (hover effect).

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

• ما هي استخدامات الحركات؟
• تجهيز بيئة العمل لإنشاء الحركات
• مدخل إلى الانتقالات: التنقل بين الحالات
• مدخل إلى الحركات: مفهوم الحركة
• تطبيق عملي: الانتقالات
• خاصيات الانتقالات
• دوال التوقيت
• الانتقالات المتعددة
• الانتقالات وجافاسكربت
• تطبيق عملي: التحريكات
• خاصيات الحركات
• تطبيق عملي: الإطارات المفتاحية
• الحركات المتعددة المتزامنة
• موجز الحركات
• رواية القصص عبر الحركات
• حرب النجوم
• إظهار المحتوى أثناء التمرير
• سهولة الوصول
• نهاية الرحلة

الصور الرئيسية

تُفضّل العديد من المواقع عرض صورة كبيرة تجذب الانتباه في أعلى الصفحة الرئيسية. تسمى أحيانًا الصورة الرئيسية، أو الصورة البطلة (hero image)، وعادةً ما تسع كاملَ عرض الصفحة.

من الأمثلة الجيدة التي وجدتها مؤخرًا هي صفحة الهبوط الخاصة بموقع إطار العمل Fabric، إذ توضِّح عبر حركة بسيطة في CSS وظيفة Fabric كإطار عمل تركيبي (modular).

مثال آخر جيد نجده في الصفحة الرئيسية لموقع Mailchimp إذ تحكي الصورة الرئيسية قصةً توضح كيفية إنشاء رسائل البريد الإلكتروني.

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

مثال: تمرير الخلفية

سننشئ مثالًا خاصًّا بنا مشابه لما رأيته آنفًا. في هذا المثال، قمت بتصميم رسومات على الصفحة تتحرك لأعلى وأسفل الشاشة.

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

يمكنك الاطلاع على هذا المثال من هنا.

الجزء 1: تحريك الخلفية

لإعداد هذا المثال، سنبدأ بعنصر HTML حاوي:

<div class="screen"></div>

يمكننا أن نجعل العنصر screen يبدو وكأنه شاشة أو iPad باستخدام التنسيقات التالية:

.screen {
  background: #e25865 url(//cssanimation.rocks/screen/images/screen_bg.png) no-repeat top center;
  background-size: 100% auto;
  border: 2em solid #fff;
  border-radius: 1em;
  width: 40em;
  height: 30em;
}

لقد أعددنا بعض التنسيقات التي تحدد الحجم والحدود، وتعيّن صورة الخلفية.

يعتمد التأثير الذي نريد إنشاءه على تحريك صورة الخلفية. صورة الخلفية أطول من الشاشة، وقيمة خاصيتها background-size تساوي ‎100% auto. هذا يعني أنّ الخلفية ستُناسب عرض الحاوية، ولكنها ستكون أطول منها.

بتحديد صورة الخلفية المراد تحريكها، يمكننا الآن كتابة الإطارات المفتاحية التي ستجعلها تبدو وكأنّ شخصًا ما يمرّر (scroll) صفحة الويب:

@keyframes scroll {
  0%, 10% {
    background-position: 0 0;
  }
  20%, 30% {
    background-position: 0 -22em;
  }
  50%, 60% {
    background-position: 0 -44em;
  }
  90%, 100% {
    background-position: 0 0;
  }
}

الخاصية التي نحركها هي background-position. يمكننا عبر هذه الخاصية تحريك الخلفية لأعلى ولأسفل. إذا تبدأ من الموضع 0 0، ما يعني أنّ المسافة من اليسار، ومن الأعلى ستُساويان الصفر.

في الإطارات التالية، جعلنا الخلفية تتحرك إلى أعلى بمقدار ‎22em، ثم ‎44em لأعلى، ثم العودة إلى أعلى الصفحة. سنستخدم الخاصية animation لتطبيق هذا على العنصر screen.

.screen {
  animation: scroll 5s infinite cubic-bezier(.52,-0.39,.3,1.43);
}

في المثال أعلاه طبقنا مجموعة من الإطارات المفتاحية التي تسمى scroll، وطلبنا منها أن تستمر 5 ثوان، وتتكرر باستمرار، وتستخدم دالة توقيت cubic-bezier. في هذه الحالة، تعطي الدالة cubic-bezier للحركة اهتزازًا، وستبدو الحركة بدونها أقل واقعية.

يمكنك أن تجد دالةَ cubic-bezier المستخدمة في المثالِ في الموقع cubic-bezier.com. إذا لم تزر هذا الموقع حتى الآن، فإني أوصي به بشدة!

الجزء 2: إضافة انتقال التحويم

من المستحسن إيقاف أو تجميد الحركة عند انتهائها، أو عندما تريد أن يركز القارئ على محتوى آخر. التحريك المستمر يمكن أن يتسبب في تشتيت القارئ، لذلك دعنا نستفيد من الخاصية animation-play-state لإيقاف الحركة مؤقتًا عند التحويم على العنصر.

.screen:hover {
  animation-play-state: paused;
}

هذا يعني أنه عندما يحوم مؤشر الفأٍرة فوق موضع الحركة، سيتوقف مؤقتًا. وعندما يبتعد المؤشر، سوف تُستأنف الحركة وتعود الخاصية animation-play-state لقيمتها الافتراضية playing.

يمكنك تحقيق ذلك باستخدام JavaScript أيضًا. يمكن أيضًا استخدام JavaScript لتعطيل الحركة عندما يتفاعل المستخدم مع جزء آخر من الصفحة، أو عندما يمرّر (scroll) الصفحة بعيدًا. سنلقي نظرة على كيفية تمكين الحركة عند التمرير لاحقًا.

الجزء 3: إضافة رسالة

يمكننا أن نضيف المزيد ونعرض رسالة خاصة بالانتقال عندما يُحوِّم المستخدم فوق العنصر. للقيام بذلك سنحتاج إلى كتابة بعض شيفرات HTML:

<div class="screen">
  <div class="message">Hover message!</div>
</div>

في قسم CSS من CodePen، وضعنا هذه الرسالة في منتصف العنصر screen، وجعلناها غير مرئية.

.message {
  /*... positioning styles ...*/
  opacity: 0;
  transition: all 0.4s ease-out;
}

يمكننا بعد ذلك إظهارها عند التحويم باستخدام الانتقال:

.screen:hover .message {
  opacity: 1;
}

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

ملخص

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

تمرين

توقف لحظة، وفكّر في كل ما تعلمناه حتى الآن. لقد غطينا الكثير من المواضيع. يُعد الجمع بين الحركة والانتقال وسيلة ممتازة لإضفاء الحيوية على الصفحات.

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

المصادر

• ترجمة وبتصرف للفصل storytelling من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضًا

• المقالة التالية: حرب النجوم
• المقالة السابقة: موجز الحركات
• النسخة العربية الكاملة من كتاب: التحريك عبر CSS

لقد غطينا الكثير من التفاصيل في المقالات السابقة وأرجو أن يكون كل شيء واضحًا الآن.

عندما بدأت تعلم إنشاء الحركات في CSS، لم تكن مفاهيم التحريك والإطارات المفتاحية (keyframes) واضحة لي. إذا شعرتَ أنّ مفاهيم التحريك غير واضحة حتى الآن، فلا تقلق. استمر في الدراسة والتعلم والتجريب، وستتضح شيئًا فشيئًا حيل ومفاهيم التحريكات في HTML و CSS.

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

• ما هي استخدامات الحركات؟
• تجهيز بيئة العمل لإنشاء الحركات
• مدخل إلى الانتقالات: التنقل بين الحالات
• مدخل إلى الحركات: مفهوم الحركة
• تطبيق عملي: الانتقالات
• خاصيات الانتقالات
• دوال التوقيت
• الانتقالات المتعددة
• الانتقالات وجافاسكربت
• تطبيق عملي: التحريكات
• خاصيات الحركات
• تطبيق عملي: الإطارات المفتاحية
• الحركات المتعددة المتزامنة
• موجز الحركات
• رواية القصص عبر الحركات
• حرب النجوم
• إظهار المحتوى أثناء التمرير
• سهولة الوصول
• نهاية الرحلة

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

تمرين: إشارات المرور

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

يمكنك الاطلاع عليه من هنا. لقد جعلت نظام الألوان يطابق شكل إشارات المرور الأمريكية.

موجز: الحركات

في هذا القسم، سنلقي نظرة على الخاصية animation، وكيف تعمل مع الإطارات المفتاحية (keyframes).

الخاصية transition

رغم أنَّ الخاصية animation تعمل بطريقة مشابهة للخاصية transition، إلا أنَّها تختلف عنها قليلًا. ففي حين أنّ الانتقال (transition) لن يحدث الا عند تغيُّر العنصر، فإنّ الحركات (animations) يمكن أن تبدأ مباشرةً.

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

افتراضيًا، تحدث الحركات من البداية إلى النهاية، ثم تقفز إلى حالتها الافتراضية. يمكننا تجميد الحركة في حالتها النهائية بإعطاء الخاصية animation-direction القيمةَ forwards.

تستخدم الحركات دوال التوقيت مثلها مثل الانتقالات. بيْد أنّ دوال التوقيت تنطبق على كل إطار رئيسي على حدة، وليس على كامل مجموعة الإطارات المفتاحية. يمكنك أيضًا تحديد قيمة animation-timing-function داخل الإطار المفتاحي لتتحكم بشكل أدق في الحركة.

أخيرًا، يمكن صياغة الحركات بشكل مختصر كما هو الحال مع الانتقالات:

animation: keyframe-name 2s forwards linear;

الإطارات المفتاحية

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

الإطارات المفتاحية لها اختصاراتها الخاصة (to و from)، والتي يمكنك استخدامها عندما تريد الاكتفاء بالانتقال من حالة إلى أخرى.

يمكن أن يؤدي سرد النسب المئوية بجانب بعضها بعضًا إلى "توقف" الحركة في تلك المرحلة.

أخيرًا، من الممكن حذف الإطار المفتاحي ‎0%، وسوف يفترض المتصفح حينها أنّ تنسيق العنصر هو الحالة الابتدائية. على سبيل المثال، لجعل عنصر ما يتلاشى (fade away)، لا يلزم بالضرورة أن تكون قيمة عتَامته (opacity) مساوية لـ 1 في البداية (على افتراض أنّ العنصر مرئي):

@keyframes name {
  100% {
    opacity: 0;
  }
}

تجميع الحركة

عندما نريد استخدام الحركة، سيكون لدينا دائمًا الجزءان التاليان:

.element {
  animation: keyframe-name ...
}
@keyframes keyframe-name {
  ...
}

تمرين

في هذه المرحلة، يجب أن تكون قادرًا على التفريق بين خاصيتي الحركة (animation) والانتقال (transition).

ألق نظرة على أمثلة Principles of Animation for the Web. كل تلك الأمثلة مصنوعة حصرًا باستخدام HTML و CSS، وذلك باستخدام إطارات الحركة المفتاحية. حاول أن تنسخها، وقُم بالتجريب والتعديل عليها.

المصادر

• ترجمة وبتصرف للفصل animation recap من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضًا

• المقالة التالية: رواية القصص عبر الحركات
• المقالة السابقة: الحركات المتعددة المتزامنة
• النسخة العربية الكاملة من كتاب: التحريك عبر CSS

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

اقتباس

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

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

جدول المحتويات

حرصًا على تنظيم المقالة ولتسهيل الوصول إلى القسم الذي تريده بسهولة، سنذكر هنا جدول المحتويات باختصار:

• ما هي أهمية الحركات؟
• ظهور الحركات في الويب
• أريد تعلم إنشاء الحركات، فمن أين أبدأ؟
• دروس نظرية: مبادئ الحركات والتحريك
• دروس تطبيقية عملية

ما هي أهمية الحركات؟

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

اقتباس

إدراج الحركة في التصميمات يجعلها أكثر كفاءة في إيصال المعلومة. الصور المتحركة أبلغ من الكلمات الملفوظة أو المكتوبة.

إذا نظرت حولك عمومًا أو أمعنت النظر في الطبيعية خصوصًا، ستجد أنَّ الحركة في كل مكان وهي سمة الطبيعية الأساسية، فكلمة «حيوية» هي مصدر صناعي من «حياة» ويراد بها الفاعلية والنشاط. وتركبية جسم الإنسان وعدد مفاصله تؤكد أهمية الحركة التي تمثِّل سمة أساسية فيه.

اقتباس

"يتمحور التحريك إلى خلق شعور بالحياة". براد بيرد

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

ظهور الحركات في الويب

إن كنت من جيل الثمانينات والتسعينات، فلابد أنَّك زرت الكثير من المواقع التي كانت تستعمل حركات شتى مثل بطاقات لامعة أو نجوم مشعة أو قطط راقصة أو غيرها من الأشكال والتي كنت أراها مزعجة لي في بعض الأحيان؛ فلا أحب الاستعمال الزائد للحركة كثيرًا وكنت أهرب من المنتديات التي تفرط في استعمالها. أغلب ذلك كان يجري عبر تقنية Flash (الفلاش) التي أحدث ثورة في الحركات والتحريك آنذاك (بعد الصور المتحركة GIF). على أي حال، كانت ذلك يُسبِّب بطئيًا كبيرًا في تحميل الموقع مما يؤثر سلبًا عليه.

في هذه الأيام ومنذ فترة ليست ببعيدة، ظهرت تقنيات حديثة يمكن عبرها إضفاء الحيوية والحركة إلى مواقع الويب وذلك عبر HTML و CSS وجافاسكربت وصور SVG دون أن تؤثر على الأداء تأثيرًا ملحوظًا أو سلبيًّا. وبالتالي، دخلت الحركة إلى أغلب عناصر الصفحة بأدق تفاصيلها. فلم يعد الغرض منها إضفاء الحيوية والمتعة للمستخدم فقط، بل تحسين تجربة وواجهة المستخدم أيضًا (UX/UI) مما يجعل الموقع أفضل وأسهل للاستخدام خصوصًا إذا كان موقع الويب (أو تطبيق الويب) تفاعليًّا مع المستخدم.

أريد تعلم إنشاء الحركات، فمن أين أبدأ؟

حسنًا، إن اقتنعت بضرورة وأهمية الحركات في صفحات الويب، فقد تتساءل: من أين أبدأ وهل يوجد مرجع يشرح لي التحريك شرحًا كافيًا ووافيًا؟ أجيبك، نعم يوجد وبالعربية أيضًا.

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

ستغطي هذه المقالات المواضيع التالية:

• أولًا: ما هي الحركات؟ سنحاول أن نفهم سبب استخدام الحركات. سنقدم أيضًا الخاصيتين transition و animation، إضافة إلى بعض مصادر الإلهام.
• ثم: سنتحدث بتفصِيل عن الخاصية transition. ونتعلم كيفية عمل الانتقالات، والخاصيات التي تُمكّننا من التحكم في الحركة.
• بعد ذلك: سنركز على الخاصية animation، ونتعلم كيفية إنشاء الإطارات المفتاحية التي تتيح لنا فعل أشياء تتجاوز إمكانيات الانتقالات البسيطة.
• أخيرًا: سنجمع كل ما تعلمناه في الفصول السابقة. سندرس بعض الأمثلة المتقدمة التي تستخدم كلا الخاصيتين، ونتعلم الرابط بين الحركات وسهولة الوصول (accessibility)، ونشارك بعض مصادر CSS المفيدة التي يمكنك تطبيقها في مشاريعك، وأدوات JavaScript التي يمكن استخدامها لإنشاء تأثيرات أكثر تقدمًا.

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

دروس نظرية: مبادئ الحركات والتحريك

سأكتب عناوين مقالات سلسلة التحريك في CSS مع شرح مبسط عن ما ستتعلمه فيها هنا لسهولة الوصول إليها:

1. ما هي استخدامات الحركات؟

هذه المقالة هي أول مقالة في السلسلة وتناقش سبب إضافة الحركات وتبنيها في مواقع الويب وكيف يمكن أن يستفيد منها مصممو مواقع الويب.

2. تجهيز بيئة العمل لإنشاء الحركات

ستتعلم في هذه المقالة كيفية تجهيز بيئة العمل لديك لإنشاء الحركات عبر CSS وتشغليها إضافةً إلى تحديد سير العمل. سيكون العمل إمَّا باستعمال المتصفح نفسه (سيكون الاعتماد غالبًا على CodePen) أو بتجهيز بيئة تطوير محلية. سيتطرق المقال إلى أداة البناء Gulp لأتمتة بعض العلميات الروتينية.

3. مدخل إلى الإنتقالات: التنقل بين الحالات

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

4. مدخل إلى الحركات: مفهوم الحركة

يشرح هذا المقال أولًا الفرق بين الإنتقال والحركة ويوضح كيف يُنفِّذ المتصفح حركة ما على عنصر. يعرِّفك هنا على خاصية الحركة animation في CSS شقيقة خاصية التحويل transition وكيفية استعمالها لإنشاء الحركات. يعرض أيضًا مثالين عمليَّين ويحللهما لفهم كيف تجري الحركة. يشرح أخيرًا متى تُستخدَم الحركة ومتى يُستخدَم الانتقال.

5. تطبيق عملي: الانتقالات

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

6. خاصيات الانتقالات

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

7. دوال التوقيت

تتحدث هذه المقالة عن دوال التوقيت (timing function) وكيفية استعمالها مع الانتقالات المطبقة على العناصر، وتشرح أشهر أنواع دوال التوقيت المستعملة حاليًّا مع عرض صور وأمثلة توضيحية تساعد على فهمها.

8. الانتقالات المتعددة

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

9. الانتقالات وجافاسكربت

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

10. تطبيق عملي: التحريكات

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

11. خاصيات الحركات

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

12. تطبيق عملي: الإطارات المفتاحية

تلقي هذه المقالة نظرة أعمق على الإطارات المفتاحية (keyframes) وصياغتها وكيفية استعمالها مع الحركات لتحريك العناصر تحريكًا مخصَّصًا. سيجري شرح كل ذلك شرحًا تفصيليًّا عبر تطبيق عملي لتحريك زر حركة مُخصَّصة.

13. الحركات المتعددة المتزامنة

تتحدث هذه المقالة عن كيفية استخدام عدة مجموعات من الإطارات المفتاحية (keyframes) لإنشاء حركة معقدة مؤلفة من عدة حركات تعمل بشكل متزامن مع بعضها بعضًا. المثال العملي في هذا الدرس هو إنشاء إشارة مرور.

14. موجز الحركات

نتوقف هنا في هذه المقالة للالتقاط الأنفاس وأخذ استراحة بسيطة يجري فيها مراجعة وتلخص كل ما تعلمته مسبقًا في المقالات السابقة عن الحركات والانتقالات وتطبيقها لتحريك العناصر في CSS.

15. رواية القصص عبر الحركات

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

16. حرب النجوم (Star War)

سنطبق في هذه المقالة كل ما تعلمته في المقالات السابقة لصنع حركة متجِهيًّة (SVG) مرحة، وذلك بالعمل على تحريك عنوان فيلم حرب النجوم من إعلان "The Force Awakens" ليظهر وكأنه ثلاثي الأبعاد. في أثناء ذلك، سيجري شرح الخاصية transform ودوالها‏ scale()‎ و translateZ()‎ و rotateY()‎.

17. إظهار المحتوى أثناء التمرير

سوف تتعلم في هذه المقالة كيفية إظهار العناصر عند تمرير (scrolling) إليها وعرضها على نافذة المتصح مع إضافة حركة إليها. يعرض لتحقيق ذلك إطاري عمل هما: Wow.js و Animate.css مع عدم نسيان الدعم الذي يوفره Modernizr احتياطًا من أولائك المستخدمين الذين لا يشغّلون JavaScript لسبب ما.

18. سهولة الوصول

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

19. نهاية الرحلة

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

دروس تطبيقية عملية

تحوي الأكاديمية على مقالات عدة تتحدث عن الحركات في CSS بمستويات متفاوتة ومواضيع متنوعة تصب جميعها في موضوع واحد ألا وهو «التحريك في CSS»، لذا جمعت لك جميع هذه المقالات لسهولة الوصول إليها من مكان واحد ولتكون لك مرجعًا تستعين به في المستقبل.

مبادئ التحريك في صفحات الويب باستخدام CSS

تشرح هذه المقالة المبادئ الاثنا عشر لأساسيات التحريك عبر CSS - المنشورة بكتاب عنوانه:  "وهم الحياة: الرسوم المُتحركة في ديزني" - وتناقش كيف لها أنّ تُطبَّق في صناعة صفحات الويب مع أمثلة توضيحيّة وإتاحة الوصول إلى مصدر شيفرة HTML و CSS الخاصّة بهذه الأمثلة.

تأثيرات حركية على عناصر قوائم HTML باستخدام CSS

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

تحريك شبه العناصر (pseudo-elements) في CSS

ستتعرف في هذه المقالة على كيفية استخدام عنصر زائف (pseudo-element) لإضافة تأثير بصري على زر في CSS. يشرح أولًا ماهية شبه العناصر (أو العناصر الزائفة) وفائدتها وكيفية الاستفادة منها في إنشاء الحركات، ثم ينتقل إلى كيفية توظيفها في إنشاء زر برَّاق عبر الحركات.

تحريك زر تفضيل التغريدة الخاص بتويتر باستخدام CSS فقط

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

تنبيهات مؤقتة باستخدام CSS

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

كيفية إنشاء قائمة متحركة من نوع off-canvas في CSS

يشرح هذا المقال كيفية إنشاء قائمة تنقل من النوع الذي يكون خارج الشاشة (off-canvas)، إذ ستتعلم ببناء شيء شبيه بهذه المعاينة (انظر إلى Demo2) بحيث تكون الأيقونة التي تفتح القائمة موجودة في أعلى يسار الشاشة والحد (border) يكون اسمك من جهة اليسار.

تأثير الانتقال في مشهد فضائي

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

كيف تنشئ ساعة ذات عقارب باستخدام تحريكات CSS و JavaScript

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

تحريك وانتقال العناصر في CSS3 (الانتقال)

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

تحريك وانتقال العناصر في CSS3 (التحريك)

يكمل هذا المقال شرح مفهوم تحريك العناصر وتطبيق التأثيرات البصرية عبر الحركات (الخاصية animation) في CSS ويوضح كيفية تحريك العنصر بين عدة حالات مع أمثلة عملية. المواضيع التي يتحدث المقال عنها أيضًا هي الإطارات المفتاحية، ومدة الحركة ودوال التوقيت، وتأخير تشغيل الحركة، واتجاه الحركة وحالتها، وتخصيص الحركات، وكيفية تطبيق حركة بتعليمة واحدة مختزلة.

تأثير الانتقال والحركة في CSS

يُعرِّفك هذا المقال على تأثيرات الانتقالات (Transitions) والحركات (Animations) في CSS3 بالإضافة إلى الحديث عن دعم المتصفحات لها، والخصائص التي تسمح بتطبيق تأثيرات الانتقال عليها، ومدة وتوقيت تأثير الانتقال، والإطارات المفتاحية في الحركات، ودوال التوقيت، وأزمنة الحركات، وتكرار واتجاه وحالة الحركة، وغيرها.

أفضل 25 مكتبة تحريك في CSS

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

تأثيرات إبداعية لإضافة وإزالة عناصر قائمة باستخدام تحريكات CSS

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

كيفية إنشاء قائمة تنقل دائرية باستخدام CSS Transforms

يعلمك هذا المقال كيفية إنشاء قائمة تنقل (navigation) دائرية الشكل باستخدام الانتقالات في CSS. يراعي المقال شرح ذلك خطوة بخطوة بالإضافة إلى الحسابات والمنطق البسيط وراء هذه الطريقة حتى يتسنى لك فهم كيفية عمل هذه القائمة المميزة. 

استخدام المحدد target: ضمن CSS لإنشاء تأثيرات واجهة المستخدم UI بدون JavaScript

يشرح هذا المقال كيفية استخدام المحدد target: ضمن CSS لتحديد وتنسيق مظهر العنصر أو الفقرة الموجودة ضمن نفس الصفحة والمعرفة عبر الخاصية href ضمن رابط ما، إذ يتم تطبيق هذه التنسيقات على العنصر الهدف عند النقر على ذلك الرابط بدون اللجوء لاستخدام JavaScript. يشرح المقال أيضًا كيفية استعمال الخاصية animation لتطبيق تنسيق ما بشكل متدرج.

سنتحدث في هذه المقالة عن كيفية استخدام عدة مجموعات من الإطارات المفتاحية (keyframes) تعمل بشكل متزامن لتوليد حركة معقدة مؤلفة من عدة حركات.

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

• ما هي استخدامات الحركات؟
• تجهيز بيئة العمل لإنشاء الحركات
• مدخل إلى الانتقالات: التنقل بين الحالات
• مدخل إلى الحركات: مفهوم الحركة
• تطبيق عملي: الانتقالات
• خاصيات الانتقالات
• دوال التوقيت
• الانتقالات المتعددة
• الانتقالات وجافاسكربت
• تطبيق عملي: التحريكات
• خاصيات الحركات
• تطبيق عملي: الإطارات المفتاحية
• الحركات المتعددة المتزامنة
• موجز الحركات
• رواية القصص عبر الحركات
• حرب النجوم
• إظهار المحتوى أثناء التمرير
• سهولة الوصول
• نهاية الرحلة

إشارة المرور

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

لدينا هنا نموذج بسيط لإشارة المرور (في المملكة المتحدة):

لدينا ثلاثة مصابيح، وكل منها يضيء وينطفئ بنمط خاص به. يمكننا إنشاء هذا عن طريق إعطاء كل مصباح حركةً خاصَّةً به.

.red {
  animation: red 10s linear infinite;
}
.amber {
  animation: amber 10s linear infinite;
}
.green {
  animation: green 10s linear infinite;
}

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

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

تنقسم الشبكة إلى 5 أعمدة. هذا يعني أنه يمكننا التعامل مع "أخماس" كل منها تستغرق ‎20% من مدة الحركة، وإنشاء مجموعات الإطارات المفتاحية من تلك الأخماس.

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

@keyframes red {
  0% {
    background: black;
  }
  2%, 40% {
    background-color: red;
  }
  42%, 100% {
    background: black;
  }
}

لقد أضفت فجوة بقيمة ‎2% في البداية، وجعلت الجزء الثالث من الحركات يبدأ عند اللحظة 42%، لأنّ هذا سيضيف تأثير التلاشي على إشارة المرور. مثل هذه الأشياء الدقيقة هي التي تصنع فرقًا :).

مع إضاءة المصباح الأحمر، يُنتظر أن يضيء المصباح البرتقالي على الشبكة.

المصباح البرتقالي سيكون منطفئًا في البداية، ثم سيضيء خلال الخمس الثاني، ثم ينطفئ خلال الخُمسَين التاليين، ثم يضيء في الخمس الأخير. الإطارات المفتاحية لهذا المصباح هي:

@keyframes amber {
  0%, 20% {
    background: black;
  }
  22%, 40% {
    background: #FF7E00;
  }
  42%, 80% {
    background: black;
  }
  82%, 100% {
    background: #FF7E00;
  }
}

أما المصباح الأخضر، فسيكون منطفئًا خلال الخُمسَين الأوليَين، ثم يضيء خلال الخُمسَين التاليين، ثم ينطفئ في الخُمس الأخير.

@keyframes green {
  0%, 40% {
    background: black;
  }
  42%, 80% {
    background: green;
  }
  82%, 100% {
    background: black;
  }
}

يمكنك مطالعة المثال كاملًا من هنا.

مراجع أخرى

لمعرفة المزيد عن صياغة الإطارات المفتاحية، راجع المقال «صياغة الإطارات المفتاحية للحركات».

تمرين

قد يبدو مثال إشارة المرور غريبًا بالنسبة لك لأنه يتبع نموذج المملكة المتحدة. هل يمكنك تعديله ليتناسب مع نموذج إشارات المرور في بلدك؟ حسنًا، ليكن ذلك تمرين هذا القسم.

المصادر

• ترجمة وبتصرف للفصل multiple animations من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضًا

• المقالة التالية: موجز الحركات
• المقالة السابقة: تطبيق عملي: الإطارات المفتاحية
• النسخة العربية الكاملة من كتاب: التحريك عبر CSS

أساسيات التعريف والاستخدام

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

#box {
  -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}

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

الخطوات المتعددة

@keyframes fontbulger {
  0% {
    font-size: 10px;
  }
  30% {
    font-size: 15px;
  }
  100% {
    font-size: 12px;
  }
}

#box {
   animation: fontbulger 2s infinite;
}

إن كان للحركة خاصيتي البداية والنهاية نفسهما، فيمكنك صياغة ذلك بوضع فاصلة بين القيمتين 0% و ‏100%‏:

@keyframes fontbulger {
  0%, 100% {
    font-size: 10px;
  }
  50% {
    font-size: 12px;
  }
}

أو يمكنك جعل الحركة تحدث مرتين (أو أيّ عدد زوجي من المرات)، وإعطاء الخاصية animation-direction القيمة alternate.

استدعاء إطارات الحركة المفتاحية عبر خاصيات منفصلة

.box {
 animation-name: bounce;
 animation-duration: 4s; /* Xms :أو */
 animation-iteration-count: 10;
 animation-direction: alternate; /* normal :أو */
 animation-timing-function: ease-out; /* ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) :أو */
 animation-fill-mode: forwards; /* backwards, both, none :أو */
 animation-delay: 2s; /* Xms :أو */
}

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

في الصياغة المختصرة، ضع فاصلة بين كل القيم. لا يهم ترتيب القيم إلا في حال استخدام كل من المدة (duration) والتأخير (delay)، إذ يجب أن يكونا بهذا الترتيب. في المثال أدناه: 1s = المدة، 2s = التأخير، 3 = التكرار.

animation: test 1s 2s 3 alternate backwards

الجمع بين الخاصيتين transform و animation

@keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

الحركات المتعددة

يمكنك الفصل بين القيم بفواصل للتصريح بحركات متعددة على مُحدّد (selector) معيّن:

.animate-this {
   animation: 
      first-animation 2s infinite, 
      another-animation 1s;
}

الدالة‏ Steps()‎

تتحكم الدالة Steps()‎ بعدد الإطارات المفتاحية (keyframes) التي ستُصَيَّر في الإطار الزمني للحركة. في المثال التالي:

@keyframes move {
  from { top: 0; left: 0; }
  to   { top: 100px; left: 100px; }
}

إذا استخدمت Steps(10)‎ في الخاصية animation، فلن تُعرَض إلا 10 إطارات مفتاحية في الوقت المخصص.

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

يمكن أن يكون هذا مناسبًا للحركات التي تعتمد على تمرير الصور (spritesheet animation)، مثل هذا المثال.

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

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

المصادر

• ترجمة وبتصرف للمقالة Keyframe Animation Syntax لصاحبها Chris Coyier.

اطّلعنا في المقالة السابقة على خاصيات الحركات، ورأينا كيف أنَّها تعتمد على الإطارات المفتاحية (keyframes). سنلقي في هذه المقالة نظرة أعمق على الإطارات المفتاحية.

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

• ما هي استخدامات الحركات؟
• تجهيز بيئة العمل لإنشاء الحركات
• مدخل إلى الانتقالات: التنقل بين الحالات
• مدخل إلى الحركات: مفهوم الحركة
• تطبيق عملي: الانتقالات
• خاصيات الانتقالات
• دوال التوقيت
• الانتقالات المتعددة
• الانتقالات وجافاسكربت
• تطبيق عملي: التحريكات
• خاصيات الحركات
• تطبيق عملي: الإطارات المفتاحية
• الحركات المتعددة المتزامنة
• موجز الحركات
• رواية القصص عبر الحركات
• حرب النجوم
• إظهار المحتوى أثناء التمرير
• سهولة الوصول
• نهاية الرحلة

أساسيات

قبل أن نخوض في مثال عملي، هناك بعض الأشياء التي أود تغطيتها بخصوص الإطارات المفتاحية. الأول، هو صياغة بديلة قد تراها في بعض الشيفرات، وتستخدم الكلمات from و to.

@keyframes name {
  from {
    ...
  }
  to {
    ...
  }
}

هذه الطريقة البسيطة يمكن أن تكون بديلًا عن كتابة ‏0% و ‏100%، وقد تكون أسهل للفهم، ومناسبة للحركات البسيطة.

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

مثلا:

@keyframes name {
  0%, 20% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

في هذا المثال، سيبدأ العنصر بتعتيمٍ (opacity) يساوي 0، وسيظل غير مرئي حتى انقضاء 20٪ من توقيت الحركة، ثم ستبدأ قيمة العتامة بالتحرُّك تُجاه القيمة 1.

سنستخدم هذا في المقالة اللاحقة لمزامنة الحركات.

مثال: تأثير اهتزاز الزر Save

هل تذكر مثال الزر "Save" من المقالة الأولى؟ دعنا نعيد النظر في هذا المثال، وننظر في كيفية استخدام الإطارات المفتاحية keyframes إلى جانب الخاصية animation لإنشاء تأثير الاهتزاز.

قبل إضافة أي حركة، فقد نسّقتُ الزر لجعله يبدو مثل زر CodePen. حيث جعلت له حدًّا برتقاليًا في الأعلى، وتدرّجًا داكنًا، وجلعت لون النص فيه أبيضًا. وقد استخدمت التموضع المطلق (absolute positioning) في المثال للتأكد من أنّ الزر سيكون في منتصف الشاشة.

أول ما أفعله عمومًا هو تطبيق الخاصية animation على العنصر على النحو التالي:

button {
  animation: wiggle 2s linear infinite;
}

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

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

بعد ذلك، سنحدد الإطارات المفتاحية الخاصة بحركة "الاهتزاز". وها هي النتيجة:

@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}

لقد أعطينا المتصفح سلسلة من النقاط المرحلية (waypoints) ليُحرِّك العنصر بينها. يُدوَّر الزر "Save" عند كل نقطة على المحور z. تبدأ الزوايا واسعةً، ثم تصغُر خلال الحركة.

إليك كيف تميل الحركة الزر للخلف وللأمام مع مرور الوقت:

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

يمكنك مطالعة مثال زر "Save" على CodePen.

تمرين

لقد أنشأت مشروع CodePen جديد يتضمن عنصرًا متحركًا واحدًا. حيث يستخدم animation-timing-function داخل الإطارات المفتاحية، مع سلسلة من الإطارات المفتاحية التي تخلق حركة معقدة نسبيًا.

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

المصادر

• ترجمة وبتصرف للفصل keyframes in action من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضًا

• المقالة التالية: الحركات المتعددة المتزامنة
• المقالة السابقة: خاصيات الحركات
• النسخة العربية الكاملة من كتاب: التحريك عبر CSS

قبل إعطاء المزيد من أمثلة التحريك، دعونا نلقي نظرة على خاصيات التحريك أولًا.

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

• ما هي استخدامات الحركات؟
• تجهيز بيئة العمل لإنشاء الحركات
• مدخل إلى الانتقالات: التنقل بين الحالات
• مدخل إلى الحركات: مفهوم الحركة
• تطبيق عملي: الانتقالات
• خاصيات الانتقالات
• دوال التوقيت
• الانتقالات المتعددة
• الانتقالات وجافاسكربت
• تطبيق عملي: التحريكات
• خاصيات الحركات
• تطبيق عملي: الإطارات المفتاحية
• الحركات المتعددة المتزامنة
• موجز الحركات
• رواية القصص عبر الحركات
• حرب النجوم
• إظهار المحتوى أثناء التمرير
• سهولة الوصول
• نهاية الرحلة

على غرار الخاصية transition، يمكن كتابة الخاصية animation باستخدام الصياغة المختزلة، أو يمكن تحديد أي من هذه الخاصيات بشكل منفرد.

الخاصية animation-delay

بشكل مشابه للخاصية transition-delay، يمكننا استخدام هذه الخاصية لجعل الحركة تنتظر قبل البدء. قد يكون ذلك مفيدًا في المواقف التي تحدث فيها عدة حركات.

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

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

الخاصية animation-direction

الحركات عادة ما تبدأ من 0٪ وتنتهي عند 100٪، حيث تمثل 0٪ نقطة بداية الحركة، وتمثل 100٪ نقطة النهاية. تأخذ الخاصية animation-direction القيم normal و reverse و alternate و alternate-reverse ، وتُستخدم للتحكم في اتجاه الحركة.

تؤدي القيمة reverse إلى جعل الحركة تحدث (وتدور) بشكل معكوس، أي من 100٪ إلى 0٪، بينما تجعل القيمة alternate الحركةَ تحدث من 0٪ إلى 100٪، وتعود مرة أخرى إلى 0٪.

الخاصية animation-duration

تمثل هذه الخاصية طول الحركة. على غرار transition-duration، تأخذ هذه الخاصية قيمة مثل 1s، التي تمثل ثانية واحدة، أو 200ms، التي تمثل مئتي ميلي ثانية.

الخاصية animation-fill-mode

بشكل افتراضي، بعد انتهاء التحريك سيعود العنصر إلى حالته الطبيعية. باستخدام animation-fill-mode يمكننا جعل الحركة تتجمد إما على الحالة النهائية، أو على حالة البداية.

يؤدي استخدام القيمة forwards إلى جعل الحركة تنتهي وتتوقف عند الإطار الرئيسي الأخير. فيما تعود القيمة backwards إلى الإطار الرئيسي الأول عندما تنتهي الحركة.

يمكنك مطالعة هذا المثال على Hop.ie. تحدث الحركة مرة واحدة، وتنتهي عند الإطار الأخير. وذلك بسبب استخدام القيمة forwards.

الخاصية animation-iteration-count

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

الخاصية animation-name

تشير الخاصية animation-name إلى الإطارات المفتاحية المرتبطة بالحركة. على سبيل المثال، إذا تم تعيين animation-name عند القيمة foo، فسيتم استخدام مجموعة الإطارات المفتاحية ذات الاسم foo المُعرّفة على النحو التالي:

@keyframes foo {
  ...
}

الخاصية animation-play-state

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

الخاصية animation-timing-function

تأخذ هذه الخاصية نفس القيمة التي تأخذها الخاصية transition-timing-function، ولكن مع اختلاف طفيف. فبينما تنطبق دوال التوقيت، مثل ease-out، على عملية الانتقال (transition) بأكملها، تنطبق دالة التوقيت الخاصة بالتحريك (animation) بين الإطارات المفتاحية.

هذا يعني أنّ الإطارات المفتاحية التالية ستشهد بداية سريعة للحركة ثم تتباطأ الحركة مع الاقتراب من 50٪، ثم تُسرَّع من جديد قبل أن تتباطأ مع الاقتراب من 100٪.

@keyframes foo {
  0% {
    /* ease-out التحريك يبدأ بسرعة ثم تجعله الدالة 
    % يتباطأ مع الاقتراب من 50   */
  }
  50% {
    /* مجددا يبدأ بسرعة ثم يتباطأ مع الاقتراب من %100 */
  }
  100% {
    /* النهاية*/
  }
}

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

رغم ذلك، فإنّ دوال التوقيت cubic-bezier يمكن أن تخلق بعض التأثيرات الرائعة عند استخدامها مع الحركات، لذلك جرّبها.

استخدام دوال التوقيت ضمن الإطارات المفتاحية

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

هذا يعني أنه إذا أردت تحديد أربع إطارات مفتاحية، فستطُبّق دالة التوقيت على كلٍّ منها. فمثلًا، سوف تبطِّئ دالة التوقيت ease-out الحركة عند الاقتراب من نهاية كل إطار مفتاحي.

لهذا السبب، عادةً ما يُفضل استخدام دالة التوقيت linear، والتحكم في السرعة على أساس كل إطار على حدة:

@keyframes my-animation {
  0% {
  ...
  animation-timing-function: linear;
  }
  50% {
  ...
  animation-timing-function: ease-out;
  }
}

في هذه الحالة، سيكون النصف الأول من الحركة خطيًا، بينما يستخدم النصف الثاني دالة التوقيت ease-out.

تمرين

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

المصادر

• ترجمة وبتصرف للفصل animation properties من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضًا

• المقالة التالية: تطبيق عملي: الإطارات المفتاحية
• المقالة السابقة: تطبيق عملي: التحريكات
• النسخة العربية الكاملة من كتاب: التحريك عبر CSS

ألقينا في المقالات الماضية نظرة على الخاصية transition، وسنلقي في هذه المقالة نظرة أعمق على الخاصية animation.

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

• ما هي استخدامات الحركات؟
• تجهيز بيئة العمل لإنشاء الحركات
• مدخل إلى الانتقالات: التنقل بين الحالات
• مدخل إلى الحركات: مفهوم الحركة
• تطبيق عملي: الانتقالات
• خاصيات الانتقالات
• دوال التوقيت
• الانتقالات المتعددة
• الانتقالات وجافاسكربت
• تطبيق عملي: التحريكات
• خاصيات الحركات
• تطبيق عملي: الإطارات المفتاحية
• الحركات المتعددة المتزامنة
• موجز الحركات
• رواية القصص عبر الحركات
• حرب النجوم
• إظهار المحتوى أثناء التمرير
• سهولة الوصول
• نهاية الرحلة

علاقة تكاملية

تُطبّق الخاصية animation على العناصر بشكل مشابه للخاصية transition. كما أنها تحتاج إلى جزء ثانٍ، يسمى الإطارات المفتاحية (keyframes).

.element {
  animation: ...
}

@keyframes animation-name {
  /* تُكتَب هنا النقاط المرجعية لهذا الإطار المفتاحي */
}

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

الخاصية animation

تُطبّق الإطارات المفتاحية على العناصر باستخدام الخاصية animation. وهي تشبه transition إلى حد بعيد، ولكنّها تتميز عنها ببعض الخاصيات الإضافية. يمكن كتابة التحريكات بالشكل المختصر التالي:

animation: change-background 4s linear infinite;

في حال كتابتها كخاصيات منفردة، فستبدو الصياغة كما يلي:

animation-name: change-background;
animation-duration: 4s;
animation-timing-function: linear;
animation-repeat: infinite;

القيم المعطاة لـ transition هي عبارة عن خاصيات (properties)، مثل background أو all، أما الخاصية animation فتُعطى اسم مجموعة الإطارات المفتاحية التي تؤلف تسلسل الحركة.

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

الإطارات المفتاحية

مجموعة الإطارات المفتاحية keyframes في CSS هي عبارة عن سلسلة من النقاط المرجعية على طول مسار التحريك. ويُكتب كل إطار مفتاحي كنسبة مئوية.

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

إذا حاولنا أن نوضح لشخص ما كيف يحدث هذا التغيير في ألوان الخلفية بمرور الوقت، فقد نصف الأمر هكذا:

"البدء بخلفية زرقاء، ثم خلفية برتقالية في منتصف الطريق، ثم الانتهاء بخلفية خضراء"

أو إذا أردنا أن نكون أكثر دقة، فيمكننا استخدام النسب المئوية لشرح توقيت التغييرات:

"عند قطع 0٪ من الطريق (البداية)، فإنّ الخلفية ستكون زرقاء، ثم عند الوصول إلى نسبة 50٪ من الوقت، فستصير الخلفية برتقالية، وعند الوصول إلى نسبة 100٪، ستصير الخلفية خضراء"

يمكننا تلخيص ذلك على النحو التالي:

0% Blue
50% Green
100% Orange

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

@keyframes change-background {
  0% {
    background: blue;
  }
  50% {
    background: orange;
  }
  100% {
    background: green;
  }
}

لقد سمّينا عملية التحريك change-background. سنستخدمها لاحقًا عندما نريد تطبيق الإطارات المفتاحية على عنصر ما.

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

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

يمكنك مراجعة هذا المثال على CodePen.

لقد ذكرت في وقت سابق إمكانية استخدام الخاصية animation-direction كخيار بديل لإنشاء التحريك. إليك كيف يبدو ذلك:

في هذه الحالة، قمت بتغيير قيمة الخاصية animation-direction إلى alternate. يمكنك الاطلاع على ذلك في موقع CodePen.

البادئات

في الوقت الحالي، لا يزال من الضروري استخدام البادئة -webkit- في الخاصية animation. لن أضيفها إلى الأمثلة، ولكنها ضرورية لتعمل التحريكات في بعض المتصفحات، مثل Safari.

في CodePen، يمكنك استخدام خيار "Autoprefixer" الموجود ضمن إعدادات CSS. بالنسبة للتطوير المحلي، فأنا أستخدم أداة Autoprefixer الخاصة بأداة Gulp. (يشرح القسم «تحسين دعم المتصفحات لخاصيات CSS وشيفرة JavaScript» في المقال دليلك الشامل إلى أداة البناء Gulp كيفية أتمتة هذه العملية تلقائيًا.) أداة Prefix Free هي بديل جيد أيضًا.

تمرين

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

المصادر

• ترجمة وبتصرف للفصل animations in action من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضًا

• المقالة التالية: خاصيات الحركات
• المقالة السابقة: الانتقالات وجافاسكربت
• النسخة العربية الكاملة من كتاب: التحريك عبر CSS

هذا المقال تمت كتابته بتعاون بين Joe Richardson و Robin Rendle ومجموعة من فريق موقع CSS-Tricks. أراد Joe إضافة مقال بخصوص BEM التي أحببناها وكان لدى كل منا أفكارًا وآراءً حولها، لذلك قررنا أن نتعاون سويًا لكتابة هذا المقال.

تُعدُّ منهجية BEM (وهي اختصار لهذه الكلمات معًا Block و Element و Modifier) مصطلح تسمية شائع يستخدم من أجل الأصناف في HTML و CSS تم تطويره بواسطة فريق في Yandex؛ هدفها هو مساعدة المطورين في فهم العلاقة بين HTML و CSS في مشروع معين بشكل أفضل.

فيما يلي مثال حول ما يكتبه مطور CSS في نمط BEM:

/* مكون كتلة */
.btn {}

/* عنصر يعتمد على كتلة */ 
.btn__price {}

/* مُعدِّل يعدِّل تنسيق الكتلة */
.btn--orange {} 
.btn--big {}

في شيفرة CSS السابقة، الكتلة (Block) عبارة عن عنصر جديد في أعلى مستوى من التجريد (top-level abstraction) على سبيل المثال زر: ‎.btn{}‎. يجب اعتبار الجملة البرمجية هذه بمثابة أحد الأبوين، إذ يمكن وضع العناصر الأبناء (elements) في الداخل ويتم الإشارة إليها بواسطة شرطتين سفليتين يتبع اسم الكتلة أو الحاوية البرمجية تلك مثل ‎.btn__price{}‎. أخيرًا، يمكن للمُعدلات (modifiers) معالجة الحاوية البرمجية (Block) بحيث يمكننا تمييز أو تصميم ذلك المكون المحدد دون إحداث تغييرات على بقية الحاويات البرمجية الأخرى يتم ذلك عن طريق إلحاق شرطتين باسم الحاوية البرمجية Block تمامًا مثل btn--orange.

تبدو الشيفرة كما في المثال التالي:

<a class="btn btn--big btn--orange" href="http://css-tricks.com">
  <span class="btn__price">$9.99</span>
  <span class="btn__text">Subscribe</span>
</a>

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

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

لماذا علينا أخذ BEM في الحسبان؟

1. إذا كنا نريد إنشاء تصميم جديد لعنصر معين، يمكننا أولًا النظر في الحاويات البرمجية لمعرفة أي المُعدِّلات، والعناصرالفرعية موجودة بالفعل. ربما ندرك أننا لسنا بحاجة لكتابة أي تعبير CSS برمجي آخر لأن هناك معدّل موجود مسبقًا يفي بالغرض.
2. إذا كنا نقرأ الوسوم بدلاً من تعابير CSS البرمجية، يجب أن نكون قادرين على الحصول بسرعة على فكرة حول العنصر الذي يعتمد على عنصر آخر؛ في المثال السابق، يمكننا رؤية أن العنصر ‎.btn__price يعتمد على العنصر ‎.btn، حتى لو لم نكن على دراية بعمل أي من تلك العناصر.
3. يمكن للمصممين والمطورين تسمية العناصر لتسهيل الاتصال بين فريق المطورين بمعنى آخر، يوفر BEM لكل مطور في المشروع تسمية صيغة إعلانية للعناصر يمكنه مشاركتها بحيث تكون في نفس الصفحة.

حدد Harry Roberts فائدة رئيسية أخرى لاستخدام صيغة برمجية مثل BEM حين كتب التالي عن تحسين ثقة المطور:

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

وبالمثل، يناقش Philip Walton حل لهذه المشكلة وهو إلتزام عدد كاف من المطورين بمبادئ BEM:

"على الرغم من أن الشيفرة القابلة للتنبؤ بنسبة 100٪ غير متوافرة، من المهم فهم المفاضلات التي تجريها مع الطريقة المتبعة في كتابة التعابير البرمجية التي تختارها. إذا كنت تتبع طريقة BEM الصارمة، فستكون قادرًا على تحديث تعابير CSS وإضافة الشيفرات البرمجية الخاصة بك إليها في المستقبل بثقة تامة بأن هذه التغيرات لن يكون لها أي آثار جانبية."

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

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

دعونا نلقي نظرة على بعض المشاكل مع BEM.

مشاكل مع BEM‏ CSS

لن يقوم أحد بمعاقبتك بالطبع إذا خرجت عن قواعد BEM. لا يزال بإمكانك كتابة محدد CSS كالتالي:

.nav .nav__listItem .btn--orange {
  background-color: green;
}

يبدو أن المثال السابق يحتوي أجزاء من منهجية BEM، لكنه ليس كذلك فهو يحتوي على محددات متداخلة، ولا يصف المُعدِّل (modifier) بدقة ما يحصل في هذه الجمل البرمجية. إذا فعلنا ذلك، فسنكون فشلنا في تحقيق مبدأ الخصوصية وهذا مفيد جدا لمنهجية BEM.

يجب ألا تَبطل كتلةٌ (مثل ‎.nav) عمل كتلة أخرى أو معدل آخر (مثل ‎.btn --orange) وإلا فإن هذا سيجعل من المستحيل تقريبًا قراءة ملف HTML وفهم عمل هذا العنصر. في هذه العملية، نحن ملزمون الى حد كبير أن نكون أهلًا لثقة مطور آخر في البرنامج، هذا ينطبق على HTML أيضًا.

ماذا تتوقع إذا رأيت الشيفرة التالية؟

<a class="btn" href="http://css-tricks.com">
  <div class="nav__listItem">Item one</div>
  <div class="nav__listItem">Item two</div>
</a>

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

1. عدم استخدام المُعدلات في الحاويات البرمجية block غير المترابطة.
2. تجنب صنع عناصر رئيسية غير ضرورية عندما يكون العنصر الفرعي موجودًا بشكل جيد بدون أي مشاكل.

المزيد من الأمثلة العملية على BEM

• قائمة قابلة للطي:

في هذا المثال، هناك حاوية برمجية block واحدة وعنصران ومُعدِّل واحد. يمكننا هنا إنشاء مُعدِّل مثل ‎.accordion__copy-open يتيح لنا معرفة أنه يجب ألا نستخدمه في حاوية برمجية block أو عنصر آخر.

• قائمة تنقل:

يحتوي هذا المثال على كتلة block واحدة و 6 عناصر ومُعدِّل واحد. من الجيد تمامًا إنشاء حاويات برمجية blocks بدون معدلات على الإطلاق. يمكن للمطور في مرحلة ما في المستقبل أن يربط هذه الحاوية بمعدلات جديدة طالما بقيت ثابتة.

عيوب BEM

ربما لا تحب استخدام شرطة مزدوجة. حسنًا، استخدم شيئًا آخر فريدًا تستخدمه باستمرار. هنا رأي آخر:

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

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

في منهجية SMACSS، من المحتمل أن تجد اسم صنف CSS متكون من ثلاثة أحرف. تتبع المُعدِّلات بعدئذٍ اسم الوحدة النمطية باستخدام شرطة:

/* مثال عن وحدة */
.btn { }

/* btn معدِّل الصنف */
.btn-primary { }

/* مع حالة Btn الوحدة */
.btn.is-collapsed { }

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

في OOCSS، الحاويات البرمجية هي عامة بالغالب.

/* مثال عن وحدة */
.mod { }

/* جزء من الوحدة */
.inner { }

/* Talk الوحدة */
.talk { }

/* تغيير جزء داخل الوحدة */
.talk .inner { }

لذلك، يمكنك استخدام أصناف متعددة في HTML للحالات المختلفة. لم يتم تسمية الجزء الداخلي مثل التابع له، لذلك فهو أقل وضوحًا ولكنه قابل لإعادة استخدامه. ستقوم BEM بعمل ‎.mod__inner و ‎.mod--talk و mod-talk__inner..

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

BEM و Sass

لأولئك الذين يستخدمون Sass ويستمتعون بتشعيب (nesting) العناصر كوسيلة لتحديد النطاقات لتنسيقات، لازال بإمكانك أن تكون المسؤول عن الصيغة المتشعبة ولكن يمكنك الحصول على CSS غير متشعب، باستخدام ‎@at-root:

ملف Scss:

.block {
  @at-root #{&}__element {
  }
  @at-root #{&}--modifier {
  }
}

يولد ملف CSS التالي:

.block {
}
.block__element {
}
.block--modifier {
}

ويمكنك الحصول على ملخص كما تريد! تحقق من منشئ BEM الذي يخص Danield Guillan أو Anders Schmidt Hansen من أجل BEM التعبيرية.

الخلاصة

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

بشكل عام، أود أن أفكر في BEM كإجابة على سؤال نيكولاس غالاغر:

ترجمة -وبتصرف- للمقال BEM 101 لصاحبها Robin Rendle.