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

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

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

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

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

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

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

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

prefers-color-scheme

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

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

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

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

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

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

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

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

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

الاستجابة للحاوية

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

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

يعرض هذا المثال مكوّنَين متطابقَين بحجمَين مختلفَين للحاويات، ويشغل كلاهما مساحة في تنسيق تم إنشاؤه باستخدام 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

الأنماط على مستوى النطاق

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

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

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

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

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

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

التوافق مع شكل الجهاز

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

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

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

الخاتمة

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

هذا هو التصميم الجديد المتوافق مع الأجهزة الجوّالة.

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

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

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

web.dev/learnCSS

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

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

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