مشکل درصدها در CSS » خبر و ترفند روز

مطمئن شوید که چیدمان های شما با یک واحد اندازه گیری جایگزین کاملاً پاسخگو هستند.

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

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

یک مثال شبکه بسیار ساده

برای نشان دادن مشکل واحدهای درصد، این طرح HTML را در نظر بگیرید:

<div class="container my-grid">
  <div class="grid-item">
  </div>
  <div class="grid-item">
  </div>
</div>

عنصر بیرونی یک عنصر کانتینری اولیه با دو فرزند div است. هر کودک یک کلاس گرید آیتم دارد. برای تبدیل کانتینر به یک شبکه با دو ستون (دو کادر)، باید کد CSS زیر را اعمال کنیم:

body {
  background-color: black;
  align-items: center;
  justify-content: flex-start;
}

.my-grid {
  display: grid;
  grid-template-columns: 50% 50%;
  margin: 3rem;
  border: 2px solid gold;
  padding: 1rem;
}

.grid-item {
  border: 3px solid gold;
  padding: 10rem 0;
  background: blue;
}

بنابراین هر ستون (مجموعه شبکه) یک رنگ پس زمینه طلایی دارد. در کلاس والد container، grid-template-column را روی 50% برای هر ستون قرار می دهیم. در نتیجه، هر دو جعبه 50 درصد از عرض کل عنصر ظرف را اشغال می کنند.

نتیجه این است:

اما این همسویی مشکلاتی دارد. ابتدا، اگر تصمیم به اضافه کردن یک شکاف به والد شبکه داشته باشید، ممکن است کودک از کنارش سرریز شود. به عنوان مثال، اگر می‌خواهید شکاف: 3px را به بلوک my-grid. در CSS اضافه کنید، در اینجا طرح‌بندی به نظر می‌رسد:

مطلب مرتبط: نحوه پیاده سازی مکانیک پرش در کتابخانه آرکید پایتون

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

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

به این دلیل است که هر ستون 50٪ از والد است. در مثال بالا، 50% به علاوه 50% به علاوه آن شکاف (3px) داریم که جعبه را از ظرف خارج می کند.

توجه داشته باشید که این خطا فقط با 50-50 اتفاق نمی افتد. می توانید ستون اول را روی 75 درصد، ستون دوم را روی 25 درصد قرار دهید و همچنان خطا رخ می دهد. به همین دلیل است که باید بیشتر از محلول زیر استفاده کنید.

راه حل با مقادیر کسری

راه حل استفاده از مقادیر کسری به جای درصد است. بنابراین به جای اینکه ستون اول را روی 75% و دومی را روی 50% قرار دهید، می توانید ستون اول را روی 3fr و ستون دوم را روی 1fr تنظیم کنید:

grid-template-columns: 3fr 1fr

این نسبت همان مثال اول را حفظ می کند. اما مزیت استفاده از واحدهای fr این است که از کسری از فضای موجود استفاده می کنند. در این حالت، ستون اول سه قسمت از فضا را می گیرد در حالی که ستون دوم یک قسمت را بدون احتساب شکاف می گیرد.

مزیت دیگر استفاده از frs بر درصد – یا سایر واحدهای مطلق، مانند px یا em – این است که می توانید آنها را با مقادیر ثابت ترکیب کنید. در اینجا یک مثال است:

مطلب مرتبط: مزایا و معایب ایجاد یک وب سایت با وب سایت ساز Canva

شبکه-الگو-ستون: 1fr 10rem;

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

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

یک مثال واقعی تر

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

.container {
  width: 100%;
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 1.5rem;
}

.card {
  background-color: #5A5A5A;
  padding: 10px;
  margin-bottom: .5rem;
}

نتیجه این است:

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

در اینجا نحوه قرار دادن همه چیز در یک ستون آمده است، زمانی که ویوپورت به 55em یا کمتر رسید:

@media(max-width: 55em) {
  .container {
    display: flex;
    flex-direction: column;
  }
}

و نتیجه چیزی شبیه به این خواهد بود:

اکنون نمی‌خواهید که هر کارت پهنای کل نمای درت را بپوشاند. در عوض کارت ها باید در کنار هم نمایش داده شوند. بهترین راه برای رسیدن به این هدف استفاده از شبکه های CSS است. اما به جای تعیین مقادیر عرض ثابت (مانند 50%) برای grid-template-column، از تابع repeat() به صورت زیر استفاده کنید:

.sidebar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    align-content: start;
    gap: 2rem;
}

این CSS حداقل اندازه 25rem و حداکثر اندازه 1fr را تعیین می کند. این رویکرد بسیار بهتر از تنظیم عرض های ثابت است زیرا بر اندازه ذاتی متکی است. به عبارت دیگر، به مرورگر این امکان را می‌دهد تا همه چیز را بر اساس پارامترهای موجود بفهمد.

مطلب مرتبط: نحوه استفاده از XSLT برای نمایش داده های XML در یک صفحه وب HTML

اکنون هنگامی که پنجره مرورگر را به یک عرض خاص کاهش می دهید، کادر شبکه به طور خودکار به دو کادر در هر خط تنظیم می شود.

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

بهترین بخش این است که برای پاسخگو کردن عنصر نیازی به پرس و جوی کانتینر یا چیزهای فانتزی ندارید. به سادگی یک شبکه تنظیم کنید و از min-max() برای تنظیم مقادیر کسری به جای اندازه های ثابت استفاده کنید.

درباره CSS Grid بیشتر بیاموزید

اگر می خواهید با CSS عالی باشید، باید دانش عمیقی از CSS Grids داشته باشید. شبکه ها زمانی که به خوبی استفاده شوند می توانند بسیار قدرتمند باشند. با استفاده از Grids می توانید تقریباً به هر طرحی که می خواهید برسید. این آن را به یک ابزار ضروری در CSS تبدیل می کند.

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

Tags: سی اس اس طراحی وب سایت