همه‌چیز درباره‌ی CSS Container Queries: آینده‌ی طراحی ریسپانسیو
در دنیای طراحی وب، مفاهیم ریسپانسیو بودن و واکنش‌گرایی اهمیت زیادی دارند. طراحان و توسعه‌دهندگان وب از media queries برای تغییر استایل‌ها بر اساس عرض صفحه نمایش استفاده می‌کنند. با این حال، این روش گاهی محدود است، زیرا تغییرات بر اساس اندازه کل صفحه اعمال می‌شود و نه اندازه‌ی یک بخش خاص از وب‌سایت.
اما حالا، با معرفی CSS Container Queries، یک ویژگی جدید و قدرتمند برای ایجاد طراحی‌های ریسپانسیو و انعطاف‌پذیر در اختیار داریم. در این مقاله، با این مفهوم جدید آشنا خواهیم شد، نحوه‌ی استفاده از آن را بررسی خواهیم کرد و به شما نشان خواهیم داد چرا این ویژگی می‌تواند نحوه‌ی طراحی شما را متحول کند.
CSS Container Queries چیست؟
Container Queries به شما اجازه می‌دهد تا استایل‌های عناصر داخل یک کانتینر خاص را بر اساس اندازه و ابعاد آن کانتینر تغییر دهید، نه بر اساس ابعاد کل صفحه. این ویژگی نسبت به media queries یک گام جلوتر است، زیرا شما می‌توانید طراحی‌های ریسپانسیو را برای هر بخش (کامپوننت) از صفحه جداگانه اعمال کنید.
در حالی که media queries معمولاً برای تغییر استایل‌ها بر اساس عرض یا ارتفاع کل صفحه استفاده می‌شوند، Container Queries این کار را برای اندازه‌ی کانتینرها انجام می‌دهند. بنابراین، شما کنترل دقیق‌تری بر روی طراحی ریسپانسیو بخش‌های مختلف صفحه خواهید داشت.
آیا میدانید مدرسه فرانت اند پرنیان، دوره فرانت اند از صفر تا صد را بصورت حرفه ای برگزار میکند؟
چرا باید از CSS Container Queries استفاده کنیم؟
- طراحی کامپوننت‌محور بهتر: در طراحی‌های مدرن، بسیاری از طراحان از کامپوننت‌ها استفاده می‌کنند. CSS Container Queries به شما این امکان را می‌دهد که استایل هر کامپوننت را بدون وابستگی به اندازه کل صفحه تغییر دهید. این موضوع به طراحان اجازه می‌دهد تا کامپوننت‌هایی که در اندازه‌های مختلف کانتینرها قرار می‌گیرند را به درستی ریسپانسیو کنند.
- انعطاف‌پذیری بیشتر: شما می‌توانید به راحتی استایل‌های متفاوتی برای کانتینرها و محتواهای داخل آن‌ها تعریف کنید. این امر باعث می‌شود که در طراحی وب‌سایت‌های پیچیده و چندبخشی بتوانید به خوبی از این ویژگی بهره‌برداری کنید.
- کاهش پیچیدگی media queries: دیگر نیازی به پیچیدگی‌های زیاد در media queries نخواهید داشت. Container Queries این فرایند را ساده‌تر و متمرکزتر می‌کنند و به شما اجازه می‌دهند استایل‌ها را به‌طور مستقیم برای کانتینرهای مشخص تعریف کنید.
نحوه استفاده از CSS Container Queries
برای اینکه Container Queries را در طراحی خود به کار بگیرید، باید ابتدا ویژگی‌های زیر را برای کانتینر موردنظر تعریف کنید:
.container {
container-type: inline-size;
container-name: my-container;
}توضیح دستورات:
container-type: inline-size;: این ویژگی، اندازه‌ی کانتینر را تعیین میکند.inline-sizeبه این معنی است که بر اساس عرض کانتینر استایل‌ها تغییر می‌کنند.container-name: my-container;: به کانتینر یک نام مشخص می‌دهید تا بتوانید در کوئری‌ها از آن استفاده کنید.
حالا که کانتینر شما آماده است، می‌توانید از @container برای تعریف استایل‌های واکنش‌گرا استفاده کنید.
مثال کاربردی:
@container my-container (min-width: 500px) {
.box {
background-color: lightblue;
font-size: 24px;
}
}در این مثال، وقتی عرض کانتینر حداقل 500 پیکسل می‌شود، استایل جدیدی برای کلاس .box اعمال می‌شود که شامل تغییر رنگ پس‌زمینه به آبی روشن و بزرگ‌تر شدن سایز فونت است.
تفاوت بین Media Queries و Container Queries
در حالی که media queries بر اساس ابعاد کل صفحه عمل می‌کنند، container queries بر اساس اندازه‌ی کانتینرها کار می‌کنند. این تفاوت مهم باعث می‌شود که Container Queries به‌طور خاص برای طراحی‌های کامپوننت‌محور بسیار مفید باشند.
| ویژگی | Media Queries | Container Queries |
|---|---|---|
| مبنا | اندازه‌ی کل صفحه | اندازه‌ی کانتینر |
| استفاده در | کل صفحه یا بخش‌های مشخص از صفحه | کامپوننت‌های جداگانه و بخش‌های خاص |
| کاربرد | طراحی ریسپانسیو کل سایت | طراحی ریسپانسیو بخش‌های داخلی سایت |
مثال کامل از HTML و CSS
برای درک بهتر این موضوع، به یک مثال کامل از HTML و CSS می‌پردازیم. این مثال نشان می‌دهد که چطور می‌توان استایل‌های ریسپانسیو را با استفاده از Container Queries برای یک کانتینر خاص اعمال کرد.
کد HTML:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مثال CSS Container Queries</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.container {
container-type: inline-size;
container-name: my-container;
width: 100%;
max-width: 600px;
border: 2px solid #333;
padding: 20px;
margin: 0 auto;
}
.box {
background-color: lightcoral;
padding: 20px;
color: white;
text-align: center;
font-size: 18px;
}
/* Container Query */
@container my-container (min-width: 500px) {
.box {
background-color: lightblue;
font-size: 24px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">
Container Query فعال است! تغییر اندازه دهید تا تغییرات را ببینید.
</div>
</div>
</body>
</html>
چگونه Container Queries به بهبود SEO کمک می‌کنند؟
استفاده از CSS Container Queries می‌تواند به بهبود عملکرد وب‌سایت شما کمک کند که به نوبه‌ی خود تأثیر مثبتی بر سئو دارد. با طراحی ریسپانسیو دقیق‌تر، کاربران تجربه بهتری در دستگاه‌های مختلف خواهند داشت و مدت زمان حضور در سایت افزایش می‌یابد، که این فاکتوری مهم برای رتبه‌بندی بهتر در موتورهای جستجو است.
جمع‌بندی
CSS Container Queries یکی از ویژگی‌های جدید و جذاب CSS است که به شما امکان می‌دهد استایل‌های ریسپانسیو را برای بخش‌های خاصی از صفحه وب‌سایت بر اساس اندازه‌ی کانتینر تعریف کنید. این ویژگی انعطاف‌پذیری بیشتری در طراحی فراهم میکند و به شما کمک میکند که طراحی‌های کامپوننت‌محور خود را به‌طور دقیق‌تری پیاده‌سازی کنید. در نهایت، استفاده از این تکنیک می‌تواند به بهبود تجربه کاربری و افزایش رتبه‌ی وب‌سایت شما در نتایج جستجوی گوگل کمک کند.
امیدواریم از این مقاله آموزش مفهوم CSS Container Queries نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.
مطالب زیر را حتما مطالعه کنید
2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
خداحافظ ایندنت های تو در توی مدیا
خداحافظ محدودیت خداحافظ اعصاب خوردی
سلام بر کارهای عجیب با رسپانسیو سلام بر ازادی
اینم بگم که میشه مخفف نوشت
Container : my-container / inline-size;
بله
دقیقا