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

1. قبل البدء

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

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

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

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

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

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

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

طلبات البحث عن الوسائط

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

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

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

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

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

ما الذي ستنشئه

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

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

المعلومات التي ستطّلع عليها

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

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

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

المتطلبات

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

2. الإعداد

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

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

إجراء مقترَح: استخدام أداة الترميز

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

الإجراء البديل: العمل محليًا

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

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

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

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

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

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

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 للحصول على محاذاة وتباعُد مرنة وسريعة الاستجابة
• استخدام السمات المنطقية للتنسيقات التكيُّفية عالميًا
• اكتب استعلامات عن الوسائط للتكيّف بين التنسيقات المكثّفة والفسيحة.

المسافات

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

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

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

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

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

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

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

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

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

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

<main>

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

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

&lt;form&gt;

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;
}

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

<صورة> و [مربّع اختيار] محاذاة

.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=&quot;checkbox&quot;]

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

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

الإجراءات المقترَحة

1. افتح أدوات مطوّري برامج Chrome وابحث عن شارات الشبكة على HTML في لوحة Elements. انقر عليها لتفعيل أدوات تصحيح الأخطاء.
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 نظرًا لتوفُّر مساحة أكبر في إطار العرض. وهذا يعني أنها تبدأ في مساحة صغيرة وصغيرة من المساحة المتروكة، ولكنها الآن تصبح أكثر اتساعًا مع توفر مساحة أكبر.

&lt;form&gt;

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، يجب أن تشير إليك أن هذه الألوان معتمة.

مساحة العرض

@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);
}

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

&lt;fieldset&gt;

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

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

.fieldset-item

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

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

.fieldset-item > الصورة

.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) لتمييزها بلكنة علامتك التجارية. يوفر هذا ملاحظات تجربة المستخدم الجيدة للنموذج، حيث يسلط التفاعل مع المدخلات الضوء على الأيقنة ذات الصلة بها.

&lt;small&gt;

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

إنه نص صغير. ويجب أن يكون هادئًا قليلاً عند مقارنته بالعناوين والفقرات (المحتوى الأساسي).

عناصر التحكّم في الشكل الداكن

:root {
  color-scheme: dark light;
}

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

6- الصور المتحركة التكيُّفية

فرع Git: animations

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

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

تقليل الحركة مقابل عدم وجود حركة

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

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

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

&lt;fieldset&gt;

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 > الصورة

@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

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

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