إنشاء واجهات تتكيّف حسب المستخدم من خلال طلبات بحث عن الوسائط المفضّلة

1. قبل البدء

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

إعدادات المستخدم المفضّلة

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

في ما يلي بعض الأمثلة على الإعدادات المفضّلة للمستخدمين التي يمكن استخدامها من خلال CSS:

• حجم إطار عرض الجهاز
• اتجاه الجهاز (عمودي | أفقي)
• حجم الخط
• متصل بالإنترنت / غير متصل بالإنترنت
• جودة الشبكة
• الألوان (فاتح | داكن)
• الصور المتحركة في الواجهة (مفعَّلة | مخفَّضة)
• جودة الإدخال (الماوس | اللمس | قلم الشاشة)
• اتجاه المستند ووضع الكتابة (من اليسار إلى اليمين، ومن الأعلى إلى الأسفل، والمزيد)
• وضع العرض (ملء الشاشة | مستقل | واجهة مستخدم بسيطة | متصفّح)

في ما يلي بعض الأمثلة على تفضيلات المستخدمين التي ستتوفّر قريبًا في CSS:

• البيانات المخفَّضة / الوضع البسيط
• نطاق الألوان
• التباين (أقل | أكثر | تقليل)
• الألوان (يفرض ألوان المستخدم في الصفحة)
• الشفافية (مفعَّلة | منخفضة)

الاستعلامات عن الوسائط

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

التكيّف مع المستخدم

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

المتطلبات الأساسية

• معرفة HTML وCSS
• معرفة بأدوات المطوّرين، مثل أدوات مطوّري برامج Google Chrome

ما ستنشئه

في هذا الدرس التطبيقي حول الترميز، ستنشئ نموذجًا يتكيّف مع المستخدمين وفقًا لما يلي:

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

ما ستتعلّمه

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

• إنشاء مظهرَين فاتح وداكن
• إنشاء نماذج متحركة يسهل الوصول إليها
• نماذج Layout المتجاوبة
• استخدام الوحدات النسبية والسمات المنطقية

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

المتطلبات

• الإصدار 89 من Google Chrome أو الإصدارات الأحدث، أو المتصفّح المفضّل لديك

2. طريقة الإعداد

الحصول على الرمز

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

إجراء يُنصح به: استخدام Codepen

1. افتح علامة تبويب جديدة في المتصفّح.
2. انتقِل إلى https://codepen.io/argyleink/pen/abBMeeq.
3. إذا لم يكن لديك حساب، أنشئ حسابًا لحفظ عملك.
4. انقر على Fork.

البديل: العمل محليًا

إذا أردت تنزيل الرمز والعمل على جهازك، يجب أن يكون لديك الإصدار 12 أو إصدار أحدث من Node.js، وأن تكون أداة تعديل الرموز جاهزة للاستخدام.

استخدام Git

1. انتقِل إلى https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces
2. انسخ المستودع إلى مجلد.
3. يُرجى ملاحظة أنّ الفرع التلقائي هو beginning.

استخدام الملفات

تنزيل الرمز المصدر

1. فكّ ضغط ملف zip الذي تم تنزيله في مجلد.

تشغيل المشروع

استخدِم دليل المشروع الذي تم إنشاؤه في أي من الخطوات أعلاه، ثم:

1. شغِّل npm install لتثبيت التبعيات المطلوبة لتشغيل الخادم.
2. شغِّل npm start لبدء الخادم على المنفذ 3000.
3. افتح علامة تبويب جديدة في المتصفّح.
4. انتقِل إلى http://localhost:3000.

لمحة عن HTML

سيتناول هذا الدرس جوانب HTML المستخدَمة لدعم التفاعلية القابلة للتكيّف مع المستخدم. تركّز ورشة العمل هذه على خدمات مقارنة الأسعار (CSS). يُرجى مراجعة رمز HTML المقدَّم إذا كنت مبتدئًا في إنشاء النماذج أو المواقع الإلكترونية. يمكن أن تكون خيارات عناصر HTML مهمة عندما يتعلق الأمر بإمكانية الوصول والتخطيط.

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

3- التفاعلات التكيُّفية

فرع Git: beginning

في نهاية هذا القسم، سيتم تعديل نموذج الإعدادات ليتوافق مع:

• جهاز تحكّم في الألعاب + لوحة مفاتيح
• الماوس واللمس
• قارئ شاشة أو تكنولوجيا مساعِدة مشابهة

سمات HTML

يعد HTML المتوفر في التعليمات البرمجية المصدر نقطة بداية رائعة لأنه تم بالفعل اختيار العناصر الدلالية للمساعدة في تجميع مدخلات النموذج وترتيبها وتسميتها.

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

تجميع المدخلات

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

ترتيب العناصر

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

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

اعتاد مستخدمو الويب على التنقّل في النماذج باستخدام مفتاح Tab، وهو ما يتولّى المتصفّح معالجته إذا قدّمت عناصر HTML المتوقّعة. إنّ استخدام عناصر مثل <button> و<input> و<h2> و<label> يصبح تلقائيًا وجهات للوحة المفاتيح أو قارئ الشاشة.

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

style.css

input {
  outline-offset: 5px;
}

اقتراحات

1. راجِع عناصر HTML المستخدَمة في index.html.
2. انقر على صفحة العرض التوضيحي في المتصفّح.
3. اضغط على مفتاح tab ومفاتيح shift+tab لنقل التركيز على العناصر في النموذج.
4. استخدِم لوحة المفاتيح لتغيير قيم أشرطة التمرير ومربّعات الاختيار.
5. يمكنك ربط جهاز تحكّم في الألعاب يعمل بالبلوتوث ونقل التركيز على العناصر في النموذج.

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

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

هل لاحظت كيف تحصل على ميزتَين لتجربة المستخدم لربط التصنيفات والمدخلات؟

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

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

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

غير مرتبطة: لا توجد سمات تربط العناصر

<input type="checkbox">
<label>...</label>

مرتبطة: سمات تربط العناصر

<input type="checkbox" id="voice-notifications" name="voice-notifications">
<label for="voice-notifications">...</label>

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

اقتراحات

1. مرِّر مؤشر الماوس فوق تصنيف ولاحظ تمييز مربّع الاختيار.
2. افحص عنصر تصنيف باستخدام "أدوات مطوّري برامج Chrome" لتصوّر مساحة السطح القابلة للنقر والتي يمكنها تحديد مربّع الاختيار.

التفاعل مع قارئ الشاشة

يمكن للتكنولوجيا المساعِدة التفاعل مع هذا النموذج، ويمكنها جعل تجربة المستخدم أكثر سلاسة باستخدام بعض سمات HTML.

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

index.html

<picture aria-hidden="true">

الآن تتجاوز برامج قراءة الشاشة العنصر الذي كان مرئيًا فقط.

يحتوي عنصر شريط التمرير input[type="range"] على سمة ARIA خاصة: aria-labelledby="media-volume". يوفّر ذلك تعليمات خاصة لبرنامج قراءة الشاشة من أجل تحسين تجربة المستخدم.

اقتراحات

1. استخدِم تكنولوجيا قارئ الشاشة في نظام التشغيل لنقل التركيز في النموذج.
2. نزِّل بعض برامج قارئ الشاشة وجرِّبها على النموذج.

4. التنسيقات التكيّفية

فرع Git: layouts

في نهاية هذا القسم، ستتضمّن صفحة الإعدادات ما يلي:

• إنشاء نظام تباعد باستخدام خصائص مخصّصة ووحدات نسبية للمستخدم
• كتابة CSS Grid لمحاذاة وتباعد مرن ومتجاوب
• استخدام السمات المنطقية للتنسيقات المتوافقة مع جميع اللغات
• كتابة الاستعلامات عن الوسائط للتكيّف بين التنسيقات المدمجة والواسعة

التباعد

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

الخصائص المخصّصة

تعتمد ورشة العمل هذه على مجموعة من سبعة أحجام خصائص مخصصة.

• ضَع هذه العناصر في أعلى "style.css":

style.css

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

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

أنماط الصفحات

بعد ذلك، عليك ضبط بعض أنماط المستندات وإزالة الهوامش من العناصر وضبط الخط على خط sans-serif جميل.

• أضِف ما يلي إلى style.css:

style.css

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;  
  padding-block-start: var(--space-xs);
  padding-block-end: var(--space-xs);
}

هذا هو أول استخدام لك للخصائص المخصّصة للمسافات. هذه هي بداية رحلتك في الفضاء.

أسلوب الخط

الخط في هذا التنسيق تكيُّفي. ستستخدم الكلمة الرئيسية system-ui أي خط واجهة مثالي يحدّده نظام تشغيل المستخدم.

body {
  font-family: system-ui, sans-serif;
}

h1,h2,h3 { 
  font-weight: 500;
}

small {
  line-height: 1.5;
}

تُعدّ أنماط h1 وh2 وh3 ثانوية وأسلوبية. ومع ذلك، يحتاج العنصر small إلى السمة line-height الإضافية عند التفاف النص. وإلا ستكون متجمعة للغاية.

السمات المنطقية

يُرجى ملاحظة أنّ السمة padding في body تستخدم سمات منطقية (block-start وblock-end) لتحديد الجانب. سيتم استخدام السمات المنطقية على نطاق واسع في بقية الدرس التطبيقي حول الترميز. وهي أيضًا، مثل وحدة rem، تتكيّف مع المستخدم. يمكن ترجمة هذا التنسيق إلى لغة أخرى، وضبطه على اتجاهات الكتابة والمستندات الطبيعية التي اعتاد عليها المستخدم بلغته الأم. تتيح السمات المنطقية إمكانية استخدام ذلك من خلال تعريف واحد فقط للمساحة أو الاتجاه أو المحاذاة.

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

تتيح لك السمات المنطقية الوصول إلى المزيد من المستخدمين باستخدام أنماط أقل للكتابة.

تنسيقات شبكة CSS

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

في ما يلي لقطة شاشة لـ "أدوات مطوّري البرامج في Chrome" التي تراكب كل تنسيق شبكة CSS في وقت واحد:

1. يمكنك متابعة الخطوات من خلال إضافة كل من الأنماط التالية إلى style.css:

<main>

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);
}

يضع Grid تلقائيًا كل عنصر فرعي في صف خاص به، ما يجعله رائعًا لتكديس العناصر. وتتوفّر أيضًا ميزة إضافية تتمثّل في استخدام gap. في السابق، ضبطت السمة margin: 0 على جميع العناصر باستخدام أداة الاختيار *، وهو أمر مهم الآن عند استخدام السمة gap للمسافات. لا تقتصر الفجوة على مكان واحد لإدارة المساحة في حاوية، بل إنّها مرتبطة بالتدفق.

<form>

form {
  max-width: 89vw;
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  align-items: flex-start;
  grid-template-columns: 
    repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
}

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

• يوفّر max-width قيمة لخوارزمية التنسيق لاستخدامها عند تحديد الحجم الذي يمكن أن يكون عليه.
• يستخدم "gap" خاصية مخصصة ويمرّر قيمة row-gap مختلفة عن column-gap.
• تم ضبط السمة align-items على flex-start لعدم تمديد ارتفاعات العناصر.
• تتضمّن السمة grid-template-columns بعض البُنى المعقدة، ولكن الهدف منها بسيط، وهو الحفاظ على عرض الأعمدة بمقدار 35ch وألا يقل عن 10ch، ووضع العناصر في أعمدة إذا كانت هناك مساحة، وإلا فمن الأفضل استخدام الصفوف.

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

<section>

section {
  display: grid;
  gap: var(--space-md);
}

يجب أن يكون كل قسم عبارة عن شبكة من الصفوف مع مسافة متوسطة بين العناصر الثانوية.

<header>

header {
  display: grid;
  gap: var(--space-xxs);
}

يجب أن يكون كل عنوان عبارة عن شبكة من الصفوف مع مسافة صغيرة جدًا بين العناصر الثانوية.

<fieldset>

fieldset {
  padding: 0;
  display: grid;
  gap: 1px;
  border-radius: var(--space-sm);
  overflow: hidden;
}

هذا التنسيق مسؤول عن إنشاء مظهر يشبه البطاقة وتجميع المدخلات معًا. يصبح overflow: hidden وgap: 1px واضحَين عند إضافة لون في القسم التالي.

.fieldset-item

.fieldset-item {
  display: grid;
  grid-template-columns: var(--space-lg) 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}

هذا التنسيق مسؤول عن توسيط الرمز ومربّع الاختيار مع التصنيفات وعناصر التحكّم المرتبطة بهما. ينشئ العمود الأول من نموذج الشبكة، var(--space-lg)، عمودًا أوسع من الرمز، بحيث يكون للعنصر الفرعي مكان يتم توسيطه فيه.

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

‎.fieldset-item <picture>

.fieldset-item > picture {
  block-size: var(--space-xl);
  inline-size: var(--space-xl);
  clip-path: circle(50%);
  display: inline-grid;
  place-content: center;
}

هذا التنسيق مسؤول عن الإعدادات وحجم دائرة الرمز وإنشاء شكل دائري وتوسيط الصورة داخله.

<picture> & [checkbox] alignment

.fieldset-item > :is(picture, input[type="checkbox"]) {
  place-self: center;
}

يعزل هذا التنسيق التوسيط لعناصر الصورة ومربّع الاختيار باستخدام المحدّد الزائف :is.

3. استبدِل أداة الاختيار picture > svg بـ .fieldset-item svg على النحو التالي:

.fieldset-item <svg>

.fieldset-item svg {
  block-size: var(--space-md);
}

يؤدي هذا إلى ضبط حجم رمز svg على قيمة من نظام الحجم.

.sm-stack

.sm-stack {
  display: grid;
  gap: var(--space-xs);
}

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

input[type="checkbox"]

input[type="checkbox"] {
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
}

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

اقتراحات

1. افتح "أدوات مطوّري برامج Chrome" وابحث عن شارات الشبكة في HTML ضمن لوحة العناصر. انقر عليها لتفعيل أدوات تصحيح الأخطاء.
2. افتح "أدوات مطوّري برامج Chrome" ومرِّر مؤشر الماوس فوق فجوة في لوحة الأنماط.
3. افتح "أدوات مطوّري برامج Chrome"، وانتقِل إلى لوحة الأنماط، ثم بدِّل من الأنماط إلى التنسيقات. يمكنك استكشاف هذه المنطقة من خلال تبديل إعداداتها وتفعيل التنسيقات.

الاستعلامات عن الوسائط

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

ملاحظة: يجب إضافة CSS لكل قسم بعد المحدّد الذي يتم تعديله في style.css.

<main>

@media (min-width: 540px) {
  main {
    padding: var(--space-lg);
  }
}

@media (min-width: 800px) {
  main {
    padding: var(--space-xl);
  }
}

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

<form>

form {
  --repeat: auto-fit;
  grid-template-columns: 
    repeat(var(--repeat), minmax(min(10ch, 100%), 35ch));
}

@media (orientation: landscape) and (min-width: 640px) {
  form {
    --repeat: 2;
  }
}

كان النموذج متجاوبًا مع حجم إطار العرض من خلال السمة auto-fit، ولكن عند الاختبار على جهاز جوّال، لا يؤدي تدوير الجهاز إلى الوضع الأفقي إلى وضع مجموعتَي النماذج جنبًا إلى جنب. التكيّف مع سياق العرض الأفقي هذا باستخدام الاستعلام عن الوسائط orientation والتحقّق من عرض إطار العرض الآن، إذا كان الجهاز في الوضع الأفقي وبعرض 640 بكسل على الأقل، يمكنك فرض عمودين عن طريق تبديل الخاصية المخصصة --repeat إلى رقم بدلاً من الكلمة الرئيسية auto-fit.

.fieldset-item

@media (min-width: 540px) {
  .fieldset-item {
    grid-template-columns: var(--space-xxl) 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl) var(--space-md) 0;
  }
}

يُعد الاستعلام عن الوسائط هذا توسيعًا آخر للمسافات عندما تتوفر مساحة أكبر في إطار العرض. يوسّع نموذج الشبكة العمود الأول باستخدام خاصية مخصّصة أكبر (var(--space-xxl)) في النموذج. يتم أيضًا زيادة المساحة المتروكة إلى خصائص مخصّصة أكبر.

اقتراحات

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

5- اللون التكيُّفي

فرع Git: colors

في نهاية هذا القسم، سيتمكّن نموذج الإعدادات من:

• التكيّف مع الإعدادات المفضّلة للألوان الداكنة والفاتحة
• استخدام ألوان مستمَدة من رمز ست عشري للعلامة التجارية
• استخدام ألوان يسهل الوصول إليها

HSL

في القسم التالي، ستنشئ نظام ألوان باستخدام HSL لمساعدتك في إنشاء مظهر فاتح وداكن. ويستند إلى المفهوم الأساسي التالي في CSS: calc().

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

الخصائص المخصّصة

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

لنفترض أنّ لون العلامة التجارية لتطبيقك هو #0af. مهمتك الأولى هي تحويل قيمة اللون الست عشري هذه إلى قيمة لون HSL: hsl(200 100% 50%). يكشف هذا التحويل عن قنوات ألوان علامتك التجارية في HSL، والتي يمكنك استخدام calc() عليها لحساب ألوان العلامة التجارية الداعمة المختلفة.

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

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

قنوات العلامات التجارية

:root {
  --hue: 200;
  --saturation: 100%;
  --lightness: 50%;
}

تم استخراج قنوات HSL الثلاث ووضعها في خصائصها المخصصة.

1. استخدِم السمات الثلاث كما هي وأعِد إنشاء لون العلامة التجارية.

العلامة التجارية

:root {
  --brand: hsl(
    var(--hue) 
    calc(var(--saturation) / 2)
    var(--lightness) 
  );
}

بما أنّ نظام الألوان داكن تلقائيًا، من الأفضل تقليل تشبّع الألوان لاستخدامها على الأسطح الداكنة (وإلا قد تظهر بشكل غير واضح للعين أو يتعذّر الوصول إليها). لتقليل تشبّع لون علامتك التجارية، يمكنك استخدام تدرّج اللون والإضاءة كما هما، ولكن عليك تقليل التشبّع إلى النصف باستخدام بعض عمليات القسمة: calc(var(--saturation) / 2). الآن، أصبح لون علامتك التجارية متوافقًا مع المظهر، ولكن تم تقليل تشبّعه لاستخدامه.

نص

:root {
  --text1: hsl(var(--hue) 15% 85%);
  --text2: hsl(var(--hue) 15% 65%);
}

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

2. بعد إضافة الرمز إلى مشروعك، افتح "أدوات مطوّري برامج Chrome" واستكشِف تغيير قيم القنوات هذه. يمكنك تجربة كيفية تفاعل HSL وقنواته مع بعضها البعض. قد يتطلب ذوقك تشبعًا أكثر أو أقل.

مساحات العرض

:root {
  --surface1: hsl(var(--hue) 10% 10%);
  --surface2: hsl(var(--hue) 10% 15%);
  --surface3: hsl(var(--hue) 5% 20%);
  --surface4: hsl(var(--hue) 5% 25%);
}

النص فاتح جدًا لأنّ الأسطح ستكون داكنة في الوضع الداكن. عندما كانت ألوان النص تستخدم قيم سطوع عالية (%85 وأعلى)، ستستخدم الأسطح قيمًا أقل (%30 وأقل). سيساعد وجود نطاق صحي بين نطاقات الإضاءة بين السطح والنص في ضمان ألوان يسهل على المستخدمين قراءتها.

3. لاحظ كيف تبدأ الألوان باللون الرمادي الداكن مع %10 من السطوع و%10 من التشبع، ثم تصبح أقل تشبعًا عندما تصبح أفتح. كل سطح جديد أفتح بنسبة 5% من السطح السابق. يتم تقليل تشبّع اللون قليلاً في الأسطح الأفتح لونًا. حاول وضع الأسطح كلها على تشبع بنسبة 10٪. هل يعجبك أكثر أم أقل؟

المظهر الفاتح

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

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

العلامة التجارية

@media (prefers-color-scheme: light) {
  :root {
    --brand: hsl(
      var(--hue) 
      var(--saturation)
      var(--lightness) 
    );
  }
}

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

Text

@media (prefers-color-scheme: light) {
  :root {
    --text1: hsl(
      var(--hue) 
      var(--saturation)
      10% 
    );

    --text2: hsl(
      var(--hue) 
      calc(var(--saturation) / 2)
      30%
    );
  }
}

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

Surface

@media (prefers-color-scheme: light) {
  :root {
    --surface1: hsl(var(--hue) 20% 90%);
    --surface2: hsl(var(--hue) 10% 99%);
    --surface3: hsl(var(--hue) 10% 96%);
    --surface4: hsl(var(--hue) 10% 85%);
  }
}

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

استخدام نظام الألوان

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

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

<body>

body {
  background: var(--surface1);
  color: var(--text1);
}

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

<fieldset>

fieldset {
  border: 1px solid var(--surface4);
  background: var(--surface4);
}

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

.fieldset-item

.fieldset-item {
  background: var(--surface3);
}

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

.fieldset-item > picture

.fieldset-item > picture {
  background: var(--surface4);
}

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

‎.fieldset-item svg

.fieldset-item svg {
  fill: var(--text2);
}

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

.fieldset-item:focus-within svg

.fieldset-item:focus-within svg {
  fill: var(--brand);
}

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

<small>

small {
  color: var(--text2);
}

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

عناصر تحكّم داكنة في النماذج

:root {
  color-scheme: dark light;
}

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

6. صورة متحركة تكيُّفية

فرع Git: animations

في نهاية هذا القسم، ستتضمّن صفحة الإعدادات ما يلي:

• التكيّف مع تفضيلات الحركة لدى المستخدم
• الاستجابة لتفاعل المستخدم

الحدّ من الحركة مقابل عدم الحركة

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

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

أنماط التفاعل

<fieldset>

fieldset {
  transition: box-shadow .3s ease;
}

fieldset:focus-within {
  box-shadow: 0 5px 20px -10px hsl(0 0% 0% / 50%);
}

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

.fieldset-item

.fieldset-item {
  transition: background .2s ease;
}

.fieldset-item:focus-within {
  background: var(--surface2);
}

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

.fieldset-item > picture

@media (prefers-reduced-motion: no-preference) {
  .fieldset-item > picture {
    clip-path: circle(40%);
    transition: clip-path .3s ease;
  }

  .fieldset-item:focus-within picture {
    clip-path: circle(50%);
  }
}

إليك صورة متحركة بتنسيق clip-path يمكنك استخدامها فقط إذا لم يكن لدى المستخدم أي إعدادات مفضّلة في ما يتعلّق بتقليل الحركة. يؤدي المحدِّد والأنماط الأولى إلى تقليص مسار اقتصاص الدائرة بنسبة %10 وضبط بعض مَعلمات الانتقال. ينتظر المحدّد والنمط الثانيان تفاعل المستخدمين مع أحد حقول الإدخال، ثم يكبّران حجم دائرة الرمز. تأثير خفي، ولكنه رائع عندما يكون كل شيء على ما يرام.

7. تهانينا

فرع Git: complete

تهانينا، لقد نجحت في إنشاء واجهة تتكيّف مع المستخدم.

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