CSS min() All The Things — Smashing Magazine

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

چیزی که من در این مورد جالب یافتم این است که چگونه پیچیدگی اندازه اشیا را نشان می دهد. ما در CSS به واحدهای مطلق و نسبی محدود شده ایم، بنابراین یا در اندازه خاصی گیر کرده ایم (به عنوان مثال، px) یا محاسبه اندازه بر اساس اندازه اعلام شده در عنصر دیگر (مثلا %، em، rem، vw، vh، و غیره). هر دو با مصالحه همراه هستند، بنابراین اینطور نیست که یک راه «درست» برای انجام کارها وجود داشته باشد - این در مورد زمینه عنصر است - و تمایل شدید به هر جهتی این مشکل را برطرف نمی کند.

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

نسخه ی نمایشی

من شما را مجبور نمی کنم تا پایان کار منتظر بمانید تا ببینید من چطور min() آزمایش رفت:

رسپانسیو بودن وب سایت را به یک سطح کاملاً جدید برسانید 🌐 pic.twitter.com/pKmHl5d0Dy

— Vayo (@vayospot) 1 مارس 2023

پس از بررسی جزئیات بیشتر در مورد آن صحبت خواهیم کرد.

کمی درباره min()

را min() تابع دو مقدار می گیرد و کوچکترین مقدار را اعمال می کند، هر کدام که در متن عنصر باشد. به عنوان مثال، می توانیم بگوییم که می خواهیم یک عنصر به اندازه عرض باشد 50% از هر ظرفی که در آن باشد 50% است بزرگتر از، بگو 200px، به جای آن عرض را در آنجا ببندید.

بنابراین، min() به نوعی شبیه واحدهای جستجوی کانتینر است به این معنا که از فضای موجود در ظرف خود آگاه است. اما در آن متفاوت است min() ابعاد ظرف خود را برای محاسبه مقدار نهایی پرس و جو نمی کند. ما آن را با دو طول قابل قبول عرضه می کنیم و تعیین می کند که با توجه به زمینه، کدامیک بهتر است. که باعث می شود min() (و max() برای آن موضوع) ابزاری مفید برای طرح بندی های واکنش گرا که با اندازه ویوپورت سازگار است. از منطق شرطی برای تعیین "بهترین" تطابق استفاده می کند، به این معنی که می تواند به انطباق طرح بندی ها بدون نیاز به جستجوی رسانه های CSS کمک کند.

.element {  width: min(200px, 50%);}/* Close to this: */.element {  width: 200px;  @media (min-width: 600px) {    width: 50%;  }}

تفاوت بین min() و @media در آن مثال این است که ما به مرورگر می گوییم که عرض عنصر را روی آن تنظیم کند 50% در یک خاص نقطه شکست از 600px. با min()، با تغییر مقدار فضای موجود، هر اندازه که باشد، همه چیز را به طور خودکار تغییر می دهد.

وقتی از min()، به نظر من توانایی تصمیم گیری هوشمندانه بر اساس زمینه را دارد. ما مجبور نیستیم فکر یا محاسباتی را انجام دهیم تا مشخص کنیم کدام مقدار استفاده می شود. با این حال، با استفاده از min() همراه با هر واحد CSS کافی نیست. به عنوان مثال، واحدهای نسبی برای پاسخگویی بهتر از واحدهای مطلق کار می کنند. حتی ممکن است به آن فکر کنید min() به عنوان تنظیم a حداکثر ارزش به این صورت است که هرگز از مقدار اول کمتر نمی شود، بلکه خود را در مقدار دوم نیز محدود می کند.

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

در حال حاضر، طعم های مختلف واحدهای دید وجود دارد. ما می توانیم از عرض ویوپورت (vw) و ارتفاع (vh). ما همچنین داریم vmin و vmax واحدهایی که کمی هوشمندتر هستند زیرا عرض و ارتفاع یک عنصر را ارزیابی می کنند و کوچکتر را اعمال می کنند (vmin) یا بزرگتر (vmax) از این دو. بنابراین، اگر ما اعلام کنیم 100vmax روی یک عنصر، و آن عنصر است 500px گسترده توسط 250px بلند، واحد محاسبه به 500px.

اینگونه است که من به این آزمایش نزدیک می شوم. چه اتفاقی می افتد اگر از پرس و جوهای رسانه ای خودداری کنیم و فقط از آن استفاده کنیم min() برای ایجاد یک طرح پاسخگو و تکیه به واحدهای viewport برای تحقق آن؟ ما آن را یک تکه می گیریم.

اندازه فونت

رویکردهای مختلفی برای نوع پاسخگو وجود دارد. پرسش های رسانه ای به سرعت به روش «مکتب قدیمی» برای انجام آن تبدیل می شوند:

p { font-size: 1.1rem; }@media (min-width: 1200px) {  p { font-size: 1.2rem; }}@media (max-width: 350px) {  p { font-size: 0.9rem; }}

مطمئنا، این کار می کند، اما وقتی کاربر از یک مانیتور 4K استفاده می کند چه اتفاقی می افتد؟ یا گوشی تاشو؟ رویکردهای آزمایش شده و واقعی دیگری نیز وجود دارد. در واقع، clamp() غالب رفتن به است. اما ما به همه چیز متکی هستیم min(). همانطور که اتفاق می افتد، تنها یک خط کد تمام چیزی است که ما نیاز داریم تا همه آن درخواست های رسانه ای را پاک کنیم و به طور قابل توجهی کدمان را کاهش دهیم:

p { font-size: min(6vmin, calc(1rem + 0.23vmax)); }

من شما را از طریق آن ارزش ها راهنمایی خواهم کرد…

1. 6vmin اساساً 6٪ از عرض یا ارتفاع مرورگر است، هر کدام کوچکتر باشد. این اجازه می دهد تا اندازه فونت به اندازه مورد نیاز برای زمینه های کوچکتر کوچک شود.
2. برای calc(1rem + 0.23vmax)، 1rem اندازه فونت پایه است و 0.23vmax کسری کوچک از عرض یا ارتفاع دریچه دید است، هر کدام که بزرگترین باشد.
3. را calc() تابع این دو مقدار را با هم اضافه می کند. از آنجایی که 0.23vmax بسته به اینکه کدام لبه ویوپورت بزرگ ترین باشد، متفاوت ارزیابی می شود، وقتی نوبت به مقیاس بندی اندازه فونت بین دو آرگومان می شود، بسیار مهم است. من آن را به چیزی تغییر داده ام که به تدریج به صورت یک طرفه مقیاس بندی می شود، به جای اینکه با افزایش اندازه ویوپورت، همه چیز را منفجر کند.
4. در نهایت، min() کوچکترین مقدار مناسب برای اندازه فونت اندازه صفحه نمایش فعلی را برمی گرداند.

و صحبت از اینکه چقدر انعطاف پذیر است min() رویکرد این است که می تواند میزان رشد متن را محدود کند. به عنوان مثال، ما می توانیم این را حداکثر در سقف قرار دهیم font-size برابر با 2rem به عنوان پارامتر تابع سوم:

p { font-size: min(6vmin, calc(1rem + 0.23vmax), 2rem); }

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

h1 { font-size: min(7.5vmin, calc(2rem + 1.2vmax)); }

ما حداقل اندازه را افزایش داده ایم 6vmin به 7.5vmin به طوری که بزرگتر از متن متن در هر اندازه نما باقی بماند. همچنین، در calc()، اندازه پایه اکنون است 2rem، که از سبک های UA پیش فرض کوچکتر است . We’re using 1.2vmax به عنوان ضریب این بار، به این معنی که بیشتر از متن اصلی است که در مقدار کوچکتری ضرب می شود، .023vmax.

این برای من کار می کند. شما همیشه می توانید این مقادیر را تغییر دهید و ببینید کدام یک برای استفاده شما بهترین کار را دارد. در هر صورت، font-size زیرا این آزمایش کاملاً سیال و کاملاً بر اساس است min() عملکرد، پایبندی به محدودیت خود تحمیلی.

حاشیه و بالشتک

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

ما در حال رفتن به همه چیز با min() برای این نیز ما می توانیم از واحدهای مطلق مانند پیکسل ها استفاده کنیم، اما آن ها دقیقاً پاسخگو نیستند.

min() می توانند واحدهای نسبی و مطلق را با هم ترکیب کنند تا موثرتر باشند. بیایید جفت شویم vmin با px این بار:

div { margin: min(10vmin, 30px); }

10vmin به احتمال زیاد کوچکتر از 30px هنگامی که در یک نمای کوچک مشاهده می شود. به همین دلیل است که اجازه می دهم این بار حاشیه به صورت پویا کاهش یابد. با افزایش اندازه ویوپورت، به موجب آن 10vmin فراتر می رود 30px، min() مقدار را در 30px، بالاتر از آن نمی رود.

توجه داشته باشید که من به آن دست نزدم calc() این بار حاشیه ها واقعاً نیازی به افزایش نامحدود با اندازه صفحه نمایش ندارند، زیرا فاصله زیاد بین ظروف یا عناصر معمولاً در صفحه نمایش های بزرگتر ناخوشایند به نظر می رسد. این مفهوم برای بالشتک نیز بسیار خوب کار می کند، اما ما مجبور نیستیم به آنجا برویم. در عوض، شاید بهتر باشد ترجیحاً از یک واحد استفاده کنید em، از آنجایی که نسبت به عنصر است font-size. ما اساساً می توانیم کاری را که انجام می دهیم «بگذریم». min() در حال انجام است font-size به margin و padding خواص به دلیل آن

.card-info {  font-size: min(6vmin, calc(1rem + 0.12vmax));  padding: 1.2em;}

در حال حاضر، بالشتک کردن ترازو با font-size، که توسط min().

عرض ها

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

اما ما هستیم min() تمام راه!

min() هنگام تنظیم محدودیت هایی در مورد میزان واکنش یک عنصر به تغییرات مفید است. ما می توانیم حد بالایی از 650px و اگر عرض محاسبه شده سعی می کند بزرگتر شود، عنصر را در عرض کامل قرار دهید 100%:

.container { width: min(100%, 650px); }

چیزها با عرض متن جالب می شوند. وقتی عرض یک جعبه متن خیلی طولانی باشد، خواندن متن ها ناراحت کننده می شود. تئوری های رقابتی در مورد اینکه چه تعداد کاراکتر در هر خط متن برای یک تجربه خواندن بهینه بهترین است، وجود دارد. برای استدلال، فرض کنید که این عدد باید بین 50-75 کاراکتر باشد. به عبارت دیگر، ما نباید بیش از 75 کاراکتر در یک خط بسته بندی کنیم، و می توانیم این کار را با ch واحد، که بر اساس 0 اندازه کاراکتر برای هر قلمی که استفاده می شود.

p {  width: min(100%, 75ch);}

این کد اساسا می گوید: به اندازه مورد نیاز پهن کنید اما هرگز از 75 کاراکتر بیشتر نباشد.

دستور العمل های اندازه گیری بر اساس min()

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

:root {  --font-size-6x: min(7.5vmin, calc(2rem + 1.2vmax));  --font-size-5x: min(6.5vmin, calc(1.1rem + 1.2vmax));  --font-size-4x: min(4vmin, calc(0.8rem + 1.2vmax));  --font-size-3x: min(6vmin, calc(1rem + 0.12vmax));  --font-size-2x: min(4vmin, calc(0.85rem + 0.12vmax));  --font-size-1x: min(2vmin, calc(0.65rem + 0.12vmax));  --width-2x: min(100vw, 1300px);  --width-1x: min(100%, 1200px);  --gap-3x: min(5vmin, 1.5rem);  --gap-2x: min(4.5vmin, 1rem);  --size-10x: min(15vmin, 5.5rem);  --size-9x: min(10vmin, 5rem);  --size-8x: min(10vmin, 4rem);  --size-7x: min(10vmin, 3rem);  --size-6x: min(8.5vmin, 2.5rem);  --size-5x: min(8vmin, 2rem);  --size-4x: min(8vmin, 1.5rem);  --size-3x: min(7vmin, 1rem);  --size-2x: min(5vmin, 1rem);  --size-1x: min(2.5vmin, 0.5rem);}

این روشی است که من به آزمایش خود نزدیک شدم زیرا به من کمک می کند بدانم در یک موقعیت خاص به چه چیزی دست پیدا کنم:

h1 { font-size: var(--font-size-6x); }.container {  width: var(--width-2x);  margin: var(--size-2x);}.card-grid { gap: var(--gap-3x); }

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

نتیجه نهایی، دوباره

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

بنابراین، است min() همه چیز، پایان همه برای پاسخگویی؟ مطلقا نه. رژیم غذایی کاملاً متشکل از واحدهای جستجوی ظرف نیز نیست. منظورم این است که خیلی خوب است که می توانیم کل یک صفحه وب را به این شکل مقیاس کنیم، اما وب هرگز یک ابزار یکسان نیست.

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

(gg, yk)