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

1. قبل البدء

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

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

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

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

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

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

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

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

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

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

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

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

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

ما ستنشئه

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

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

ما ستتعلمه

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

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

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

المتطلبات

• الإصدار 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> تلقائيًا وجهات لوحة المفاتيح أو قارئ الشاشة.

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

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

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

تصاميم CSS Grid

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

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

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

<main>

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

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

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

<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

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

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