راهنمای طراحی واکنشگرا در سال 2023 و پس از آن

وقتی این روزها به ساخت چیدمان های سیال فکر می کنید، دیگر خبری از نقاط شکست با عرض ثابت نیست. در عوض، طرح‌بندی‌هایی که امروز می‌سازیم باید تقریباً روی هر اندازه دستگاهی کار کنند. در کمال تعجب، من هنوز می بینم که وب سایت ها از الگوی طراحی واکنش گرا پیروی می کنند، جایی که ظرفی وجود دارد که یک ظرف جدید دریافت می کند. max-width مقدار با توجه به عرض درگاه دید.

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

محتوا

مقدمه

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

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

طرح زیر را در نظر بگیرید. ما یک چیدمان معمولی داریم که باید پاسخگو باشد.

یک پاسخ معمول از یک طراح این است:

• شخصیت را روی یک خط جدید بپیچید،
• کاهش اندازه فونت،
• و کارت ها را مرتب کنید.

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

• چه زمانی کاراکترها (محتوا و تصویر) باید به یک خط جدید منتقل شوند؟
• آیا اندازه فونت روان است؟ یا فقط یک مقدار ثابت است که به صورت دستی تغییر می کند؟
• آیا باید از تصاویر واکنش گرا استفاده کنیم؟
• آیا به فاصله مایعات نیاز داریم؟
• لیست کارت ها
  • آیا نوع متفاوتی از نقشه وجود دارد که باید بین اندازه های موبایل و دسکتاپ نمایش داده شود؟ (سلام، سوالات کانتینر ابعاد)
  • آیا تصویر نقشه نسبت ابعاد خاصی دارد؟
• تنظیمات برگزیده کاربر: آیا جزئیات رابط کاربری وجود دارد که بسته به کاربر تغییر می کند – حرکت کاهش یافته – طرح زمینه/رنگ

با نگاهی به این مثال، می‌توانیم به روشی شبیه به موارد زیر فکر کنیم:

استفاده از CSS مدرن

• تایپوگرافی پاسخگو است به عرض درگاه دید از طریق clamp() تابع
• فاصله پاسخگو است به عرض درگاه دید از طریق clamp() تابع
• بخش شخصیت ها پاسخگو است به محتویات آن از طریق لفاف فلکس باکس.
• شبکه کارت پاسخگو است به فضای موجود با minmax()، بدون درخواست رسانه ای
• جزء نقشه پاسخگو است به پوسته خود از طریق درخواست اندازه کانتینر و درخواست های سبک کانتینر.
• زمینه ها و پدها پاسخگو هستند به زبان وب سایت ها از طریق خواص منطقی.

استفاده از درخواست های رسانه ای

• ناوبری سایت پاسخگو است به عرض درگاه دید.
• مضمون سازی پاسخگو است با توجه به ترجیحات کاربر در سیستم عامل آنها.
• جلوه نگه داشتن کارت پاسخگو است به آنچه کاربر استفاده می کند (لمس در مقابل ماوس).

در لیست بالا، موضوع بندی و پیمایش از طریق پرسش های رسانه ای انجام می شود. بقیه برای توابع CSS پیشرفته مانند clamp() تابع مقایسه کانتینر و پرس و جو

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

طراحی ریسپانسیو دیگر مربوط به پرسش های رسانه ای نیست.

متأسفانه، طرز فکری وجود دارد که من آن را ناقص می دانم. بسیاری از تازه واردان وب بر این باورند که “نام فریم را وارد کنید” راهی برای ایجاد یک وب سایت واکنش گرا است. من یک بار با یک مشتری بحث کردم که برای ساختن وب سایت های واکنش گرا نیازی به «نام چارچوب را وارد کنید» نداریم. من به آنها گفتم که می‌توانیم از پرس‌وجوهای رسانه‌ای CSS استفاده کنیم، زیرا آن‌ها بلوک‌های سازنده چارچوبی هستند که ذکر کردند.

در کشور من ما عربی صحبت می کنیم، اما کلمه “Responsive” عربی شده است، یعنی ما آن را طوری صحبت می کنیم که گویی یک کلمه عربی است، همانطور که “Google it” یک کلمه انگلیسی شد. این خوب است، اما زمان آن رسیده است که آگاهی بیشتری را به اشتراک بگذاریم که طراحی واکنش گرا فقط مربوط به نقاط شکست با عرض ثابت و کارکرد یک وب سایت بر روی موبایل، تبلت و دسکتاپ نیست.

طراحی واکنشگرا در طول سالها

سفر توسعه وب من در اواسط سال 2014 شروع شد. در آن زمان، طراحی واکنش گرا یک موضوع داغ بود و همه در مورد آن صحبت می کردند.

فریم ورک بوت استرپ

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

پرسش های رسانه ای

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

بسیاری از توسعه دهندگان فرانت اند از Bootstrap برای نوار ناوبری و سیستم شبکه قدرتمند آن استفاده کردند. زمان‌هایی را به یاد می‌آورم که یک وب‌سایت را بررسی می‌کردم و فوراً می‌دانستم که با Bootstrap ساخته شده است (در آن زمان آن را «بوت استرپ بوت» می‌گفتم).

تنظیم برای نقاط شکست با عرض ثابت

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

یکی از چیزهایی که من شخصاً دوست ندارم این است که یک عرض ثابت برای یک عنصر کانتینر داشته باشم که بسته به عرض نمای پورت تغییر می کند.

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

با استفاده از اراده فوق همیشه محدود کنید فضایی که .container آنها شکل زیر را در نظر بگیرید:

وقتی عرض دریچه دید کوچکتر می شود، max-width کانتینر را مجبور می کند که عرضی کمتر از viewport داشته باشد. در این مورد، اگر ظرف تمام عرض صفحه را بپوشاند، بسیار بهتر خواهد بود.

ما فقط به یکی نیاز داریم max-width برای جلوگیری از داشتن یک ظرف بسیار بزرگ روی صفحه نمایش های عریض.

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

بگذارید مثال دقیق تری از این مشکل را به شما نشان دهم.

فرض کنید ما یک شبکه کارت داریم. در حالت اول، آنها در داخل یک زندگی می کنند .container که آن را تغییر می دهد max-width به طور مکرر

در یک نمای قرص مانند، ظرف با خود محدود می شود max-width، بخش زیادی از فضای خالی را باقی می گذارد.

به فضای سفید بزرگ در دو طرف توجه کنید. برای ظرف بهتر نیست؟ با توجه به اینکه ما در حال بررسی این موضوع در اندازه تبلت هستیم.

هنگام مشاهده طراحی یک نمای کوچکتر، همچنان فضای سفید در دو طرف خواهد داشت.

آیا می توانیم بهتر عمل کنیم؟ این مقدار فضای هدر رفته خوبی است. من فقط نمی توانم دلیل خوبی برای اجرای آن در سال 2023 پیدا کنم.

را حذف کنید max-width برای پنجره های کوچکتر باعث می شود ظرف تمام عرض پنجره ها را بگیرد.

و برای سایزهای کوچکتر:

طراحی ریسپانسیو و وب سایت های خسته کننده

من نمی توانم این واقعیت را نادیده بگیرم که طراحی واکنش گرا با ایجاد وب سایت های خسته کننده و یکسان ارتباط دارد. این در مورد ساخت تم های مبتنی بر تم بوت استرپ صدق می کند.

بسیاری از وب سایت ها شروع به یکسان کردند. در اوایل سال 2016، دیدم یک یک توییت این فقط “طراحی پاسخگو” آن زمان را منعکس می کند. من فکر می کنم این به دلیل محبوبیت CSS Bootstrap است.

در حال حاضر کدام یک از دو وب سایت ممکن را طراحی می کنید؟

خنده دار اما واقع بینانه، درست است؟

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

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

آماده کاوش در طراحی واکنشگرا از دیدگاهی متفاوت هستید؟ برویم

شبکه به طور پیش فرض پاسخگو است

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

در اینجا مثالی از افزودن عنوان، پاراگراف و فهرست آورده شده است.

به طور پیش فرض واکنش نشان می دهد تا زمانی که ما تصمیم بگیریم چیزها را در کنار هم حرکت دهیم. فرض کنید من CSS زیر را اضافه کردم:

body {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-gap: 1rem;
}

ul {
	grid-column: 2/3;
	padding-left: 1rem;
}

در شکل بالا خوب به نظر می رسد، اینطور نیست؟ اما وقتی اندازه آن را به اندازه کوچکتر تغییر دهیم، سرگرمی شروع می شود.

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

طراحی واکنشگرا در سال 2023 و پس از آن

به جای اینکه به طراحی واکنش گرا از نظر پرسش های رسانه ای فکر کنم، دوست دارم به طراحی واکنش گرا در این دسته ها فکر کنم.

پاسخگو به محتوا

با نوشتن CSS که بتواند طول های مختلف محتوا را مدیریت کند، می توانیم اطمینان حاصل کنیم که رابط کاربری کار می کند و فقط به این دلیل که کاربر محتوای متفاوتی را اضافه کرده است، خراب نمی شود.

پاسخگو به viewport است

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

و دیدگاه فقط در مورد عرض نیست. در برخی موارد ما همچنین نیاز به استعلام ارتفاع داریم.

@media (min-height: 700px) {
  .site-header {
    
  }
}

پاسخگو به ظرف

هنگامی که یک مؤلفه باید سبک خود را بر اساس جایی که در سند است تغییر دهد، اینجاست که جستجوهای کانتینر مفید هستند.

به ترجیحات کاربر پاسخ می دهد

آیا مولفه باید بر اساس ترجیحات کاربر خاص تغییر کند؟ به عنوان مثال: تغییر تم، اندازه فونت، قرارداد و کاهش حرکت.

الان چه احساسی نسبت به طراحی واکنشگرا دارم

ساخت یک وب سایت واکنش گرا تماماً در مورد روان کردن آنها در هسته آن است. مایع به معنای چیزهای زیادی است:

• درخواست کانتینر
• بسته بندی
• اندازه یک عنصر
• اندازه های فونت
• فاصله
• فضای موجود
• خواص منطقی

با ویژگی های CSS مانند flexbox، grid و clamp() عملکرد مقایسه، ما می توانیم به مرورگر دستور دهیم که در شرایط خاص چه کاری انجام دهد. ما مجبور نیستیم به صورت دستی با تک تک جزئیات طراحی برخورد کنیم.

در حین ساختن یک جزء، ترجیح می‌دهم در حین کار روی آن، ذهنیتی روان داشته باشم. بیایید یک مثال بزنیم.

نمونه بارز

CSS مدرن راه هایی را در اختیار ما قرار می دهد تا سبک های پاسخگو را بدون تکیه کامل به پرس و جوهای رسانه ای بنویسیم. به عنوان مثال، در flex-wrap این ویژگی برای امکان بسته بندی خواهر و برادر در صورت وجود فضای کافی مفید است.

.reaction-button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

سه جزئیات خوب در اینجا وجود دارد:

1. به صورت مشروط به یک خط جدید منتقل می شود. جا نداره؟ خوب، موارد را بپیچید.
2. در هر دو سبک افقی و عمودی متمرکز می شود.
3. را gap بر اساس تقاضا کار می کند اگر افقی باشند، فقط فاصله خطوط فعال است. اگر مرتب باشند، ستون یک کار می کند.

جالب اینجاست که تمامی موارد فوق بدون استفاده از هرگونه تحقیق رسانه ای انجام شده است. بیایید همین تفکر را برای یک جزء بزرگتر اعمال کنیم.

روش‌های مدرن برای ساخت طرح‌بندی‌های واکنش‌گرا

CSS امروزه بسیار قدرتمند شده است. ما از متغیرهای CSS، flexbox و grid پشتیبانی خوبی داریم. آخرین ویژگی های مانند :has درخواست های انتخابگر و ظرف در آخرین مرورگر (تقریبا) پشتیبانی می شوند.

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

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

CSS flexbox

درست مانند نمونه های قبلی، با استفاده از flex-wrap ویژگی، می‌توانیم به عناصر flex اجازه دهیم تا روی یک خط جدید قرار بگیرند و می‌توانیم این را با مشخص کردن کنترل کنیم flex مقدار برای هر عنصر انعطاف پذیر

این قدرتمند است و می تواند به ایجاد پایه ای برای اجزای پاسخگو کمک کند.

طرح بندی یک جزء مقاله را بسازید

در این مثال، ما یک جزء نقشه داریم که شامل یک تصویر در سمت چپ و محتوا در سمت راست است.

مانند مثال قبلی، flexbox به عنوان پایه برای این کار کاملاً کار می کند. با فرض اینکه سبک اصلی عنوان، تصویر، فاصله و غیره را نوشته‌ام، می‌توانیم به چیزی شبیه به زیر برسیم:

سپس می توانیم روی طرح بندی آن کار کنیم. من به طور پیش فرض از flexbox برای استفاده از بسته بندی استفاده خواهم کرد.

.c-card {
  display: flex;
}

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

.c-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

ما به همان نتیجه اولیه برگشتیم! خوب است، ما آن را درست می کنیم.

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

کاری که ما باید انجام دهیم این است که مرورگر را آموزش دهیم چه زمانی وسایل را بسته بندی کنیم با استفاده از قدرتمندان flex دارایی

.c-article__thumb {
  flex: 1 1 550px;
}

.c-article__content {
  flex: 1 1 350px;
}

ایده این است که ما می توانیم استفاده کنیم flex اجازه دهید یک عنصر بر اساس فضای موجود رشد یا کوچک شود.

آیا می بینید که این طراحی پاسخگو دیگر به پرسش های رسانه ای مربوط نمی شود.

.c-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.c-article__thumb {
  flex: 1 1 550px;
}

.c-article__content {
  flex: 1 1 350px;
}

ما نیز می توانیم استفاده کنیم wrap-reverse برای تغییر ترتیب تصویر کوچک نسبت به محتوا.

.c-card {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: flex-start;
}

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

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

ما یک بخش داریم که سرفصل آن شامل یک عنوان و یک پیوند است.

وقتی فضای کافی وجود ندارد، می‌خواهیم عنوان به یک خط جدید بپیچد. در اینجا همه چیزهایی است که ما نیاز داریم:

.section-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.section-header__title {
  flex: 1 1 400px;
}

را 400px مقدار هدر نقطه شکست سفارشی است که باعث می‌شود بسته‌بندی اتفاق بیفتد. وقتی عنوان 400 پیکسل یا کمتر باشد، به یک خط جدید تبدیل می شود.

با درخواست رسانه، این کار را می توان به شرح زیر انجام داد:

@media (min-width: 650px) {
  .section-header {
    display: flex;
    
  }
}

تا زمانی که نیاز به استفاده از هدر بخش در لفاف های مختلف داشته باشیم، این کار به خوبی کار می کند. به عنوان مثال در بخش اصلی و بخش جانبی.

اس flex-wrap راه حل، هدر بخش می تواند حتی زمانی که در ظروف کوچک به عنوان کناری استفاده می شود، کار کند.

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

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

@media (min-width: 800px) {
  .section-header--aside {
    display: flex;
    
  }
}

این برای من یک هک محسوب می شود. در همه موارد کار نخواهد کرد. لحظه ای که عرض جانبی را تغییر می دهیم، ممکن است بشکند.

توجه: این را می توان با درخواست های کانتینر حتی بهتر حل کرد، بعداً در مقاله به آن خواهم پرداخت.

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

امروز می‌توانیم طرح‌بندی‌های شبکه بسیار قابل تنظیم بسازیم. من همه چیز را در مورد شبکه CSS توضیح نمی دهم زیرا می توانم یک کتاب بنویسم، اما چند چیز را که اکنون در همه مرورگرها پشتیبانی می شود به اشتراک می گذارم.

مثال زیر را در نظر بگیرید.

این نمونه ای از مقاله CSS Grid Zones من است. این از پروژه ای است که سال ها پیش روی آن کار کردم. تیم نیاز به دو تغییر چیدمان داشت و نمی‌توانست چیزی بهتر از شبکه CSS برای این کار بیاندیشد.

div class="c-newspaper">
  article class="c-article c-article--1">article>
  article class="c-article c-article--2">article>
  article class="c-article c-article--featured">article>
  article class="c-article c-article--3">article>
  article class="c-article c-article--4">article>
  article class="c-article c-article--5">article>
  article class="c-article c-article--6">article>
  article class="c-article c-article--7">article>
div>

.c-newspaper {
  display: grid;
  grid-template-columns: 0.2fr 0.6fr 0.2fr;
  grid-template-areas:
    "item-1 featured item-2"
    "item-3 featured item-4"
    "item-5 item-6 item-7";
  grid-gap: 1rem;
}

.c-article--1 {
  grid-area: item-1;
}

.c-article--2 {
  grid-area: item-2;
}



.c-article--7 {
  grid-area: item-7;
}

.c-article--featured {
  grid-area: featured;
}

برای گزینه دوم، تنها کاری که باید انجام دهیم این است که نواحی قالب را تغییر دهیم.

.c-newspaper.variation-1 {
  grid-template-areas:
    "featured featured item-3"
    "item-1 item-2 item-4"
    "item-5 item-6 item-7";
}

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

ویژگی مفید دیگر در شبکه CSS این است minmax() تابع به طور خلاصه، این به ما اجازه می‌دهد تا شبکه‌ای ایجاد کنیم که عرض ستون‌ها را به صورت پویا و بدون درخواست رسانه تغییر می‌دهد.

CSS زیر را در نظر بگیرید.

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  grid-gap: 1rem;
}

ما یک شبکه با 3 ستون داریم و می‌خواهیم وقتی اندازه ویوپورت کوچکتر شد، اندازه آنها تغییر کند. را minmax() تابع مخلوط با auto-fill برای آن مناسب است.

بدون minmax() تابع، ما چاره ای جز استفاده از پرس و جوهای رسانه ای برای تغییر اندازه ستون ها با توجه به عرض پنجره نداریم.

یک مثال ساده:

@media (min-width: 992px)
	.wrapper__item {
		width: 33%;
	}
}

می توانید در مقاله من درباره minmax() اطلاعات بیشتری کسب کنید.

اندازه مایع

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

h2 {
  font-size: calc(1rem + 5vw);
}


@media (min-width: 2000px) {
  font-size: 4rem;
}

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

مثال زیر را در نظر بگیرید.

h2 {
  font-size: clamp(1rem, 0.5rem + 2.5vw, 3rem);
}

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

اگر بخواهیم با درخواست های رسانه ای این کار را انجام دهیم 9 درخواست خواهیم داشت. آیا می توانید آن را تصور کنید؟ اصلا کاربردی نیست تصور کنید این کار را برای بسیاری از موارد استفاده در یک وب سایت انجام دهید، این یک کابوس است!

من قبلاً یک کار مشابه انجام می دادم.

h2 {
  font-size: 1rem;
}

@media (min-width: 800px) {
  h2 {
    font-size: 2.5rem;
  }
}

@media (min-width: 1400px) {
  h2 {
    font-size: 5rem;
  }
}

با اندازه سیال، تفکر خود را از مقادیر ثابت به سیال تغییر خواهیم داد. من فکر می کنم که به مرورگر یک مقدار حداقل و حداکثر می دهد و اجازه می دهد بقیه کارها را انجام دهد.

بیایید به چند نمونه نگاه کنیم که در آن اندازه مایع واقعاً می درخشد.

یک شکاف پویا

اس gap ویژگی، ما می توانیم یک فاصله پویا ایجاد کنیم که بر اساس نمای پورت یا اندازه کانتینر تغییر می کند.

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1rem, 2vw, 24px);
}

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

.hero {
  padding: clamp(2rem, 10vmax, 10rem) 1rem;
}

درخواست برای ظروف اندازه

درخواست‌های کانتینر CSS اکنون در همه مرورگرها پشتیبانی می‌شوند. آنها در آگوست 2022 در Chrome پایدار شدند. آنها “Size” نامیده می شوند زیرا بر اساس عرض ظرف کار می کنند و همچنین به این دلیل که اکنون درخواست های سبک کانتینر داریم.

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

شکل زیر را در نظر بگیرید.

توجه داشته باشید که چگونه در سمت چپ نقشه ها بر اساس عرض پنجره تغییر می کنند، در حالی که در سمت راست بر اساس عرض ظرف تغییر می کنند.

بیایید چند مورد استفاده را بررسی کنیم.

جزء مقاله

یکی از موارد استفاده مورد علاقه من برای پرس و جوهای ظرف، جزء مقاله است. بر اساس عرض ظرف می توانیم 4 سبک مختلف داشته باشیم:

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

نسخه ی نمایشی را بررسی کنید.

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

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

@container (min-width: 250px) {
  .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .pagination li:not(:last-child) {
    margin-bottom: 0;
  }
}

@container (min-width: 500px) {
  
}

موارد استفاده بیشتر برای درخواست های کانتینر را در آزمایشگاه CSS من بررسی کنید.

ظرف اندازه درخواست واحد

چه اتفاقی می‌افتد اگر بخواهم اندازه مایع را بر اساس کانتینر و نه درگاه دید داشته باشم؟ این اکنون با درخواست های کانتینر امکان پذیر است.

ما می توانیم این کار را به سادگی با جایگزینی انجام دهیم vw با cqw.

.c-article__title {
  font-size: clamp(1.25rem, 2.5cqw + 1rem, 2.5rem);
}

.c-article__content > * + * {
  margin-top: clamp(0.8rem, 1cqw + 0.8rem, 1.5rem);
}

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

این خیلی قویه

درخواست های سبک کانتینر

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

تم ها را در سطح مؤلفه تغییر دهید

در برخی موارد، ممکن است لازم باشد موضوع یک مؤلفه را بر اساس محل زندگی آن تغییر دهیم.

در مثال زیر، من می‌خواهم کامپوننت stats در صورتی که در تب 2 زندگی می‌کند، موضوع خود را به تیره تغییر دهد.

ما می توانیم کاری شبیه به این انجام دهیم:

.special-wrapper {
  --theme: dark;
  container-name: stats;
}

@container stats style(--theme: dark) {
  .stat {
    
  }
}

درباره درخواست های سبک بیشتر بیاموزید.

جزء مقاله

تغییر سبک مقاله بر اساس عرض کانتینر مفید است، اما گاهی اوقات فقط در صورت لزوم باید این را فعال کنیم. درخواست های سبک می توانند این کار را انجام دهند!

کاری که ما باید انجام دهیم این است که یک متغیر CSS اضافه کنیم و بررسی کنیم که آیا وجود دارد یا خیر. اگر بله، پس ما باید آن سبک خاصی را که می خواهیم داشته باشیم.

.o-grid__item {
  container-type: inline-size;
  --horizontal: true;
}

@container (min-width: 400px) and style(--horizontal: true) {
  
}

به این ترتیب مقاله بسته به عرض ظرف تغییر می کند فقط اگر --horizontal متغیر روی true تنظیم شده است.

درخواست رسانه برای تنظیمات برگزیده کاربر

نمونه ای از پرس و جوی رسانه ترجیحی کاربر، موردی است که طرح رنگ ترجیحی را بررسی می کند.

این درخواست رسانه ای استایل ها را می سازد پاسخگو با توجه به ترجیحات کاربر

:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  
}

حتی با اضافه کردن بهتر است color-scheme موضوع کنترل‌های فرم پیش‌فرض را از روشن به تاریک تغییر می‌دهد (فقط در سافاری پشتیبانی می‌شود).

خواص منطقی

هنگام کار بر روی وب‌سایت‌های چند زبانه، باید از طرح‌بندی چپ به راست (LTR) و راست به چپ (RTL) پشتیبانی کنیم.

مثال زیر را در نظر بگیرید.

ما یک جزء با موارد زیر داریم:

• پد (چپ و راست)
• حاشیه سمت چپ
• فیلد نماد

با ویژگی های منطقی CSS می توانیم یک بار CSS بنویسیم و این کار انجام می شود پاسخگو باشد به زبان دلخواه کاربر

.card {
  padding-inline-start: 2.5rem;
  padding-inline-end: 1rem;
  border-inline-start: 6px solid blue;
}

.card__icon {
  margin-inline-end: 1rem;
}

می توانید در مقاله من و راهنمای گسترده من برای نوشتن CSS برای وب سایت های RTL درباره ویژگی های منطقی CSS اطلاعات بیشتری کسب کنید.

CSS محافظت شده

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

پروژه CSS دفاعی من در مورد آن است. حتما آن را بررسی کنید!

نتیجه گیری

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

طراحی ریسپانسیو در حال حاضر خوب است.

در ادامه مطلب