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

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

Una Kravets

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

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

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

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

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

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

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

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

المصدر: Web Design Museum.

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

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

الاستجابة للمستخدم

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

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

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

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

prefers-reduced-motion

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

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

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

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

prefers-color-scheme

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

هذا القدر من المرونة هو شيء غير ممكن مع الاستعلامات عن الوسائط وحدها.

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

يتطلّب ذلك استخدام القاعدة @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).

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

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

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

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

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

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

الأنماط المحدودة النطاق

للاستفادة من طلبات البحث عن الحاويات، استخدِم الأنماط ذات النطاق المحدّد مع @scope للحدّ من مدى وصول أدوات الاختيار.

تم تصميم الشكل في الأصل من قِبل ميريام سوزان.

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

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

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

يتيح لك تحديد النطاق إنشاء محدّدات "على شكل حلقة"، حيث يمكنك تحديد حدّ أعلى وحدّ أدنى. تتم مطابقة أدوات الاختيار المضمّنة في القاعدة @scope بين هذين الحدَّين.

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

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

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

مخطّط بياني من Microsoft Edge Explainers.

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

يمكن أن يساعدنا هنا استعلام عن الوسائط تجريبي لتوسيع الشاشة. ويعمل حاليًا على النحو التالي: @media (spanning: <type of fold>). يُنشئ العرض التوضيحي تنسيق شبكة يتضمّن عمودَين: أحدهما بعرض --sidebar-width، وهو 5rem تلقائيًا، والآخر هو 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.

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

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