ساختن واسط‌های کاربر سازگار با کاربر با پُرسمان‌های ترجیح رسانه‌ای

۱. قبل‌از شروع

این روزها کاربران اولویت‌های زیادی را در دستگاه‌هایشان نشان داده‌اند. آن‌ها می‌خواهند سیستم‌عامل و برنامه‌ها ظاهر و حسی شبیه به خودشان داشته باشند. واسط‌های کاربر سازگار با کاربر واسط‌هایی هستند که آماده‌اند از این اولویت‌ها برای بهبود تجربه کاربری استفاده کنند تا کاربر احساس کند در خانه است و واسط متعلق به او است. اگر این کار به‌درستی انجام شود، ممکن است کاربر هرگز متوجه نشود که تجربه کاربری درحال سازگار شدن است یا سازگار شده است.

اولویت‌های کاربر

انتخاب سخت‌افزار دستگاه یک اولویت است، سیستم‌عامل یک انتخاب است، رنگ‌های برنامه و سیستم‌عامل اولویت هستند، و زبان‌های سند برنامه و سیستم‌عامل اولویت هستند. به‌نظر می‌رسد تعداد اولویت‌های کاربر فقط درحال افزایش است. صفحه وب نمی‌تواند به همه چیز دسترسی داشته باشد و دلیل خوبی برای این کار وجود دارد.

در اینجا چند نمونه از اولویت‌های کاربر که می‌تواند توسط CSS استفاده شود آورده شده است:

• اندازه ناحیه نمایش دستگاه
• جهت دستگاه (عمودی | افقی)
• اندازه قلم
• آنلاین / آفلاین
• کیفیت شبکه
• آرایش رنگ‌ها (روشن | تیره)
• پویانمایی‌های میانای کاربری (روشن | کاهش‌یافته)
• کیفیت ورودی (موشواره | لمس | قلم)
• جهت سند و حالت نوشتن (چپ به راست، بالا به پایین، و غیره)
• حالت نمایش (تمام‌صفحه | مستقل | واسط کاربر حداقلی | مرورگر)

در اینجا چند نمونه از اولویت‌های کاربر که به‌زودی به CSS اضافه می‌شود آورده شده است:

• داده کاهش‌یافته / حالت ساده‌شده
• محدوده رنگ
• کنتراست (کمتر | بیشتر | کاهش)
• رنگ‌ها (رنگ‌های کاربر را در صفحه اعمال می‌کند)
• شفافیت (روشن | کاهش‌یافته)

پُرسمان‌های رسانه

CSS و وب ازطریق پرسمان‌های رسانه‌ای، شرایطی اعلانی که درصورت درست بودن آن شرایط حاوی مجموعه‌ای از سبک‌ها است، امکان سازگاری و پاسخ‌گویی را فراهم می‌کنند. رایج‌ترین آن‌ها شرطی برای اندازه نمای دستگاه است: اگر اندازه کمتر از ۸۰۰ پیکسل باشد، در این صورت چند سبک بهتر برای آن مورد وجود دارد.

تطبیق‌پذیر با کاربر

واسط غیرتطبیقی واسطی است که وقتی کاربر از آن بازدید می‌کند هیچ تغییری نمی‌کند و اساساً یک تجربه را بدون امکان تنظیم به همه ارائه می‌دهد. یک میانای سازگار با کاربر می‌تواند پنج ظاهر و سبک مختلف برای پنج کاربر مختلف داشته باشد. عملکرد یکسان است، اما زیبایی‌شناسی بهتر درک می‌شود و قابلیت استفاده از میانای کاربری برای کاربرانی که می‌توانند میانای کاربری را تنظیم کنند آسان‌تر است.

پیش‌نیازها

• دانش HTML و CSS
• دانش ابزارهای توسعه‌دهنده، مانند ابزارهای توسعه‌دهنده Google Chrome

آنچه خواهید ساخت

در این codelab، فرمی تطبیق‌پذیر با کاربر خواهید ساخت که با موارد زیر تطبیق می‌یابد:

• اولویت طرح رنگ سیستم با ارائه طرح رنگ روشن و تیره برای کنترل‌های فرم و عناصر میانای کاربر اطراف
• اولویت‌های حرکت سیستم با ارائه انواع مختلف پویانمایی
• دریچه‌های دید دستگاه کوچک و بزرگ برای ارائه تجربه‌های تلفن همراه و رایانه
• انواع مختلف ورودی مانند صفحه‌کلید، صفحه‌خوان، لمس، و موشواره
• هر زبانی و حالت خواندن/ نوشتن

آنچه خواهید آموخت

در این codelab، با ویژگی‌های وب مدرن آشنا می‌شوید که به شما کمک می‌کند فرمی سازگار با کاربر بسازید. با نحوه انجام این کارها آشنا می‌شوید:

• ساختن زمینه‌های تیره و روشن
• ساختن فرم‌های پویانمایی‌شده و دسترس‌پذیر
• فرم‌های واکنش‌گرای چیدمان
• استفاده از واحدهای نسبی و ویژگی‌های منطقی

این codelab بر میاناهای تطبیق‌پذیر کاربر تمرکز دارد. مفاهیم و بلوک‌های کد غیرمرتبط به‌طور خلاصه توضیح داده شده‌اند و برای شما فراهم شده‌اند تا به‌راحتی کپی و جای‌گذاری کنید.

آنچه نیاز خواهید داشت

• ‫Google Chrome نسخه ۸۹ و بالاتر، یا مرورگر دلخواهتان

۲. راه‌اندازی کردن

دریافت کد

هرچیزی که برای این پروژه نیاز دارید در مخزن GitHub است. برای شروع، باید کد را بگیرید و آن را در محیط توسعه‌دهنده دلخواهتان باز کنید. یا می‌توانید این Codepen را منشعب کنید و از آنجا کار کنید.

توصیه‌شده: استفاده از Codepen

1. زبانه مرورگر جدیدی باز کنید.
2. به https://codepen.io/argyleink/pen/abBMeeq بروید.
3. اگر حساب ندارید، برای ذخیره کردن کارتان حساب ایجاد کنید.
4. روی منشعب کردن کلیک کنید.

جایگزین: کار کردن به‌صورت محلی

اگر می‌خواهید کد را بارگیری کنید و به‌صورت محلی کار کنید، باید نسخه ۱۲ یا بالاتر 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 را اجرا کنید تا سرور در درگاه ۳۰۰۰ شروع شود.
3. زبانه مرورگر جدیدی باز کنید.
4. به http://localhost:3000 بروید.

درباره HTML

این درس جنبه‌هایی از HTML را پوشش می‌دهد که برای پشتیبانی از تعامل‌پذیری تطبیقی با کاربر استفاده می‌شود. این کارگاه به‌طور خاص روی «سرویس مقایسه قیمت» تمرکز دارد. اگر در ساختن فرم یا وب‌سایت تازه‌کار هستید، HTML ارائه‌شده ارزش بررسی دارد. انتخاب عناصر HTML می‌تواند ازنظر دسترس‌پذیری و چیدمان بسیار مهم باشد.

وقتی آماده شروع هستید، این اسکلت چیزی است که به یک تجربه کاربری پویا و تطبیقی تبدیل خواهید کرد.

۳. تعامل‌های تطبیقی

شاخه 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. چند نرم‌افزار صفحه‌خوان را بارگیری و روی فرم امتحان کنید.

۴. طرح‌بندی‌های تطبیقی

شاخه 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 منحصراً برای اندازه‌گذاری واحد کامل خوانا استفاده می‌کنید که سازگار می‌شود و اولویت کاربر را درنظر می‌گیرد.

سبک‌های صفحه

سپس، باید چند سبک سند تنظیم کنید، حاشیه‌ها را از عناصر بردارید، و قلم را روی سن‌سریف زیبا تنظیم کنید.

• مورد زیر به 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) برای مشخص کردن طرف استفاده می‌کند. در بقیه این codelab، از ویژگی‌های منطقی به‌طور گسترده استفاده خواهد شد. آن‌ها نیز مانند واحد rem، با کاربر سازگار می‌شوند. این چیدمان را می‌توان به زبان دیگری ترجمه کرد و آن را روی جهت‌های طبیعی نوشتن و سند تنظیم کرد که کاربر در زبان مادری خود به آن عادت دارد. ویژگی‌های منطقی پشتیبانی از این مورد را تنها با یک تعریف از فضا، جهت، یا تراز باز می‌کنند.

Grid و flexbox ازقبل وابسته به جریان هستند، یعنی سبک‌های نوشته‌شده برای یک زبان بافتی خواهند بود و به‌طور مناسب برای زبان‌های دیگر اعمال می‌شوند. جهت‌داری تطبیقی؛ محتوا نسبت به جهت‌داری سند جریان می‌یابد.

ویژگی‌های منطقی به شما امکان می‌دهد با نوشتن سبک‌های کمتر به کاربران بیشتری دسترسی پیدا کنید.

طرح‌بندی‌های شبکه‌ای CSS

grid CSS property ابزار چیدمان قدرتمندی است که ویژگی‌های زیادی برای انجام تکالیف پیچیده دارد. چند چیدمان شبکه‌ای ساده و یک چیدمان پیچیده خواهید ساخت. همچنین از بیرون به داخل، از چیدمان‌های کلان به چیدمان‌های خرد کار خواهید کرد. ویژگی‌های سفارشی فاصله‌گذاری شما نه فقط به‌عنوان مقادیر حاشیه داخلی یا حاشیه، بلکه به‌عنوان اندازه‌های ستون، شعاع‌های حاشیه، و غیره اهمیت پیدا خواهند کرد.

در اینجا نماگرفتی از Chrome DevTools آمده است که هر طرح‌بندی CSS grid را به‌طور هم‌زمان هم‌پوشانی می‌کند:

1. با افزودن هریک از سبک‌های زیر به style.css، مراحل را دنبال کنید:

<main>

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

Grid به‌طور پیش‌فرض هر عنصر فرزند را در ردیف خودش قرار می‌دهد، که این ویژگی آن را برای چیدن عناصر روی هم عالی می‌کند. همچنین مزیت اضافه‌شده استفاده از gap را دارد. قبلاً، margin: 0 را روی همه عناصر با انتخابگر * تنظیم کرده‌اید که اکنون مهم است زیرا از gap برای فاصله‌گذاری استفاده می‌کنید. 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 و بررسی عرض ناحیه نمایش، با این بافت افقی سازگار شوید. اکنون، اگر دستگاه افقی باشد و حداقل ۶۴۰ پیکسل عرض داشته باشد، با تغییر دادن ویژگی سفارشی --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. پیش‌نمایش در دستگاه همراه در حالت افقی

۵. رنگ تطبیقی

شاخه Git: colors

در پایان این بخش، فرم تنظیمات شما:

• سازگار شدن با اولویت‌های رنگ تیره و روشن
• آرایش رنگ‌هایی داشته باشد که از کد رنگی نمانام مشتق شده باشد
• رنگ‌های دسترس‌پذیر داشته باشد

HSL

در بخش بعدی، یک سیستم رنگ با HSL ایجاد خواهید کرد تا به شما در ساختن زمینه روشن و تیره کمک کند. این ویژگی براساس این مفهوم اصلی در CSS ساخته شده است: calc().

‫HSL مخفف ته‌رنگ، اشباع، و میزان نور است. فام یک زاویه است، مثل نقطه‌ای روی ساعت، درحالی‌که اشباع و روشنایی درصد هستند. ‫calc() می‌تواند محاسبات ریاضی را روی درصدها و زاویه‌ها انجام دهد. می‌توانید محاسبات روشنایی و اشباع را روی آن درصدها در CSS انجام دهید. محاسبات کانال رنگ را با ویژگی‌های سفارشی ترکیب کنید تا به یک طرح رنگی مدرن و پویا دست یابید که در آن انواع مختلف از یک رنگ پایه محاسبه می‌شوند و به شما کمک می‌کند از مدیریت تعداد زیادی رنگ در کد خودداری کنید.

ویژگی‌های سفارشی

در این بخش، مجموعه‌ای از ویژگی‌های سفارشی را برای استفاده در بقیه سبک‌هایتان می‌سازید. مشابه مجموعه فاصله‌گذاری که قبلاً در برچسب :root ایجاد کردید، رنگ‌ها را اضافه خواهید کرد.

فرض کنید رنگ نمانام برنامه‌تان #0af است. اولین تکلیف شما این است که این مقدار رنگ hex را به مقدار رنگ 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 ۸۵٪ سفید و --text2 ۶۵٪ سفید است و هر دو اشباع بسیار کمی دارند.

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

نوشتار بسیار روشن است زیرا سطوح در حالت تیره، تیره خواهند بود. در جاهایی که رنگ‌های نوشتار از مقادیر روشنایی بالا (۸۵٪ و بالاتر) استفاده می‌کردند، سطوح از مقادیر پایین‌تر (۳۰٪ و پایین‌تر) استفاده خواهند کرد. داشتن فاصله مناسب بین محدوده روشنایی سطح و نوشتار به اطمینان از دسترس‌پذیر بودن رنگ‌ها برای خواندن کاربران کمک می‌کند.

3. توجه کنید که چگونه رنگ‌ها از تیره‌ترین خاکستری با ۱۰٪ روشنایی و ۱۰٪ اشباع شروع می‌شوند، سپس با روشن‌تر شدن، اشباع‌زدایی می‌شوند. هر سطح جدید ۵٪ سبک‌تر از سطح قبلی است. اشباع رنگ در سطوح روشن‌تر نیز کمی کاهش یافته است. سعی کنید اشباع همه سطوح را روی ۱۰٪ قرار دهید. بیشتر آن را می‌پسندید یا کمتر؟

زمینه روشن

با داشتن مجموعه‌ای مناسب از رنگ‌های نوشتار و سطح که زمینه تیره را مشخص می‌کنند، اکنون زمان آن است که با به‌روزرسانی ویژگی‌های سفارشی رنگ در یک پُرسمان رسانه prefers-color-scheme، با اولویت زمینه روشن سازگار شویم.

از همان تکنیک حفظ تفاوت زیاد در مقادیر روشنایی بین سطوح و رنگ‌های نوشتار استفاده خواهید کرد تا کنتراست رنگ‌ها به‌خوبی حفظ شود.

نمانام

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

اولین مورد رنگ نمانام است. باید اشباع رنگ به قدرت کامل خود بازگردد.

نوشتار

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

    --text2: hsl(
      var(--hue) 
      calc(var(--saturation) / 2)
      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);
}

رنگ‌های اصلی صفحه اولین رنگ‌های سطح و نوشتاری هستند که ایجاد کرده‌اید، که مقدار پیش‌فرض کنتراست را نیز در حداکثر خود قرار می‌دهد. اکنون می‌توانید جابه‌جایی بین حالت روشن و تیره را آزمایش کنید!

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

این اصلاح نهایی خوب به مرورگر می‌گوید که این صفحه از هر دو زمینه تیره و روشن پشتیبانی می‌کند. مرورگر با کنترل‌های فرم تیره به ما پاداش می‌دهد.

‫۶. پویانمایی تطبیقی

شاخه 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 است که فقط درصورتی از آن استفاده می‌کنید که کاربر اولویتی برای کاهش حرکت نداشته باشد. اولین انتخابگر و سبک‌ها مسیر برش دایره را ۱۰٪ منقبض می‌کنند و برخی پارامترهای انتقال را تنظیم می‌کنند. انتخاب‌گر و سبک دوم منتظر می‌ماند تا کاربران با ورودی تعامل داشته باشند، سپس دایره نماد را بزرگ می‌کند. جلوه‌ای ظریف اما جالب وقتی که همه‌چیز خوب است.

‫۷. تبریک می‌گوییم

شاخه Git: complete

تبریک می‌گوییم، شما باموفقیت یک واسط کاربر سازگار با کاربر ساختید!

اکنون مراحل کلیدی لازم برای ساختن میاناهایی را که با سناریوها و تنظیمات مختلف کاربر سازگار می‌شوند می‌دانید.