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

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

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، لتتكيّف ديناميكيًا مع التصميم الجديد ضمن طلب البحث عن الوسائط.

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

تصميم التطبيقات لتتوافق مع المظهر الداكن

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

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

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

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

أظهرت دراسة أجريت عام 2018 على نظام Android بشأن المظاهر الداكنة أنّ استخدامها يؤدي إلى توفير استهلاك الطاقة بنسبة تصل إلى %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، الذي يتضمّن قيمة تلقائية لخاصية flex-direction هي "row".

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

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

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

مشاهدة العرض التوضيحي على Codepen (يجب تفعيل علامة في Canary).

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

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

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

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

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

تتيح العلامة أيضًا ميزات "أدوات مطوّري البرامج في 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، وهو 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 DevTools للمساعدة في تصحيح الأخطاء وإنشاء نماذج أولية لتطبيقات تمتد على الشاشة مباشرةً في المتصفح.

الخاتمة

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

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

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

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

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

web.dev/learnCSS

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

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

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