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

يُمكن تصنيف معظم التخطيطات المُستخدمة في صفحات الويب المتجاوب إلى خمس فئات: المُنساب عمومًا mostly fluid؛ وإفلات العمود column drop؛ والتخطيط المُزاح layout shifter؛ والتعديلات الطفيفة tiny tweaks؛ وخارج اللوحة off canvas. مع الإشارة إلى أنه يُمكن للصفحة استخدام أكثر من نموذج معًا، مثل استخدام "إفلات العمود" مع "خارج اللوحة". تُشكّل هذه الفئات، والتي عرّفها أولًا لوك روبلسكي Luke Wroblewski)، نقطة انطلاقٍ أساسية لأي صفحةٍ متجاوبة.

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

النموذج المنساب عموما Mostly Fluid

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

تُكدَّس كل حاوية div عموديًا في العرض الأصغر؛ وعندما يتجاوز عرض الشاشة 600px، تُحافظ الحاوية div الأولى على العرض width: 100%؛ بينما تظهر الحاويات الأربع div الثانوية مثل عمودين أسفل الحاوية الأولى. عندما يتجاوز عرض الشاشة 800px، يُصبح عرض الحاوية الأساسية div ثابتًا مع توسيطها على الشاشة.

من المواقع التي تستخدم هذا النموذج:

• A List Apart.
• Media Queries.
• SimpleBits.

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3, .c4, .c5 {
  width: 100%;
}

@media (min-width: 600px) {
  .c2, .c3, .c4, .c5 {
    width: 50%;
  }
}

@media (min-width: 800px) {
  .c1 {
    width: 60%;
  }
  .c2 {
    width: 40%;
  }
/*لا يعمل استخدام 33.33 دومًا بسبب التقريب*/
  .c3, .c4 {
    width: 33%;
  }
  .c5 {
    width: 34%;
  }
}

@media (min-width: 800px) {
  .container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

نموذج إفلات العمود Column drop

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

يُبين المثال التالي استخدام هذا النموذج:

وكما الحال في النموذج المُنساب عمومًا، يُكدّس المحتوى في العرض الأصغر؛ إلا أنه عندما يتجاوز عرض الشاشة 600px، تأخذ الحاوية الأولى والثانية العرض الكامل للشاشة؛ أما عند تجاوز 800px، تأخذ جميع الحاويات الثلاث كامل عرض الشاشة. تُحدّد خاصية الترتيب order في أنماط CSS ترتيب الحاويات.

من المواقع التي تستخدم هذا النموذج:

• Modernizr.

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3 {
  width: 100%;
}

@media (min-width: 600px) {
  .c1 {
    width: 60%;
    -webkit-order: 2;
    order: 2;
  }

  .c2 {
    width: 40%;
    -webkit-order: 1;
    order: 1;
  }

  .c3 {
    width: 100%;
    -webkit-order: 3;
    order: 3;
  }
}


@media (min-width: 800px) {
  .c2 {
    width: 20%;
  }

  .c3 {
    width: 20%;
  }
}

نموذج التخطيط المزاح Layout shifter

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

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

من المواقع التي تستخدم هذا النموذج:

• Andersson-Wise Architects.

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3, .c4 {
  width: 100%;
}

@media (min-width: 600px) {
  .c1 {
    width: 25%;
  }

  .c4 {
    width: 75%;
  }

}

@media (min-width: 800px) {
  .container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

نموذج التعديلات الطفيفة Tiny tweaks

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

يُبين المثال التالي استخدام هذا النموذج:

عمليًا، وكما يوحي اسم هذا النموذج، لا يتغير الكثير مع تغير حجم الشاشة؛ فكلما زاد عرض الشاشة، كبُر حجم الخط وزادت مساحة الحشوة padding.

من المواقع التي تستخدم هذا النموذج:

• Ginger Whale.
• Future Friendly.

.c1 {
  padding: 10px;
  width: 100%;
}

@media (min-width: 500px) {
  .c1 {
    padding: 20px;
    font-size: 1.5em;
  }
}

@media (min-width: 800px) {
  .c1 {
    padding: 40px;
    font-size: 2em;
  }
}

نموذج خارج اللوحة Off canvas

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

يُبين المثال التالي استخدام هذا النموذج:

عوضًا عن تكديس المحتوى عموديًا، يَستخدم هذا المثال سمة التحويل لإخفاء حاويتين بوضعهما خارج الشاشة:

 'transform: translate(-250px, 0)' 

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

بما أن Safari for iOS 6 و Android Browser لا يدعمان flex-flow: row nowrap من flexbox، استُخدم التوضُّع المُطلق في هذا المثال.

من المواقع التي تستخدم هذا النموذج:

• HTML5Rocks Articles.
• Google Nexus.
• Facebook's Mobile Site.

body {
  overflow-x: hidden;
}

.container {
  display: block;
}

.c1, .c3 {
  position: absolute;
  width: 250px;
  height: 100%;

  /*
    حيلة لتحسين الأداء على المتصفح كروم 
     See: http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
     #perfmatters
  */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 

  -webkit-transition: -webkit-transform 0.4s ease-out;
  transition: transform 0.4s ease-out;

  z-index: 1;
}

.c1 {
  /*
  حيلة لتحسين الأداء على المتصفحات القديمة من  كروم
  Using translate3d as a trick to improve performance on older versions of Chrome
  See: http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
  #perfmatters
  */
  -webkit-transform: translate(-250px,0);
  transform: translate(-250px,0);
}

.c2 {
  width: 100%;
  position: absolute;
}

.c3 {
  left: 100%;
}

.c1.open {
  -webkit-transform: translate(0,0);
  transform: translate(0,0);
}

.c3.open {
  -webkit-transform: translate(-250px,0);
  transform: translate(-250px,0);
}

@media (min-width: 500px) {
   /* استخدام الصندوق المرن إذا كان عرض الشاشة أكبر من 500 بكسل */
  .container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
  }
  .c1 {
    position: relative;
    -webkit-transition: none 0s ease-out;
    transition: none 0s ease-out;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
  .c2 {
    position: static;
  }
}

@media (min-width: 800px) {
  body {
    overflow-x: auto;
  }
  .c3 {
    position: relative;
    left: auto;
    -webkit-transition: none 0s ease-out;
    transition: none 0s ease-out;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}

ترجمة -وبتصرف- للمقالة Responsive Web Design Patterns للمؤلف: Pete LePage.

اقرأ أيضًا

• أساسيات تصميم الويب المتجاوب
• ما هو الفرق بين التصميم المتجاوب (Responsive Web Design) والتصميم المتلائم (Adaptive Web Design)
• الدليل الشامل لشرح النقاط الحدية لصفحات الويب المتجاوبة

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

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

ابتداءً من شهر مايو من العام 2020 بدء دعم الخطوط القابلة للتغيير في معظم المتصفحات، يمكنك التأكد من توافق متصفحك معها من موقع can i use variable-fonts.

مقدمة

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

هناك مفهومين آخرين يغفل البعض دائمًا عن التمييز بينهما، وهما التنسيق style وعائلة الخط family، فالتنسيق هو خاصية واحدة مفردة من typeface، أما العائلة فهي مجموعة كاملة من التنسيقات.

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

تحديات أمام المصممين والمطورين

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

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

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

تركيبة الخطوط المتغيرة

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

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

يمكننا الحصول على أي تنسيق فردي من خلال المحور، ويسمى هذا التنسيق الفردي بعد تحديد مكان له على المحور بالكائن، حيث بعض هذه الكائنات تم تسميتها باسم مطور الخط، على سبيل المثال الموقع 600 على محور الوزن تم تسميته بـ SemiBold.

يمتلك الخط المتغير Roboto Flex ثلاث تنسيقات رئيسية على محور الوزن، إذ يقع التنسيق العادي في منتصف المحور، ويقع التنسيقين الآخرين على الطرفين، أحدهما التنسيق الخفيف أو الفاتح lighter، والآخر هو الثقيل أو الغامق heavier، يمكن الاختيار من بين 900 كائن يمثلون التنسيقات الثلاثة.

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

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

الخط المائل Italics

تتعامل الخطوط القابلة للتغيير مع تنسيق الخط المائل بآلية مثيرة للاهتمام، فهي تتعامل بأسلوبين مختلفين، الأول مع أنواع الخطوط التي تشبه Helvetica or Roboto، وهي أنواع تمتلك خطوط انحناء تدعم اشتقاق تنسيق الخط المائل منها، لذلك يمكن الحصول على الخط العادي (والمسمى بالروماني) من هذه الخطوط، ويمكن الانتقال من الروماني للمائل باستخدام محور الميلان Slant axis؛ أما النوع الثاني من الخطوط مثل Garamond, Baskerville, or Bodoni، فهي خطوط تمتلك رسمًا خاصًا بالحرف بتنسيقه المائل، وآخر للخط الروماني القائم، ولا يمكن الحصول على تنسيق الخط المائل من الخط الروماني القائم، على سبيل المثال: خط الانحناء الخاص برسم حرف n الصغير بالخط الروماني القائم لا يتوافق مع خط الانحناء الخاص بالحرف n المائل، لذلك بدلًا من استخدام خط انحناء الرسم القائم للانتقال للرسم المائل، سنستخدم محور الميلان Slant axis للانتقال من خط انحناء تنسيق الخط الروماني القائم إلى خط انحناء تنسيق الخط المائل.

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

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

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

تعريفات المحاور

توجد خمسة محاورًا أساسيةً معتمدةً يمكنها التحكم في كل سمات الخطوط التي نعرفها، وهذه المحاور هي: محور العرض width، ومحور الوزن أو الحجم weight، ومحور الحجم البصري optical- size، والمحور slant، والمحور italics؛ وبالإضافة إلى هذه المحاور الأساسية، يمكن لمصمم الخطوط إنشاء المحاور التي يحتاجها ليتحكم بكل جانب من جوانب تصميم الخط، مثل حجم أطراف الحروف وطول الحواف وارتفاع الحرف وحجم النقطة الموجودة فوق حرف i.

تتحكم المحاور في نفس الميزات، لكنها على الرغم من ذلك يمكنها استخدام قيم مختلفة للتحكم من نوع خط لآخر، ففي الخطين المتغيرين Hepta Slab وOswald، هناك محور وحيد هو محور الوزن، لكن كلًا من هذين الخطين يمتلك نطاق قيم خاص به، فقد بفي الخط Oswald على نفس نطاق القيم التي كان يمتلكها قبل انتقاله ليصبح خطًا متغيرًا، أما الخط Hepta Slab فتبدأ قيمته من 1 وتصل إلى 900.

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

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

الفوائد وحالات الاستخدام

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

تعبير مدهش

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

الرسوم المتحركة

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

يُعَد Anicons هو أول خط يختص بالرموز المتحركة والملونة في نفس الوقت يعتمد على أيقونات الـ Material Design، كما أنه يُعَد تجربةً مميزةً جمعت بين تقنيتين من تقنيات الخطوط، وهما تقنية الخطوط المتغيرة وتقنية الخطوط الملونة.

خفة ومهارة

يوفر الخطان Roboto Flex وAmstelvar مجموعةً من المحاور البارمترية، والتي تتيح تمرير القيم إليها، يُفصل بين الحروف في هذه المحاور بناءً على أربع سمات أساسية، وهي الأشكال السوداء أو الموجبة، والأشكال البيضاء أو السالبة، والبعد x، والبعد y؛ إذ تُستخدَم هذه السمات الثلاثة بنفس طريقة مزج الألوان الأساسية للحصول على الألوان الثانوية، كما يمكن مزج هذه السمات الأربع لضبط أي محور آخر.

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

الخطوط المتغيرة في css

تحميل ملفات الخطوط المتغيرة

تحمّل الخطوط المتغيرة في صفحات الويب باستخدام نفس الطريقة المستعملة لتحميل الخطوط التقليدية، وذلك باستخدام font-face@، مع وجود تحسينين جديدين:

@font-face {
    font-family: 'Roboto Flex';
    src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
       url('RobotoFlex-VF.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}

1. تنسيق الملف source format: نحن لا نريد من المتصفح تنزيل الخط إذا كان لا يدعم الخطوط المتغيرة، لذلك نضيف التنسيق المطلوب في format، إذ يكون الوصف الأول خاصًا بالتنسيق المستقبلي للخطوط، وهو woff2 supports variations؛ أما في الوصف الثاني format، فنضيف الوصف woff2-variations، وهو خاص بالتنسيق الحالي للخطوط والذي سينتهي قريبًا، إذا كان المتصفح يدعم الخطوط المتغيرة ويدعم التنسيق المستقبلي لملف الخطوط، فسيستخدم التعريف الأول؛ أما إذا كان يدعم الخطوط المتغير والتنسيق الحالي لملف الخطوط، فكلا التنسيقين يشيران إلى نفس ملف الخط.
2. نطاق القيم التي تقبلها التنسيقات: سوف تلاحظ عند النظر لكود تحميل ملف الخط المتغير أننا أضفنا قيمتين للخط، إذ أن القيمة الأولى هي وزن الخط، والثانية هي لتمدد الخط. وبدلًا من تعريف القيم التي يقبلها الخط لخاصية الحجم على سبيل المثال ;font-weight:500، سنخبر المتصفح أن الملف يدعم القيم التي تقع ضمن هذا النطاق على سبيل المثال:

font-weight: 100 1000;

يسمح الخط Roboto Flex باستخدام القيم من 100 إلى 1000 على محور الحجم، وتعين لغة css قيم المحور مباشرةً لخاصية font-weight، وذلك من خلال تحديد النطاق المسموح به في font-face@، أي أن أيّ قيمة تخرج عن النطاق المسموح به تضبط قيمتها لأقرب قيمة صالحة، وتعين قيم محور العرض إلى خاصية التمدد font-stretch بنفس الطريقة التي استخدمناها بالأعلى لتعيين قيم محور الوزن أو الحجم لخاصية حجم الخط font-weight؛ أما في حال استخدام خطوط جوجل، فستهتم جوجل بكل شيء ليس تنسيق المصدر وتحديد النطاقات المناسبة فقط، ولكن ستتولى جوجل إرسال خطوط بديلة أيضًا في حالة عدم دعم المتصفح للخطوط المتغيرة.

استخدام الأوزان والعرض

تُعد المحاور التي يمكن تعيين قيمها في الوقت الحالي من خلال خصائصًا في CSS هي محور الوزن أو الحجم wght، ويمكن تعيين قيمته في css من خلال خاصية font-weight ومحور العرض wdth، وتُعين قيمته في css من خلال خاصية font-stretch.

يمكن تعيين قيم الخاصية font-weight بالكلمات المفتاحية مثل light وbold أو باستخدام قيم عددية من 100 إلى 900، ويمكن استخدام الأرقام ضمن هذا النطاق بإضافة أو بإنقاص 100، ومن الممكن من خلال الخطوط المتغيرة استخدام أي قيمة تقع ضمن مجال الأرقام التي يقبلها الخط.

.kinda-light {
  font-weight: 125;
}

.super-heavy {
  font-weight: 1000;
}

ويمكن تعيين قيمة الخاصية font-stretch بنفس الآلية بالكلمات المفتاحية، مثل condensed وultra-expanded أو من خلال القيم المئوية.

.kinda-narrow {
  font-stretch: 33.3%;
}

.super-wide {
  font-stretch: 151%;
}

استخدام محور الإمالة slnt ومحور الخطوط المائلة ital

يختص المحورital بالخطوط التي تحتوي على التنسيق العادي regular style والتنسيق المائل italic style، وبهذا تتلخص وظيفة المحور في الانتقال من تنسيق لآخر، أي أنه يعمل مثل مفتاح التشغيل، فالقيمة صفر تعني أن التنسيق عادي، والقيمة واحد تعني أن التنسيق مائل. على عكس المحاور الأخرى لا يمكن التنقل على طول المحور إما صفر أو واحد فقط. على سبيل المثال، القيمة 0.5 لن تمنحك نصف إمالة.

يختص المحور slnt بإمالة الحروف، ويختلف عن المحور ital في أن إمالته للحرف ليست تنسيقًا جديدًا، بل هو فقط عملية إمالة للتنسيق العادي regular style، القيمة الافتراضية للخط العادي هي صفر، والتي تعني هنا أن الخط قائم ومعتدل الشكل. يوفر الخط Roboto Flex إمكانية الإمالة، وأقصى قيمة إمالة يوفرها، هي -10 درجات، وهذا يعني أن الحروف ستبدأ بالميلان الى اليمين عند الانتقال من 0 الى -10.

سيكون من البديهي تعيين قيم هذه المحاور من خلال خاصية تنسيق الخطوط في css، ولكن حتى هذه اللحظة من شهر أبريل (نيسان) من عام 2020 لا يزال العمل قائمًا على كيفية استخدام هذه المحاور، وضبط قيمها من خلال خصائص css، وإلى حل هذه المشكلة، سيتوجب علينا التعامل مع هذه المحاور بنفس طريقة التعامل مع المحاور الخاصة، إذ يتوجب تعيين قيمها من خلال الخاصية font-variation-settings.

i, em,.italic {
    /* Should be font-style: italic; */
    font-variation-settings: 'ital' 1;
}

.slanted {
    /* Should be font-style: oblique 10deg; */
    font-variation-settings: 'slnt' 10;
}

استخدام محور الحجم البصري

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

أُنشئت خاصية جديدة لتمثيل هذا المحور هي font-optical-sizing، حيث القيمة الافتراضية لهذه الخاصية هي auto. تعمل هذه القيمة على ترك مهمة تحديد الحجم البصري للمتصفح، ويعين المتصفح قيمة هذا المحور وفقًا لحجم الخط font-size، ما يعني أن المتصفح سيختار أفضل قيمة تلقائيًا، لكن إذا أردت إيقاف هذه الخاصية font-optical-sizing، فيمكنك تعديل القيمة auto لتصبح none؛ وإذا أردت منع الحجم البصري من العمل بالتوافق مع حجم الخط، فيمكنك ضبط قيمة المحورopsz يدويًا.

يعمل كود css التالي على تعيين حجم الخط ليكون كبيرًا جدًا، ولكن بحجم بصري صغير كما لو كان بحجم 8px.

.small-yet-large {
  font-size: 100px;
  font-variation-settings: 'opsz' 8;
}

استخدام المحاور الخاصة

على عكس المحاور الأساسية المعتمدة، لا تُسند المحاور الخاصة لخصائص في لغة التنسيق css، بل تُستعمل من خلال خاصية font-variation-settings. تكون اختصارات أسماء المحاور الخاصة بالحروف الكبيرة، لتُميَّز عن المحاور الأساسية.

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

لأن محور التدرج هو محور خاص وله نطاق قيم محدد من 1 الى -1، سنحتاج الى استخدام خاصية font-variation-settings لتمثيل قيمته.

.grade-light {
    font-variation-settings: `GRAD` -1;
}

.grade-normal {
    font-variation-settings: `GRAD` 0;
}

.grade-heavy {
    font-variation-settings: `GRAD` 1;
}

الخطوط المتغيرة في موقع جوجل للخطوط

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

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

وتوفر الأداة Google Variable Fonts Links أحدث روابط الخطوط المتغيرة.

توريث إعدادات الخاصية Font-variation-settings

إلى أن يأتي الوقت الذي ستُدعَم فيه جميع المحاور بخصائص في css، ستحتاج في الوقت الحالي إلى الاعتماد على الخاصية font-variation-settings، وإذا كان الخط يدعم المحاور الخاصة، فستحتاج إلى استخدام الخاصية font-variation-settings.

مع ذلك، تحتوي الخاصية font-variation-settings على بعض العيوب، ومن بين هذه العيوب، نجد أن أي محور لم تُعيَن قيمته سيضبط على القيم الافتراضية؛ أما المحاور التي عُيّنت قيمها سابقًا، فلا تورّث، وهذا يعني أن الخاصية عند إعادة استخدامها لن تعمل كما هو متوقع منها :

<span class="slanted grade-light">
    I should be slanted and have a light grade
</span>

سينفذ المتصفح في البداية الشيفرة التالية:

 `font-variation-settings: 'slnt' 10` من كلاس `slanted`

بعد ذلك سينفذ الشيفرة التالية:

 `font-variation-settings: 'GRAD' -1` من كلاس `grade-light`

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

لحسن الحظ، يمكننا التغلب على هذه المشكلة باستخدام المتغيرات في css:

/* Set the default values */
:root {
    --slnt: 0;
    --GRAD: 0;
}

/* Change value for these elements and their children */
.slanted {
    --slnt: 10;
}

.grade-light {
    --grad: -1;
}

.grade-normal {
    --grad: 0;
}

.grade-heavy {
    --grad: 1;
}

/* Apply whatever value is kept in the CSS variables */
.slanted,
.grade-light,
.grade-normal,
.grade-heavy {
    font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD);
}

ستعمَّم قيم متغيرات الـ CSS، وهذا يعني أنه إذا عيّن العنصر أو والده قيمة slnt على 10، فسيحتفظ بهذه القيمة حتى وإن عُينت أي قيمة لـ GRAD.

@keyframes width-animation {
   from { --wdth: 25; }
   to   { --wdth: 151; }
}

ستُرسل قيم محور العرض الخاص بشيفرة الرسوم المتحركة مباشرةً إلى الخاصية font-variation-settings.

ثمار استخدام هذه الخطوط على الأداء

تسمح لنا خطوط OpenType بتخزين أشكال مختلفة من نفس العائلة في ملف خط واحد. لقد أجرت خطوط Monotype تجربةً دمجت من خلالها 12 رسمًا للحروف، وهناك لكل رسم ثمانية أوزان مختلفة لكل وزن ثلاث قيم في محور العرض، إذ تحتوي على الرسمين الروماني القائم والإيطالي المائل، لينتج عن هذه التجربة تخزين ثمانية وأربعين خطًا مختلفًا في ملف واحد، وهو ما يعني جمع ثماني وأربعين ملف خط في ملف واحد، بالتالي، فباستخدامنا للخطوط المتغيرة، نكون قد وفرنا 88% من حجم الملفات الـ 48.

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

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

var observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(function(entry) {
    // Pause/Play the animation
    if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
    else entry.target.style.animationPlayState = "paused"
  });
});

var variableTexts = document.querySelectorAll(".vf-animation");
variableTexts.forEach(function(el) { observer.observe(el); });

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

إذا كنت تستخدم خطوط جوجل، فمن الجيد إنشاء اتصال مسبق بالعنوان https://fonts.gstatic.com، والذي تتواجد به خطوط جوجل، وذلك لإعلام المتصفح مسبقًا بمكان تخزين الخطوط لتسريع عملية الحصول عليها عند استدعائها في CSS.

<link rel="preconnect" href="https://fonts.gstatic.com" />

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

الإجراءات الاحتياطية ودعم المتصفحات

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

/* Set up Roboto for old browsers, only regular + bold */
@font-face {
  font-family: Roboto;
  src: url('Roboto-Regular.woff2');
  font-weight: normal;
}

@font-face {
  font-family: Roboto;
  src: url('Roboto-Bold.woff2');
  font-weight: bold;
}

body {
  font-family: Roboto;
}

.super-bold {
  font-weight: bold;
}

/* Set up Roboto for modern browsers, all weights */
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: 'Roboto';
    src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
         url('RobotoFlex-VF.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
  }

.super-bold {
    font-weight: 1000;
  }
}

عند إضافة الصف super-bold في المتصفحات القديمة إلى عنصر، فإن التنسيق الذي سيطبق على العنصر هو التنسيق الغامق العادي لأن هذا هو المتوفر حاليًا، بعد دعم الخطوط المتغيرة سنستطيع فعليًا استخدام أغمق تنسيق ممكن، وهو 1000.

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">

يمكن للمتصفحات الحديثة التي يمكنها التعامل مع الخطوط المتغيرة استخدام الخطوط بسهولة وتستطيع استخدام كل قيم الأوزان التي يمكن استخدامها بين 200 الى 700؛ أما في المتصفحات القديمة، فسنضطر إلى تحميل ستة ملفات ملف للوزن 200 وآخر للوزن 300 وعلى هذا المنوال.

ترجمة وبتصرف للمقال Introduction to variable fonts on the web web.dev من موقع web.dev.

اقرأ أيضًا

• مدخل إلى عالم الخُطوط
• كيفية استضافة خطوطك الخاصة على الويب
• Symbol Fonts: تعرف على خطوط الأيقونات، استعمالاتها، ما لها وما عليها

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

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

يُلبّي تصميم الويب المتجاوب احتياجات المستخدمين ويتكيف مع قدرات أجهزتهم؛ وقد وضع إيثان ماركوت Ethan Marcotte أساسياته في مقالته في موقع alistapart؛ وهو موقعٌ يُعنى بقضايا تصميم الويب. يتغير تخطيط صفحة الويب في تصميم الويب المتجاوب وفق حجم الجهاز وقدراته؛ حيث يمكن مثلًا عرض محتوًى ما ضمن عمودٍ واحدٍ فقط على جهازٍ محمول؛ بينما يُعرض نفس المحتوى ضمن عمودين على جهاز لوحي أكبر.

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

إعداد إطار العرض

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <meta name="viewport" content="width=device-width, initial-scale=1">
    …
  </head>
  …

يؤدي إسناد القيمة width=device-width في وسم إطار العرض viewport إلى توجيه الصفحة لإظهار المحتوى على كامل عرض الشاشة وذلك باستخدام وحدة البكسلات المُستقلة عن الجهاز device-independent pixels؛ وهي وحدة قياس طول تُحوّل إلى عددٍ من البكسلات الفيزيائية حسب كثافة البكسلات على الجهاز، فكلما ارتفعت الكثافة زادت البكسلات الفيزيائية الموافقة لبكسل مستقل، وهذا يسمح للصفحة بإظهار المحتوى بما يتناسب مع مختلف حجوم الشاشات، بدءًا من الهواتف الصغيرة المحمولة، وانتهاءً بشاشات الحواسيب المكتبية الكبيرة.

يعرض المثال التالي إظهار صفحةٍ في جهاز دون استخدام الوسم الوصفي لإطار العرض.

أما مع استخدام الوسم الوصفي لإطار العرض، فسيكون الإظهار:

تُحافظ بعض المتصفحات على عرض الصفحة عند التدوير إلى الوضع الأفقي وعند تصغير أو تكبير الصفحة عوضًا عن إعادة التدفق لملء كامل الشاشة. يؤدي ضبط سمة الحجم الابتدائي initial-scale = 1 إلى توجيه المستعرضات لإنشاء علاقة 1:1 بين وحدات بكسل أنماط CSS ووحدات البكسل المستقلة عن الجهاز وذلك بغض النظر عن اتجاه الجهاز؛ مما يسمح للصفحة بالاستفادة من العرض الأفقي كاملًا.

اقتباس

ملاحظة: يجب استخدام الفاصلة بين السمات للتأكد من تحليل الوسم بصورةٍ صحيحة، وخاصةً من قِبل المتصفحات القديمة.

التأكد من إمكانية الوصول لإطار العرض

تتحقق أداة التدقيق Lighthouse من وجود الوسم الوصفي لإطار العرض viewport؛ وفي حال عدم وجوده تُظهر التنبيه الموافق "لا تتوفر السمة الوصفية لإطار العرض مع تحديد العرض أو الحجم الابتدائي" Does not have a <meta name="viewport"> tag with width or initial-scale، وهذا يُساعد في التحقق من استخدام مستندات HTML لهذا الوسم على نحوٍ صحيح.

يُمكن ضبط السمات التالية لإطار العرض، إضافًة إلى ضبط سمة الحجم الابتدائي initial-scale:

• الحجم الأدنى minimum-scale.
• الحجم الأقصى maximum-scale.
• الحجم القابل للتخصيص من قبل المستخدم user-scalable.

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

تحجيم المحتوى وفق إطار العرض

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

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

تتحقق أداة التدقيق Lighthouse من عدم تمدُّد المحتوى خارج إطار العرض؛ وفي حال حدوث ذلك، تُظهر التنبيه الموافق "لم يُضبط حجم المحتوى صحيحًا بما يُناسب إطار العرض" Content is not sized correctly for the viewport.

الصور

تتسبب الصور ذات الأبعاد الثابتة والتي تكون أكبر من إطار العرض بظهور أشرطة التمرير. ومن الطرق الشائعة لتجاوز هذه المشكلة، هي إعطاء جميع الصور عرضًا أقصى max-width بنسبة 100%؛ مما يؤدي إلى تقليص حجم الصورة لتُناسب المساحة إذا كان حجم إطار العرض أصغر من حجم الصورة. وفي جميع الأحوال، لن يزداد حجم الصورة أكبر من حجمها الطبيعي مع استخدام max-width وليس width بنسبة 100%. من المستحسن عمومًا إضافة ما يلي إلى ملف الأنماط CSS منعًا من ظهور أشرطة التمرير مع الصور العريضة:

img {
  max-width: 100%;
  display: block;
}

إضافة أبعاد الصورة إلى العنصر img

يؤدي استخدام max-width: 100% إلى تعديل override أبعاد الصورة الأصلية. ومع ذلك، يجب الاستمرار في استخدام سمة العرض width والإرتفاع height لوسم الصورة <img>؛ نظرًا لاستخدام المتصفحات الحديثة هذه الأبعاد لحجز مساحة الصورة قبل تحميلها؛ مما يُساعد على تجنُّب الإزاحات في التخطيط layout shifts عند تحميل المحتوى.

التخطيط

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

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

بينما تبقى الأعمدة دائمًا نسبًا مئوية معينة من الحاوية عند استخدام النسب المئوية للعرض؛ مما يعني أن الأعمدة ستُصبح أضيق عوضًا عن ظهور أشرطة التمرير، كما يُبين المثال التالي:

يسمح استخدام بعض تقنيات التخطيط الحديثة إنشاء هذه الشبكات المرنة بسهولةٍ كبيرة، مثل تقنية الصندوق المرن Flexbox والتخطيط الشبكي Grid Layout والتخطيط متعدد الأعمدة Multicol.

التخطيط باستخدام الصندوق المرن Flexbox

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

.items {
  display: flex;
  justify-content: space-between;
}

يُمكن استخدام طريقة التخطيط Flexbox لعرض العناصر في صفٍ واحد أو في صفوفٍ متعددة مع تقليص المساحة المتاحة، كما يُبين المثال التالي:

التخطيط الشبكي باستخدام أنماط CSS

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

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

يُمكن أيضًا استخدام التخطيط الشبكي لإنشاء تخطيط شبكةٍ منتظمةٍ مع أي عددٍ من العناصر التي تُناسبها؛ حيث ينخفض عدد المسارات (الأعمدة) مع تقليص حجم الشاشة. يُبين المثال التالي توضُّع العدد المناسب من البطاقات في كل سطر مع حجم ٍأدنى 200px:

التخطيط متعدد الأعمدة Multicol

يُمكن استخدام التخطيط متعدد الأعمدة Multicol مع بعض أنواع التخطيطات لإنشاء عددٍ من الأعمدة المتجاوبة باستخدام خاصية عرض العمود column-width. يُمكن في المثال التالي معاينة إمكانية إضافة أعمدةٍ أخرى بعرض 200px إذا وجدت المساحة الكافية لها.

استخدام استعلامات الوسائط في أنماط CSS لتحقيق التجاوب

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

نحتاج لاستهداف نوعٍ من الإظهار لتوفير أنماطٍ مختلفة للطباعة. يُمكن تضمين ورقة أنماط stylesheet تحوي أنماط الطباعة المختلفة كما يلي:

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <link rel="stylesheet" href="print.css" media="print">
    …
  </head>
  …

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

@media print {
  /* توضع أنماط الطباعة هنا */
}

يُمكن تضمين أوراق أنماطٍ منفصلة في ملف أنماط CSS الرئيسي الخاص بك باستخدام صيغة import@، مثلًا:

`@import url(print.css) print;

إلا أنه لا يُوصى بهذا الاستخدام لأسبابٍ تتعلق بالأداء. يُمكن الرجوع إلى تجنُّب عمليات استيراد CSS لمزيدٍ من التفاصيل.

يُستعلم في تصميم الويب المتجاوب عن ميزات الجهاز بهدف توفير تخطيطٍ مختلف للشاشات الأصغر؛ أو عند اكتشاف استخدام الزائر لشاشةٍ تعمل باللمس.

استعلامات الوسائط المعتمدة على حجم إطار العرض

تسمح استعلامات الوسائط بإنشاء تجربة استخدامٍ متجاوبة، حيث تُطبّق أنماطٌ معينة وفق حجوم الشاشات المختلفة؛ أي أن الميزة التي نستعلم عنها هي حجم الشاشة، كما يُمكن الاستعلام أيضًا عمّا يلي:

• العرض width (أدنى عرض min-width، أقصى عرض max-width).
• الارتفاع height (أدنى ارتفاع min-height، أقصى ارتفاع max-height).
• الاتجاه orientation.
• نسبة العرض إلى الارتفاع aspect-ratio.

تتمتع كل هذه السمات بدعمٍ كامل من جميع المتصفحات.

يجب عدم استخدام سمة عرض الجهاز device-width وسمة ارتفاع الجهاز device-height رغم وردهما في المواصفات القياسية؛ حيث أُلغي الاعتماد عليهما لأنهما تختبران الحجم الحقيقي لنافذة الجهاز وهو أمرٌ غير مفيد عمليًا، إذ يُمكن أن يكون هذا الحجم مختلفًا عن حجم إطار العرض الذي يُعاينه المستخدم، لاسيما فيما لو غيَّر حجم نافذة المتصفح مثلًا.

استعلامات الوسائط المعتمدة على قدرات الجهاز

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

• الحومان hover.
• المؤشر pointer.
• "أي حومان" any-hover.
• "أي مؤشر" any-pointer.

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

تتمتع هذه السمات الجديدة بدعمٍ كاملٍ من جميع المتصفحات الحديثة.

استخدام سمة أي حومان any-hover وسمة أي مؤشر any-pointer

تختبر سمة أي حومان any-hover فيما إذا كان المستخدم يتمتع بإمكانية الحومان؛ كما تختبر سمة أي مؤشر any-pointer استخدام نوعٍ ما من المؤشرات، وذلك حتى لو لم تكن الطريقة الأساسية لتفاعل المستخدم مع الجهاز. يجب توخي الحذر عند استخدام هذه السمات إذ لن يكون الطلب من المستخدم استخدام الفأرة عوضًا عن شاشة اللمس أمرًا مُحبذًا. يُمكن أن تكون هاتان السمتان مفيدتين، إذا كان من المهم معرفة نوع الجهاز الذي يمتلكه المستخدم. على سبيل المثال، ينبغي أن يُتابع الحاسوب المحمول المزود بشاشة لمس ولوحة تتبُّع المؤشرات العريضة والدقيقة إضافًة إلى إمكانية الحومان.

كيفية اختيار النقاط الحدية

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

اختيار النقاط الحدية بدءا من الحجم الأصغر ومن ثم الأكبر

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

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

ومن ثم تعديل حجم المتصفح حتى الحصول على فراغاتٍ بيضاء واسعة بين العناصر، وبحيث لا يبدو منظر توقعات الطقس جيدًا. يُمكن بالطبع أن يكون الحكم على جودة المنظر قرارًا شخصيًا، إلا أن الزيادة عن 600px ستُعطي فراغاتٍ عريضةً بالتأكيد.

يُبين الشكل التالي مظهر التطبيق في وضعٍ يُظهر وجوب تعديل التصميم:

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

@media (max-width: 600px) {

}

@media (min-width: 601px) {

}

أخيرًا، نُعيد تشكيل أنماط CSS كما يلي: نُضيف أنماط CSS للشاشات الصغيرة ضمن استعلام الوسائط الأول وأنماط CSS للشاشات الأكبر ضمن استعلام الوسائط الثاني.

اختيار نقاط حدية ثانوية عند الضرورة

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

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

@media (min-width: 360px) {
  body {
    font-size: 1.0em;
  }
}

@media (min-width: 500px) {
  .seven-day-fc .temp-low,
  .seven-day-fc .temp-high {
    display: inline-block;
    width: 45%;
  }

  .seven-day-fc .seven-day-temp {
    margin-left: 5%;
  }

  .seven-day-fc .icon {
    width: 64px;
    height: 64px;
  }
}

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

إعدادات النص للقراءة الأمثلية

تنص قواعد إتاحة القراءة السهلة على وجوب عدم احتواء السطر الواحد على أكثر من 70 إلى 80 حرفًا (حوالي 8 إلى 10 كلمات في اللغة الإنجليزية)؛ مما يتطلب إدراج نقطة حدّية في حال تجاوز عدد الكلمات في كتلةٍ نصية 10 كلمات.

يُبين الشكل التالي مظهر النص على هاتف جوال:

بينما يظهر نفس النص على حاسوبٍ مكتبي بعد إضافة النقاط الحدّية لتحديد طول السطر:

يُبين المثال السابق ملاءمة الخط Roboto من الحجم 1em على نحوٍ أمثلي للشاشات الصغيرة، حيث يوفر حوالي 10 كلمات في السطر الواحد؛ أما بالنسبة للشاشات الكبيرة فيجب إضافة نقطة حدّية. يُبين المثال التالي تحديد عرض المحتوى إلى 550px إذا تجاوز عرض المتصفح 575px.

@media (min-width: 575px) {
  article {
    width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
}

تجنب إخفاء المحتوى

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

معاينة النقاط الحدية لاستعلامات الوسائط في أدوات التطوير Chrome DevTools

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

يُبين الشكل التالي تطبيق حالة الطقس مع إطار عرضٍ عريض باستخدام DevTools:

كما يُبين الشكل التالي تطبيق حالة الطقس مع إطار عرضٍ ضيق باستخدام DevTools:

لمعاينة الصفحة مع نقاط حدّية مختلفة، يُمكن فتح أدوات المطور DevTools ثم تشغيل وضع الجهاز Device Mode مما يؤدي لفتح الصفحة بالوضع المتجاوب responsive mode.

كما يُمكن لمعاينة استعلامات الوسائط وإظهار النقاط الحدّية على هيئة أشرطةٍ ملونة، اختيار Show media queries من القائمة Device Mode.

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

ترجمة -وبتصرف- للمقالة Responsive web design basics للمؤلفين: Pete LePage و Rachel Andrew.

اقرأ أيضًا

• ما هو الفرق بين التصميم المتجاوب (Responsive Web Design) والتصميم المتلائم (Adaptive Web Design)
• الدليل الشامل لشرح النقاط الحدية لصفحات الويب المتجاوبة

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

• يجب استخدام الانتقالات translations للتنقُل بين الواجهات، مع تجنُّب استخدام خصائصٍ، مثل اليسار left أو الأعلى top والتي تُنشّط التخطيط.
• يجب التأكد من سرعة التحريك وقصر مدته.
• يجب الانتباه لتغييرات التحريك والتخطيط عند زيادة حجم الشاشة، إذ أن ما يصلح على شاشةٍ صغيرة قد يبدو غريبًا على شاشة حاسوب مكتبي.

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

من قواعد النجاح الأساسية المحافظة على 60 إطارًا في الثانية عند التحريك. وبهذا، نتجنب ظهور التحريك المتقطع المتداخل مع تفاعل المستخدمين؛ كما يجب التأكد من ضبط الخاصية "سوف يُعدّل" will-change لأي عنصرٍ يُخطط لتحريكه لاحقًا. أما بالنسبة للانتقالات بين واجهات العرض، يُستحسن استخدام will-change: transform.

استخدام الانتقالات للتنقل بين واجهات العرض

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

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

تكون أنماط CSS للحاوية:

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

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

.view {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;

 /* أعلم المتصفح بخطة تحريك كل واجهة عرض دخولًا وخروجًا*/

  will-change: transform;
}

تؤدي إضافة الانتقال transition في خاصية التحويل transform إلى إضفاء تأثير انتقالٍ لطيف. يُستخدم منحني بيزيه cubic-bezier مخصّص للوصول إلى شعور استخدام مُحبَّب.

.view {
  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

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

.details-view {
  transform: translateX(100%);
}

يجب الآن كتابة بعض تعليمات JavaScript للتعامل مع الصفوف. تبدِّل الشيفرة التالية الصفوف المناسبة لواجهات العرض:

var container = document.querySelector('.container');
var backButton = document.querySelector('.back-button');
var listItems = document.querySelectorAll('.list-item');

/*
تعديل الصفوف في الحاوية واختيار واجهة العرض
 */
function onViewChange(evt) {
  container.classList.toggle('view-change');
}

//عند النقر على عنصر في القائمة يحب عرض واجهة تفاصيله
for (var i = 0; i < listItems.length; i++) {
  listItems[i].addEventListener('click', onViewChange, false);
}

//العودة للواجهة الأولى عند النقر على زر العودة للخلف
backButton.addEventListener('click', onViewChange);

وأخيرًا، تُضاف تصريحات CSS إلى هذه الصفوف:

.view-change .list-view {
  transform: translateX(-100%);
}

.view-change .details-view {
  transform: translateX(0);
}

يُمكن تجربة المثال.

يُمكن توسيع المثال لإضافة واجهات عرض متعددة مع نفس منهجية العمل: تكون كل واجهة غير مرئية خارج الشاشة مع إحضارها وإظهارها حين الحاجة وإزالة واجهة العرض الحالية.

اقتباس

ملاحظة: قد يكون إنشاء هذا النوع من التسلسل الهرمي عبر المستعرضات أمرًا صعبًا. يتطلب نظام iOS الخاصية CSS الإضافية: webkit-overflow-scrolling: touch- مثلًا لإعادة تمكين التمرير الطائر fling scrolling، إلا أنه لا يُمكن التحكم في المحور المناسب مثل ما يُمكن فعله باستخدام الخاصية القياسية overflow. يجب دومًا اختبار التطبيق على مجموعةٍ مختلفة من الأجهزة!

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

التأكد من تنفيذ التحريك على الشاشات الأكبر

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

تحريك واجهات العرض المنبثقة الشرطية

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

• يجب استخدام واجهات العرض المنبثقة الشرطية باعتدال؛ حيث يشعر المستخدمون بالإحباط إذا قاطعت تجربتهم دون داعٍ.
• تُساهم نسبة التحجيم المناسبة في إضفاء التأثير اللطيف "إسقاط على drop on".
• يجب إخفاء واجهات العرض المنبثقة الشرطية بسرعة عندما يرفضها المستخدم؛ كما يجب إظهار هذه الواجهات ببطء حتى لا تُفاجئ المستخدم.

يجب تطابق حجم غطاء الواجهة المنبثقة مع إطار العرض وذلك عن طريق ضبط خاصية الموضع position إلى ثابت fixed:

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;
  opacity: 0;

  will-change: transform, opacity;
}

تكون قيمة الشفافية opacity للواجهة 0 في البداية وتكون بذلك مخفية، إلا أنها تحتاج أيضًا إلى ضبط أحداث المؤشر pointer-events إلى لا شيء none حتى لا تتجاوب مع أحداث المستخدم مثل النقر واللمس؛ وبدون ذلك، تُعطّل جميع التفاعلات وتغدو الصفحة غير مستجيبة أبدًا. أخيرًا، يجب استخدام will-change مع كلٍ من الخصائص opacity و transform التي يُطبّق التحريك عليها. يُمكن الرجوع إلى استخدام الخاصية will-change.

يجب أن تستجيب الواجهة المنبثقة عندما تكون مرئيةً لتفاعلات المستخدم مع شفافيةٍ opacity قيمتها 1:

.modal.visible {
  pointer-events: auto;
  opacity: 1;
}

يُمكن استخدام سكريبت جافا لتبديل الصف إلى مرئي "visible" عند الحاجة لعرض الواجهة المنبثقة.

modal.classList.add('visible');

يُمكنك الآن، إضافة التحريك إلى الواجهة المنبثقة.

.modal {
  transform: scale(1.15);

  transition:
    transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

تُساهم نسبة التحجيم scale في جعل المنظر يبدو وكأنه يسقط على الشاشة بهدوء، مما يُعطي تأثيرًا جميلًا. يُطبّق الانتقال الافتراضي على كلٍ من خاصية التحويل transform والشفافية opacity مع منحني مخصص ومدةٍ تبلغ 0.1 ثانية.

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

.modal.visible {
  transform: scale(1);

  transition:
    transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

يستغرق الآن ظهور الواجهة المنبثقة وقتًا أطول (أقل مفاجأةً للمستخدم) مع إخفاءٍ سريع مما يُلبي طموح المستخدم.

توقيت التحريك غير المتزامن

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

• يُستخدم التوقيت غير المتزامن لإضفاء هويةٍ للتطبيق ولتحقيق تباين العمل.
• يجب دومًا تفضيل تفاعل المستخدم. يجب مثلًا استخدام فتراتٍ أقصر عند الاستجابة لأحداث المستخدم، مثل النقر أو السحب؛ والاحتفاظ بفتراتٍ أطول للحالات الأخرى.

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

مثلًا: في حال نقر المستخدم على شريط تنقُّل جانبي، لا بُدّ من عرضه مباشرًة وخلال فترة حوالي 100 ميلي ثانية؛ بينما يُمكن التباطؤ في عملية التحريك خارجًا لحوالي 300 ميلي ثانية عند إخفاء المستخدم لقائمة.

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

نُبين فيما يلي القواعد العامة للتحريك:

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

ترجمة -وبتصرف- للمقالات التالية:

• Animating Between Views للمؤلف: Paul Lewis.
• Animating Modal Views للمؤلف: Paul Lewis.
• Asymmetric animation timing للمؤلف: Paul Lewis.

اقرأ أيضًا

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

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

• يؤدي التخفيف إلى جعل التحريك يبدو طبيعيًا.
• يُفضّل استخدام تخفيف السرعة نهاية الحركة ease-out مع عناصر الواجهة.
• يجب تجنُّب استخدام تخفيف السرعة بداية الحركة ease-in وتخفيف السرعة بداية الحركة ونهايتها ease-in-out ما لم يكن التحريك قصيرًا، لأنهما تتسببان بنوعٍ من الحركة الخمولة.

الكلمات المفتاحية في التخفيف

تسمح كلٌ من الانتقالات والتحريك في CSS باختيار نوع التخفيف المطلوب للتحريك (راجع فقرة اختيار التخطيط الصحيح). يُمكن استخدام الكلمات المفتاحية التي تؤثر على التخفيف (أو التوقيت timing كما يُطلق عليه أحيانًا) للحركة المعنية؛ كما يُمكن أيضًا تخصيص التخفيف (راجع فقرة تخصيص التخفيف)، مما يمنح الحرية الواسعة لإعطاء هويةٍ مميزة للتطبيق.

أهم الكلمات المفتاحية المُمكن استخدامها في أنماط CSS:

• خطي linear.
• تخفيف السرعة بداية الحركة ease-in.
• تخفيف السرعة نهاية الحركة ease-out.
• تخفيف السرعة بداية الحركة ونهايتها ease-in-out.

يُمكن الوصول إلى المصدر في W3C.

يُطلق مصطلح "الدخول ببطء slow in" في الرسوم المتحركة للدلالة على الحركة التي تبدأ ببطء ومن ثم تتسارع؛ كما يُطلق مصطلح "الخروج ببطء slow out" على الحركة التي تبدأ مُسرعًة ومن ثم تتباطأ. يُستخدم بصورةٍ مماثلة كلٌ من المصطلحين "تخفيف السرعة بداية الحركة ease in" و"تخفيف السرعة نهاية الحركة ease out" في التحريك على الويب. يُمكن الجمع أحيانًا بين نوعي التحريك السابقين وصولًا إلى "تخفيف السرعة بداية الحركة ونهايتها ease-in-out". يؤدي استخدام التخفيف الحصول على حركة أقل حدًّة وأكثر وضوحًا.

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

التحريك الخطي

يُوصف التحريك الذي لا يستخدم أي تخفيفٍ بالتحريك الخطي linear. يوضّح الرسم البياني التالي مراحل الانتقال الخطي؛ حيث تزداد القيمة زياداتٍ متساوية عبر الزمن. تبدو الحركة الخطية آليةً وغير طبيعية مما يُنفّر المستخدمين، وبالتالي يجب تجنُّب التحريك الخطي.

يُمكن استخدام التحريك الخطي دومًا سواءٌ عند استخدام أنماط CSS أو عند استخدام JavaScript.

يُمكن معاينة تحريك خطي.

للحصول على التأثير السابق باستخدام أنماط CSS:

transition: transform 500ms linear;

تخفيف السرعة نهاية الحركة

يؤدي تخفيف السرعة نهاية الحركة ease-out إلى بدءٍ أسرع للحركة مما هو في التحريك الخطي، وتَباطُؤ في النهاية، كما هو موضحٌ في الرسم البياني التالي.

يُعدّ تخفيف السرعة نهاية الحركة ease-out الخيار الأفضل لواجهات المستخدم؛ حيث تُعطي البداية السريعة الانطباع بالتجاوب مع توفير التباطؤ الطبيعي في النهاية.

يُمكن معاينة تخفيف السرعة نهاية الحركة.

يُمكن تحقيق تخفيف السرعة نهاية الحركة بعدة طرق؛ ومن أسهلها استخدام الكلمة المفتاحية ease-out في CSS:

transition: transform 500ms ease-out;

تخفيف السرعة بداية الحركة Ease-in

يبدأ التحريك من هذا النوع ببطء وينتهي بسرعة خلافًا للتحريك من النوع تخفيف السرعة نهاية الحركة Ease-out، كما هو موضح في الرسم البياني التالي.

يشبه هذا التحريك تسارع سقوط حجرٍ ثقيل؛ حيث يبدأ ببطء ويصطدم بالأرض بسرعةٍ كبيرة.

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

يُمكن معاينة تخفيف السرعة بداية الحركة.

يُمكن تحقيق تخفيف السرعة بداية الحركة باستخدام الكلمة المفتاحية ease-in في CSS:

transition: transform 500ms ease-in;

تخفيف السرعة بداية الحركة ونهايتها Ease-in-out

يُشبه تخفيف السرعة بداية الحركة ونهايتها عمليات تسارع وتباطؤ السيارة ويُمكنه توفير تأثيراتٍ أفضل من تأثيرات تخفيف السرعة نهاية الحركة في حال استخدامه بحكمة.

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

يُمكن معاينة تخفيف السرعة بداية الحركة ونهايتها.

يُمكن الحصول على تحريك من النوع "تخفيف السرعة بداية الحركة ونهايتها" باستخدام الكلمة المفتاحية ease-in-out:

transition: transform 500ms ease-in-out;

التخفيف المخصص

يُمكن في بعض الأحيان التخلّي عن استخدام الكلمات المفتاحية في CSS، أو واجهة برمجة التطبيقات Web Animations، أو إطار عمل JavaScript، وتعريف منحنياتٍ أو معادلاتٍ مخصصة عوضًا عن ذلك؛ مما يوفر تحكُّمًا أكبر في التحريك المطلوب.

• يسمح التخفيف المُخصّص بإضفاء هويةٍ شخصيةٍ مُميزةٍ للمشروع.
• يُمكّن التخفيف المُخصّص من إنشاء منحنيات بيزيه Bézier المكعبة، والتي تُشبه منحنيات التحريك الافتراضية (تخفيف السرعة بداية الحركة، تخفيف السرعة نهاية الحركة، …) مع التركيز على جوانبٍ مختلفة.
• تُستخدم JavaScript عند الحاجة لتوفير تحكمٍ أكبر في توقيت التحريك وسلوكه، مثل التحريك المرن أو المُرتدّ bounce .

يُمكن تعريف منحنيات بيزيه المكعبة في أنماط CSS لتحديد التوقيت؛ حيث توافق الكلمات المفتاحية ease و ease-in و ease-out و linear في الحقيقة منحنيات بيزيه مُعرّفةً مسبقًا. يُمكن الرجوع للتفاصيل في CSS transitions specification و Web Animations specification.

تأخذ منحنيات بيزيه أربع قيم (أو زوجين من الأرقام)؛ حيث يُحدّد كل زوجٍ إحداثيات X و Y لنقاط التحكم في منحني بيزيه المكعب. يكون لنقطة البداية لمنحني بيزيه الإحداثيات (0 ، 0)، والإحداثيات (1 ، 1) لنقطة النهاية، ويُمكن ضبط قيم X و Y لنقطتي التحكم. يجب أن تكون قيم X لنقطتي التحكم بين 0 و 1، بينما يُمكن لقيم Y تجاوز المجال [0,1]. لا تُحدّد المواصفات مقدار التجاوز المسموح بوضوح.

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

يُمكن مقارنة منحنيين في الشكل التالي، المنحني الأيسر مع تخفيف-داخل أما المنحني الأيمن فهو مُخصص:

يُمكن معاينة التحريك مع تخفيف مخصص.

تكون أنماط CSS للتخفيف المخصص:

transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);

يُحدّد الرقمان الأولان إحداثيات X و Y لنقطة التحكم الأولى؛ بينما يحدد الرقمان الثانيان إحداثيات X و Y لنقطة التحكم الثانية.

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

يُمكن تجريب أداة منحني التحريك ومعاينة تأثيرات المنحني على طبيعة التحريك.

استخدم أطر عمل JavaScript لتوفير المزيد من التحكم

تظهر الحاجة أحيانًا إلى تحكمٍ أكبر مما يوفِّره منحني بيزيه المكعب، حيث يجب مثلًا استخدام أطر عمل JavaScript في حال ضرورة توفير الشعور بالارتداد المرن؛ لأنه لا يُمكن توفير ذلك باستخدام أنماط CSS أو Web Animations.

إطار العمل TweenMax

يُعدّ إطار العمل GreenSock’s TweenMax (أو الإطار TweenLite في حال الرغبة بإبقاء الشيفرة خفيفة) من الأطر القوية التي توفر قدرًا كبيرًا من التحكم باستخدام مكتبة JavaScript صغيرة؛ علمًا أن هذه المكتبة تحتوي شيفرة قاعدية ناضجة.

يُمكن معاينة تخفيف تحريك مرن.

لاستخدام TweenMax، يجب تضمين الشيفرة التالية في الصفحة:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

بعد ذلك، يُمكن استدعاء TweenMax مع أي عنصرٍ لتحريكه مع ضبط الخصائص المناسبة لأي تخفيفٍ مطلوب. يوجد العديد من خيارات التخفيف المُمكن استخدامها؛ حيث تَستخدم الشيفرة التالية مثلًا تخفيف خروجٍ مرن:

var box = document.getElementById('my-box');
var animationDurationInSeconds = 1.5;

TweenMax.to(box, animationDurationInSeconds, {
  x: '100%',
  ease: 'Elastic.easeOut'
});

تُسلِّط وثائق TweenMax الضوء على جميع الخيارات الممكنة.

اختيار التخفيف الصحيح

بعد مناقشتنا السابقة للخيارات المختلفة المُتاحة لتخفيف التحريك، تبرز الأسئلة التالية: ما نوع التخفيف الواجب استخدامه في المشاريع؟ وما هي المدة الأنسب للتحريك؟

• يُفضّل استخدام "تخفيف السرعة نهاية الحركة" لتحريك عناصر الواجهة، ويُعدّ Quintic من أكثر الأنواع جاذبيةً وأناقة وإن كان سريعًا.
• يجب التأكُّد من ضبط مدة التحريك؛ حيث يُمكن أن تكون مدة 200 إلى 500 ميلي ثانية مناسبةً لتخفيف السرعة بداية الحركة ونهايتها؛ بينما يستلزم التخفيف المرن والمُرتدّ مدًةً أطول بين 800 إلى 1200 ميلي ثانية.

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

توجد مجموعةٌ من المعادلات المعروفة المستخدمة لتنفيذ التحريك مع "تخفيف السرعة نهاية الحركة" والمختلفة عن تلك المحددة بالكلمة المفتاحية ease-out في CSS والتي تتراوح في شدتها. يُمكن استخدام Quintic ease-out للحصول على تأثير "تخفيف السرعة نهاية الحركة".

يُمكن معاينة تحريك تخفيف السرعة نهاية الحركة Quintic.

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

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

اختيار المدة المناسبة للحركة

تُعدّ مسألة اختيار المدّة الصحيحة للحركة من أهم المسائل؛ حيث يُعطي التحريك قصير الأمد شعورًا بالعدوانية والحدّية؛ بينما يصبح التحريك طويل الأمد معرقلًا ومزعجًا.

• التخفيف الخارج Ease-outs: حوالي 200 إلى 500 ميلي ثانية، حيث تمنح هذه المدّة للعين فرصًة لرؤية التحريك دون أي معوقات.
• التخفيف الداخل Ease-ins: حوالي 200 إلى 500 ميلي ثانية. يجب الانتباه إلى مسألة السقوط السريع في النهاية مما لا يسمح لتعديلات المدّة بتنعيم الحركة.
• تأثيرات الارتداد أو المرونة: حوالي 800 إلى 1200 مللي ثانية. يلزم إتاحة الوقت الكافي لاستقرار التأثير المرن أو المرتد. بدون هذا الوقت الإضافي، سيكون الجزء المرتد المرن من التحريك عدوانيًا وغير مريح للعين.

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

ترجمة -وبتصرف- للمقالات التالية:

• The Basics of Easing للمؤلف: Paul Lewis.
• Custom Easing للمؤلفين: Paul Lewis و Sam Thorogood.
• Choosing the Right Easing للمؤلفين: Paul Lewis و Perf Advocate.

اقرأ أيضًا

• المرجع الشامل إلى التحريك عبر CSS
• أفضل 25 مكتبة تحريك في CSS
• النسخة العربية الكاملة من كتاب: التحريك عبر CSS 

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

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

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

تُحرّك شيفرة CSS التغييرات في الخاصية background-color لمدة ثلاث ثوان:

.animated {
  transition-property: background-color;
  transition-duration: 3s;
}

فلو كان لأي عنصر الصنف CSS الذي سميناه animated، فستظهر أي تغيرات على الخاصية background-color في هذا العنصر في حركة لمدة 3 ثوان.

انقر على الزر الذي ستُظهره الشيفرة التالية لتحريك الخلفية:

<button id="color">Click me</button>

<style>
  #color {
    transition-property: background-color;
    transition-duration: 3s;
  }
</style>

<script>
  color.onclick = function() {
    this.style.backgroundColor = 'red';
  };
</script>

توصف الحركة الانتقالية في CSS بأربعة خصائص، هي:

• transition-property.
• transition-duration.
• transition-timing-function.
• transition-delay.

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

يُظهر النقر على الزر في الشيفرة التالية الحركة الانتقالية للخاصيتين color وfont-size:

<button id="growing">Click me</button>

<style>
#growing {
  transition: font-size 3s, color 2s;
}
</style>

<script>
growing.onclick = function() {
  this.style.fontSize = '36px';
  this.style.color = 'red';
};
</script>

سنشرح الآن خصائص الحركة الانتقالية.

الخاصية transition-property

نكتب ضمن هذه الخاصية قائمةً بخصائص CSS التي نريد إظهار تغييراتها على شكل حركة انتقالية، مثل left وmargin-left وheight وcolor وغيرها، أو يمكن أن نختار all التي تعني تحريك كل الخصائص .

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

الخاصية transition-duration

يمكن أن نحدد في هذه الخاصية المدة التي ستجري فيها الحركة الانتقالية، وينبغي أن يكون التوقيت بتنسيق CSS ومقدرًا بالثانية s أو بالميلي ثانية ms.

الخاصية transition-delay

نحدد في هذه الخاصية فترة الانتظار قبل عرض الحركة الانتقالية، فلو كانت قيمتها ثانيةً واحدةً وقيمة الخاصية transition-duration ثانيتن، فستُعرض الحركة الانتقالية بعد ثانية من تغيّر الخاصيّة، وستستمر لمدة ثانيتين، كما يمكن استخدام قيم سالبة أيضًا، وعندها ستبدأ الحركة مباشرةً، إلا أنّ نقطة البداية ستنسحب قليلًا، فلو كانت قيمة الخاصية transition-delay هي "-1" ثانية وقيمة الخاصية transition-duration هي "2" ثانية، فستبدأ الحركة من المنتصف، ولمدة ثانية واحدة.

لاحظ تغير الأعداد من 0 إلى 9 في الرسم المتحرك التالي باستخدام الخاصية translate في CSS:

شيفرة الملف script.js:

stripe.onclick = function() {
  stripe.classList.add('animate');
};

شيفرة الملف style.css:

#digit {
  width: .5em;
  overflow: hidden;
  font: 32px monospace;
  cursor: pointer;
}

#stripe {
  display: inline-block
}

#stripe.animate {
  transform: translate(-90%);
  transition-property: transform;
  transition-duration: 9s;
  transition-timing-function: linear;
}

شيفرة الملف index.html:

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  Click below to animate:

  <div id="digit"><div id="stripe">0123456789</div></div>

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

</html>

وستكون النتيجة:

تجري الحركة الانتقالية للخاصية transform بالشكل التالي:

#stripe.animate {
  transform: translate(-90%);
  transition-property: transform;
  transition-duration: 9s;
}

تضيف شيفرة JavaScript السابقة الصنف animate إلى العنصر، وتبدأ الحركة عند تنفيذ الأمر:

stripe.classList.add('animate');

يمكن أن نبدأ التحريك انطلاقًا من نقطة ما من الحركة الانتقالية، أي من رقم محدد -وقد يكون متعلقًا بالثانية الحالية مثلًا- وباستخدام قيمة سالبة للخاصية transition-delay.

لو نقرت على الرقم في المثال التالي، فستبدأ الحركة من الثانية الحالية:

• شيفرة الملف script.js:

stripe.onclick = function() {
  let sec = new Date().getSeconds() % 10;
  stripe.style.transitionDelay = '-' + sec + 's';
  stripe.classList.add('animate');
};

• شيفرة الملف style.css:

#digit {
  width: .5em;
  overflow: hidden;
  font: 32px monospace;
  cursor: pointer;
}

#stripe {
  display: inline-block
}

#stripe.animate {
  transform: translate(-90%);
  transition-property: transform;
  transition-duration: 9s;
  transition-timing-function: linear;
}

• شيفرة الملف index.html:

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  Click below to animate:
  <div id="digit"><div id="stripe">0123456789</div></div>

  <script src="script.js"></script>
</body>
</html>

وستكون النتيجة:

يمكن تنفيذ ذلك باستخدام JavaScript لكن بإضافة سطر آخر من الشيفرة:

stripe.onclick = function() {
  let sec = new Date().getSeconds() % 10;
  // مثلًا تعني القيمة  -3 هنا أن الحركة ستبدأ من الثانية الثالثة 
  stripe.style.transitionDelay = '-' + sec + 's';
  stripe.classList.add('animate');
};

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

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

منحني بيزيه

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

• إحداثيات النقطة الأولى (0,0).
• إحداثيات النقطة الأخيرة (1,1).
• ينبغي أن يكون الإحداثي x لنقطتي المنتصف بين 0 و1، بينما يمكن أن نختار أي قيمة للإحداثي y.

إن صيغة منحني بيزيه هي: (cubic-bezier(x2, y2, x3, y3، إذًا علينا فقط أن نحدد النقطتين الحاكمتين الثانية والثالثة، لأنّ الأولى والأخيرة ثابتتان.

تحدد دالة التوقيت سرعة تحريك عملية تشكيل المنحني:

• يمثل المحور x محور الزمن الذي يبدأ بالنقطة "0"، وينتهي بالنقطة "1" لقيمة transition-duration.
• يمثل المحور y مقدار اكتمال العملية، ويبدأ بالنقطة "0" وينتهي بالنقطة "1" لقيمة الخاصية التي نريد إظهار الحركة الانتقالية لها.

المثال الأبسط هو التحريك المنتظم، أي الخطي، وذلك باستخدام المنحني (cubic-bezier(0, 0, 1, 1، الذي سيبدو بالشكل التالي:

عندما يمر الوقت (x) ستكتمل عملية التحريك (y) بثبات وتناغم من القيمة 0 إلى 1. وفي مثالنا التالي ستتحرك صورة القطار من اليسار إلى اليمين بسرعة ثابتة، إذا نقرت عليه:

• شيفرة الملف style.css:

.train {
  position: relative;
  cursor: pointer;
  width: 177px;
  height: 160px;
  left: 0;
  transition: left 5s cubic-bezier(0, 0, 1, 1);
}

• شيفرة الملف index.html:

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <img class="train" src="https://js.cx/clipart/train.gif" onclick="this.style.left='450px'">

</body>

</html>

وستكون النتيجة:

إليك شيفرة استخدام الخاصية transition بناءً على منحني بيزيه:

.train {
  left: 0;
  transition: left 5s cubic-bezier(0, 0, 1, 1);
  /* JavaScript sets left to 450px */
}

لكن كيف سنرى القطار وهو يُبطئ؟ يمكن استعمال منحني بيزيه آخر من الشكل (cubic-bezier(0.0, 0.5, 0.5 ,1.0، وفي المقال التالي سنرى كيفية بدء العملية بسرعة، حيث يتحرك القطار سريعًا ثم يتباطأ.

• شيفرة الملف style.css:

.train {
  position: relative;
  cursor: pointer;
  width: 177px;
  height: 160px;
  left: 0px;
  transition: left 5s cubic-bezier(0.0, 0.5, 0.5, 1.0);
}

• شيفرة الملف index.html:

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <img class="train" src="https://js.cx/clipart/train.gif" onclick="this.style.left='450px'">

</body>

</html>

وستكون النتيجة:

• شيفرة CSS:

.train {
  left: 0;
  transition: left 5s cubic-bezier(0, .5, .5, 1);
  /* JavaScript sets left to 450px */
}

يمكنك استخدام العديد من المنحنيات الجاهزة، مثل linear أو ease أو ease-in أو ease-out أو ease-in-out، وإليك جدولًا بالمنحنيات الموافقة لها:

وفي ملاحظة هامة، تجدر الإشارة إلى أن * تستخدَم ease قيمةً افتراضيةً إذا لم نحدد دالة توقيت timing-function. وكما هو واضح يمكن استعمال ease-out في حالة القطار الذي يُبطئ حركته:

.train {
  left: 0;
  transition: left 5s ease-out;
  /* transition: left 5s cubic-bezier(0, .5, .5, 1); */
}

لكنه يبدو مختلفًا نوعًا ما.

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

لاحظ الشيفرة التالية:

.train {
  left: 100px;
  transition: left 5s cubic-bezier(.5, -1, .5, 2);
  /* JavaScript sets left to 400px */
}

ينبغي إظهار حركة انتقالية للخاصية left بين القيمتين 100px و400px، لكنك بالنقر على صورة القطار سترى ما يلي:

• أولًا سيتراجع القطار إلى الخلف، وستغدو قيمة left أقل من 100px.
• يتقدم بعدها القطار إلى الأمام لتتجاوز left القيمة 400px بقليل.
• ثم يعود مجددًا إلى القيمة 400px للخاصية left.

شيفرة الملف style.css:

.train {
  position: relative;
  cursor: pointer;
  width: 177px;
  height: 160px;
  left: 100px;
  transition: left 5s cubic-bezier(.5, -1, .5, 2);
}

• شيفرة الملف index.html:

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <img class="train" src="https://js.cx/clipart/train.gif" onclick="this.style.left='400px'">

</body>

</html>

وستكون النتيجة على النحو الآتي:

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

وكما نعرف، تقيس y مدى اكتمال الحركة الانتقالية، حيث تتطابق القيمة y = 0 مع بداية الحركة، والقيمة y = 1 مع نهايتها. إذًا ستنقل القيمة y<0 نقطة البدء إلى ما قبل البداية، والقيمة y>1 إلى ما بعدها.

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

دالة التوقيت steps

تسمح دالة التوقيت ([steps(number of steps[, start/end بتقسيم الحركة الانتقالية إلى خطوات، لنرى ذلك من خلال مثال قائمة من الأرقام التي لا تبدي أي حركة:

• شيفرة الملف style.css:

#digit {
  border: 1px solid red;
  width: 1.2em;
}

#stripe {
  display: inline-block;
  font: 32px monospace;
}

• شيفرة الملف index.html:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div id="digit"><div id="stripe">0123456789</div></div>

</body>
</html>

وستكون النتيجة:

سنُظهر الأرقام منفصلة، وذلك بجعلها غير مرئية خارج النافذة الحمراء، بعدها سنحرك القائمة نحو اليسار في كل خطوة، وبالتالي سنحتاج إلى 9 خطوات لتنفيذ الأمر:

#stripe.animate  {
  transform: translate(-90%);
  transition: transform 9s steps(9, start);
}

• شيفرة الملف style.css:

#digit {
  width: .5em;
  overflow: hidden;
  font: 32px monospace;
  cursor: pointer;
}

#stripe {
  display: inline-block
}

#stripe.animate {
  transform: translate(-90%);
  transition-property: transform;
  transition-duration: 9s;
  transition-timing-function: steps(9, start);
}

• شيفرة الملف index.html:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  Click below to animate:

  <div id="digit"><div id="stripe">0123456789</div></div>

  <script>
    digit.onclick = function() {
      stripe.classList.add('animate');
    }
  </script>


</body>

</html>

وستكون النتيجة:

يُمثّل الوسيط الأول للدالة (steps(9, start عدد الخطوات، أي ستقسم الحركة الانتقالية إلى 9 أجزاء -10% لكل خطوة-، كما سيُقسم الفاصل الزمني تلقائيًا إلى 9 أجزاء أيضًا، فلو كانت قيمة الخاصية transition تعادل 9 ثوان، فسيظهر كل رقم لمدة ثانية؛ أما الوسيط الثاني فيأخذ إحدى القيمتين start أو end، حيث تعني القيمة start أننا نريد تنفيذ الخطوة الأولى مباشرةً عند بداية الحركة، ويمكنك ملاحظة ذلك خلال الحركة، فعندما ننقر على الرقم سيتغير إلى "1" -أي الخطوة الأولى- مباشرةً، ثم يكمل ثانيةً وهكذا.

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

• -10% - 0s: يحدث التغيير الأول في بداية الثانية الأولى مباشرةً.
• 1s – -20%.
• …
• 8s – -80%.
• تُظهر الثانية الأخيرة القيمة الأخيرة.

بينما تعني القيمة end وجوب تطبيق التغيير في نهاية كل ثانية، ويكتمل في نهاية الثانية المعدودة. وتتقدم العملية كالتالي:

• 0s – 0: لا يتغير شيء في الثانية الأولى.
• 1s – -10%: يحدث التغير الأول عند نهاية الثانية الأولى مباشرةً.
• 2s – -20%.
• …
• 9s – -90%.

إليك مثالًا نموذجيًا عن استخدام الدالة (steps(9, start.

• شيفرة الملف style.css:

#digit {
  width: .5em;
  overflow: hidden;
  font: 32px monospace;
  cursor: pointer;
}

#stripe {
  display: inline-block
}

#stripe.animate {
  transform: translate(-90%);
  transition-property: transform;
  transition-duration: 9s;
  transition-timing-function: steps(9, end);
}

• شيفرة الملف index.html:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  Click below to animate:

  <div id="digit"><div id="stripe">0123456789</div></div>

  <script>
    digit.onclick = function() {
      stripe.classList.add('animate');
    }
  </script>


</body>

</html>

وستكون النتيجة:

إليك بعض القيم المختصرة:

• step-start: تماثل (steps(1, start.
• step-end: تماثل (steps(1, end.

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

الحدث transitionend

يقع الحدث transitionend عندما تنتهي الحركة المبنية على خصائص CSS، ويستخدم لتنفيذ عمل ما بعد انتهاء الحركة، حيث يمكننا مثلًا ضم حركات مختلفة، فالسفينة في المثال التالي ستبدأ رحلتها وتستمر بالعودة عند النقر، وفي كل مرة تبتعد نحو اليمين أكثر:

تبدأ الحركة نتيجة تنفيذ الدالة go، التي يُعاد تنفيذها في كل مرة تنتهي فيها الحركة، وتغير اتجاه الحركة:

boat.onclick = function() {
  //...
  let times = 1;

  function go() {
    if (times % 2) {
      // sail to the right
      boat.classList.remove('back');
      boat.style.marginLeft = 100 * times + 200 + 'px';
    } else {
      // sail to the left
      boat.classList.add('back');
      boat.style.marginLeft = 100 * times - 200 + 'px';
    }

  }

  go();

  boat.addEventListener('transitionend', function() {
    times++;
    go();
  });
};

لكائن الحدث transitionend عدة خصائص مميزة، هي:

• event.propertyName: يعيد اسم الخاصية التي أنهت حركتها الانتقالية، وتظهر فائدتها عند تحريك عدة خصائص معًا.
• event.elapsedTime: الوقت الذي استغرقته الحركة بالثواني، دون احتساب transition-delay.

القاعدة keyframes

يمكن ضم عدة حركات بسيطة معًا باستخدام قاعدةkeyframes@ من CSS، والتي تحدد اسم الحركة الانتقالية، وقواعد مكانها وزمانها وكيفيتها، بعدها سنتمكن باستخدام الخاصية animation من ربط الحركة بالعنصر وتخصيص معاملات إضافية قد نحتاجها، إليك مثالًا مع الشرح:

<div class="progress"></div>

<style>
  @keyframes go-left-right {        /* "go-left-right" أعط القاعدة اسمًا*/
    from { left: 0px; }             /*  left: 0px حرك ابتداءً من قيمة */
    to { left: calc(100% - 50px); } /*  100%-50px: حرك نحو اليسار */
  }

  .progress {
    animation: go-left-right 3s infinite alternate;
    /* طبق الحركة التي عرفناها في الأعلى على العنصر
      المدة 3 ثوان
       عدد المرات: لانهائي
       بدّل اتجاه الحركة في كل مرة
    */

    position: relative;
    border: 2px solid green;
    width: 50px;
    height: 20px;
    background: lime;
  }
</style>

ستجد العديد من المقالات التي تشرح القاعدة @keyframes من CSS مع ميزاتها المفصلة، ولن تحتاجها غالبًا إلا عندما يكون كل شيء في موقعك متحركًا باستمرار.

الأداء

يمكن تحريك أغلب خاصيات CSS بما أنها قيم رقمية مثل width و color و font-size، فيعمل المتصفح عندما تحرك هذه الخاصيات على تغيير هذه القيم تدريجيًا في كل إطار من الإطارات مما يعطي إيحاء بتأثير حركي سلس، ولكن انتظر، لا تبدو كل الحركات سلسلة كما تريدها لأن تغيير بعض خاصيات CSS عملية مجهدة.

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

1. التخطيط Layout: إعادة حساب إحداثيات ومواضع كل عنصر من عناصر الصفحة، ثم
2. الشكل Paint: إعادة حساب كيف يجب أن يظهر كل عنصر بعد تموضعه في مكانه وكل شيء حرفيًا بما فيها الخلفيات والألوان، ثم
3. التركيب Composite: تصيير النتائج النهائية وإخراجها وعرضها على بكسلات الشاشة وتطبيق تحويلات CSS إن وجدت.

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

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

تعد الخاصية transform خيارًا جيدًا لسببين هما:

• تستهدف التحويلات في CSS صندوق العنصر ككل (تدوير، أو قلب أو تمديد أو إزاحة …إلخ.)
• لا تؤثر التحويلات على العناصر المجاورة للعنصر المستهدف.

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

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

مما سبق نجد أن الخاصية transform قوية للغاية ويمكنك عبرها تدوير عنصرٍ أو قلبه أو تطويله أو تقصيره أو حتى تحريكه وغيرها (انظر صفحة الخاصية على موسوعة حسوب)، فيمن استعمال transform: translateX(…)‎ بدلًا من استعمال الخاصية left أو margin-left أو استعمال transform: scale لزيادة حجم عنصر وهكذا.

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

<img src="https://js.cx/clipart/boat.png" id="boat">

<style>
#boat {
  cursor: pointer;
  transition: transform 2s ease-in-out, opacity 2s ease-in-out;
}

.move {
  transform: translateX(300px);
  opacity: 0;
}
</style>
<script>
  boat.onclick = () => boat.classList.add('move');
</script>

وإليك أيضًا مثال آخر أكثر تعقيدًا يُطبَّق فيه إطارات الحركة ‎@keyframes:

<h2 onclick="this.classList.toggle('animated')">click me to start / stop</h2>
<style>
  .animated {
    animation: hello-goodbye 1.8s infinite;
    width: fit-content;
  }
  @keyframes hello-goodbye {
    0% {
      transform: translateY(-60px) rotateX(0.7turn);
      opacity: 0;
    }
    50% {
      transform: none;
      opacity: 1;
    }
    100% {
      transform: translateX(230px) rotateZ(90deg) scale(0.5);
      opacity: 0;
    }
  }
</style>

خلاصة

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

النقاط الأساسية التي تجعل الرسومات المتحركة باستخدام CSS محدودةً موازنةً برسوم JavaScript هي:

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

في أمثلتنا الأولى حركنا font-size وleft وwidth وheight، لكن إذا رغبنا في أداء أفضل في مشاريعنا الحقيقية، فيجب أن نستخدم ()transform: scale و()transform: translate.

يمكن تنفيذ الرسوميات المتحركة باستخدام CSS كما شرحناها في هذا المقال، وسيسمح لنا الحدث transitionend باستخدام JavaScript بعد انتهاء الحركة الانتقالية، وبالتالي ستتكامل جيدًا مع الشيفرة.

سنتعرف في المقال القادم على رسوم JavaScript المتحركة التي تساعدنا في تنفيذ حالات أكثر تعقيدًا.

مهام لإنجازها

تحريك طائرة في CSS

أظهر رسمًا متحركًا يشابه صورة الطائرة في الأسفل:

• يزداد حجم الصورة من 40x24px إلى 400x240px.
• تستغرق العملية 3 ثوان.
• اطبع كلمة "!Done" عند الانتهاء.
• لا يجب أن تتوقف العملية بالنقر على الصورة أثناء التنفيذ. افتح المثال في بيئة تجريبية

الحل

إليك الشيفرة:

/* original class */

#flyjet {
  transition: all 3s;
}

/* JS adds .growing */
#flyjet.growing {
  width: 400px;
  height: 240px;
}

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

تحرك الطائرة 2

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

الحل

نريد اختيار أنسب منحني بيزيه لتلك الحركة، إذ يجب أن تحقيق y>1 في موضع ما للطائرة لتحقيق تأثير القفزة مثل cubic-bezier(0.25, 1.5, 0.75, 1.5)‎، انظر المخطط:

افتح الحل في بيئة تجريبية.

تحريك دائرة

أنشئ الدالة showCircle(cx, cy, radius) التي تظهر دائرةً تنمو.

• cx,cy: يمثلان إحداثيات مركز الدائرة بالنسبة إلى إحداثيات النافذة.
• radius: نصف قطر الدائرة.

انقر الزر لترى كيف سيظهر الحل:

تجد المثال في هذه البيئة التجريبية وتجد حله في هذه البيئة التجريبية.

تحريك دائرة مع دالة استدعاء

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

ترسم الدالة (showCircle(cx, cy, radius الدائرة، لكن لا يمكنها أن تدلّك على اكتمال الرسم، لذا أضف دالة استدعاء callback مثل معامل إلى الدالة السابقة (showCircle(cx, cy, radius, callback، حيث تُستدعى عندما ينتهي الرسم المتحرك. ينبغي أن تتلقى دالة الاستدعاء callback العنصر <div> للدائرة مثل وسيط.

إليك مثالًا:

showCircle(150, 150, 100, div => {
  div.classList.add('message-ball');
  div.append("Hello, world!");
});

النموذج:

تجد حل المثال في هذه البيئة التجريبية.

ترجمة -وبتصرف- للفصل css-animations من سلسلة The Modern JavaScript Tutorial.

اقرأ أيضًا

• المقال السابق: منحنى بيزيه وأهميته في الرسوميات وصناعة الحركات في جافاسكربت
• تأثيرات الانتقال والحركة في CSS
• منحنى بيزيه وأهميته في الرسوميات وصناعة الحركات في جافاسكربت

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

اقرأ هذا المقال بتركيز وفي بيئة هادئة.

التحليل Parsing

تبدأ عملية تحليل أو معالجة تنسيق CSS حالما ينتهي المتصفح من تحميله، إذ يُمكن أن يتواجد هذا التنسيق ضمن ملفاتٍ خاصةٍ به بلاحقة css، أو مضمنًا بملفاتٍ فردية داخل وسم <style>، أو مُضمنًا سطريًا ضمن وسوم HTML باستخدام سمة style. يُحلّل ويُرمّز تنسيق CSS بالاعتماد على مواصفات الأنماط، بحيث ستحصل في نهاية هذه العملية على هيكلية بيانات تتضمن كل المُحددات selector والخصائص وقيم هذه الخصائص.

ألقِ نظرةً على تنسيق CSS التالي:

.fancy-button {
    background: green;
    border: 3px solid red;
    font-size: 1em;
}

سينتج عنه هيكلية البيانات التالية لتسهيل استخدامها في مراحل لاحقة.

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

الحسابات

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

توريث التنسيق Cascade

توجد عدة مصادر لتنسيق CSS، ولذلك يحتاج المتصفح لطريقةٍ يُحدد فيها أي تنسيقٍ يجب تطبيقه على عنصرٍ ما، ولعمل ذلك يستخدم المتصفح ميزةً تُدعى دقة التحديد specificity، والتي تحسب عدد الوسوم والأصناف والمعرفات ومحددات السمات المُستخدمة في مُحدد، إضافةً إلى تصاريح important! الموجودة. حيث تُعطى التنسيقات المُضمنة باستخدام سمة style الترتيب الأعلى لتتفوق على أي تنسيق من وسم <style> أو ملف css خارجي، وعند استخدام المطور important! على قيمة تنسيقٍ ما فسوف يتفوق هذا التنسيق على أي تنسيق CSS مهما كان موقعه إلا في حال وجود تصريح important! أيضًا.

لتوضيح الأمر أكثر ستُعرض بعض المحددات مع درجة التحديد.

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

في المثال التالي ستكون خلفية وسم div بلونٍ أزرق.

div {
    background: red;
}

div {
    background: blue;
}

سنتوسّع أكثر في مثال fancy-button.:

.fancy-button {
    background: green;
    border: 3px solid red;
    font-size: 1em;
}

div .fancy-button {
    background: yellow;
}

سوف ينتج عن تنسيق CSS هيكلة البيانات التالية، وسنتابع البناء على هذا المثال في بقية المقال.

تتبع وفهم المصادر

يوجد مصادرٌ مختلفةٌ لتنسيقات CSS، وهي:

• المستخدم user: أي تنسيقٍ مضبوطٍ ليكون شاملًا داخل وكيل المستخدم من قِبل المستخدم.
• المؤلف author: تنسيقات مطوّر الويب.
• وكيل المستخدم user agent: أي شيءٍ يستطيع إخراج تنسيقات CSS، وهو المتصفح بالنسبة لمعظم المطورين والمستخدمين.

يضمن توريث التنسيق لكلٍ من المصادر السابقة أن تكون الأولوية للمصدر الأول "المستخدم" ثم "المؤلف" ثم "وكيل المستخدم".

لاحظ ماذا سيحدث عند ضبط المستخدم لحجم خط المتصفح إلى قيمة صغرى 2em.

تطبيق توريث التنسيق

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

ينتج عما سبق القيم والخصائص التي سوف تُستخدم للصنف fancy-button. (كلما كان ترتيبه في الجدول "أعلى" على كلما كان أفضل)، فعلى سبيل المثال، نلاحظ من الجدول السابق أن إعدادات تفضيلات متصفح المستخدم لها أولوية على تنسيق المطوّر.

يتحرى المتصفح الآن عن جميع عناصر DOM المطابقة للمحدّدات المذكورة سابقًا ويعطّل التنسيقات المحسوبة الناتجة عن العناصر المطابقة، لتكون عناصر الوسم div في هذه الحالة كالتالي:

للتعرّف على المزيد عن آلية عمل توريث التنسيق، ألقِ نظرةً على التوثيق الرسمي.

نموذج كائن CSS

لقد قُطع شوطٌ طويلٌ للوصول لهذه المرحلة ولكن لم تنته بعد، ويجب الآن تحديث نموذج CSSOM الموجود ضمن document.stylesheets لكي يُمثل جميع ما حُلّل وحُسِب حتى هذه النقطة.

يستخدم مطورو الويب هذه المعلومة دون إدراكهم لها، فمثلًا عند استدعاء getComputedStyle()‎، سوف تُفعّل العملية المذكورة سابقًا عند الضرورة.

التخطيط Layout

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

سيُغطي هذا القسم مبادئ مخطط CSS التالية:

• تنسيق المحتوى Formatting Context إذ توجد عدة أنواعٍ لتنسيق المحتوى يستدعيها المطور من خلال قيمة display للعنصر، ومن أكثر هذه التنسيقات استخدامًا نجد الكتلة Block والمرن flex والشبكة grid، وخلايا الجدول table-cells والمُضمنة سطريًا inline، كما يُمكن لتنسيقات CSS أخرى فرض صيغة التنسيق أيضًا، مثل position: absolute أو باستخدام float أو باستخدام أعمدة متعددة.
• كتلة الاحتواء Containing block وهي عبارة عن كتلة أب تستقي التنسيقات منها.
• الاتجاه المُضمن سطريًا Inline direction وهو يمثّل الاتجاه الذي يُكتب به النص اعتمادًا على نمط الكتابة للعنصر، فمثلًا هو عبارة عن المحور الأفقي في الكتابة العربية، أما عند الكتابة باللغة الصينية فهو المحور الأفقي.
• اتجاه الكتلة Block direction والذي يُماثل عمل الاتجاه المُضمن سطريًا، ولكنه يكون عموديًا على ذلك المحور، وبالتالي يكون محوره في الكتابة العربية هو المحور العمودي، بينما يكون محوره هو الأفقي عند الكتابة باللغة الصينية.

تفسير قيم الأبعاد التلقائية auto

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

<body>
<p>Hello World</p>
<style>
    body {
        width: 50px;
    }
</style>
</body>

يبدأ المتصفح بعنصر body الرئيسي، حيث يُنشئ الصندوق المبدئي الذي يملك عرضًا بقيمة 50 بكسل وارتفاعًا افتراضيًا auto.

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

ينتقل المتصفح الآن للنص "Hello World"، وهو عبارة عن عقدة نصية في DOM وبناءً عليها يُنشأ صندوقًا سطريًا داخل المخطط، حيث يُلاحظ خروج النص عن حدود عنصر body، وهذا ما ستُعالجه الخطوة اللاحقة.

يعود المحرك إلى العنصر الأب عند إهمال عملية تخطيط النص، وذلك لأن كلمة "World" لا تتسع في الصندوق ولم تُغّير القيمة الافتراضية للخاصية overflow.

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

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

التعامل مع العومان float

سننتقل الآن لأمورٍ أكثر تعقيدًا. بفرض لدينا مُخططًا عاديًا، وزرًا يحوي عبارة "Share It" وقيمة float تُشير إلى يسار مقطع النص الأجنبي. تعتمد خاصية العوم float على مبدأ " تقلص لتُناسب shrink-to-fit" حتى يتسع المحتوى، حيث يصغر الصندوق حتى حجم مُناسب للإحاطة بمحتواه إذا كانت أبعاده auto. توجد صناديق أخرى مماثلة لصندوقfloat مثل الصناديق ذات الموقع absolute بما فيها العناصر ذات الموقع الثابت fixed، وخلايا الجدول ذات الحجم auto.

ألقِ نظرةً على الشيفرة التابعة للزر السابق.

<article>
    <button>SHARE IT</button>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesq</p>
</article>
<style>
    article {
        min-width: 400px;
        max-width: 800px;
        background: rgb(191, 191, 191);
        padding: 5px;
    }

    button {
        float: left;
        background: rgb(210, 32, 79);
        padding: 3px 10px;
        border: 2px solid black;
        margin: 5px;
    }

    p {
        margin: 0;
    }
</style>

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

تُنشئ خاصية float كتلة تنسيق محتوى جديدة Block Formatting Context أو اختصارًا BFC، وهي كتلة تتقلص لتحيط بالمحتوى، لذلك يعمل المتصفح على نوع مُخطط مُعين يُدعى قياس المحتوى content measure، حيث يبدو هذا المخطط في هذا النمط مُماثلًا لبقية المُخططات، ولكن مع اختلافٍ مهمٍ هو أنه أُنشئ في مساحةٍ لا نهائية.

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

اقتباس

ملاحظة: اللون المُستخدم للأزرار هنا للتوضيح فقط.

يعلم محرك المتصفح الآن أن العرض الأصغري هو 86 بكسل والأعظمي 115 بكسل، وسوف يُمرر هذه المعلومات للصندوق الأب ليُقرر العرض ويحدد الموقع الصحيح للزر.

توجد مساحة في هذا المثال تتسع لنمط float بحجمه الأعظمي وهو الحجم الذي سيُعرض به الزر.

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

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

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

فهم عملية التجزئة Fragmentation

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

لفهم الأمر، ألقِ نظرةً على نفس المثال الذي يستخدم CSS متعدد الأعمدة.

<body>
    <div>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh orci, tincidunt eget enim et, pellentesque condimentum risus. Aenean sollicitudin risus velit, quis tempor leo malesuada vel. Donec consequat aliquet mauris. Vestibulum ante ipsum primis in faucibus
        </p>
    </div>
<style>
    body {
        columns: 2;
        column-fill: auto;
        height: 300px;
    }
</style>
</body>

حالما يصل المتصفح لصندوق محتوى التنسيق متعدد الأعمدة، سيلاحظ وجود مجموعةٍ من الأعمدة.

سوف يتبع نفس نموذج الاستنساخ كما في السابق، ثم يُنشئ مُجزّأةً بأبعادٍ صحيحةٍ ليُنفذ رغبة المؤلف بما يخص الأعمدة.

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

الرسم

تحدثنا حتى الآن عن كامل محتوى CSS وتحليله وتوريثه ضمن شجرة DOM والمخطط الكامل، لكننا لم نتحدث عن تطبيق اللون أو الحدود أو الظلال وما شابهها من تصميمٍ للمخطط، ويُدعى ما سبق من أمور بالرسم.

توجد معايير للرسم في تنسيقات CSS، وتستطيع قراءة شرح كامل ضمن CSS 2.2 Appendix E.

تتبع عملية الرسم الترتيب التالي:

• الخلفية
• الحدود
• المحتوى

بالتالي إذا عُدنا لزر "Share it" السابق واتّبعنا نفس العملية، فسوف تسير بالترتيب الموّضح في الشكل التالي.

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

خاصية تكديس المحتوى

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

إن إنشاء محتوى مُكدس جديد يُغير ترتيب رسم العناصر، ألقِ نظرةً على المثال التالي:

<body>
<div id="one">
    Item 1
</div>
<div id="two">
    Item 2
</div>
<style>
body {
    background: lightgray;
}
div {
    width: 300px;
    height: 300px;
    position: absolute;
    background: white;
    z-index: 2;
}
#two {
    background: green;
    z-index: 1;
}
</style>
</body>

سوف يُرسم الملف السابق حسب ترتيب ورود العناصر دون استخدام z-index أي أنه سيرسم "item2" فوق "item1"، ولكن عند استخدام z-index، يتغير ترتيب الرسم.

ستُشرح كل خطوة كما هو الحال في الأمثلة السابقة.

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

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

ينتقل المتصفح الآن للمستوى الأعلى للمحتوى المُدّكس (وهو "item1" في هذه الحالة)، ثم يرسم هذا العنصر معتمدًا على الترتيب المُعرف في CSS 2.2.

لا يأخذ z-index اللون بالحسبان، بل هو مسؤول فقط عن العنصر المرئي بالنسبة للمستخدِم وبالتالي النص واللون الظاهرين له.

التكون Composition

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

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

ستكون الشيفرة لهذا القسم والذي يُدعى Clippy كالتالي:

<div class="clippy"></div>
<style>
.clippy {
    width: 100px;
    height: 100px;
    animation: pulse 1s infinite;
    background: url(clippy.svg);
}

@keyframes pulse {
    from {
        transform: scale(1, 1);
    }
    to {
        transform: scale(2, 2);
    }
}
</style>

عندما يقرأ المتصفح أن المطور يريد تحريك Clippy ضمن حلقة لا نهائية فسيكون لديه خياران:

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

سوف يختار المتصفح في معظم الحالات الخيار الثاني ليُنشئ التالي.

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

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

تطبيق وهم التفاعلية

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

ألقِ نظرة على المثال التالي الذي سوف نستخدم ضمنه زر Share it بإسلوبٍ متجانسٍ تفاعلي.

button {
    float: left;
    background: rgb(210, 32, 79);
    padding: 3px 10px;
    border: 2px solid black;
}

button:hover {
    background: teal;
    color: black;
}

أُضيف هنا شبه صنف يُخبر المتصفح أن عليه تغيير خلفية الزر ولون النص عندما يحرك المستخدم الفأرة فوق الزر وهذا يدفع للتساؤل "كيف يتعامل المتصفح مع هذه الحالة؟".

يتتبع المتصفح مجموعةً متنوعةً من المُدخلات تمر بعملية تُدعى hit testing أثناء تغيّرها، وتبدو العملية للمثال السابق كالتالي.

1. يحرك المستخدم الفأرة فوق الزر.
2. يرفع المتصفح حدث event يُخبر بأن الفأرة قد تحركت لتدخل خوارزمية hit testing، والتي تسأل ما يلي "ما هو الصندوق أو الصناديق التي تلمسها الفأرة؟"
3. تُعيد الخوارزمية الصندوق المرتبط بزر Share it.
4. يسأل المتصفح نفسه "هل يجب أن أفعل أي شيءٍ طالما أن الفأرة تتحرك فوق هذا الصندوق؟"
5. يُشغل المتصفح بسرعة التنسيقات والتوريث لهذا الصندوق وأبنائه ليُقرر وجود شبه صنف hover: مع تعديلات رسم للتنسيق فقط ضمن هذه الكتلة.
6. يعلق المتصفح هذه التنسيقات في عنصر DOM (كما هو الحال في مرحلة التوريث) وهو الزر في هذه الحالة.
7. يتجاوز المتصفح المخطط السابق ويرسم مباشرةً صورةً نقطيةً جديدة.
8. تُمرر الصورة النقطية الجديدة للمكوّن ثم إلى المستخدم.

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

الخلاصة

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

ترجمة -وبتصرّف- للمقال Braces to Pixels لصاحبه Greg Whitwort.

اقرأ أيضًا

• تنسيقات المتصفحات المخصصة ودعمها وأداءها في CSS
• تنسيق الصور في CSS
• التنسيقات الأساسية للعناصر في CSS
• تنسيق الخلفيات Backgrounds في CSS

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

الفرق بين normalize.css و reset.css

الفرق الأساسي بين مكتبة normalize.css ومكتبة reset.css هو أن الأولى تضبط بعض الأنماط لتوحيدها في جميع المتصفحات، بينما تُزيل الثانية جميع الأنماط الافتراضية من العناصر، مما يعني أنك ستضطر لكتابة جميع القواعد من الصفر.

مثال: استخدام Eric Meyer's reset.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,GoalKicker.com – CSS Notes for Professionals 224
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

مزيد من المعلومات حول Eric Meyer's reset.css.

مثال: استخدام normalize.css

/**
* 1. توحيد نوع الخط في جميع المتصفحات
* 2. تصحيح ارتفاع السطر وتوحيده في جميع المتصفحات
* 3. ‫منع تعديل حجم الخط عند تغيير اتجاه العرض في متصفح IE و Safari
*/
/* Document
========================================================================== */
html {
    font-family: sans-serif; /* 1 */
    line-height: 1.15; /* 2 */
    -ms-text-size-adjust: 100%; /* 3 */
    -webkit-text-size-adjust: 100%; /* 3 */
}

/*
========================================================================== */
/**
* إزالة الهوامش
*/
body {
    margin: 0;
}
/**
* تصحيح طريقة العرض
*/
article,
aside,
footer,
header,
nav,
section {
    display: block;
}
/**
* تصحيح حجم الخط والهوامش
*/
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

التحايل على متصفح Internet Explorer

دعم القاعدة display: inline-block في متصفح IE6 و IE7

القاعدة display: inline-block غير مدعومة في متصفحات IE6 و IE7، ولكن من الممكن الحصول على سلوك مماثل لسلوكها عن طريق تطبيق الشيفرة التالية:

zoom: 1;
*display: inline;

• تُشغِّل الخاصية zoom ميزة hasLayout للعناصر، وهي متاحة فقط في متصفح Internet Explorer.
• تُطبق الخاصية display* القاعدة المحددة فقط على المتصفحات التي تتأثر بالخاصية zoom.

وضع التباين العالي

أُضيف محدد الوسائط ms-high-contrast- في متصفحات Internet Explorer ابتداءً من الإصدار العاشر والإصدارات التي تليه، مما يسمح للمبرمج بضبط الأنماط بناءّ على ما إذا كان المستخدم يستخدم وضع التباين العالي أم لا.

للمحدد ms-high-contrast- ثلاث حالات هي: active، وblack-on-white، وwhite-on-black.

مثال

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
    .header {
        background: #fff;
        color: #000;
    }
}

في هذا المثال يتغير لون خلفية العنصر header إلى اللون الأبيض ولون الكتابة للون الأسود إذا كان وضع التباين العالي مُفعَّلًا وفي الحالة black-on-white.

مثال

@media screen and (-ms-high-contrast: white-on-black) {
    .header {
        background: #000;
        color: #fff;
    }
}

في هذا المثال يتغير لون خلفية العنصر header إلى اللون الاسود ولون الكتابة للون الأبيض إذا كان وضع التباين العالي مُفعَّلًا وفي الحالة white-on-black.

لمزيد من المعلومات زر توثيق مايكروسوفت.

استهداف متصفحات IE6 و IE7 فقط

لاستهداف متصفحات IE6 و IE7 فقط يجب بدء الخواص بالعلامة (*)

مثال

.hide-on-ie6-and-ie7 {
    *display: none;
}

استهداف متصفح IE8 فقط

لاستهداف متصفح IE8 فقط يجب وضع جميع المُحددات داخل الاستعلام ‎@media \0 screen { }‎

مثال

@media \0 screen {
    .hide-on-ie8 {
        display: none;
    }
}

أداء المتصفحات

استخدام الخصائص transform و opacity لتجنب تنبيه التخطيط

تغيير بعض الخصائص في CSS يُنبِّه المتصفح لإعاده حساب القيم النهائية للأنماط و التخطيط، مما يتسبب في تبطيء تحميل الصفحة.

مثال: التحريك باستخدام الخواص left و top

#box {
    left: 0;
    top: 0;
    transition: left 0.5s, top 0.5s;
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: gray;
}
#box.active {
    left: 100px;
    top: 100px;
}

اطلع على تجربة حية لهذا المثال على JSFiddle.

تستغرق الصفحة حوالي 11.7 ملي ثانية للتحميل، ومن ثم تستغرق 9.8 ملي ثانية لإعادة رسم الصندوق في الموضع الجديد.

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

#box {
    left: 0;
    top: 0;
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: gray;
    transition: transform 0.5s;
    transform: translate3d(0, 0, 0);
}
#box.active 
    transform: translate3d(100px, 100px, 0);
}

اطلع على تجربة حية لهذا المثال على JSFiddle.

تستغرق الصفحة حوالي 1.3 ملي ثانية للتحميل، ومن ثم تستغرق 2.0 ملي ثانية لإعادة رسم الصندوق في الموضع الجديد.

ترجمة -وبتصرف- للفصول Browser Support & Prefixes - Normalizing Browser Styles - Internet Explorer Hacks - Performance من كتاب CSS Notes for Professionals

الدوال (Functions)

الدالة ()calc

تسمح الدالة ()calc بإجراء عمليات حسابية على قيم خاصيات CSS، ويمكن استخدامها في أي موضع يُسمَح فيه باستخدام أنواع البيانات <length> و <percentage> و <angle> و <time> و <number> و <integer>.

استخدام دالة ()calc لحساب عرض الحاوية

#div1 {
    position: absolute;
    left: 50px;
    width: calc(100% - 100px);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center
}

استخدام الدالة ()calc لتحديد موضع صورة الخلفية

background-position: calc(50% + 17px) calc(50% + 10px), 50% 50%;

استخدام الدالة ()calc لحساب ارتفاع العنصر

height: calc(100% - 20px);

لمزيد من المعلومات انظر توثيق calc.

الدالة ()attr

تستخدم الدالة ()attr للحصول على قيمة إحدى خاصيات العنصر المُحدَّد واستخدامها في أنماط CSS، ويمكن استعمالها أيضًا على العناصر الزائفة (pseudo-elements) وفي هذه الحالة ستُستخدَم قيمة خاصية العنصر الأصل.

مثال

• ملف HTML

  <blockquote data-mark='"'></blockquote>

• ملف CSS

  blockquote[data-mark]::before,
  blockquote[data-mark]::after {
      content: attr(data-mark);
  }

لمزيد من المعلومات انظر توثيق attr.

الدالة ()var

تستخدم الدالة ()var للوصول لمتغيرات CSS.

مثال

:root {
    --primary-color: blue;
}

selector {
    color: var(--primary-color);
}

لمزيد من المعلومات انظر توثيق var.

الدالة radial-gradient()‎

تستخدم الدالة radial-gradient()‎ لإنشاء تدرج لوني بين لونين أو أكثر على شكل أشعة تبدأ من المركز، ويمكن أن يكون شكلها دائريًا أو على شكل قطع ناقص.

مثال

radial-gradient(red, orange, yellow);

لمزيد من المعلومات انظر توثيق radial-gradient.

الدالة linear-gradient

تستخدم الدالة linear-gradient()‎ لإنشاء تدرج لوني بين لونين أو أكثر على امتداد خط مستقيم،

مثال

linear-gradient( 0deg, red, yellow 50%, blue);

لمزيد من المعلومات انظر توثيق linear-gradient.

المتغيرات: الخاصيات المُخصصة في CSS

أسماء الخاصيات التي تُسبَق بشرطتين --، مثل ‎--example-name، تُمثِّل الخاصيات المخصصة (custom properties) التي تُسنَد لها قيمةٌ يمكن إعادة استخدامها في المستند عبر الدالة var()‎.

مثال

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

:root {
    --red: #b00;
    --blue: #4679bd;
    --grey: #ddd;
}

.Bx1 {
    color: var(--red);
    background-color: var(--grey);
    border: 1px solid var(--red);
}

مثال

:root {
    --W200: 200px;
    --W100: 10px;
}

.Bx2 {
    width: var(--W200);
    height: var(--W200);
    margin: var(--W10);
}

إعادة تعريف قيم المتغيرات

• ملف HTML

  <a class="button">Button Green</a>
  <a class="button button_red">Button Red</a>
  <a class="button">Button Hovered On</a>

• ملف CSS

  .button {
      --color: green;
      padding: .5rem;
      border: 1px solid var(--color);
      color: var(--color);
  }

  .button:hover {
      --color: blue;
  }

  .button-red {
      --color: red;
  }

النتيجة

قواعد استخدام المتغيرات في CSS

• يجب أن تحتوي أسماء المتغيرات على الحروف وعلامة (-) فقط.

  /* Invalid variables names */
  --123color: blue;
  --#color: red;
  --bg_color: yellow
  --$width: 100px;

  /* Valid variable names */
  --color: red;
  --bg-color: yellow
  --width: 100px

• اسماء المتغيرات حساسة لحالة الأحرف

  /* The variable names below are all different variables */
  --pcolor: ;
  --Pcolor: ;
  --pColor: ;

• يجب أن يكون لكل متغير قيمة (حرف المسافة (space) قيمة صالحة للمتغير).

  /* Invalid */
  --color:;

  /* Valid */
  --color: ; /* space is assigned */

• متغيرات CSS لا تدعم التسلسل، أي لا يمكن استخدام الدالة var()‎ داخل دالة أخرى.

  /* Invalid */
  .logo{
      --logo-url: 'logo';
      background: url('assets/img/' var(--logo-url) '.png');
  }

  /* Invalid */
  .logo{
      --logo-url: 'assets/img/logo.png';
      background: url(var(--logo-url));
  }

  /* Valid */
  .logo{
      --logo-url: url('assets/img/logo.png');
      background: var(--logo-url);
  }

• يجب وضع الوحدات داخل تعريف المتغير

  /* Invalid */
  --width: 10;
  width: var(--width)px;

  /* Valid */
  --width: 10px;
  width: var(--width);

  /* Valid */
  --width: 10;
  width: calc(1px * var(--width)); /* multiply by 1 unit to convert */
  width: calc(1em * var(--width));