واکنش‌گرای جدید: طراحی وب در دنیای مؤلفه‌محور

Controlling macro and micro layout in a new era of responsive web design.

Una Kravets

طراحی واکنش‌گرا امروز

امروزه، وقتی از اصطلاح «طراحی واکنش‌گرا» استفاده می‌کنید، احتمالاً به استفاده از پرسمان‌های رسانه‌ای برای تغییر چیدمان هنگام تغییر اندازه طراحی از اندازه تلفن همراه به اندازه رایانه لوحی و سپس به اندازه رایانه رومیزی فکر می‌کنید.

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

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

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

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

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

ما این اتفاق را تقریباً هر ۱۰ سال یک‌بار می‌بینیم. ۱۰ سال پیش، حدود ۲۰۱۰ تا ۲۰۱۲، تغییر بزرگی در طراحی واکنش‌گرا و تلفن همراه و ظهور CSS3 دیدیم.

منبع: Web Design Museum.

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

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

پاسخ‌گو به کاربر

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

این ویژگی‌های رسانه‌ای ترجیحات کاربر عبارت‌اند از:

• prefers-reduced-motion
• prefers-contrast
• prefers-reduced-transparency
• prefers-color-scheme
• inverted-colors
• و موارد دیگر

ویژگی‌های اولویت، اولویت‌هایی را که کاربر در سیستم‌عامل خود تنظیم کرده است، انتخاب می‌کنند و به ساختن تجربه وب قوی‌تر و شخصی‌سازی‌شده‌تر کمک می‌کنند، به‌ویژه برای کسانی که نیازهای دسترس‌پذیری دارند.

prefers-reduced-motion

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

با prefers-reduced-motion می‌توانید صفحه‌هایتان را با درنظر گرفتن کاهش حرکت طراحی کنید و برای کسانی که این اولویت را تنظیم نکرده‌اند، تجربه‌ای با حرکت بهبودیافته ایجاد کنید.

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

Prefers-reduced-motion shouldn't mean "no motion", since motion is so critical to conveying information online. درعوض، تجربه پایه محکمی ارائه دهید که کاربران را بدون حرکت غیرضروری راهنمایی کند و به‌تدریج آن تجربه را برای کاربرانی که این نیازها یا اولویت‌های دسترس‌پذیری را ندارند بهبود دهید.

prefers-color-scheme

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

اگر صفحه‌تان را بااستفاده از ویژگی‌های سفارشی CSS راه‌اندازی کنید، جابه‌جا کردن مقادیر رنگ ساده می‌شود. می‌توانید به‌سرعت مقادیر مضمون رنگ‌ها را به‌روز کنید، مثلاً backgroundColor و textOnPrimary، تا به‌طور پویا با مضمون جدید در پُرسمان رسانه سازگار شود.

برای اینکه آزمایش برخی‌از این پُرسمان‌های اولویت آسان‌تر شود، می‌توانید به‌جای باز کردن اولویت‌های سیستم در هر بار، از DevTools برای شبیه‌سازی استفاده کنید.

طراحی برای زمینه تیره

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

به‌جای استفاده از سایه برای ایجاد عمق و جلو آوردن عنصر، می‌توانید از نور در رنگ پس‌زمینه عنصر برای جلو آوردن آن استفاده کنید. دلیلش این است که سایه‌ها روی پس‌زمینه تیره چندان مؤثر نخواهند بود.

طراحی مواد راهنمایی‌های عالی‌ای برای طراحی زمینه‌های تیره ارائه می‌دهد.

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

مطالعه‌ای در سال ۲۰۱۸ روی Android درباره زمینه‌های تیره نشان داد که بسته به روشنایی صفحه‌نمایش و میانای کاربر کلی، تا ۶۰٪ در مصرف برق صرفه‌جویی می‌شود. آمار ۶۰٪ از مقایسه صفحه پخش YouTube با ویدیوِ موقتاً متوقف‌شده در روشنایی ۱۰۰٪ صفحه بااستفاده از زمینه تیره برای واسط کاربر برنامه درمقابل زمینه روشن به‌دست آمده است.

همیشه باید درصورت امکان تجربه زمینه تیره را برای کاربران فراهم کنید.

واکنش‌گرا به محتوا

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

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

مشاهده نسخه نمایشی در Codepen (پشت پرچم در Canary).

این مثال دو مؤلفه یکسان با دو اندازه محفظه متفاوت را نشان می‌دهد که هر دو در چیدمانی که بااستفاده از CSS Grid ایجاد شده است فضا اشغال می‌کنند. هر مؤلفه در فضای اختصاصی منحصربه‌فرد خود قرار می‌گیرد و براساس آن سبک‌بندی می‌شود.

این میزان انعطاف‌پذیری چیزی است که تنها با پرسمان‌های رسانه امکان‌پذیر نیست.

پرسمان‌های ظرف رویکرد بسیار پویاتری برای طراحی واکنش‌گرا ارائه می‌دهند. This means that if you put this card component in a sidebar or hero section or within a grid inside of the main body of a page, the component itself owns its responsive information and sizes according to the container, not the viewport

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

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

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

ابتدا، دربرگیری را در عنصر ولی تنظیم کنید. سپس، یک پُرسمان @container بنویسید تا هریک از عناصر داخل محفظه را براساس اندازه‌اش بااستفاده از min-width یا max-width سبک‌بندی کنید.

کد بالا از max-width استفاده می‌کند و پیوندها را روی display:none تنظیم می‌کند، و همچنین اندازه قلم زمان را وقتی عرض ظرف کمتر از 850px باشد کاهش می‌دهد.

کارت‌های پُرسمان محتوا

در این وب‌سایت نمایشی گیاهان، هریک از کارت‌های محصول، ازجمله کارت موجود در بخش اصلی، نوار کناری موارد اخیراً مشاهده‌شده، و شبکه محصول، همگی دقیقاً یک مؤلفه با نشانه‌گذاری یکسان هستند.

مشاهده نسخه نمایشی در Codepen (پشت پرچم در Canary).

هیچ پُرسمان رسانه‌ای برای ایجاد این چیدمان کامل استفاده نشده است، فقط پُرسمان‌های محفظه استفاده شده است. این کار باعث می‌شود هر کارت محصول به چیدمان مناسب منتقل شود تا فضای خود را پر کند. برای مثال، شبکه از چیدمان ستون minmax استفاده می‌کند تا به عناصر اجازه دهد در فضای خود جریان یابند و وقتی آن فضا بیش‌ازحد فشرده می‌شود، شبکه را دوباره چیدمان کند (یعنی به حداقل اندازه رسیده است).

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

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

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

When there is at least 350px of space in the grid, the card layout goes horizontal by being set to display: flex, which has a default flex-direction of "row".

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

ترکیب کردن پُرسمان‌های محتوا با پُرسمان‌های رسانه

پرس‌وجوهای حامل موارد استفاده زیادی دارند—یکی از آن‌ها مؤلفه تقویم است. می‌توانید از پرسمان‌های محفظه برای چیدمان مجدد رویدادهای تقویم و بخش‌های دیگر براساس عرض دردسترس محفظه والد استفاده کنید.

مشاهده نسخه نمایشی در Codepen (پشت پرچم در Canary).

این ظرف نمایشی برای تغییر چیدمان و سبک تاریخ و روز هفته در تقویم و همچنین تنظیم حاشیه‌ها و اندازه قلم در رویدادهای زمان‌بندی‌شده پرسمان می‌کند تا به آن‌ها کمک کند بهتر در فضا جا شوند.

سپس، از پُرسمان رسانه برای تغییر کل چیدمان برای اندازه‌های کوچک‌تر صفحه‌نمایش استفاده کنید. این مثال نشان می‌دهد که ترکیب پرسمان‌های رسانه (تنظیم سبک‌های سراسری یا کلان) با پرسمان‌های محفظه (تنظیم فرزندان محفظه و سبک‌های خرد آن‌ها) چقدر قدرتمند است.

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

استفاده از پُرسمان‌های محفظه درحال‌حاضر

این نسخه‌های نمایشی اکنون برای بازی کردن با پرچم در Chrome Canary دردسترس هستند. به about://flags در Canary بروید و پرچم #enable-container-queries را روشن کنید. این کار پشتیبانی از مقادیر @container، inline-size، و block-size را برای ویژگی contain و پیاده‌سازی LayoutNG Grid فعال می‌کند.

این پرچم همچنین ویژگی‌های Chrome DevTools مربوطه را فعال می‌کند. با نحوه بازرسی و اشکال‌زدایی پُرسمان‌های محفظه در DevTools آشنا شوید.

سبک‌های محدودشده

برای ساختن روی پرسمان‌های محفظه، از سبک‌های محدودشده با @scope استفاده کنید تا دسترسی انتخاب‌کننده‌هایتان را محدود کنید.

این شکل دراصل توسط Miriam Suzanne طراحی شده است.

سبک‌های محدودشده امکان سبک‌دهی مختص مؤلفه را فراهم می‌کنند تا از تداخل نام‌گذاری جلوگیری شود، چیزی که بسیاری از چارچوب‌ها و افزونه‌ها مانند ماژول‌های CSS درحال‌حاضر به ما امکان می‌دهند در چارچوب‌ها انجام دهیم. سبک‌های محدودشده به شما امکان می‌دهند سبک‌های کپسوله‌شده را به‌صورت بومی برای مؤلفه‌هایی با CSS خوانا بنویسید، بدون اینکه نیازی به تنظیم نشانه‌گذاری باشد.

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

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

محدوده به شما امکان می‌دهد انتخاب‌کننده‌های «دونات‌شکل» ایجاد کنید، که در آن می‌توانید حد بالا و پایین را مشخص کنید. انتخاب‌کننده‌های موجود در قانون @scope بین آن محدودیت‌ها مطابقت داده می‌شوند.

نمونه‌ای از این مورد پانل برگه است که در آن می‌خواهید برگه‌ها سبک‌های محدودشده را دریافت کنند اما پانل درون آن برگه‌ها تحت تأثیر آن سبک‌های محدودشده قرار نگیرد.

واکنش‌گرا به ضریب شکل

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

نمودار از Microsoft Edge Explainers.

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

پرس‌وجوی رسانه‌ای آزمایشی برای گسترش صفحه می‌تواند در اینجا به ما کمک کند. درحال‌حاضر این‌گونه عمل می‌کند: @media (spanning: <type of fold>). نسخه نمایشی یک چیدمان جدولی با دو ستون راه‌اندازی می‌کند: یکی دارای عرض --sidebar-width است که به‌طور پیش‌فرض 5rem است و دیگری 1fr است. وقتی چیدمان در صفحه‌نمایش دوگانه‌ای که یک تای عمودی دارد مشاهده می‌شود، مقدار --sidebar-width با مقدار محیط تای چپ به‌روز می‌شود.

:root {
  --sidebar-width: 5rem;
}

@media (spanning: single-fold-vertical) {
  --sidebar-width: env(fold-left);
}

main {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
}

این کار چیدمانی را فعال می‌کند که در آن نوار کناری، در این مورد پیمایش، فضای یکی از تاها را پر می‌کند، و واسط کاربر برنامه دیگری را پر می‌کند. این کار از ایجاد «چین» در واسط کاربر جلوگیری می‌کند.

می‌توانید صفحه‌نمایش‌های تاشو را در شبیه‌ساز Chrome DevTools آزمایش کنید تا به اشکال‌زدایی و نمونه‌سازی گسترش صفحه‌نمایش مستقیماً در مرورگر کمک کنید.

نتیجه‌گیری

کاوش طراحی میانای کاربر فراتر از صفحه‌نمایش تخت دلیل دیگری است که چرا پُرسمان‌های محفظه و سبک‌های محدودشده بسیار مهم هستند. این عناصر به شما فرصت می‌دهند تا سبک‌های مؤلفه را از چیدمان صفحه و سبک‌های سراسری و سبک‌های کاربر جدا کنید، که این امر طراحی واکنش‌گرای انعطاف‌پذیرتری را ممکن می‌سازد. این یعنی اکنون می‌توانید طرح‌بندی‌های ماکرو را بااستفاده از پرسمان‌های رسانه مبتنی بر صفحه، ازجمله تفاوت‌های ظریف گستردگی صفحه‌نمایش، طراحی کنید. At the same time using micro layouts with container queries on the components, and add user-preference based media queries to customize user experiences based on their unique preferences and need.

این پاسخگوی جدید است.

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

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

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

web.dev/learnCSS

و درحال‌حاضر، اگر می‌خواهید بازی CSS خود را ارتقا دهید و شاید برخی از اصول اولیه را دوباره مرور کنید، تیم من یک دوره و مرجع کاملاً جدید و کاملاً رایگان CSS را در web.dev راه‌اندازی می‌کند. می‌توانید ازطریق web.dev/learnCSS به آن دسترسی داشته باشید.

امیدوارم از این نمای کلی درباره عصر بعدی طراحی واکنش‌گرا و برخی از اصول اولیه‌ای که با آن همراه خواهد بود لذت برده باشید، و همچنین امیدوارم شما هم مثل من درباره آنچه این موضوع برای آینده طراحی وب به همراه دارد هیجان‌زده باشید.

این امر فرصت بزرگی را برای ما به‌عنوان انجمن UI باز می‌کند تا از سبک‌های مبتنی بر مؤلفه، ضرایب شکل جدید، و ایجاد تجربه‌های پاسخ‌گو به کاربر استقبال کنیم.