تصميم الويب سريع الاستجابة الجديد في عالم قائم على المكونات

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

Una Kravets

التصميم سريع الاستجابة اليوم

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

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

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

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

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

الخبر السار هو أنّ المنظومة المتكاملة في تغيُّر مستمر وأنّها تتغيّر بسرعة كبيرة. تتطور لغة CSS، وتوشك على ظهور عصر جديد من التصميم سريع الاستجابة.

نرى أنّ ذلك يحدث كل 10 سنوات تقريبًا. قبل 10 سنوات، وفي الفترة بين عامي 2010 و2012 تقريبًا، شهدنا تغييرًا كبيرًا في التصميم للأجهزة الجوّالة والتصميم سريع الاستجابة وظهور CSS3.

المصدر: متحف تصميم الويب.

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

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

التجاوب مع المستخدم

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

تشمل ميزات الوسائط المفضّلة للمستخدم ما يلي:

• prefers-reduced-motion
• prefers-contrast
• prefers-reduced-transparency
• prefers-color-scheme
• inverted-colors
• والمزيد

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

prefers-reduced-motion

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

باستخدام prefers-reduced-motion، يمكنك تصميم صفحاتك مع وضع حركة مخفّضة في الاعتبار، وإنشاء تجربة محسّنة الحركة للأشخاص الذين لم يتم ضبط الإعدادات المفضّلة لديهم.

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

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

prefers-color-scheme

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

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

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

تصميم يتناسب مع المظهر الداكن

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

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

يقدّم التصميم المتعدد الأبعاد بعض الإرشادات الرائعة بشأن التصميم للمظاهر الداكنة.

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

أظهرت دراسة تم إجراؤها في عام 2018 لنظام التشغيل Android حول المظاهر الداكنة توفيرًا في الطاقة بنسبة تصل إلى 60%، وذلك بناءً على سطوع الشاشة وواجهة المستخدم بشكل عام. جاءت الإحصاءات بنسبة 60% من مقارنة شاشة تشغيل YouTube بفيديو متوقف مؤقتًا بنسبة سطوع 100% باستخدام المظهر الداكن لواجهة مستخدم التطبيق مقابل المظهر الفاتح.

يجب دائمًا توفير تجربة ذات مظهر داكن للمستخدمين كلما أمكن ذلك.

التجاوب مع الحاوية

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

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

الاطّلاع على عرض توضيحي حول Codepen (خلف علامة في إصدار Canary).

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

لن يكون هذا القدر من المرونة ممكنًا مع استعلامات الوسائط فقط.

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

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

.card {
  container-type: inline-size;
}

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

أولاً، قم بتعيين الاحتواء على العنصر الأصلي. بعد ذلك، اكتب استعلام @container، لتنسيق أي من العناصر داخل الحاوية بناءً على حجمها، باستخدام min-width أو max-width.

يستخدم الرمز أعلاه max-width، ويضبط الروابط على display:none، بالإضافة إلى تقليل وقت الخط عندما يكون عرض الحاوية أقل من 850px.

بطاقات طلبات البحث عن الحاويات

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

الاطّلاع على عرض توضيحي حول Codepen (خلف علامة في إصدار Canary).

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

.product {
  container-type: inline-size;
}

@container (min-width: 350px) {
  .card-container {
    padding: 0.5rem 0 0;
    display: flex;
  }

  .card-container button {
    /* ... */
  }
}

عندما تكون المساحة على الأقل 350px في الشبكة، يصبح تنسيق البطاقة أفقيًا من خلال ضبطه على "display: flex" الذي يحتوي على اتجاه مرن تلقائي لـ "الصف".

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

المزج بين طلبات البحث عن الحاويات مع طلبات البحث عن الوسائط

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

الاطّلاع على عرض توضيحي حول Codepen (خلف علامة في إصدار Canary).

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

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

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

استخدام طلبات البحث للحاوية اليوم

هذه الإصدارات التجريبية متاحة الآن لتشغيلها خلف علامة في Chrome Canary. انتقِل إلى about://flags في إصدار Canary وفعِّل علامة #enable-container-queries. سيؤدي ذلك إلى إتاحة القيم الخاصة بـ @container وinline-size وblock-size للسمة contain وتنفيذ شبكة LayoutNG Grid.

وتعمل العلامة أيضًا على تفعيل الميزات المقابلة في "أدوات مطوري البرامج في Chrome". تعرَّف على كيفية فحص طلبات البحث المتعلقة بالحاويات وتصحيح أخطائها في "أدوات مطوري البرامج".

أنماط النطاق

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

شخصية من تصميم ميريام سوزان.

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

/* @scope (<root>#) [to (<boundary>#)]? { … } */

@scope (.tabs) to (.panel) {
  :scope { /* targeting the scope root */ }
  .light-theme :scope .tab { /* contextual styles */ }
}

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

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

التجاوب مع شكل الجهاز

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

رسم بياني من Microsoft Edge Explainers

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

يمكن أن يساعدنا استعلام عن الوسائط التجريبي لتوسيع الشاشة في هذه الحالة. وهو يعمل حاليًا على النحو التالي: @media (spanning: <type of fold>). يتم في العرض التوضيحي إعداد تنسيق شبكي من عمودَين: بعرض أحدهما --عرض شريط جانبي، والذي يبلغ 5 سنتيمتر تلقائيًا، والآخر 1fr. عند عرض التنسيق على شاشة مزدوجة تحتوي على طيّ رأسي واحد، يتم تعديل قيمة --sidebar-width بقيمة البيئة في الجزء المرئي من الصفحة على اليسار.

:root {
  --sidebar-width: 5rem;
}

@media (spanning: single-fold-vertical) {
  --sidebar-width: env(fold-left);
}

main {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
}

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

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

الخلاصة

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

هذا هو التصميم الجديد المتجاوب.

إنه يجمع بين تخطيط الماكرو والتخطيط المصغَّر، وفوق كل ذلك، يأخذ في الاعتبار تخصيص المستخدم وشكل الجهاز.

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

العصر التالي من التصميم سريع الاستجابة هنا، ويمكنك بالفعل البدء في استكشافه بنفسك.

web.dev/learnCSS

في الوقت الحالي، إذا كنت تريد الانتقال إلى مستوى أعلى في لعبة CSS أو مراجعة بعض الأساسيات، سيطلق فريقي دورة CSS جديدة ومجانية بالكامل ومرجع على web.dev. يمكنك الوصول إليها عبر web.dev/learnCSS.

آمل أن تكون قد استمتعت بهذه النظرة العامة حول العصر التالي من التصميم سريع الاستجابة، وبعض الأساسيات التي ستنتج عنها، وآمل أيضًا أن تكون متحمسًا بقدر ما أنا متحمس بشأن ما يعنيه ذلك لمستقبل تصميم الويب.

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