Manuel Matuzovic: max() Trickery

از طریق الف پست مانوئل ماتوزوویچ که از طریق یک نسخه ی نمایشی توسط تمانی عفیف.

.wrapper {
  margin-inline: max(0px, ((100% - 64rem) / 2)); 
}

شما می‌توانید به خودتان لطف کنید که تفکیک مانوئل از همه آنچه در اینجا اتفاق می‌افتد را بخوانید، اما اساساً به معادل این نحو طولانی‌تر عمل می‌کند:

.wrapper {
  max-width: 64rem;
  margin: 0 auto;
  width: 100%;
}

…جایی که:

• حداکثر () لیستی از مقادیر عددی CSS جدا شده با کاما را می پذیرد، جایی که مقدار اعمال شده بزرگ ترین است (یا به عنوان MDN آن را بیان می کند، "مثبت ترین") یکی در مجموعه.
• 0px اولین مقدار در مجموعه است که تضمین می کند که کوچکترین مقدار همیشه بزرگتر از صفر پیکسل باشد.
• (100% - 64rem) دومین "مقدار" در مجموعه است، اما به عنوان یک محاسبه بیان می شود (توجه داشته باشید که calc() غیر ضروری است) که the را تفریق می کند max-width عنصر (64rem) از کامل موجود است width (100%). آنچه باقی می ماند فضایی است که عنصر اشغال نمی کند.
• ((100% - 64rem) / 2)) فضای باقی مانده را به طور مساوی تقسیم می کند زیرا ما آن را بین مرزهای درونی عنصر تقسیم می کنیم.
• max(0px, ((100% - 64rem) / 2)) مقایسه 0px و (100% - 64rem) / 2). بیشترین مقدار استفاده می شود. این نتیجه معادله در بیشتر موارد خواهد بود، اما اگر 64rem همیشه از مقدار محاسبه شده کامل عنصر بیشتر است 100% عرض، آن مقدار را روی صفر قفل می کند تا اطمینان حاصل شود که هرگز به مقدار منفی منجر نمی شود.
• margin-inline خاصیتی است که مقدار برنده تنظیم می‌کند، که حاشیه را به طرف‌های درون خطی عنصر اعمال می‌کند - این کوتاه‌نویسی منطقی معادل تنظیم همان مقدار برای عنصر است. margin-left و margin-right مشخصات فیزیکی.

این همان ایده است کریس مدتی قبل به اشتراک گذاشت که از CSS استفاده می کند max()تابع برای حل "مشکل درونی" - محفظه‌ای که از رنگ پس‌زمینه کامل پشتیبانی می‌کند و در عین حال محتوای داخل آن را محدود می‌کند padding.

max(), calc(), margin-inline... این تعداد زیادی CSS جدید است! و مانوئل درست در وسط است نوشتن در مورد این ویژگی‌ها و دیگر ویژگی‌های مدرن CSS بیش از 100 روز.

لینک مستقیم →